/**
 * domaine.css
 * Styles for the /domaine long-scroll brand story page with sticky anchor nav.
 * Loaded conditionally on is_page('domaine') via inc/enqueue.php.
 * All values use CSS custom properties defined in style.css :root.
 *
 * @package astra-child
 */

/* ── Full-bleed sections ──────────────────────────────────────────────────── */

/*
 * EVERY section of the page runs edge to edge, using the same negative-margin
 * technique as the full-bleed sections in components.css (CLAUDE.md, Astra
 * Layout Configuration); the .porta-container inside each keeps the content
 * at --max-width. Until 2026-10-08 only the hero, viticulture and CTA did:
 * the tinted sections stopped at the content width and showed white margins
 * on both sides, like boxed cards. Background sequence, set on purpose:
 * hero photo → famille beige → histoire white → triptych photos → terroir
 * white → viticulture photo → cave beige → engagements white → galerie beige
 * → CTA burgundy.
 */
.domaine-hero,
.domaine-section {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.domaine-hero {
  position: relative;
  min-height: calc(100svh - var(--header-height));   /* the real header: 80 / 92px (audit 09-018) */
  display: flex;
  /* Text in the lower part, over the lake and vines, rather than in the
     middle of the empty sky that fills the photo's top half. */
  align-items: flex-end;
  justify-content: center;
  /* The photo is a <picture> (porta_bg_photo(), audit 03-009), positioned by
     .porta-bg-photo in components.css; tree order puts the overlay above it. */
  /* Fallback color shown before image loads or when file is not yet uploaded */
  background-color: var(--color-accent);
}

/* Overlay for text legibility: a gradient, not a flat 40% veil — the sky and
   the harvester keep their light, and the dark only sits behind the text.
   rgba() is used intentionally — CSS custom properties cannot express alpha alone. */
.domaine-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.12) 0%,
    rgba(0, 0, 0, 0.18) 35%,
    rgba(0, 0, 0, 0.5) 75%,
    rgba(0, 0, 0, 0.55) 100%
  );
}

.domaine-hero__content {
  position: relative; /* sits above .domaine-hero__overlay */
  z-index: var(--z-raised);
  text-align: center;
  padding-block: var(--space-section) clamp(3rem, 12vh, 7rem);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35);
}

/*
 * Desktop: the space under the text grows with the screen (design review B5,
 * audit 09-DR-10). With a near-fixed bottom padding the text block sat at
 * 72–78 % of the hero height, lower the larger the screen; this lands its
 * centre at ~61–64 % — still over the lake, below the horizon. The overlay's
 * dark band moves up with it. Phones keep the padding above: lifting the
 * text there would put it across the harvester, the photo's subject.
 */
@media (min-width: 768px) {
  .domaine-hero__content {
    padding-bottom: max(4rem, calc(30svh - 4.5rem));
  }

  .domaine-hero__overlay {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.12) 0%,
      rgba(0, 0, 0, 0.2) 30%,
      rgba(0, 0, 0, 0.5) 60%,
      rgba(0, 0, 0, 0.55) 100%
    );
  }
}

.domaine-hero__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-bg-alt);   /* light on the photograph (design review B5, audit 00-043) */
  margin-bottom: 1rem;
}

.domaine-hero__title {
  font-size: var(--text-4xl);
  color: var(--color-white);
  margin-bottom: 1.5rem;
}

.domaine-hero__quote {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--color-white);
  opacity: 0.9;
  max-width: var(--max-width-text);
  margin-inline: auto;
  line-height: 1.6;
}

/* The quote's line break only on wide screens: on a phone it split the quote
   into "…villages de / Lavaux, / une passion…". */
.domaine-hero__break {
  display: none;
}

/* Phone crop: the portrait viewport shows about a third of the landscape
   photo. Centred, that third was lake and sky and the harvester (the
   subject, at ~76% across) fell outside it. */
@media (max-width: 767px) {
  .domaine-hero .porta-bg-photo img {
    object-position: 74% center;
  }
}

@media (min-width: 768px) {
  .domaine-hero__title {
    font-size: var(--text-5xl);
  }
  .domaine-hero__quote {
    font-size: var(--text-2xl);
  }
  .domaine-hero__break {
    display: inline;
  }
}

/* ── Sticky anchor nav ────────────────────────────────────────────────────── */

/*
 * /domaine uses the shared in-page menu, .porta-anchor-nav (components.css,
 * anchor-nav.js) — the same horizontally scrollable row of pills as
 * /degustation at every width (audit 09-DR-O3). The phone dropdown it had
 * (a button showing only the current section's name, two taps to jump) and
 * its own 68px bar are gone; git history before audit 09-DR-O3 has them.
 */

/* ── Shared section typography ────────────────────────────────────────────── */

/* Small uppercase label above section headings */
.domaine-section__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
}

.domaine-section__title {
  font-size: var(--text-3xl);
  color: var(--color-text);
  margin-bottom: 1.5rem;
}

.domaine-section__body {
  font-size: var(--text-base);
  color: var(--color-text-light);
  line-height: 1.7;
  margin-bottom: 1rem;
}

.domaine-section__body:last-of-type {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .domaine-section__title {
    font-size: var(--text-4xl);
  }
}

/* ── Two-column layout (famille, terroir, cave) ───────────────────────────── */

/*
 * HTML source order determines desktop column order — no CSS direction tricks.
 * Famille: image first → image left on desktop.
 * Terroir: text first → text left on desktop.
 * Cave:    image first → image left on desktop.
 * On mobile all columns stack vertically in source order.
 */
.domaine-section__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

/* Section image fills its column with a fixed aspect ratio */
.domaine-section__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--border-radius);
  /* Tinted placeholder shown while image is absent */
  background-color: var(--color-bg-alt);
}

.domaine-section__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 768px) {
  .domaine-section__cols {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
  }
}

/* ── #famille ─────────────────────────────────────────────────────────────── */

.domaine-section--famille {
  background-color: var(--color-bg-alt);
}

/*
 * Three portraits (Corinne · Jean-Daniel · Clément), one row at every width —
 * on a phone they are small, but three faces side by side read as one family,
 * where three stacked portraits would fill ~1300px. Name under each; the
 * shared role sits once, under the text.
 */
.domaine-famille__portraits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .domaine-famille__portraits {
    gap: 1rem;
  }
}

.domaine-famille__person {
  margin: 0;
  min-width: 0;
}

.domaine-famille__person img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--border-radius);
}

.domaine-famille__name {
  display: block;
  margin-top: 0.625rem;
  font-family: var(--font-heading);
  font-size: var(--text-base);
  color: var(--color-text);
  text-align: center;
}

@media (min-width: 768px) {
  .domaine-famille__name {
    font-size: var(--text-lg);
  }
}

/* "Vignerons-encaveurs à Villette, Lavaux" — closes the text like a signature
   line (replaces the italic name signature, which repeated the old title). */
.domaine-famille__role {
  margin-top: 1.5rem;
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-accent);
}

/* ── #histoire ────────────────────────────────────────────────────────────── */

.domaine-section--histoire {
  background-color: var(--color-bg);
}

/* Centered prose intro above the timeline */
.domaine-histoire__intro {
  max-width: var(--max-width-text);
  margin-inline: auto;
  text-align: center;
  margin-bottom: 3.5rem;
}

/* Timeline — vertical on mobile, horizontal on desktop */
.domaine-timeline {
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Vertical connecting line (mobile) */
.domaine-timeline::before {
  content: '';
  position: absolute;
  top: 0.625rem; /* aligns with dot center */
  bottom: 0;
  left: 0.625rem; /* center of the dot */
  width: 2px;
  background-color: var(--color-bg-alt);
}

.domaine-timeline__item {
  position: relative;
  padding-left: 3rem;
  padding-bottom: 2.5rem;
}

.domaine-timeline__item:last-child {
  padding-bottom: 0;
}

/* Dot marker on the vertical line */
.domaine-timeline__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.375rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background-color: var(--color-accent);
  border: 3px solid var(--color-bg);
}

.domaine-timeline__year {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  color: var(--color-accent);
  font-weight: 400;
  margin-bottom: 0.4rem;
}

.domaine-timeline__desc {
  font-size: var(--text-base);
  color: var(--color-text-light);
  line-height: 1.7;
}

@media (min-width: 768px) {
  /* Horizontal layout — items share a row, line runs along the top */
  .domaine-timeline {
    flex-direction: row;
    align-items: flex-start;
  }

  /* Horizontal connecting line */
  .domaine-timeline::before {
    top: 0.5rem; /* vertically centers on the dots */
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 2px;
  }

  .domaine-timeline__item {
    flex: 1;
    padding-left: 0;
    padding-top: 2.5rem;
    padding-bottom: 0;
    padding-right: 1.5rem;
  }

  .domaine-timeline__item:last-child {
    padding-right: 0;
  }

  /* Dot centred on the horizontal line: line centre 9px (top 0.5rem + 1px),
     dot 20px tall → top -1px. It sat 5px high until 2026-10-08, which let the
     line's first pixel show at the dot's curved left edge once it was coloured. */
  .domaine-timeline__item::before {
    left: 0;
    top: -0.0625rem;
  }
}

/* ── Timeline draw (on scroll) ────────────────────────────────────────────── */

/*
 * When the timeline scrolls into view, it plays once as five centuries in
 * order: a line draws itself from 1515 to today (left → right on desktop,
 * top → bottom on a phone), each dot pops in as the line reaches it, its year
 * and text rise in with it, and the last dot ("Aujourd'hui") turns gold and
 * keeps a slow pulse — the chapter still being written.
 *
 * scroll-entrance.js adds .domaine-timeline--animate (start state) before
 * observing, then .is-drawn when ~30% of the timeline is visible. Every start
 * state is scoped to --animate, so without JS — or with prefers-reduced-motion,
 * where the script exits first — the timeline simply renders complete.
 *
 * Timing: the line takes 1.8s; the four milestones sit at 0, ⅓, ⅔ and the end
 * of it, so dot + text delays are 0, 0.6, 1.2 and 1.8s.
 */

/* Progress line over the grey track (::before) — burgundy shading to gold at
   the "today" end. Same geometry as the track, scaled from 0 to 1. */
.domaine-timeline::after {
  content: '';
  position: absolute;
  top: 0.625rem;
  bottom: 0;
  left: 0.625rem;
  width: 2px;
  background: linear-gradient(to bottom, var(--color-accent) 0%, var(--color-accent) 70%, var(--color-gold) 100%);
  transform-origin: top center;
  transition: transform 1.8s cubic-bezier(0.65, 0, 0.35, 1);
}

@media (min-width: 768px) {
  .domaine-timeline::after {
    top: 0.5rem;
    bottom: auto;
    left: 0.625rem; /* starts at the centre of the 1515 dot */
    right: 0;
    width: auto;
    height: 2px;
    background: linear-gradient(to right, var(--color-accent) 0%, var(--color-accent) 70%, var(--color-gold) 100%);
    transform-origin: left center;
  }
}

/* Dots and text sit above the progress line */
.domaine-timeline__item {
  z-index: var(--z-raised);
}

/* The present: a gold dot */
.domaine-timeline__item:last-child::before {
  background-color: var(--color-gold);
}

/* ── Start state (only when the script will play the animation) ── */

.domaine-timeline--animate:not(.is-drawn)::after {
  transform: scaleY(0);
}

@media (min-width: 768px) {
  .domaine-timeline--animate:not(.is-drawn)::after {
    transform: scaleX(0);
  }
}

.domaine-timeline--animate .domaine-timeline__item::before {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); /* slight overshoot */
}

.domaine-timeline--animate:not(.is-drawn) .domaine-timeline__item::before {
  transform: scale(0);
}

.domaine-timeline--animate .domaine-timeline__year,
.domaine-timeline--animate .domaine-timeline__desc {
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.domaine-timeline--animate:not(.is-drawn) .domaine-timeline__year,
.domaine-timeline--animate:not(.is-drawn) .domaine-timeline__desc {
  opacity: 0;
  transform: translateY(12px);
}

/* Milestone delays — each dot pops as the line reaches it, its text follows */
.domaine-timeline--animate .domaine-timeline__item:nth-child(2)::before { transition-delay: 0.6s; }
.domaine-timeline--animate .domaine-timeline__item:nth-child(3)::before { transition-delay: 1.2s; }
.domaine-timeline--animate .domaine-timeline__item:nth-child(4)::before { transition-delay: 1.8s; }

.domaine-timeline--animate .domaine-timeline__item:nth-child(1) .domaine-timeline__year { transition-delay: 0.1s; }
.domaine-timeline--animate .domaine-timeline__item:nth-child(1) .domaine-timeline__desc { transition-delay: 0.2s; }
.domaine-timeline--animate .domaine-timeline__item:nth-child(2) .domaine-timeline__year { transition-delay: 0.7s; }
.domaine-timeline--animate .domaine-timeline__item:nth-child(2) .domaine-timeline__desc { transition-delay: 0.8s; }
.domaine-timeline--animate .domaine-timeline__item:nth-child(3) .domaine-timeline__year { transition-delay: 1.3s; }
.domaine-timeline--animate .domaine-timeline__item:nth-child(3) .domaine-timeline__desc { transition-delay: 1.4s; }
.domaine-timeline--animate .domaine-timeline__item:nth-child(4) .domaine-timeline__year { transition-delay: 1.9s; }
.domaine-timeline--animate .domaine-timeline__item:nth-child(4) .domaine-timeline__desc { transition-delay: 2s; }

/* "Aujourd'hui": a ring pulses out of the gold dot once the line has arrived.
   Only when animated — a static page stays static. */
.domaine-timeline--animate.is-drawn .domaine-timeline__item:last-child::before {
  animation: domaine-timeline-pulse 2.8s ease-out 2.3s infinite;
}

@keyframes domaine-timeline-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-gold) 55%, transparent); }
  70%  { box-shadow: 0 0 0 12px color-mix(in srgb, var(--color-gold) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-gold) 0%, transparent); }
}

/* ── #terroir ─────────────────────────────────────────────────────────────── */

.domaine-section--terroir {
  background-color: var(--color-bg);
}

/* ── #viticulture ─────────────────────────────────────────────────────────── */

/*
 * Full-bleed background-image banner with dark overlay.
 * Image path relative to this CSS file.
 */
.domaine-section--viticulture {
  position: relative;
  /* Golden Chasselas cluster in the vine row (landscape, sharp at full width).
     It replaced a portrait bark texture on 2026-10-08, which came out soft
     and blotchy stretched across the band. ?v= — bump on the next swap. */
  background-image: url('../images/viticulture-vignes.jpg?v=20261008');
  background-size: cover;
  background-position: center 40%;
  /* Fallback when image is not yet uploaded */
  background-color: var(--color-text);
}

.domaine-viticulture__overlay {
  position: absolute;
  inset: 0;
  /* rgba intentional — see hero overlay comment. 0.5: the grapes and the
     sky behind the text are bright. */
  background-color: rgba(0, 0, 0, 0.5);
}

.domaine-viticulture__content {
  position: relative;
  z-index: var(--z-raised);
  text-align: center;
  max-width: var(--max-width-text);
  margin-inline: auto;
}

/* White text variants for viticulture — override shared section typography */
.domaine-section--viticulture .domaine-section__eyebrow {
  color: var(--color-bg-alt);
}

.domaine-section--viticulture .domaine-section__title {
  color: var(--color-white);
}

.domaine-section--viticulture .domaine-section__body {
  color: var(--color-white);
  opacity: 0.85;
}

/* ── #cave ────────────────────────────────────────────────────────────────── */

.domaine-section--cave {
  background-color: var(--color-bg-alt);
}

/*
 * Wine strip — three bottles under the cellar text. The card itself is the
 * homepage's .porta-bottle-card (components.css): white plinth, bottle never
 * cropped, name below, whole card a link. Only the grid and sizes live here.
 * (Replaced the .domaine-product-card on 2026-10-08: square cover-crop at
 * WP 'medium' size cut and distorted the bottle shots.)
 */
.domaine-cave__products {
  margin-top: 4rem;
  text-align: center;
}

.domaine-cave__products-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  color: var(--color-text);
  margin: 0 0 2rem;
}

/* Three in one row at every width — on a phone the bottles are small, but a
   2 + 1 grid left one bottle orphaned on its own row. Capped tracks on wider
   screens so the bottles never balloon; centred like the homepage row. */
.domaine-cave__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  justify-content: center;
}

@media (min-width: 768px) {
  .domaine-cave__grid {
    grid-template-columns: repeat(3, minmax(0, 240px));
    gap: 2.5rem;
  }
}

/* Thin plinth padding: the bottle shots already carry their own white margin,
   so the homepage's 1.5rem padding left the bottles looking small here. */
.domaine-cave__grid .porta-bottle-card__image {
  padding: 0.25rem;
}

.domaine-cave__grid .porta-bottle-card__name {
  display: block;
  margin-top: 0.75rem;
  font-size: var(--text-sm);
  line-height: 1.35;
}

@media (min-width: 768px) {
  .domaine-cave__grid .porta-bottle-card__image {
    padding: 0.5rem;
  }
  .domaine-cave__grid .porta-bottle-card__name {
    margin-top: 1rem;
    font-size: var(--text-lg);
  }
}

/* "Tous nos vins →" — the way through to the full range (/nos-vins, never /boutique) */
.domaine-cave__all-wrap {
  margin: 2rem 0 0;
}

.domaine-cave__all {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-accent);
  text-decoration: none;
}

.domaine-cave__all:hover,
.domaine-cave__all:focus-visible {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── #engagements ─────────────────────────────────────────────────────────── */

.domaine-section--engagements {
  background-color: var(--color-bg);
}

.domaine-engagements__header {
  text-align: center;
  margin-bottom: 3rem;
}

.domaine-engagements__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .domaine-engagements__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

/* Open columns, no card: the four label cards below are the section's boxed
   element, and two stacked rows of beige cards made it read heavy
   (lightened 2026-10-08). */
.domaine-engagement-card {
  padding: 0 1rem;
  text-align: center;
}

.domaine-engagement-card__icon {
  display: block;
  /* Color is inherited by SVG currentColor — controls stroke color */
  color: var(--color-accent);
  margin-bottom: 1rem;
  line-height: 0; /* prevent extra space below inline SVG */
}

.domaine-engagement-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--color-text);
  margin-bottom: 0.75rem;
}

.domaine-engagement-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-light);
  line-height: 1.7;
}

/* ── Labels & certifications (inside #engagements) ────────────────────────── */

/*
 * The four quality labels, full colour, below the three values. Beige cards
 * on the section's white — the section's only boxed element since the three
 * values became open columns (2026-10-08).
 *
 * The logos keep their own colours here, unlike anywhere else on the site.
 * They are the subject of this block, not quiet footer chrome. Do NOT render
 * them single-ink or greyscale: three of the four have solid alpha, so a CSS
 * mask turns them into filled blocks (tried and rejected 2026-09-11 — see the
 * footer strip notes in components.css).
 */
.domaine-labels {
  margin-top: 3.5rem;
}

.domaine-labels__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  color: var(--color-text);
  text-align: center;
  margin: 0 0 0.75rem;
}

.domaine-labels__intro {
  font-size: var(--text-sm);
  color: var(--color-text-light);
  line-height: 1.7;
  text-align: center;
  max-width: var(--max-width-text);
  margin: 0 auto 2rem;
}

.domaine-labels__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/*
 * Mobile is a horizontal card — logo left, text right. Four stacked centred
 * cards ran close to a full screen of scrolling on a phone for what is a
 * supporting block, so the compact form earns its extra rules.
 */
.domaine-label-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem;
  background-color: var(--color-bg-alt);
  border-radius: var(--border-radius);
  text-decoration: none;
  transition: box-shadow var(--duration) ease, transform var(--duration) ease;
}

.domaine-label-card:hover {
  box-shadow: 0 4px 16px rgba(26, 26, 26, 0.1);
  transform: translateY(-2px);
}

.domaine-label-card__logo {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 72px;
  height: 52px;
}

/*
 * Below 768px the Lavaux card is served the compact pictorial mark instead of
 * the full lockup — see the <picture> in page-domaine.php. That mark is 0.92:1,
 * so it behaves like the other three and needs no special layout here.
 *
 * The 767px in that <source> and the 768px breakpoint below are one decision in
 * two files: change them together, or the wide lockup will come back wearing
 * the compact mark's height cap.
 */

.domaine-label-card__logo img {
  display: block;
  width: auto;
  height: auto;
  /* max-height + max-width together: the height caps below set the optical
     size, and max-width stops the very wide Lavaux lockup overflowing a
     narrow card instead of scaling down. */
  max-width: 100%;
}

/* Per-mark caps — the same optical balance as the footer, scaled up.
   Never collapse these into one rule: the marks run 0.81:1 to 4.28:1. */
.domaine-label-card--swiss-wine         .domaine-label-card__logo img { max-height: 52px; }
.domaine-label-card--lavaux-unesco      .domaine-label-card__logo img { max-height: 50px; } /* the compact mark, 0.92:1 */
.domaine-label-card--terravin           .domaine-label-card__logo img { max-height: 48px; }
.domaine-label-card--vin-suisse-durable .domaine-label-card__logo img { max-height: 54px; }

/* The Lavaux mark ships as reversed white artwork, recoloured to currentColor
   in the file, so it takes the ink of this card. */
.domaine-label-card { color: var(--color-text); }

.domaine-label-card__body {
  display: block;
}

.domaine-label-card__name {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--color-text);
  margin-bottom: 0.35rem;
}

.domaine-label-card__desc {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-light);
  line-height: 1.7;
}

/* Astra owns outline AND box-shadow on <a>, so the ring goes on a child.
   It also reads better: it frames the label's name rather than a card edge. */
.domaine-label-card:focus-visible .domaine-label-card__name {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (min-width: 768px) {
  .domaine-labels__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  /* From tablet up the card turns vertical and centred, matching the
     engagement cards directly above it. */
  .domaine-label-card {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
    padding: 2rem 1.5rem;
  }

  .domaine-label-card__logo {
    width: 100%;
    height: 68px;
  }

  .domaine-label-card--swiss-wine         .domaine-label-card__logo img { max-height: 64px; }
  /* Back to the full 4.28:1 lockup from here up — see the <picture> source */
  .domaine-label-card--lavaux-unesco      .domaine-label-card__logo img { max-height: 42px; }
  .domaine-label-card--terravin           .domaine-label-card__logo img { max-height: 58px; }
  .domaine-label-card--vin-suisse-durable .domaine-label-card__logo img { max-height: 66px; }
}

@media (min-width: 1280px) {
  .domaine-labels__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .domaine-label-card { transition: none; }
  .domaine-label-card:hover { transform: none; }
}

/* ── Triptych visual band ─────────────────────────────────────────────────── */

/*
 * Full-bleed three-panel photography strip between #histoire and #terroir.
 * Pure visual — no text, no padding. Same negative-margin technique as hero.
 * Rendered by PHP only when all three vignes-triptych-*.jpg files are present.
 */
.domaine-triptych {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0; /* panels touch edge to edge */
}

.domaine-triptych__panel {
  overflow: hidden;
  aspect-ratio: 3 / 4; /* portrait on mobile */
  background-color: var(--color-bg-alt); /* placeholder while images load */
}

@media (min-width: 768px) {
  .domaine-triptych__panel {
    aspect-ratio: 4 / 3; /* landscape strip on desktop — ~360px tall at 1440px viewport */
  }
}

.domaine-triptych__panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Crossfade image slideshow (#terroir) ─────────────────────────────────── */

/*
 * PHP detects terroir-lavaux.jpg + optional -2.jpg, -3.jpg, -4.jpg.
 * With 1 image: plain <img>. With 2–4: .domaine-crossfade--N, CSS only.
 *
 * The FIRST image is a permanent base layer (no animation). Each following
 * image fades in over it on its turn (1s), holds 4s, then fades out (1s) —
 * cycle = 5s × N. The frame is never empty.
 *
 * Rewritten 2026-10-08: the previous version faded every image, the first
 * included, out to opacity 0 one second BEFORE the next one appeared, so the
 * slot dropped to its beige placeholder every 5 seconds. It went unnoticed
 * because only one terroir image existed until then.
 */

/* Enable absolute stacking inside the image slot */
.domaine-section__image {
  position: relative;
}

/* Crossfade container fills the entire image slot */
.domaine-crossfade {
  position: absolute;
  inset: 0;
}

.domaine-crossfade img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* Base layer — always visible under the others */
.domaine-crossfade img:first-child {
  opacity: 1;
  animation: none;
}

/* 2 images — cycle 10s: image 2 fades in at 4s, holds to 9s, fades out by 10s */
.domaine-crossfade--2 img:nth-child(2) { animation-name: cf2-2; animation-duration: 10s; }

@keyframes cf2-2 {
  0%, 40%   { opacity: 0; }
  50%, 90%  { opacity: 1; }
  100%      { opacity: 0; }
}

/* 3 images — cycle 15s */
.domaine-crossfade--3 img:nth-child(2) { animation-name: cf3-2; animation-duration: 15s; }
.domaine-crossfade--3 img:nth-child(3) { animation-name: cf3-3; animation-duration: 15s; }

@keyframes cf3-2 {
  0%, 26.67%      { opacity: 0; }
  33.33%, 60%     { opacity: 1; }
  66.67%, 100%    { opacity: 0; }
}

@keyframes cf3-3 {
  0%, 60%         { opacity: 0; }
  66.67%, 93.33%  { opacity: 1; }
  100%            { opacity: 0; }
}

/* 4 images — cycle 20s */
.domaine-crossfade--4 img:nth-child(2) { animation-name: cf4-2; animation-duration: 20s; }
.domaine-crossfade--4 img:nth-child(3) { animation-name: cf4-3; animation-duration: 20s; }
.domaine-crossfade--4 img:nth-child(4) { animation-name: cf4-4; animation-duration: 20s; }

@keyframes cf4-2 {
  0%, 20%    { opacity: 0; }
  25%, 45%   { opacity: 1; }
  50%, 100%  { opacity: 0; }
}

@keyframes cf4-3 {
  0%, 45%    { opacity: 0; }
  50%, 70%   { opacity: 1; }
  75%, 100%  { opacity: 0; }
}

@keyframes cf4-4 {
  0%, 70%    { opacity: 0; }
  75%, 95%   { opacity: 1; }
  100%       { opacity: 0; }
}

/* Accessibility: users who prefer reduced motion see only the first image */
@media (prefers-reduced-motion: reduce) {
  .domaine-crossfade img:not(:first-child) { animation: none; opacity: 0; }
}

/* ── #visite — CTA band ───────────────────────────────────────────────────── */

/* Full-bleed burgundy band — matches the homepage "Venez nous rendre visite" section */
.domaine-section--cta {
  background-color: var(--color-accent);
  text-align: center;
}

.domaine-cta__title {
  font-size: var(--text-3xl);
  color: var(--color-white);
  margin-bottom: 1rem;
}

.domaine-cta__text {
  color: var(--color-white);
  font-size: var(--text-lg);   /* closing-band spec, components.css (09-DR-11) */
  opacity: 0.85;
  max-width: var(--max-width-text);
  margin-inline: auto;
  margin-bottom: 2rem;
  line-height: 1.7;
}

.domaine-cta__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.domaine-cta__closing {
  margin-top: 2rem;
  font-style: italic;
  color: var(--color-white);
  opacity: 0.6;
  font-size: var(--text-sm);
}

@media (min-width: 768px) {
  .domaine-cta__title {
    font-size: var(--text-4xl);
  }
  .domaine-cta__actions {
    flex-direction: row;
    justify-content: center;
  }
}


/* ── #galerie ─────────────────────────────────────────────────────────────── */

/*
 * Mosaic layout — reuses .porta-degustation-grid from components.css.
 * Section header sits in a .porta-container above the full-width grid.
 * padding-bottom: 0 lets .porta-degustation-grid's own padding-block-end apply.
 */
.domaine-section--galerie {
  background-color: var(--color-bg-alt); /* section owns the background — encloses header + grid */
  padding-bottom: 0;
}

/* Grid is inside the section; let the section background show through */
.domaine-section--galerie .porta-degustation-grid {
  background-color: transparent;
}

/* Tighten the gap between section header and grid on desktop */
@media (min-width: 768px) {
  .domaine-section--galerie .domaine-engagements__header {
    margin-bottom: 2rem;
  }
}

/* ── Scroll-entrance stagger delays (domaine-specific) ───────────────────── */
/* Base .scroll-reveal rules live in components.css (loaded globally). */

/* Engagement cards */
.domaine-engagement-card:nth-child(2).scroll-reveal { transition-delay: 0.12s; }
.domaine-engagement-card:nth-child(3).scroll-reveal { transition-delay: 0.24s; }

/* Label cards */
.domaine-label-card:nth-child(2).scroll-reveal { transition-delay: 0.08s; }
.domaine-label-card:nth-child(3).scroll-reveal { transition-delay: 0.16s; }
.domaine-label-card:nth-child(4).scroll-reveal { transition-delay: 0.24s; }

/* Timeline items: no stagger here — the timeline plays its own sequence
   ("Timeline draw" above), started by scroll-entrance.js. */

/* Triptych panels */
.domaine-triptych__panel:nth-child(2).scroll-reveal { transition-delay: 0.1s; }
.domaine-triptych__panel:nth-child(3).scroll-reveal { transition-delay: 0.2s; }


/* ── Detail info buttons ────────────────────────────────────────────────────── */

/*
 * Pill-shaped trigger buttons that open the detail modal.
 * Two visual variants:
 *   default          — accent border + text, for light-background sections
 *   --on-dark        — semi-transparent white, for the viticulture dark banner
 * The terroir badge gets its own scoped rule to keep its existing appearance
 * and just add cursor + hover behaviour.
 */
.domaine-detail-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.1rem;
  background-color: transparent;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-family: var(--font-body);
  color: var(--color-accent);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.25s, color 0.25s;
}

.domaine-detail-btn:hover {
  background-color: var(--color-accent);
  color: var(--color-white);
}

/* Mouse focus quiet, keyboard focus ringed. (0,2,0) beats Astra's
   button:focus { outline: 0 } (0,1,1) — no !important needed (audit 02-021). */
.domaine-detail-btn:focus:not(:focus-visible) {
  outline: none;
}

.domaine-detail-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.domaine-detail-btn--on-dark {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--color-white);
}

.domaine-detail-btn--on-dark:hover {
  background-color: rgba(255, 255, 255, 0.25);
  color: var(--color-white);
}

.domaine-detail-btn--on-dark:focus-visible {
  outline-color: var(--color-white);
}

/* Terroir button wrapper */
.domaine-terroir__detail {
  margin-top: 1.75rem;
}

.domaine-detail-btn__arrow {
  margin-left: 0.25rem;
  font-style: normal;
}

/* Action wrappers — centering containers for buttons added below section content */
.domaine-viticulture__actions {
  margin-top: 1.75rem;
  text-align: center;
}

/* The cave button follows its left-aligned text column (it was centred in the
   column, under left-aligned text — corrected 2026-10-08). The engagements
   button closes a centred section, so it stays centred. */
.domaine-cave__detail {
  margin-top: 1.75rem;
}

.domaine-engagements__detail {
  margin-top: 2rem;
  text-align: center;
}

/* ── Detail modal — dark cave aesthetic ─────────────────────────────────────── */

/*
 * Full-screen overlay matching the gallery lightbox in depth and tone.
 * Panel uses a warm near-black background with a subtle gold border.
 * Transitions: opacity fade + panel scale-up, same feel as the image lightbox.
 * Opened via .is-open class (JS) to allow CSS transitions — not [hidden].
 */
.domaine-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(10, 5, 2, 0.88);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s;
  cursor: pointer; /* clicking outside the panel closes the modal */
}

.domaine-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  /* Visible at once on open (fade still 0.35s): domaine-modal.js focuses the
     close button in the same task, and a hidden element cannot take focus —
     the 0.35s visibility transition left focus behind the overlay and the
     dialog unannounced (audit 09-003). Closing keeps the delayed hide. */
  transition: opacity 0.35s ease, visibility 0s;
}

.domaine-modal__panel {
  position: relative;
  background-color: rgba(18, 9, 4, 0.97);
  border: 1px solid color-mix(in srgb, var(--color-gold) 20%, transparent);
  border-radius: var(--border-radius);
  width: min(92vw, 1100px);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  transform: scale(0.97);
  transition: transform 0.35s ease;
  cursor: default; /* stop outer cursor from bleeding in */
}

.domaine-modal.is-open .domaine-modal__panel {
  transform: scale(1);
}

.domaine-modal__close {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  z-index: var(--z-raised-2);
  cursor: pointer;
  font-size: 2.25rem;
  line-height: 1;
  color: var(--color-white) !important;
  padding: 0.5rem;
  opacity: 0.75;
  transition: opacity var(--duration-fast) ease;
  border-radius: 0 !important;
}

.domaine-modal__close:hover {
  opacity: 1;
  color: var(--color-white) !important;
}

.domaine-modal__scroll {
  overflow-y: auto;
  padding: 2.25rem 2.5rem 2.5rem;
  padding-right: 3.5rem; /* clear the × button */
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--color-gold) 25%, transparent) transparent;
}

.domaine-modal__scroll::-webkit-scrollbar { width: 4px; }
.domaine-modal__scroll::-webkit-scrollbar-track { background: transparent; }
.domaine-modal__scroll::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--color-gold) 25%, transparent);
  border-radius: 2px;
}

.domaine-modal__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  color: var(--color-gold);
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--color-gold) 20%, transparent);
  line-height: 1.3;
}

.domaine-modal__body p {
  font-size: var(--text-base);
  color: color-mix(in srgb, var(--color-bg) 80%, transparent);
  line-height: 1.85;
  margin-bottom: 1rem;
}

.domaine-modal__body h3 {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--color-gold);
  margin: 1.75rem 0 0.75rem;
}

.domaine-modal__body ul {
  margin: 0.25rem 0 1.25rem 0;
  padding: 0;
  list-style: none;
}

/* Em-dash list markers in muted gold — more editorial than bullet dots */
.domaine-modal__body li {
  position: relative;
  padding-left: 1.25rem;
  font-size: var(--text-base);
  color: color-mix(in srgb, var(--color-bg) 72%, transparent);
  line-height: 1.7;
  margin-bottom: 0.5rem;
}

.domaine-modal__body li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: color-mix(in srgb, var(--color-gold) 50%, transparent);
}

@media (max-width: 767px) {
  .domaine-modal__scroll {
    padding: 1.5rem 1.25rem 2rem;
    padding-right: 2.25rem;
  }

  .domaine-modal__title {
    font-size: var(--text-xl);
  }
}