/* ============================================================================
   SADER — SECTION: CULTURE  (s-culture)  ·  "Our Culture" — RICH VARIANT
   ----------------------------------------------------------------------------
   An alternative to the airy s-pillars still-life. Where that one lets the
   founder float in negative space, this one FILLS the stage: an editorial
   split — a framed museum-plate portrait on the start side, a numbered pillar
   "ledger" on the end side — laid over a faint blueprint grid with a giant
   ghost "1863" watermark and a closing stat strip. Less blank, more substance.

   STRICTLY MONOCHROME: colour comes only from the dark-theme tokens + white
   alpha. Logical properties throughout, so the whole composition mirrors for
   the RTL build. Reuses tokens + .section / .container / .eyebrow.
   ============================================================================ */

.s-culture {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--bg);
  color: var(--text);
  /* Never taller than the viewport — the whole composition fits one screen. */
  block-size: 100vh;
  block-size: 100svh;
  max-block-size: 100vh;
  max-block-size: 100svh;
  padding-block: clamp(2rem, 1rem + 3vw, 4rem);
}

/* Fine white seam top + bottom — quiet luxury framing. */
.s-culture::before,
.s-culture::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  block-size: 1px;
  z-index: 1;
  background-color: var(--line);
  pointer-events: none;
}
.s-culture::before { inset-block-start: 0; }
.s-culture::after  { inset-block-end: 0; }

/* ---- Atmosphere: blueprint grid + ghost numeral + soft top wash ---------- */
.s-culture__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* A faint blueprint grid of hairlines fills the void without shouting. */
.s-culture__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right,  rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: clamp(48px, 6vw, 88px) clamp(48px, 6vw, 88px);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 30%, #000 35%, transparent 88%);
          mask-image: radial-gradient(120% 100% at 50% 30%, #000 35%, transparent 88%);
}
/* A soft top spotlight wash, falling to black at the edges (chiaroscuro). */
.s-culture__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 60% at 28% 0%,
      rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(120% 120% at 50% 40%,
      rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.55) 82%, rgba(0, 0, 0, 1) 100%);
}
/* The giant ghost establishing year — anchors the page, fills bottom-end. */
.s-culture__watermark {
  position: absolute;
  inset-block-end: -0.18em;
  inset-inline-end: -0.04em;
  z-index: 0;
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(9rem, 26vw, 26rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.028);
  user-select: none;
  pointer-events: none;
}

/* ---- Content shell -------------------------------------------------------- */
.s-culture__inner {
  position: relative;
  z-index: 2;
}

/* ---- Headline (upper-start, editorial) ----------------------------------- */
.s-culture__head {
  max-inline-size: 46rem;
  margin-block-end: clamp(var(--space-5), 2.4vw, var(--space-7));
}
.s-culture__head .eyebrow { color: var(--text-muted); }
.s-culture__title {
  margin-block: var(--space-4) var(--space-4);
  font-family: var(--font-display);
  font-size: var(--fs-display-3);
  line-height: 1.04;
  letter-spacing: var(--tracking-display);
}
.s-culture__title em { font-style: italic; }
.s-culture__lead {
  max-inline-size: 38rem;
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

/* ---- The split: portrait plate (start) + pillar ledger (end) ------------- */
.s-culture__split {
  display: grid;
  gap: clamp(var(--space-7), 4vw, var(--space-10));
}
@media (min-width: 1024px) {
  .s-culture__split {
    /* ledger (start/left) + the figure (end/right); the founder's column is
       wider so he reads large on his side */
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: center;
  }
  /* A small, bounded lift so the ledger reads slightly high against the
     figure — capped so it can never reach the heading and overlap it. */
  .s-culture__ledger { margin-block-start: clamp(-2rem, -1.5vw, 0rem); }
}

/* ---- The founder figure, floating (no frame / cadre) --------------------- */
.s-culture__figure {
  position: relative;
  display: grid;
  place-items: center;
  margin: 0;
  /* Climb upward into the empty band beside the heading so the founder's head
     rises next to "Our Culture" — without pushing the whole block down and
     pinning the heading to the top edge. */
  margin-block-start: clamp(-12rem, -10vw, -4rem);
  align-self: stretch;
  min-block-size: 0;
}
/* Halo seating the figure in light. */
.s-culture__figure::before {
  content: "";
  position: absolute;
  inset: 6% 12%;
  z-index: 0;
  background: radial-gradient(50% 56% at 50% 42%,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.03) 44%,
    rgba(255, 255, 255, 0) 72%);
  filter: blur(12px);
}
.s-culture__portrait {
  position: relative;
  z-index: 1;
  display: block;
  inline-size: auto;
  /* As tall as the screen allows (filling the section) while still fitting
     under the heading within one viewport. */
  block-size: min(92vh, 74rem);
  aspect-ratio: 1416 / 1596;
  max-inline-size: 100%;
  object-fit: contain;
  filter: drop-shadow(0 22px 44px rgba(0, 0, 0, 0.65));
}

/* ---- The pillar ledger: numbered rows ------------------------------------ */
.s-culture__ledger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Centred against the tall founder figure by the grid (align-items: center);
     a gentle lift is added per-breakpoint below, kept small enough that the
     first row never climbs under the heading. */
  margin-block-start: 0;
}
.s-culture__row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(var(--space-4), 2vw, var(--space-6));
  align-items: start;
  padding-block: clamp(var(--space-5), 2.4vw, var(--space-7));
  padding-inline: clamp(var(--space-4), 2.4vw, var(--space-7));
  border-block-start: 1px solid var(--line);
}
.s-culture__row:last-child { border-block-end: 1px solid var(--line); }

/* The big index numeral — outlined serif, gallery exhibit number. */
.s-culture__index {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem);
  font-weight: var(--fw-light);
  line-height: 1;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.s-culture__row-body { min-inline-size: 0; }
.s-culture__row-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}
.s-culture__row-text {
  margin-block-start: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-muted);
  max-inline-size: 36rem;
  text-align: justify;
  text-justify: inter-word;
}
/* A travelling underline that grows on hover — quiet "this is live" tell. */
/* Smoothly brighten every text colour on hover. */
.s-culture__index,
.s-culture__row-title,
.s-culture__row-text {
  transition: color var(--dur-base) var(--ease);
}
@media (prefers-reduced-motion: no-preference) {
  .s-culture__row { transition: background-color var(--dur-base) var(--ease); }
  .s-culture__row::after {
    content: "";
    position: absolute;
    inset-block-end: -1px;
    inset-inline-start: 0;
    inline-size: 0;
    block-size: 1px;
    background-color: var(--accent);
    transition: inline-size var(--dur-base) var(--ease);
  }
  .s-culture__row:hover,
  .s-culture__row:focus-within { background-color: rgba(255, 255, 255, 0.06); }
  .s-culture__row:hover::after,
  .s-culture__row:focus-within::after { inline-size: 100%; }
}
/* The whole row brightens to full white on hover/focus — yet brighter. */
.s-culture__row:hover .s-culture__index,
.s-culture__row:focus-within .s-culture__index,
.s-culture__row:hover .s-culture__row-title,
.s-culture__row:focus-within .s-culture__row-title { color: #ffffff; }
.s-culture__row:hover .s-culture__row-text,
.s-culture__row:focus-within .s-culture__row-text { color: var(--text); }

/* ============================================================================
   NARROW (<=1023px): single column — head, then the founder figure, then the
   ledger. Here we let the section grow to its content instead of cropping to
   one viewport, drop the negative lifts (they would slide content under the
   heading), and size the portrait by width so the whole figure is visible.
   ============================================================================ */
@media (max-width: 1023px) {
  .s-culture {
    /* Grow to fit the stacked content — the fixed 100vh + overflow:hidden was
       cropping the tall portrait on phones. */
    block-size: auto;
    max-block-size: none;
    padding-block: clamp(3rem, 9vw, 5rem);
  }
  .s-culture__watermark { font-size: clamp(7rem, 34vw, 14rem); }

  /* No negative lift on narrow: the figure leads the stack, so any upward pull
     drags it (and the ledger) up under the "Our Culture" heading. */
  .s-culture__figure {
    order: -1;                 /* figure leads on narrow screens */
    margin-block-start: 0;
    align-self: center;
  }
  .s-culture__ledger { margin-block-start: 0; }

  /* Size the portrait by width so it always shows in full; height follows the
     aspect ratio and is capped so it can't dominate short viewports. */
  .s-culture__portrait {
    block-size: auto;
    inline-size: auto;
    max-inline-size: min(100%, 24rem);
    max-block-size: 62vh;
    margin-inline: auto;
  }
}