/* ---- Grid layout --------------------------------------------------------- */
/*
	Container is .container.is-wide (layout.css) — 80px wider on each side
	than the default container. .location-grid overrides the shared
	.card-grid's own 18rem (288px) auto-fit lower bound with a smaller one
	tuned specifically so exactly 5 columns fit at that wide container's
	own max-width, not the primitive's default column count. The math:
	wide container's inner content width (after its own padding-inline) is
	88.25rem; with the grid's 2rem (--space-6) gap, 5 columns need a
	per-column width up to ~16.05rem before a 6th would fit, and 6 columns
	would need each one under ~13rem — 14rem sits inside that range with
	margin either side. Still auto-fit, so it steps down continuously
	(5 -> 4 -> 3 -> 2 -> 1) below that width, same as every other
	auto-fit/minmax grid in this theme; it just never exceeds 5 at the
	container's own widest point, since the container itself stops
	growing there.
*/
.location-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
}

/*
	.card's own hover state (components.css) lifts the card (translateY)
	and steps its shadow from --shadow-sm to --shadow — Location cards
	instead stay put and step to the even more pronounced --shadow-lg
	(tokens.css), carrying the "elevated" cue entirely through the shadow.
	Same specificity as .card:hover (one class + :hover each, since
	.location-card is a modifier class on the same element, not a
	replacement for .card) — this file loading after components.css is
	what wins the tie, same as the background-color/border-radius
	overrides below already rely on.
*/
.location-card {
	border-radius: var(--radius);
	background-color: var(--color-white);
	color: var(--color-white-fg);
	/* Slower than the shared .card's own 150ms (components.css) — this
	   hover effect (shadow only, no lift) reads better as a deliberate,
	   slightly slower change than the default snappy feedback speed. */
	transition: box-shadow var(--transition-slow);

	&:hover {
		transform: none;
		box-shadow: var(--shadow-lg);
	}

	/* The shared .card__link's own :hover underline (components.css) — off
	   here only; template-parts/post-card.php's own cards (search/archive
	   listings) keep it, since this wasn't asked for site-wide. */
	& .card__link:hover {
		text-decoration: none;
	}

	/* .card__media's own overflow: hidden (components.css) is what clips
	   this to the rounded box — the transition lives on the <img> itself,
	   not .card__media, so only the image scales, not its rounded frame.
	   Same --transition-slow as the shadow above, so both hover effects
	   move at the same pace. */
	& .card__media img {
		transition: transform var(--transition-slow);
	}

	&:hover .card__media img {
		transform: scale(1.1);
	}
}

/* Every copy line but the header (Address/Phone/Email) — .card__title
   is untouched, so the header keeps its own heading-style-h4 size. */
.location-card .card__text {
	font-size: var(--location-card-text-size); /* 15px */
}

/*
	.card__body's own shared gap (components.css, 4px, flex column) is
	uniform across every child — there's no way to make just one pair wider
	through that property alone, so it's zeroed here and replaced with
	explicit per-pair margins instead: 4px everywhere by default (matching
	what .card__body's own gap already gave every other card using it),
	16px specifically between the address and whatever follows it. Same
	"sibling-combinator margin, not a single uniform gap" shape Page
	Banner's own Title/Text/Button spacing already uses.
*/
.location-card .card__body {
	gap: 0;

	& > * + * {
		margin-block-start: 0.25rem; /* 4px */
	}
}

.location-card .location-card__address + * {
	margin-block-start: 1rem; /* 16px */
}

/* Phone/Email's own icon — 16px, vertically centered against the text, 8px
   gap. .card__text is block-level by default; this makes just these two
   lines a flex row instead, same "add what's specific to this line" shape
   .location-card__address gets above via a modifier class. */
.location-card__meta {
	display: flex;
	align-items: center;
	gap: var(--space-2); /* 8px */

	& svg {
		flex: none;
		width: 1rem; /* 16px */
		height: 1rem;
	}
}

/* ---- List layout --------------------------------------------------------- */
/*
	One row per location — each already carries .grid-2.grid--center in the
	markup (locations.php), so this only adds what's specific: a wider gap
	(matching the same widened-gap convention Callout's/Team Carousel's own
	.grid-2 rows use) and vertical rhythm between rows via padding + a
	divider border, not the shared .flex-section rhythm system (this is one
	block's own internal list, not a sequence of separate sections).
*/
.location-list {
	display: flex;
	flex-direction: column;
}

.location-list__item {
	gap: var(--space-10);
	padding-block: var(--space-8); /* 48px */
	border-block-end: 1px solid var(--color-border);

	&:first-child {
		padding-block-start: 0;
	}

	&:last-child {
		padding-block-end: 0;
		border-block-end: none;
	}
}

/*
	reset.css already zeroes every element's margin at the lowest possible
	specificity (universal selector) — .location-list__title/__address/
	__meta/__hours-title below deliberately do NOT re-declare their own
	margin: 0 on top of that. A redundant same-specificity margin: 0 here
	would tie with this rule and win via source order (declared later),
	silently cancelling every gap below except the one on an element that
	happens not to have its own reset (exactly the bug this comment is
	here to stop from coming back).
*/
.location-list__details {
	& > * + * {
		margin-block-start: var(--space-5); /* 24px */
	}
}

/* Phone/Email's own icon — 16px, vertically centered against the link
   text, 8px gap. Same treatment as the Grid layout's own
   .location-card__meta, above. */
.location-list__meta {
	& a {
		display: flex;
		align-items: center;
		gap: var(--space-2); /* 8px */
	}

	& svg {
		flex: none;
		width: 1rem; /* 16px */
		height: 1rem;
	}
}

/* Same size as the rest of this column's text (the global `p, li`
   default, base.css — nothing here overrides it), just bold and
   uppercase, so it reads as a label rather than another line of body copy. */
.location-list__hours-title {
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
}

/* Tighter than the general 24px gap above — the label sits closer to its
   own list than to the address/phone/email lines above it. Class +
   adjacent-sibling (0,2,0) beats the general .location-list__details
   > * + * rule (0,1,0) above. */
.location-list__hours-title + .single-location__hours {
	margin-block-start: var(--space-2); /* 8px */
}

/* Same aspect-ratio-box + absolute-fill iframe technique
   blocks/video/video.css (and single-location.php) already use for their
   own iframe source — iframes don't reliably respect aspect-ratio/
   object-fit sizing the way <img>/<video> do. */
.location-list__map {
	/* Overrides .grid--center's own align-items: center (locations.php's
	   own markup) just for this column — the details column is often
	   taller (title/address/phone/email/hours), and centering the map
	   against that height left it floating; top-aligned it instead lines
	   up with the details column's own first line. */
	align-self: start;
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-lg);

	& iframe {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}
}