/*
 * Store Section block — heading + subheading + a 3-column store card
 * (image / info / map). Section background, heading/subheading colors,
 * and middle-column text color are passed in as CSS custom properties
 * from the inline style attribute, so a single solid color *or* a
 * linear-gradient can flow through --coastal-store-bg.
 *
 * !important on .coastal-store-section__inner max-width is required to
 * beat Astra's page-builder grandchild rule — see hero-banner.css for
 * the full explanation.
 */

.coastal-store-section {
	background: var(--coastal-store-bg, #ffffff);
	width: 100%;
}

.coastal-store-section .coastal-store-section__inner {
	box-sizing: border-box;
	width: 100%;
	max-width: 1440px !important;
	margin-inline: auto;
	padding: 50px 5px;
	font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.coastal-store-section .coastal-store-section__heading {
	margin: 0 0 16px;
	font-family: inherit;
	font-weight: 700;
	font-size: 36px;
	line-height: 1.2;
	text-align: center;
	color: var(--coastal-store-h-color, #ffffff);
}

.coastal-store-section .coastal-store-section__subheading {
	margin: 0 0 48px;
	font-family: inherit;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.5;
	text-align: center;
	color: var(--coastal-store-sh-color, #ffffff);
}

/*
 * Cascade the editable info color across every text node in the middle
 * column — store name, "Open Today" line, hours table, phone, address,
 * and the Get Directions link. Includes link/heading selectors so theme
 * rules with their own color don't slip through.
 */
.coastal-store-section .coastal-store-card__info,
.coastal-store-section .coastal-store-card__info a,
.coastal-store-section .coastal-store-card__title,
.coastal-store-section .coastal-store-card__today,
.coastal-store-section .coastal-store-card__hours,
.coastal-store-section .coastal-store-card__address {
	color: var(--coastal-store-info-color, inherit);
}

.coastal-store-section .coastal-store-card__placeholder,
.coastal-store-section .coastal-store-section__placeholder {
	text-align: center;
	color: var(--coastal-store-info-color, #ffffff);
	margin: 32px 0 0;
}

@media (max-width: 1024px) {
	.coastal-store-section .coastal-store-section__inner {
		padding: 64px 48px;
	}
}

@media (max-width: 640px) {
	.coastal-store-section .coastal-store-section__inner {
		padding: 48px 24px;
	}

	.coastal-store-section .coastal-store-section__heading {
		font-size: 26px;
	}

	.coastal-store-section .coastal-store-section__subheading {
		font-size: 16px;
		margin-bottom: 32px;
	}
}

/*
 * Store Card — three-column layout (image / info / map) with a
 * transparent background so it inherits whatever section it's placed in.
 */

.coastal-store-card {
	display: grid;
	grid-template-columns: minmax(220px, 320px) minmax(0, 1.5fr) minmax(280px, 1.5fr);
	gap: 2.5rem;
	align-items: center;
	padding: 1.5rem 0;
	background: transparent;
}

.coastal-store-card__image {
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.05);
}

.coastal-store-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.coastal-store-card__info {
	min-width: 0;
}

.coastal-store-card__title {
	margin: 0 0 1rem;
	line-height: 1.2;
}

.coastal-store-card__today {
	margin: 0 0 1rem;
}

.coastal-store-card__hours {
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: 1.5rem;
	row-gap: 0.25rem;
	margin: 0 0 1rem;
}

.coastal-store-card__hours dt {
	font-weight: 600;
}

.coastal-store-card__hours dd {
	margin: 0;
}

.coastal-store-card__phone,
.coastal-store-card__address,
.coastal-store-card__directions {
	margin: 0 0 0.5rem;
}

.coastal-store-card__address {
	font-style: normal;
	line-height: 1.5;
}

.coastal-store-card__directions a {
	text-decoration: underline;
}

.coastal-store-card__map .wpsl-gmap-canvas {
	width: 100%;
	border-radius: 8px;
	overflow: hidden;
}

/*
 * Editor-only stand-in. WPSL doesn't enqueue its map script during block
 * preview rendering, so we swap the [wpsl_map] shortcode for a styled
 * placeholder when $is_preview is true. Front-end output is unchanged.
 */
.coastal-store-card__map-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 320px;
	padding: 24px;
	border: 1px dashed rgba(0, 0, 0, 0.25);
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.04);
	text-align: center;
	color: rgba(0, 0, 0, 0.7);
	font-style: italic;
}

.coastal-store-card__map-placeholder span {
	font-weight: 600;
	font-style: normal;
}

.coastal-store-card__map-placeholder small {
	max-width: 32ch;
	font-size: 12px;
	line-height: 1.4;
}

/* Tablet — collapse the map under the image+info pair. */
@media (max-width: 1024px) {
	.coastal-store-card {
		grid-template-columns: minmax(180px, 240px) 1fr;
		gap: 2rem;
	}

	.coastal-store-card__map {
		grid-column: 1 / -1;
	}
}

/* Phone — single column. */
@media (max-width: 640px) {
	.coastal-store-card {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.coastal-store-card__image {
		max-width: 240px;
		margin-inline: auto;
	}
}