/* =========================================================
   AC-v2 Section: An Oath on Stone (#an-oath-on-stone)
   Spec: AC-v2-site-architecture-190426.md §5.5
   Figma ref: 1440-ourStories-eternalTales-anOathOnStone.png
   Theme: dark, sits over the sticky ET chamber backdrop.
   Role: first tale card inside the Eternal Tales block.
   Built 20.04.26. Mobile-first, 1440 golden master.
   CSS prefix: aoos- to match section--aoos class in HTML.
   ========================================================= */

/* ---------- Section wrapper ----------
   Inherits transparent background via the .et-chamber > .section rule
   in section-et-chamber.css, so the chamber backdrop shows through.
   Padding here controls breathing room above and below the card. */
.section--aoos {
  /* 09.05.26: padding-top set so the gap matched the others.
     23.05.26: bumped 15px -> 80px per user (the intro card rises to
     consume the logo lockup, visually compressing the first post-hero
     gap - AOoS was the section directly after the hero back then).
     06.07.26: back to 15px. Before the Myth moved up to slot 2, so
     AOoS now sits mid-flow; keeping the 80px made the BtM -> AOoS gap
     read almost double the AOoS -> VotF gap, per user. The 80px hero
     compensation was briefly moved to .section--btm and then retired
     entirely the same day (it inflated the intro -> BtM gap, per
     user) - all tale sections now run the same 15px top.
     scroll-margin-top falls through to .section's base again. */
  padding-top: 15px;
}

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

/* ---------- Card shell ----------
   A container for the two-column layout. No heavy glass; a very subtle
   authority tint + soft blur behind the whole card keeps text legible
   over the variable chamber brightness without asserting a panel. */
.aoos-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 ---------- */
.aoos-media {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.aoos-media__figure {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: #1a1617;
  /* Portrait aspect honours the Figma: tall illustration panel. */
  aspect-ratio: 3 / 4;
  box-shadow: var(--shadow-lift);
}

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

/* Figure caption: "First book from: Of Gods and Men" */
.aoos-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;
}

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

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

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

.aoos-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;
}

.aoos-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;
}

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

.aoos-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.
   ========================================================= */

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

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

/* Stack to single column. Flip point moved from 767 to 780 on
   23.04.26 as part of the stagger fix: AOoS flips at 780, VotF at
   770, BtM at 760, Our Stories logo rescale at 740. Reason: the
   four ET sections previously all flipped at 767, which caused a
   ~1300px simultaneous height jump on a single-pixel resize and
   broke browser scroll anchoring (VotF content slid back into the
   viewport while the user thought they were still on TEotE).
   Staggering the flip points spreads the growth across a 40px range
   so scroll anchoring can preserve position across each individual
   flip. See project_stagger_breakpoint_fix_230426 in memory.
   Text leads, image follows per feedback_mobile_stack_text_leads. */
@media (max-width: 780px) {
  /* .section--aoos padding inherits from base (15/15); no override. */
  .aoos-card {
    grid-template-columns: 1fr;
    gap: var(--s-6);
    padding: var(--s-5) var(--s-5);
  }
  .aoos-copy {
    order: 1;
    text-align: left;
  }
  .aoos-media {
    order: 2;
  }
  .aoos-media__figure {
    /* Slightly shorter at mobile so the image sits compactly below the text. */
    aspect-ratio: 4 / 5;
    max-width: 420px;
    margin: 0 auto;
    width: 100%;
  }
  .aoos-copy__title { font-size: 30px; }
  .aoos-copy__subtitle { font-size: 16px; }
  .aoos-copy__body p { font-size: 15px; line-height: 1.7; }
}

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

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

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