/* Andaman Life — hero layouts + ad bands. Two opt-in hero layouts:

   1. Split hero (.al-hero): full-screen, title panel left / image
      right. Reuses Ohio's own "-full-vh" fullscreen headline mechanism
      (the same pattern behind the Phuket Compass article): the theme's
      header-8 is `position: absolute`, transparent, and floats over
      whatever occupies `.page-headline`. Locking the hero to exactly
      100vh — not 100svh minus an offset — is what keeps it inside the
      first fold on every screen size without a second-fold overflow.

   2. Full-width image hero (.al-fw-hero): full-width photo band with
      the title in normal document flow below it, modelled on
      cupofcouple.com/hermes/ (studied 2026-08-22). Simpler than the
      split hero — the title never sits under the floating header, so
      it needs none of Ohio's clb__dark_section marker classes.

   SCOPE, strict (2026-08-22): every rule in this file targets only
   `.al-hero`, `.al-fw-hero`, and their descendants — the hero area
   itself, nothing past it. An earlier version also hid the sidebar and
   forced a narrower content column on hero posts, "NYT-style"; that
   was scope creep never requested and has been removed. The content
   area below either hero — sidebar, column width, article body — is
   now Ohio's completely untouched default single-post layout, on
   every post whether or not a hero is active. The only exception is
   `[al_ad]`: it can still render a full-bleed band, but only on pages
   that already have no sidebar in Ohio's own layout (see the ad-bands
   section below) — never because a hero is present.

   Typography is NOT hardcoded anywhere below — family, size, weight,
   and line-height all read from Ohio's own theme-settings-driven CSS
   variables (Appearance → Theme Settings → Typography, ACF-backed),
   confirmed by reading inc/dynamic_css/parts/typography.php and the
   parent stylesheet directly:

   - Hero title      → Ohio's own h1 variables: font-family
     --clb-title-font-family, and the exact fluid clamp Ohio already
     uses for every h1 on the site: font-size
     clamp(--clb-h1-font-size-min, --clb-h1-clamp-size,
     --clb-h1-font-size), letter-spacing --clb-h1-letter-spacing,
     line-height --clb-h1-line-height. The full-width hero's smaller
     title uses Ohio's h2 scale (--clb-h2-*) the same way — a real step
     on the theme's own type scale, not an invented in-between size.
   - Standfirst        → Ohio's body-copy variables: font-family
     --clb-text-font-family, font-size --clb-text-font-size,
     line-height --clb-text-line-height, font-weight
     --clb-text-font-weight.
   - Kicker / meta row → Ohio's subtitle variables: font-family
     --clb-text-font-family, font-size --clb-subtitle-font-size,
     line-height --clb-subtitle-line-height, font-weight
     --clb-subtitle-font-weight.

   Change any of these in WP admin — font family, base size, heading
   scale ratio, weight — and both hero layouts follow automatically on
   next page load. No theme code edit needed. Fallback values below
   match Ohio's own shipped defaults, used only if a variable is ever
   undefined (shouldn't happen; defensive only).

   Spacing, gaps, and content width are ALSO drawn from Ohio's own
   design-system variables wherever a matching one exists, audited by
   reading style.css directly (2026-08-22), not invented pixel/rem
   values:
   - .al-hero__meta / .al-fw-hero__meta gap → --clb-gap (0.5em), Ohio's
     own small-gap token, already used across the theme for inline
     meta rows.
   - Panel/section padding and margins → snapped to Ohio's own fixed
     spacer scale (--clb-spacer-05 through --clb-spacer-10, 0.25rem to
     2.75rem) instead of arbitrary rem/vw values, everywhere the layout
     allows a fixed step rather than needing to stay fluid.

   TWO deliberate exceptions, kept outside Ohio's system on request:
   1. The full-width hero's own max-width is fixed at 2481px so the
      image renders at exactly 2409px on a 27" iMac 5K, matching a size
      measured directly from the cupofcouple.com/hermes/ reference.
      Ohio's own --clb-container-width (1344px) is considerably
      narrower and would cap the image around 1272px — too tight for
      the panoramic, full-bleed look this layout is specifically for.
   2. That same hero's 36px side gutter is a fixed value, NOT Ohio's
      --clb-container-offset (`(100vw - clb-container-width) / 2`):
      that formula assumes a 1344px container, so applying it to this
      2481px-wide element would compute a ~600px gutter and crush the
      image back down toward Ohio's normal container width — directly
      undoing exception 1. A fixed gutter is the only way to keep both
      the wider container and sensible edge spacing at the same time.
   Everything else in this file follows Ohio's tokens; these two values
   are considered exceptions, not oversights.

   Ohio has no fluid/vw-based CLAMP equivalent for padding/spacing the
   way it does for heading sizes (h1–h6 all clamp; spacing does not) —
   --clb-spacer alone is a bare 1.5vw primitive with no clamp wrapper.
   Where fluidity is genuinely needed (padding that must shrink
   gracefully between mobile and a very wide desktop, inside the
   hero's own fixed-height/aspect-ratio boxes), a clamp() using Ohio's
   fixed spacer tokens as its min/max bounds is used instead of
   inventing new arbitrary numbers — the endpoints are Ohio's, only the
   fluid interpolation between them is custom. */

/* ---------- Split hero ---------- */

.al-hero {
	height: 100vh;
	min-height: 100vh;
	max-height: 100vh;
	overflow: hidden;
}

.al-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	width: 100%;
	height: 100%;
}

.al-hero__panel {
	/* No background colour — panel is transparent, showing whatever
	   sits behind it (the page's own background). Per Jere, 2026-08-23. */
	color: #120f05; /* Lacquer black */
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--clb-spacer-5, 1.5rem);
	/* Fluid between Ohio's own --clb-spacer-9 (2.5rem, mobile floor)
	   and 6rem (desktop ceiling, beyond Ohio's fixed scale — needed
	   because this panel can be much wider than anything the spacer
	   scale was sized for). */
	padding: clamp(var(--clb-spacer-9, 2.5rem), 6vw, 6rem);
	min-width: 0;
}

.al-hero__kicker {
	/* Wraps every category link returned by get_the_category_list() —
	   Ohio's own default headline lists all assigned categories, not
	   just one, so this does too (see al_render_hero_categories() in
	   inc/hero.php). Flex-wraps in case a post carries several. */
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--clb-spacer-1, 0.5rem);
	align-self: flex-start;
}

.al-hero__kicker__link {
	/* Ohio's subtitle scale — same variables the theme uses for any
	   secondary/meta text. Colour is a fixed substitute, not themed:
	   the site's native kicker is white-on-image, which wouldn't read
	   against this panel's own (page-inherited, no longer forced-white)
	   background, so a neutral grey is used instead regardless of what
	   colour ends up behind the panel. */
	color: #706a5e; /* Monsoon grey */
	font-family: var(--clb-text-font-family, sans-serif);
	font-size: var(--clb-subtitle-font-size, 0.9em);
	line-height: var(--clb-subtitle-line-height, inherit);
	font-weight: var(--clb-subtitle-font-weight, 500);
	text-decoration: none;
}

.al-hero__kicker__link:hover {
	color: #120f05;
}

.al-hero__title {
	/* Font family, weight, and letter-spacing are deliberately NOT set
	   here — Ohio has a separate, more specific `h1 { ... }` rule
	   (confirmed live on andamanlife.com, distinct from the generic
	   --clb-title-* variables used by h1–h6 collectively) that would
	   otherwise be overridden by a class selector. Leaving these
	   properties unset lets the real <h1> tag inherit Ohio's own h1
	   styling directly through the cascade — correct by construction,
	   not by matching a value that could drift out of sync again. Only
	   font-size and line-height stay explicit: those come from the
	   generic --clb-h1-* clamp variables, which are NOT overridden by
	   the more specific rule and were confirmed correct live. */
	color: inherit;
	margin: 0;
	font-size: clamp(var(--clb-h1-font-size-min, 43.2px), var(--clb-h1-clamp-size, calc(4.5vw + 0.25rem)), var(--clb-h1-font-size, 64px));
	line-height: var(--clb-h1-line-height, 1);
}

.al-hero__standfirst {
	/* Ohio's body-copy variables — same ones driving every <p> on the site. */
	color: #343127; /* Lacquer 85 */
	margin: 0;
	max-width: 34em;
	font-family: var(--clb-text-font-family, sans-serif);
	font-weight: var(--clb-text-font-weight, 300);
	font-size: var(--clb-text-font-size, 17.6px);
	line-height: var(--clb-text-line-height, 1.55);
}

.al-hero__meta {
	color: #706a5e; /* Monsoon grey */
	display: flex;
	flex-wrap: wrap;
	gap: var(--clb-gap, 0.5em);
	font-family: var(--clb-text-font-family, sans-serif);
	font-weight: var(--clb-subtitle-font-weight, 400);
	font-size: var(--clb-subtitle-font-size, 0.9em);
}

.al-hero__media {
	position: relative;
	height: 100%;
	min-width: 0;
}

.al-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 767px) {
	.al-hero__grid {
		display: flex;
		flex-direction: column;
	}

	/* NYT app order: photo on top, panel below — image gets a fixed
	   share of the screen, panel takes the rest and scrolls internally
	   if the title/standfirst is too long to fit. */
	.al-hero__media {
		order: -1;
		flex: 0 0 46vh;
		height: 46vh;
	}

	.al-hero__panel {
		flex: 1 1 auto;
		justify-content: flex-start;
		padding: var(--clb-spacer-6, 1.75rem) var(--clb-spacer-4, 1.25rem) var(--clb-spacer-8, 2.25rem);
		overflow-y: auto;
		min-height: 0;
	}
}

/* ---------- Full-width image hero ----------
   Modelled on cupofcouple.com/hermes/: full-width photo band, title in
   normal flow directly below on desktop, order flipped to
   title-then-image on mobile. Their desktop crop is a viewport-relative
   height (calc(100vh - 236px)); this uses a fixed 21:9 aspect-ratio
   instead so the crop is predictable across every source photo
   regardless of header height. No clb__dark_section marker needed here
   — the title never sits under the floating header, so Ohio's header
   stays in its normal dark-on-light state throughout. */

.al-fw-hero {
	width: 100%;
	/* 2481px = 2409px image width + 72px (36px padding each side),
	   tuned so the hero image itself renders at exactly 2409px wide on
	   a 27" iMac 5K's default 2560px logical viewport — the deliberate
	   exception to Ohio's --clb-container-width noted at the top of
	   this file. The 36px side padding is a fixed gutter, not Ohio's
	   --clb-container-offset: that formula is `(100vw -
	   clb-container-width) / 2`, i.e. it assumes a 1344px container —
	   applying it to this 2481px-wide element would compute a ~600px
	   gutter and crush the image back down to Ohio's normal container
	   width, defeating the point of the wider target. */
	max-width: 2481px;
	margin: 0 auto;
	padding: 0 36px;
}

.al-fw-hero__media {
	margin: 0;
	width: 100%;
	aspect-ratio: 21 / 9;
	overflow: hidden;
}

.al-fw-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.al-fw-hero__header {
	text-align: center;
	/* Fluid between Ohio's own spacer tokens (top: --clb-spacer-6 to
	   --clb-spacer-9; bottom: --clb-spacer-7 to --clb-spacer-10) —
	   endpoints are Ohio's, only the vw-based interpolation is custom,
	   since Ohio's spacer scale itself has no fluid/clamp variant. */
	padding: clamp(var(--clb-spacer-6, 1.75rem), 4vw, var(--clb-spacer-9, 2.5rem)) 0 clamp(var(--clb-spacer-7, 2rem), 5vw, var(--clb-spacer-10, 2.75rem));
	max-width: 46em;
	margin: 0 auto;
}

.al-fw-hero__kicker {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 var(--clb-spacer-1, 0.5rem);
	margin-bottom: var(--clb-spacer-1, 0.5rem);
}

.al-fw-hero__kicker__link {
	color: #706a5e; /* Monsoon grey */
	font-family: var(--clb-text-font-family, sans-serif);
	font-size: var(--clb-subtitle-font-size, 0.9em);
	line-height: var(--clb-subtitle-line-height, inherit);
	font-weight: var(--clb-subtitle-font-weight, 500);
	text-decoration: none;
}

.al-fw-hero__kicker__link:hover {
	color: #120f05;
}

.al-fw-hero__title {
	/* Per Jere, 2026-08-23: use h1-scale sizing here (this is a real
	   <h1> tag in the markup — see inc/hero.php — so this now matches
	   the cascade rather than fighting it). Family is left unset so it
	   inherits Ohio's real `h1 { font-family: PolySans-Median; }` rule
	   through the cascade, same reasoning as .al-hero__title. Weight
	   and letter-spacing ARE set explicitly here (unlike
	   .al-hero__title) because that same specific `h1 { … }` rule only
	   declares font-family and letter-spacing — NOT font-weight — so
	   without an explicit weight this would fall through to a broader
	   `h1..h6 { font-weight: normal }` reset instead, which happens to
	   match anyway, but pinning it removes the dependency on a second,
	   less specific rule. Values confirmed live on andamanlife.com. */
	color: #120f05; /* Lacquer black */
	margin: 0;
	font-weight: 400;
	font-style: normal;
	letter-spacing: normal;
	font-size: clamp(var(--clb-h1-font-size-min, 43.2px), var(--clb-h1-clamp-size, calc(4.5vw + 0.25rem)), var(--clb-h1-font-size, 64px));
	line-height: var(--clb-h1-line-height, 1);
}

.al-fw-hero__standfirst {
	color: #343127; /* Lacquer 85 */
	margin: var(--clb-spacer-2, 0.75rem) auto 0;
	font-family: var(--clb-text-font-family, sans-serif);
	font-weight: var(--clb-text-font-weight, 300);
	font-size: var(--clb-text-font-size, 17.6px);
	line-height: var(--clb-text-line-height, 1.55);
}

.al-fw-hero__meta {
	color: #706a5e; /* Monsoon grey */
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--clb-gap, 0.5em);
	font-family: var(--clb-text-font-family, sans-serif);
	font-weight: var(--clb-subtitle-font-weight, 400);
	font-size: var(--clb-subtitle-font-size, 0.9em);
	margin-top: var(--clb-spacer-2, 0.75rem);
}

@media (max-width: 767px) {
	.al-fw-hero {
		/* Ohio's own narrow-viewport gutter token (used for its
		   narrow/mobile page containers elsewhere in the theme). */
		padding: 0 var(--clb-container-narrow-side-spacer, 5vw);
	}

	/* Reference site behaviour: below their 60em breakpoint the crop
	   rule drops entirely and the image shows uncropped at its natural
	   ratio; title moves above the image via plain source order (no
	   flex reordering at this width). Matched here: aspect-ratio is
	   removed so the image reverts to intrinsic proportions, and the
	   header is placed first in markup order for mobile. */
	.al-fw-hero {
		display: flex;
		flex-direction: column;
	}

	.al-fw-hero__media {
		aspect-ratio: auto;
		order: 2;
	}

	.al-fw-hero__header {
		order: 1;
		padding: var(--clb-spacer-5, 1.5rem) 0 var(--clb-spacer-4, 1.25rem);
	}
}

/* ---------- Ad bands ---------- */

.al-ad-band {
	background: #ece2cf; /* Nyonya lace tinted towards Limewash */
	text-align: center;
	padding: var(--clb-spacer-8, 2.25rem) var(--clb-spacer-4, 1.25rem) var(--clb-spacer-9, 2.5rem);
	/* Fluid between Ohio's own --clb-spacer-7 and --clb-spacer-10 —
	   same reasoning as the full-width hero header above. */
	margin: clamp(var(--clb-spacer-7, 2rem), 4vw, var(--clb-spacer-10, 2.75rem)) 0;
}

/* Break out of the content column to span the viewport — only on
   pages that genuinely have no sidebar to begin with (Ohio's own
   layout state, untouched by either hero). Next to a sidebar the band
   stays at content width so the two never overlap. Neither hero layout
   affects the sidebar or content column at all — both are scoped
   strictly to the hero area above the fold. */
body:not(:has(.page-sidebar)) .al-ad-band--full {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Guard against the 100vw scrollbar overflow. */
body:has(.al-ad-band--full) {
	overflow-x: clip;
}

.al-ad-band__label {
	display: block;
	margin-bottom: var(--clb-spacer-3, 1rem);
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #706a5e; /* Monsoon grey */
}

.al-ad-band__creative img {
	max-width: min(970px, 100%);
	height: auto;
}

.al-ad-band__creative > * {
	margin-inline: auto;
}