/* =====================================================
   Location — page-specific styles
   Enqueued only on page-templates/template-location.php
   Reuses global primitives (.ba-hero, .ba-section, .ba-btn,
   .ba-mem-feature, .ba-banner, .ba-link--underline).
   Page-only bits live below.
   ===================================================== */

/* ---- 1. Hero ----
   Reuses .ba-hero grid (1fr 1fr, from Home) — Location hero has a
   media column with an overlay info panel, matching the Home pattern.
   Panel class: .ba-section--loc-hero (shared with other heroes in global §5).
   Media height is overridden below (default 805 from Home is too tall). */
.ba-section--loc-hero .ba-hero__media {
	min-height: 650px;
}
/* ---- 2. Planning your visit ----
   Surface/radius/padding come from .ba-section defaults — we only
   override the background tint. */
.ba-loc-plan {
	background: rgba(252, 248, 243, 0.92);
}
.ba-loc-plan__grid {
	display: grid;
	grid-template-columns: minmax(0, 505fr) minmax(0, 670fr);
	gap: var(--ba-gap-2xl);
	align-items: start;
}
.ba-loc-plan__body {
	display: flex;
	flex-direction: column;
}
.ba-loc-plan__features {
	list-style: none;
	margin: 0 0 var(--ba-space-10);
	padding: 0;
	display: flex;
	flex-direction: column;
}

/* Address / Phone / Email titles inside Planning — eyebrow-style label
   (Instrument Sans 500, 12px, tracking 1.44px, uppercase, muted). */
.ba-loc-plan .ba-mem-feature__title {
	font-family: var(--ba-font-body);
	font-weight: 500;
	font-size: 12px;
	line-height: 1.2;
	letter-spacing: 1.44px;
	text-transform: uppercase;
	color: #6F6258;
	margin: 0 0 var(--ba-space-2);
}

/* Note container (below features, above CTAs) */
.ba-loc-plan__note {
	background: var(--ba-card-bg-soft);
	border-radius: var(--ba-radius-card-sm);
	padding: var(--ba-space-5);
	display: flex;
	flex-direction: column;
	gap: var(--ba-space-6);
	margin-bottom: var(--ba-space-8);
}
.ba-loc-plan__badge {
	align-self: flex-start;
	background: #EFE6DD;
	color: var(--ba-text-primary);
	font-family: var(--ba-font-body);
	font-weight: 500;
	font-size: 12px;
	line-height: 1.2;
	padding: 10px 14px;
	border-radius: var(--ba-radius-pill);
}
.ba-loc-plan__body-text {
	margin: 0;
	font-family: var(--ba-font-body);
	font-weight: 400;
	font-size: var(--ba-fs-body);
	line-height: var(--ba-lh-body);
	color: var(--ba-text-primary);
}
.ba-loc-plan__body-sub {
	margin: 0;
	font-family: var(--ba-font-body);
	font-weight: 400;
	font-size: var(--ba-fs-small);
	line-height: var(--ba-lh-body);
	color: var(--ba-text-muted);
}
.ba-loc-plan__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ba-gap-sm);
}

/* Map frame — outer panel = --ba-radius-image (32), inner iframe =
   --ba-radius-card-sm (20). The 12px frame thickness matches the
   difference (32 - 12 ≈ 20) so the inner and outer arcs stay concentric. */
.ba-loc-plan__map {
	background: var(--ba-card-bg-soft);
	padding: var(--ba-space-3);
	border-radius: var(--ba-radius-image);
	overflow: hidden;
	align-self: stretch;
	min-height: 540px;
}
.ba-loc-plan__map iframe {
	width: 100%;
	height: 100%;
	min-height: 516px;
	border: 0;
	display: block;
	border-radius: var(--ba-radius-card-sm);
}

/* Mapbox GL canvas (replaces iframe when BA_MAPBOX_TOKEN is set). */
.ba-loc-plan__map-canvas {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 516px;
	border-radius: var(--ba-radius-card-sm);
	overflow: hidden;
	display: block;
	background: #f6efe6;
	/* Very subtle beige overlay on top of Mapbox `streets-v12` — keeps the
	   familiar Google-style colour differentiation, just slightly warmed. */
	filter: sepia(0.08) saturate(1.02);
}
.ba-loc-plan__map-canvas .mapboxgl-ctrl-attrib,
.ba-loc-plan__map-canvas .mapboxgl-ctrl-logo {
	opacity: 0.7;
}

/* Plan-features link items (Address / Phone / Email) — text inherits the
   surrounding paragraph styles, underline on hover matches .ba-tcard__link. */
.ba-mem-feature__body a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 160ms ease;
}
.ba-mem-feature__body a:hover,
.ba-mem-feature__body a:focus-visible {
	border-bottom: 1px solid rgba(56, 39, 30, 0.14);
	outline: none;
}

/* Branded pin: dark circle with map icon (image asset). */
.ba-map-pin {
	display: block;
	width: 72px;
	height: 72px;
	background: transparent;
	cursor: pointer;
	transform-origin: center;
	transition: transform 160ms ease;
}
.ba-map-pin:hover,
.ba-map-pin:focus-visible {
	transform: scale(1.06);
	outline: none;
}
.ba-map-pin img {
	display: block;
	width: 100%;
	height: 100%;
	user-select: none;
	pointer-events: none;
	-webkit-user-drag: none;
}

/* ---- 3. Practical details ---- */
.ba-loc-prac {
	background: rgba(237, 225, 213, 0.74);
}
.ba-loc-prac__title {
	font-family: var(--ba-font-heading);
	font-weight: 400;
	font-size: var(--ba-fs-h2-md);
	line-height: var(--ba-lh-heading);
	color: var(--ba-text-primary);
	margin: 0 0 var(--ba-space-3);
}
.ba-loc-prac__subtitle {
	font-family: var(--ba-font-body);
	font-weight: 400;
	font-size: var(--ba-fs-body);
	line-height: var(--ba-lh-body);
	color: var(--ba-text-secondary);
	margin: 0 0 var(--ba-space-8);
	max-width: 56ch;
}
.ba-loc-prac__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ba-gap-lg);
}
.ba-loc-prac__card {
	background: linear-gradient(180deg, var(--ba-card-bg-softer) 0%, var(--ba-section-bg-3) 100%);
	border-radius: var(--ba-radius-card);
	padding: 26px 24px;
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr);
	gap: var(--ba-gap-md);
	align-items: start;
}
.ba-loc-prac__icon {
	width: 42px;
	height: 42px;
	border-radius: var(--ba-radius-card-xs);
	background: #EFE6DD;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ba-text-secondary);
	flex-shrink: 0;
}
.ba-loc-prac__icon svg { width: 20px; height: 20px; display: block; }
.ba-loc-prac__text { min-width: 0; }
.ba-loc-prac__card-title {
	font-family: var(--ba-font-body);
	font-weight: 500;
	font-size: var(--ba-fs-body);
	line-height: 1.3;
	color: var(--ba-text-primary);
	margin: 0 0 var(--ba-space-1);
}
.ba-loc-prac__card-sub {
	font-family: var(--ba-font-body);
	font-weight: 400;
	font-size: var(--ba-fs-small);
	line-height: var(--ba-lh-body);
	color: var(--ba-text-muted);
	margin: 0;
}

/* Divider + notes below cards */
.ba-loc-prac__notes {
	margin-top: var(--ba-space-5);
	padding-top: var(--ba-space-9);
	border-top: 1px solid rgba(216, 203, 190, 0.5);
}
.ba-loc-prac__note-primary {
	font-family: var(--ba-font-body);
	font-weight: 400;
	font-size: var(--ba-fs-body);
	line-height: var(--ba-lh-body);
	color: var(--ba-text-secondary);
	margin: 0;
}
/* Keep breathing room only after the final note line, not between siblings. */
.ba-loc-prac__note-primary:last-child { margin-bottom: var(--ba-space-6); }
/* Second/subsequent line(s) — lighter accent colour. */
.ba-loc-prac__note-primary--alt { color: #6F6258; }
.ba-loc-prac__note-secondary {
	font-family: var(--ba-font-body);
	font-weight: 400;
	font-size: var(--ba-fs-small);
	line-height: var(--ba-lh-body);
	color: var(--ba-text-muted);
	margin: 0;
}
/* Breathing room between the last primary note and the secondary note. */
.ba-loc-prac__note-primary + .ba-loc-prac__note-secondary {
	margin-top: var(--ba-space-3);
}

/* ---- 4. Make the most of your visit ----
   Uses .ba-section defaults (padding 40 / radius 40 / soft bg) — no
   .ba-loc-visit override needed. */
.ba-loc-visit__grid {
	display: grid;
	grid-template-columns: minmax(0, 653fr) minmax(0, 522fr);
	gap: var(--ba-gap-2xl);
	align-items: stretch;
}
.ba-loc-visit__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.ba-loc-visit__title {
	font-family: var(--ba-font-heading);
	font-weight: 400;
	font-size: var(--ba-fs-h2);
	line-height: var(--ba-lh-heading);
	color: var(--ba-text-primary);
	margin: 0 0 var(--ba-space-6);
}
.ba-loc-visit__text p {
	font-family: var(--ba-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: var(--ba-lh-body);
	color: #453124;
	margin: 0 0 var(--ba-space-5);
}
/* First paragraph reads as a lead-in: heavier weight, larger, lighter colour. */
.ba-loc-visit__text p:first-child {
	font-weight: 500;
	font-size: 18px;
	color: #6F6258;
}
.ba-loc-visit__text p:last-child { margin-bottom: 0; }
.ba-loc-visit__link {
	align-self: flex-start;
	margin-top: var(--ba-space-6);
}
.ba-loc-visit__media {
	border-radius: var(--ba-radius-card);
	background: linear-gradient(180deg, #EDE1D5, #D8CBBE);
	overflow: hidden;
	min-height: 672px;
}
.ba-loc-visit__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---------------------------------------------------------------------------
 * BOTTOM CTA BANNER — page-scoped wrap points (Location only).
 * Section already has the .ba-loc-banner hook.
 * -------------------------------------------------------------------------*/
.ba-loc-banner .ba-banner__title { max-width: 13ch; }
.ba-loc-banner .ba-banner__text  { max-width: 49ch; }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
	.ba-loc-plan__grid,
	.ba-loc-visit__grid {
		grid-template-columns: 1fr;
	}
	.ba-loc-plan__map { min-height: 420px; }
	.ba-loc-plan__map iframe,
	.ba-loc-plan__map-canvas { min-height: 396px; }
	.ba-loc-visit__media { min-height: 420px; }
	.ba-loc-prac__grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
	.ba-section--loc-hero .ba-hero__media { min-height: 420px; }
	.ba-loc-plan__map { min-height: 320px; padding: var(--ba-space-2); }
	.ba-loc-plan__map iframe,
	.ba-loc-plan__map-canvas { min-height: 304px; }
	.ba-loc-visit__media { min-height: 320px; }
}