/* ============================================================================
   SADER — SECTION: MISSION  (.s-mission)
   Light parchment world. Three movements in one editorial section:
     (a) mission statement   — eyebrow + display-2 serif + lead, with a faint
                               giant "1863" numeral ornament behind.
     (b) heritage timeline   — horizontal row of brass years on a thin baseline
                               rule (becomes a scrollable rail on small screens).
     (c) founder pullquote   — italic serif quote with a brass bar.
   Reuses tokens + components; only layout unique to this section lives here.
   Logical properties only — RTL flips for free.
   ============================================================================ */

.s-mission {
  /* Establish a stacking context for the faint year ornament. */
  position: relative;
  overflow: hidden;
  /* Single source of truth for where the timeline baseline + node dots sit,
     measured from the top of each year. Defined in rem so the baseline rule
     and every node dot resolve against the SAME length regardless of the
     font context they live in. Tuned to clear the --fs-h2 year row. */
  --s-mission-baseline: 3.25rem;
}

/* --------------------------------------------------------------------------
   (a) MISSION STATEMENT
   A generous, confident block. The statement sits at --fs-display-2; the
   supporting lead is held to a comfortable reading measure beneath it.
   -------------------------------------------------------------------------- */
.s-mission__statement {
  position: relative;
  z-index: var(--z-base);
  max-inline-size: 60rem;
}

.s-mission__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-2);
  font-weight: var(--fw-semi);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--text);
  margin-block-start: var(--space-5);
  text-wrap: balance;
}

.s-mission__lead {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--text-muted);
  max-inline-size: 46rem;
  margin-block-start: var(--space-6);
  text-align: justify;
  text-justify: inter-word;
}

/* The oversized, very faint heritage numeral that ghosts behind the
   statement. Decorative only (aria-hidden in markup). It bleeds off the
   inline-end edge and never competes with the type. */
.s-mission__ghost {
  position: absolute;
  inset-block-start: -0.18em;
  inset-inline-end: clamp(-1.5rem, -6vw, -5rem);
  z-index: 0;
  font-size: clamp(11rem, 6rem + 26vw, 30rem);
  line-height: 1;
  color: var(--accent);
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/* The numeral carries .ltr (so its digits keep left-to-right order), which also
   forces direction:ltr on the element — making inset-inline-end resolve to the
   physical right on the Arabic page too. Mirror it back to the start (left)
   edge so it bleeds off the same side as the rest of the RTL layout. */
[dir="rtl"] .s-mission__ghost {
  inset-inline-end: auto;
  left: clamp(-1.5rem, -6vw, -5rem);
}

/* --------------------------------------------------------------------------
   (b) HERITAGE TIMELINE — "A heritage of firsts"
   A refined horizontal row. Each entry shows a brass year (.numeral), a serif
   title and a muted sub-line, sitting above a thin brass baseline that runs
   the full width and connects the markers with a small node on each.
   -------------------------------------------------------------------------- */
.s-mission__heritage {
  position: relative;
  z-index: var(--z-base);
  margin-block-start: clamp(var(--space-10), 9vw, var(--space-12));
}

.s-mission__heritage-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-block-end: clamp(var(--space-8), 5vw, var(--space-10));
}

.s-mission__heritage-title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  color: var(--text);
}

/* The row itself. On wide screens it is an even 6-up grid; the connecting
   baseline is drawn as a pseudo-element so it reads as one continuous rule. */
.s-mission__timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(var(--space-4), 2vw, var(--space-7));
}

/* The thin brass baseline connecting the markers. It begins under the first
   node's dot (which sits at inset-inline-start:0, 7px wide → ~3px to its centre)
   and is inset from the trailing edge. */
.s-mission__timeline::before {
  content: "";
  position: absolute;
  inset-inline-start: 3px;
  inset-inline-end: clamp(1rem, 8%, 6rem);
  /* Sits just beneath the year row, above the titles. */
  inset-block-start: var(--s-mission-baseline, 3.4em);
  block-size: 1px;
  background-color: var(--line-brass);
  z-index: 0;
}

.s-mission__node {
  position: relative;
  z-index: var(--z-base);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-block-end: var(--space-2);
}

.s-mission__year {
  /* .numeral handles family/weight/colour; we only set the size + rhythm. */
  font-size: var(--fs-h2);
  line-height: 1;
  display: inline-block;
  /* Anchor the year to the node's inline-start (over its dot) using the NODE's
     direction. Without this the year stretches to the full column and, because
     it carries .ltr (direction:ltr), its digits resolve text-align:start to the
     LEFT — which on the RTL page lands them at the opposite edge from the dot,
     making the years appear between the dots instead of above them. */
  align-self: start;
}

/* The brass dot that meets the baseline beneath each year. */
.s-mission__node::after {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--s-mission-baseline, 3.4em) - 3px);
  inset-inline-start: 0;
  inline-size: 7px;
  block-size: 7px;
  border-radius: var(--radius-pill);
  background-color: var(--accent);
  box-shadow: 0 0 0 4px var(--bg);
  z-index: var(--z-raised);
}

.s-mission__node-title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  color: var(--text);
  /* Push the title block below the baseline so the rule sits cleanly between
     the year and the title. */
  margin-block-start: var(--space-5);
}

.s-mission__node-sub {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   (c) FOUNDER PULLQUOTE
   Uses the .pullquote component; this only handles the surrounding layout,
   the byline, and a hairline rule that separates it from the timeline above.
   -------------------------------------------------------------------------- */
.s-mission__founder {
  position: relative;
  z-index: var(--z-base);
  margin-block-start: clamp(var(--space-10), 9vw, var(--space-12));
  padding-block-start: clamp(var(--space-8), 6vw, var(--space-10));
  border-block-start: 1px solid var(--line);
}

.s-mission__quote {
  /* A long founder quote — keep it refined, not hero-sized. Italic serif set
     across a fuller measure so it reads as a few balanced lines. The brass bar
     is dropped in favour of big quotation marks (see ::before / ::after). */
  position: relative;
  font-size: var(--fs-h2);
  max-inline-size: 48ch;
  padding-inline-start: 0;
}
/* Big decorative quotation marks — opening at the top-start, closing at the
   bottom-end. These override the .pullquote brass bar (::before). */
.s-mission__quote::before,
.s-mission__quote::after {
  position: absolute;
  inline-size: auto;
  background: none;
  font-family: var(--font-display);
  font-size: clamp(4rem, 9vw, 7rem);
  line-height: 1;
  color: var(--accent);
  opacity: 0.3;
  pointer-events: none;
}
.s-mission__quote::before {
  content: "\201C";                  /* “ */
  inset-block-start: -0.45em;
  inset-block-end: auto;
  inset-inline-start: -0.5em;
}
.s-mission__quote::after {
  content: "\201D";                  /* ” */
  inset-block-end: -0.55em;
  inset-inline-end: -0.1em;
}
/* Arabic founder quote reads as an even block — justify the edges. */
[dir="rtl"] .s-mission__quote {
  text-align: justify;
  text-justify: inter-word;
  padding-inline: var(--space-7);
  line-height: 1;
}

.s-mission__cite {
  display: block;
  inline-size: fit-content;
  margin-block-start: var(--space-7);
  margin-inline-start: auto;         /* sit the block on the right, under the closing quote */
  padding-inline-start: 0;
  text-align: start;                 /* but the lines start from the left edge of the block */
  font-style: normal;
}

.s-mission__cite-name {
  display: block;                    /* own line, above the "Preface…" source */
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semi);
  font-style: normal;
  color: var(--text);
}

.s-mission__cite-source {
  display: block;
  margin-block-start: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   The 6-up timeline collapses gracefully. At tablet it splits to a 3-up grid
   (baseline rule is dropped because it no longer reads as one line); on phones
   it becomes a horizontal snap-scroll rail with the baseline restored beneath.
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .s-mission__timeline {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(var(--space-6), 4vw, var(--space-8));
    row-gap: clamp(var(--space-8), 6vw, var(--space-10));
  }
  /* No single continuous baseline across wrapped rows. */
  .s-mission__timeline::before { content: none; }
  .s-mission__node {
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--line-brass);
  }
  .s-mission__node::after {
    inset-block-start: -4px;
    box-shadow: none;
  }
  .s-mission__node-title { margin-block-start: var(--space-2); }
}

@media (max-width: 640px) {
  /* Horizontal scrollable rail (LV-style). Full-bleed so cards can run to the
     screen edge while the section keeps its gutter for everything else. */
  .s-mission__timeline {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--space-6);
    padding-inline: var(--gutter);
    padding-block-end: var(--space-4);
    margin-inline: calc(var(--gutter) * -1);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .s-mission__timeline::-webkit-scrollbar { display: none; }
  .s-mission__node {
    flex: 0 0 min(74vw, 20rem);
    scroll-snap-align: start;
    border-block-start: 0;
    padding-block-start: 0;
    padding-block-end: var(--space-6);
    border-block-end: 1px solid var(--line-brass);
  }
  .s-mission__node::after {
    inset-block-start: auto;
    inset-block-end: -4px;
  }
  .s-mission__node-title { margin-block-start: var(--space-4); }

  .s-mission__quote { font-size: var(--fs-h3); }
  .s-mission__cite { padding-inline-start: var(--space-5); }
}