/* =========================================================
   Story CSS
   Romm Coffee — editorial "magazine" story layout (About page).

   Design language adapted from dishoom.com: flowing serif prose,
   asymmetric documentary photos, and small italic captions with a
   "Yukarıda / Sağda / Solda" tag. Re-skinned to the teal brand
   (paper-light stage, not Dishoom's dark/cream) and filled with
   real Romm photos + real brand facts.

   Works with:
   - Pages/About.cshtml (.story-editorial)
   - wwwroot/images/about/story-*.jpg
   - Lora display serif (design-tokens.css)
========================================================= */

.story-editorial {
  background: var(--color-surface-soft, #eaf1f1);
  padding-block: var(--section-padding-lg, clamp(5rem, 9vw, 8rem));
}

.story-editorial-inner {
  width: min(var(--container-lg, 1120px), calc(100% - 2rem));
  margin-inline: auto;
}

/* ---------- Heading ---------- */

.story-editorial-head {
  max-width: 34ch;
  margin-bottom: var(--space-8, 3rem);
}

.story-editorial-title {
  margin: var(--space-2, 0.5rem) 0 0;
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 4vw, var(--text-4xl, 3.25rem));
  line-height: var(--line-tight, 1.15);
  letter-spacing: -0.015em;
  color: var(--color-text, #12292d);
  text-wrap: balance;
}

/* Thin double rule under the heading — a quiet retro marker. */
.story-editorial-head::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 0;
  margin-top: var(--space-5, 1.5rem);
  border-top: 1px solid var(--color-secondary, #649ea1);
  border-bottom: 1px solid var(--color-secondary, #649ea1);
  padding-top: 3px;
}

/* ---------- Prose (serif, editorial) ---------- */

.story-prose {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.65;
  color: var(--color-text, #12292d);
}

.story-prose p {
  margin: 0 0 1.1em;
  text-wrap: pretty;
}

.story-prose p:last-child {
  margin-bottom: 0;
}

/* A larger opening line, like a magazine standfirst. */
.story-prose .lead {
  font-size: 1.15em;
  line-height: 1.5;
  color: var(--color-primary, #06515d);
}

/* ---------- Figures + captions ---------- */

.story-fig {
  margin: 0;
}

.story-fig img,
.story-fig video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm, 0.5rem);
  box-shadow: var(--shadow-md, 0 12px 28px rgba(16, 24, 40, 0.1));
}

/* Video figure keeps the source 16:9 (no awkward 21:9 crop). */
.story-fig-video video {
  aspect-ratio: 16 / 9;
  background: #0d0d0f;
}

.story-figcaption {
  margin-top: var(--space-3, 0.75rem);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--line-normal, 1.6);
  color: var(--color-text-muted, #5f7a7d);
}

/* "Yukarıda" / "Sağda" tag — upright, spaced, brand ink. */
.story-figcaption .fig-tag {
  font-style: normal;
  font-weight: var(--weight-bold, 700);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.72em;
  color: var(--color-secondary-dark, #3f7b7e);
  margin-right: 0.5em;
}

/* ---------- Magazine composition ---------- */

.story-row {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

.story-row + .story-row {
  margin-top: clamp(2.5rem, 6vw, 5rem);
}

@media (min-width: 800px) {
  /* Row 1: wide origin photo left, opening prose right. */
  .story-row-1 {
    grid-template-columns: 7fr 5fr;
  }

  /* Row 2: prose left, one tall photo right. */
  .story-row-2 {
    grid-template-columns: 7fr 5fr;
    align-items: center;
  }

  /* Row 3: full-bleed-ish farm panorama. */
  .story-row-3 {
    grid-template-columns: 1fr;
  }
}

/* Tall figures keep a portrait ratio; wide ones stay panoramic. */
.story-fig-tall img {
  aspect-ratio: 3 / 4;
}

.story-fig-wide img {
  aspect-ratio: 21 / 9;
}

@media (max-width: 799px) {
  .story-fig-tall img {
    aspect-ratio: 4 / 3;
  }

  /* Single column: "Sağda/Solda" positional tags no longer apply. */
  .story-figcaption .fig-tag {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-fig img {
    box-shadow: var(--shadow-sm, 0 4px 12px rgba(16, 24, 40, 0.08));
  }
}