/* =========================================================================
   StudioFolio — editorial building blocks (opt-in)
   =========================================================================
   Loads AFTER css/studiofolio-seo.css, and only on pages that use these
   patterns. No existing page links it yet: each redesign stage (M5+) opts
   in and composes the blocks it needs. Every class is prefixed (.ed-*,
   .shot*) so nothing here can restyle an existing page by accident.

   Sections:
     1. Screenshot figure (.shot)  — real product screenshots, <picture>
     2. Editorial hero (.ed-hero)
     3. Asymmetric split (.ed-split)
     4. Full-width product showcase (.ed-showcase)
     5. Reading column (.ed-prose)
     6. Photography-led feature (.ed-photo)
     7. Product detail (.ed-detail)
     8. Comparison table (.ed-compare)
     9. Quotation (.ed-quote)
    10. Call to action (.ed-cta)
    11. Shared responsive rules

   Markup conventions and do/don't guidance: docs/marketing/DESIGN_SYSTEM.md.
   ========================================================================= */

/* Shared editorial type: the fluid scale from the tokens. */
.ed-display { font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
.ed-h2 { font-size: var(--text-h2); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }
.ed-h3 { font-size: var(--text-h3); line-height: 1.2; letter-spacing: -0.01em; }
.ed-lede { font-size: var(--text-lede); line-height: var(--leading-body); color: var(--text-muted); max-width: var(--measure-lede); margin: 20px 0 0; }
.ed-eyebrow {
  display: block; margin: 0 0 14px;
  font-size: var(--text-eyebrow); font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--gold-ink);
}
.ed-wrap-wide { max-width: var(--wrap-wide); margin: 0 auto; padding: 0 var(--gutter); }
.ed-wrap-narrow { max-width: var(--wrap-narrow); margin: 0 auto; padding: 0 var(--gutter); }

/* ---- 1. Screenshot figure ----
   <figure class="shot"> wrapping a <picture> of a real capture from
   tools/marketing-shots (WebP srcset + JPEG fallback, explicit width and
   height from dist/manifest.json). The frame is deliberately quiet: a
   hairline, a small radius, a soft shadow. No browser chrome, badges or
   overlays. The image is never scaled above its 1x width, so text in the
   UI stays sharp. */
.shot { margin: 0; }
.shot picture { display: block; }
.shot img {
  display: block; width: 100%; height: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-shot);
}
.shot figcaption {
  margin-top: 14px; max-width: var(--measure);
  font-size: var(--text-small); line-height: 1.55; color: var(--text-muted);
}
.shot figcaption b { color: var(--text); font-weight: var(--weight-semibold); }
/* Desktop capture: never wider than its 1x size (1440px). */
.shot--desktop { max-width: 1440px; }
/* Phone capture: shown at phone scale, with a rounder frame. */
.shot--phone { max-width: 320px; }
.shot--phone img { border-radius: 22px; }
/* A screenshot sitting on a sand panel: the panel, not the image, carries the depth. */
.shot--on-panel { background: var(--bg-alt); border-radius: var(--radius-lg); padding: clamp(16px, 4vw, 48px); }
.shot--on-panel img { box-shadow: 0 1px 2px rgba(33,31,27,.05), 0 12px 28px -14px rgba(64,54,38,.25); }
/* Art-directed figure (picture.py --phone): at <=640px the <picture> swaps
   to the phone capture of the same screen, so the frame becomes a phone
   frame. The breakpoint must match picture.py's PHONE_MEDIA. */
@media (max-width: 640px) {
  .shot--art { max-width: 300px; margin-left: auto; margin-right: auto; }
  .shot--art img { border-radius: 22px; }
  .shot--art figcaption { max-width: 300px; }
}
/* Desktop and phone of the same screen side by side (never overlapping). */
/* The phone is drawn at roughly a quarter of the pair's width so it reads as
   the same screen at phone scale, not as the hero of the pair. */
.shot-pair { display: grid; grid-template-columns: minmax(0, 3fr) minmax(120px, 1fr); gap: clamp(16px, 2.5vw, 32px); align-items: end; }
.shot-pair .shot--phone { max-width: none; }

/* ---- 2. Editorial hero ----
   Wide, type-led, generous whitespace. Media (a screenshot or a licensed
   photograph) sits below the copy at full content width. */
.ed-hero { padding: clamp(48px, 8vw, 112px) 0 clamp(40px, 6vw, 80px); }
.ed-hero__copy { max-width: 860px; }
.ed-hero__title { margin: 0; font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
.ed-hero__lede { font-size: var(--text-lede); color: var(--text-muted); max-width: var(--measure-lede); margin: 24px 0 32px; }
.ed-hero__media { margin-top: clamp(40px, 6vw, 72px); }

/* ---- 3. Asymmetric split ----
   Text and media in unequal columns (5:7 by default). --reverse puts the
   media first on wide screens; --media-wide gives media more room. Source
   order stays copy-first, so it reads correctly on phones and to screen
   readers. */
.ed-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--split-gap); align-items: center; }
.ed-split--reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.ed-split--reverse > .ed-split__copy { order: 2; }
.ed-split--media-wide { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.ed-split--reverse.ed-split--media-wide { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.ed-split--top { align-items: start; }
.ed-split__copy > :first-child { margin-top: 0; }
.ed-split__copy p { color: var(--text-muted); font-size: var(--text-body); line-height: 1.65; max-width: 30rem; }

/* ---- 4. Full-width product showcase ----
   A short heading over one large screenshot that is allowed to run wider
   than the text column (up to --wrap-wide). */
.ed-showcase__head { max-width: 680px; margin-bottom: clamp(28px, 4vw, 48px); }
.ed-showcase__head p { color: var(--text-muted); font-size: var(--text-body); line-height: 1.65; margin: 14px 0 0; }
.ed-showcase .shot { margin: 0 auto; }

/* ---- 5. Reading column ----
   Long-form copy (guides, policies, comparisons) at a comfortable measure. */
.ed-prose { max-width: var(--measure); font-size: 1.0625rem; line-height: var(--leading-reading); }
.ed-prose > * + * { margin-top: 1.1em; }
.ed-prose > :first-child { margin-top: 0; }
.ed-prose h2 { font-size: var(--text-h3); line-height: 1.2; margin-top: 2.2em; }
.ed-prose h3 { font-family: var(--font-body); font-size: 1.0625rem; font-weight: var(--weight-bold); letter-spacing: 0; margin-top: 1.8em; }
.ed-prose h2 + *, .ed-prose h3 + * { margin-top: .6em; }
.ed-prose p, .ed-prose ul, .ed-prose ol { margin-bottom: 0; }
.ed-prose ul, .ed-prose ol { padding-left: 1.25em; }
.ed-prose li + li { margin-top: .4em; }
.ed-prose a { color: var(--gold-ink); font-weight: var(--weight-semibold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ed-prose a:hover { color: var(--text); }
.ed-prose blockquote { margin-left: 0; padding-left: 20px; border-left: 2px solid var(--gold); font-family: var(--font-display); font-size: 1.25rem; line-height: 1.5; }

/* ---- 6. Photography-led feature ----
   A licensed photograph leads; copy sits beside or below it. Only for
   photographs recorded in tools/marketing-shots/image-licences.csv.
   aspect-ratio + object-fit keep the frame stable while it loads. */
.ed-photo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--split-gap); align-items: end; }
.ed-photo__media { margin: 0; }
.ed-photo__media img { width: 100%; height: auto; aspect-ratio: var(--ed-photo-ratio, 4 / 5); object-fit: cover; border-radius: var(--radius-sm); }
.ed-photo__media figcaption { margin-top: 10px; font-size: var(--text-xs); color: var(--text-muted); }
.ed-photo__copy { padding-bottom: clamp(0px, 3vw, 32px); }
.ed-photo__copy p { color: var(--text-muted); font-size: var(--text-body); line-height: 1.65; }

/* ---- 7. Product detail ----
   One screenshot plus a short list of what it shows. Points are a real
   list (<ol>/<dl>), not tooltips floating over the image. */
.ed-detail { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--split-gap); align-items: start; }
.ed-detail__points { list-style: none; margin: 0; padding: 0; counter-reset: ed-point; }
.ed-detail__points li { counter-increment: ed-point; position: relative; padding: 18px 0 18px 40px; border-top: 1px solid var(--border); }
.ed-detail__points li:last-child { border-bottom: 1px solid var(--border); }
.ed-detail__points li::before {
  content: counter(ed-point, decimal-leading-zero);
  position: absolute; left: 0; top: 20px;
  font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: .06em; color: var(--gold-ink);
}
.ed-detail__points h3 { font-family: var(--font-body); font-size: 15px; font-weight: var(--weight-bold); letter-spacing: 0; margin: 0 0 4px; }
.ed-detail__points p { margin: 0; color: var(--text-muted); font-size: var(--text-small); line-height: 1.6; }

/* ---- 8. Comparison table ----
   A real <table> with a <caption> and <th scope>. On narrow screens the
   wrapper scrolls horizontally inside itself (it is focusable and
   labelled), so the page never does. */
.ed-compare { overflow-x: auto; }
.ed-compare:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; border-radius: 4px; }
.ed-compare table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--text-small); }
.ed-compare caption { text-align: left; caption-side: top; padding-bottom: 14px; font-size: var(--text-small); color: var(--text-muted); }
.ed-compare th, .ed-compare td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.ed-compare thead th { font-size: var(--text-eyebrow); font-weight: var(--weight-heavy); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); border-bottom-color: var(--border-strong); }
.ed-compare tbody th { font-weight: var(--weight-semibold); color: var(--text); }
.ed-compare td { color: var(--text-muted); }
.ed-compare .is-ours { background: color-mix(in srgb, var(--bg-alt) 60%, transparent); color: var(--text); }

/* ---- 9. Quotation ----
   For real, permissioned customer words only, attributed by name. */
.ed-quote { margin: 0; max-width: 820px; }
.ed-quote blockquote { margin: 0; font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem); line-height: 1.3; letter-spacing: -0.01em; color: var(--text); }
.ed-quote blockquote p { margin: 0; }
.ed-quote blockquote p::before { content: "\201C"; }
.ed-quote blockquote p::after { content: "\201D"; }
.ed-quote figcaption { margin-top: 20px; font-size: var(--text-small); color: var(--text-muted); }
.ed-quote figcaption b { display: block; color: var(--text); font-weight: var(--weight-semibold); }
.ed-quote--center { margin: 0 auto; text-align: center; }

/* ---- 10. Call to action ----
   Quieter than the existing .final-cta block: a hairline, a heading, one
   primary action and an optional text link. */
.ed-cta { border-top: 1px solid var(--border-strong); padding-top: clamp(32px, 5vw, 56px); display: flex; align-items: end; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; }
.ed-cta__title { margin: 0; max-width: 640px; font-size: var(--text-h2); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }
.ed-cta__actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.ed-cta__link { font-size: 14px; font-weight: var(--weight-bold); color: var(--gold-ink); }
.ed-cta__link:hover { color: var(--text); }
.ed-cta__note { flex-basis: 100%; margin: 0; font-size: var(--text-xs); color: var(--text-muted); }

/* ---- 11. Shared responsive rules ---- */
@media (max-width: 980px) {
  .ed-split, .ed-split--reverse, .ed-split--media-wide, .ed-split--reverse.ed-split--media-wide, .ed-photo, .ed-detail { grid-template-columns: minmax(0, 1fr); }
  .ed-split--reverse > .ed-split__copy { order: initial; }
  .ed-photo__copy { padding-bottom: 0; }
}
@media (max-width: 640px) {
  .shot-pair { grid-template-columns: minmax(0, 1fr); }
  .shot-pair .shot--phone { max-width: 260px; margin: 0 auto; }
  .ed-cta { align-items: start; }
}