/* =========================================================
   AC-v2 Section: Voice of the Filí (#voice-of-the-fili)
   Spec: AC-v2-site-architecture-190426.md §5.7
   Figma ref: 1440-ourStories-eternalTales-voiceOfTheFilí.png
   Theme: dark, sits over the sticky ET chamber backdrop.
   Role: third tale card inside the Eternal Tales block.
         Sister to An Oath on Stone (AOoS) - reuses the same
         two-column pattern and glass card shell so the three
         Eternal Tales cards (AOoS, BtM, VotF) read as a set.
   Built 21.04.26. Mobile-first, 1440 golden master.
   CSS prefix: votf- to match section--votf class in HTML.

   Landscape hero: votf-full.jpg (Anastasia Khmelevska), native
   4093x5787 portrait = 0.707 ratio. Card uses aspect-ratio: 5/7
   as the nearest clean simple ratio (0.714). Six Succaz square
   animal portraits (rua/raven/elk, each in warm + cool variants)
   are optimised and sitting ready in images/optimised/ for the
   narrator selector component when that's built.
   ========================================================= */

/* ---------- Section wrapper ----------
   Inherits transparent background via the .et-chamber > .section rule
   in section-et-chamber.css, so the chamber backdrop shows through.
   Padding matches AOoS for rhythm across tale cards. */
.section--votf {
  /* 09.05.26: only override padding-top (15px). Padding-bottom falls
     through to .section's base (var(--s-9)) for consistency with the
     other tale cards. */
  padding-top: 15px;
}

.section--votf .section__inner {
  max-width: var(--max-content);
  margin: 0 auto;
  padding-left: var(--s-5);
  padding-right: var(--s-5);
}

/* ---------- Card shell ----------
   Glass panel matched to AOoS and BtM: a translucent authority
   tint over the chamber, a whisper of copper rim, and a soft
   blur so text reads legibly against the variable backdrop. */
.votf-card {
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  gap: var(--s-8);
  align-items: start;
  padding: var(--s-7) var(--s-7);
  border-radius: var(--radius-lg);
  background: rgba(15, 20, 25, 0.38);
  backdrop-filter: blur(6px) saturate(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
  border: 1px solid rgba(255, 107, 74, 0.12);
  box-shadow: var(--shadow-card);
}

/* ---------- Media column ---------- */
.votf-media {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.votf-media__figure {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: #1a1617;
  /* 5/7 hugs the native Khmelevska landscape (4093x5787 = 0.707).
     object-fit: cover on the image absorbs the residual 1% crop. */
  aspect-ratio: 5 / 7;
  box-shadow: var(--shadow-lift);
}

.votf-media__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Figure caption: "First companion: An Oath on Stone" */
.votf-media__caption {
  margin: 0;
  padding-top: var(--s-2);
  font-family: var(--font-serif);
  font-size: var(--body-small);
  line-height: 1.5;
  color: var(--quiet-text);
  text-align: center;
}

.votf-media__caption-label {
  font-style: italic;
  font-weight: 500;
  display: block;
  margin-bottom: var(--s-1);
  color: var(--quiet-text);
  opacity: 0.85;
}

.votf-media__caption-value {
  font-weight: 500;
  font-style: normal;
  color: var(--soft-text);
  letter-spacing: 0.02em;
}

/* ---------- Text column ---------- */
.votf-copy {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding-top: var(--s-1);
}

.votf-copy__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 44px;
  line-height: 1.1;
  color: var(--accent);
  letter-spacing: -0.005em;
}

.votf-copy__subtitle {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: var(--h4);
  line-height: 1.5;
  color: var(--soft-text);
  max-width: 42ch;
}

.votf-copy__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.votf-copy__body p {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--body);
  line-height: 1.75;
  color: var(--soft-text);
  max-width: 52ch;
}

/* =========================================================
   Responsive step-downs
   Golden master at 1440; scale down at 1200, 991, 767, 576, 400.
   Mirrors AOoS spacing so the three ET cards scale together.
   ========================================================= */

@media (max-width: 1200px) {
  .votf-card {
    gap: var(--s-7);
    padding: var(--s-6) var(--s-6);
  }
  .votf-copy__title { font-size: 40px; }
}

@media (max-width: 991px) {
  .votf-card {
    grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
    gap: var(--s-6);
  }
  .votf-copy__title { font-size: 36px; }
}

/* Stack to single column. Flip point moved from 767 to 770 on
   23.04.26 as part of the stagger fix (AOoS 780, VotF 770, BtM 760,
   Our Stories 740) so scroll anchoring can keep up with height
   changes when the viewport crosses the stack boundary. See
   project_stagger_breakpoint_fix_230426 in memory.
   Text leads, image follows per feedback_mobile_stack_text_leads. */
@media (max-width: 770px) {
  /* .section--votf padding inherits 15px top + .section base bottom. */
  .votf-card {
    grid-template-columns: 1fr;
    gap: var(--s-6);
    padding: var(--s-5) var(--s-5);
  }
  .votf-copy {
    order: 1;
    text-align: left;
  }
  .votf-media {
    order: 2;
  }
  .votf-media__figure {
    /* Mobile card keeps the Khmelevska portrait aspect so the scene
       is legible below the text block. Slight ease at 4/5 to give
       the image a touch more breathing room in the narrower column. */
    aspect-ratio: 4 / 5;
    max-width: 420px;
    margin: 0 auto;
    width: 100%;
  }
  .votf-copy__title { font-size: 30px; }
  .votf-copy__subtitle { font-size: 16px; }
  .votf-copy__body p { font-size: 15px; line-height: 1.7; }
}

@media (max-width: 576px) {
  /* padding inherits from base. */
  .votf-card {
    padding: var(--s-5) var(--s-4);
    gap: var(--s-5);
  }
  .votf-copy__title { font-size: 26px; }
  .votf-copy__subtitle { font-size: 15px; }
  .votf-copy__body p { font-size: 14px; line-height: 1.7; }
  .votf-media__caption { font-size: 12px; }
}

@media (max-width: 400px) {
  .votf-card {
    padding: var(--s-4) var(--s-3);
  }
  .votf-copy__title { font-size: 24px; }
}

/* =========================================================
   Reduced motion + a11y
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  /* .fade-up primitive handles this globally; nothing specific here. */
}