/* ============================================================
   Flights Seats Vision — case-study-specific components.
   Inherits everything from /case-studies.css and /styles.css.
   This file ONLY adds patterns that don't exist in the system:
   - Before/after split (used in opening figure)
   - Three-tier card grid (Tiers of Inspiration)
   - WOW factor card grid
   - Matrix of Chaos placeholder (Phase 4 will replace)
   - Two-figure-pair (side-by-side mockups)
   - Cohort comparison grid (3 cards)
   - Tradeoff cards (Stopped / Deferred / Gap)

   All sizes, colors, and typography defer to the existing tokens
   (--ink, --g400, --g500, --hairline, --reading-w, etc.) so these
   components read as part of the same family.
   ============================================================ */

/* -------------------------------------------------------------
   Hero before/after slider uses the system's .case-before-after
   pattern (defined in case-studies.css + auto-wired by case-studies.js).
   No custom styles needed here — the system handles the slider, drag
   knob, labels, and 16:10 framing.
   ------------------------------------------------------------- */

/* -------------------------------------------------------------
   Tiers of Inspiration — vertical stack of three tier bands.
   Each band shows its breadth as a horizontal strip of brand chips
   so the breadth claim ("9 brands surveyed") is visual, not just
   stated. Tier 3 is visually accented to embody the "out-of-industry
   was the breakthrough" argument.
   ------------------------------------------------------------- */
.case-body > .seats-tiers-stack {
  grid-column: content-start / full-end;
  display: flex;
  flex-direction: column;
  margin: 32px 0;
  border-top: var(--hairline);
}

.seats-tier-band {
  padding: 36px 0;
  border-bottom: var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Tier 3 accent — strong left rule only, no fill.
   Background tints would create a card-feel that clashes with the
   editorial register. The 3px left border alone is enough emphasis;
   let typography and content do the rest. */
.seats-tier-band--accent {
  padding-left: 28px;
  border-left: 3px solid var(--ink);
}

.seats-tier-band-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}

.seats-tier-band-head-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.seats-tier-band-num {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--g500);
}

.seats-tier-band--accent .seats-tier-band-num {
  color: var(--ink);
}

.seats-tier-band-name {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}

.seats-tier-band-count {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--g500);
  white-space: nowrap;
  font-feature-settings: "tnum";
}

.seats-tier-band-purpose {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
  max-width: 60ch;
}

/* Brand chip strip */
.seats-brand-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.seats-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: var(--hairline);
  border-radius: 100px;
  background: var(--bg);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  transition: transform 0.18s var(--ease), background 0.18s var(--ease);
}

.seats-brand:hover {
  transform: translateY(-1px);
  background: var(--g50);
}

/* Brand logo inside chip. Drop monochrome SVGs into
   /assets/logos/[brand-slug].svg — see SimpleIcons.org for sources.
   If a logo file is missing, onerror hides the img and the chip
   shows just the brand name. No layout shift. */
.seats-brand-logo {
  width: 14px;
  height: 14px;
  object-fit: contain;
  flex-shrink: 0;
  /* Force monochrome consistency regardless of source colour.
     Leave commented out if you'd prefer brand-coloured logos. */
  /* filter: grayscale(1) brightness(0); opacity: 0.85; */
}

.seats-tier-band--accent .seats-brand {
  background: var(--bg);
}

@media (max-width: 720px) {
  .seats-tier-band-head { flex-direction: column; align-items: flex-start; }
  .seats-tier-band--accent { padding-left: 20px; padding-right: 20px; }
}

/* -------------------------------------------------------------
   "What stood out" patterns — borrows the .case-callout border-left
   treatment so the reader recognises this as load-bearing content
   (same visual language as callouts elsewhere in the case study).
   CSS counters auto-number patterns 01, 02, 03... — signals
   "curated, finite list" → reader processes with attention instead
   of skimming as body copy.
   ------------------------------------------------------------- */
.seats-tier-patterns {
  margin-top: 24px;
  padding: 4px 0 4px 22px;
  border-left: 2px solid var(--ink);
  display: flex;
  flex-direction: column;
  gap: 14px;
  counter-reset: pattern-num;
}

.seats-tier-patterns-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 4px;
  font-feature-settings: "tnum";
}

.seats-pattern {
  position: relative;
  padding-left: 38px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--g500);
  margin: 0;
  max-width: 80ch;
}

.seats-pattern::before {
  content: counter(pattern-num, decimal-leading-zero);
  counter-increment: pattern-num;
  position: absolute;
  left: 0;
  top: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink);
  font-feature-settings: "tnum";
}

.seats-pattern-title {
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.seats-pattern em {
  font-style: italic;
  font-weight: 500;
}

/* Tier 3 narrative variant — no inner border. The outer band already
   carries the 3px ink left rule; nesting another border would create
   a "quote inside a quote" visual. The narrative inherits emphasis
   from being INSIDE the outer accent band, not from its own container. */
.seats-tier-band--accent .seats-tier-patterns {
  border-left: none;
  padding-left: 0;
  padding-top: 8px;
}

.seats-tier-patterns--narrative {
  gap: 0;
}

/* Tier 3 narrative variant — discursive paragraph instead of bullet
   patterns. Visual asymmetry IS the argument that Tier 3 is
   methodological, not a feature scan. */
.seats-tier-narrative {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
  max-width: 65ch;
}

.seats-tier-narrative em {
  font-style: italic;
  font-weight: 500;
}

/* -------------------------------------------------------------
   Matrix of Chaos placeholder (Phase 4 will replace with the
   interactive 4×4 grid). For now: full-width hairline frame.
   ------------------------------------------------------------- */
.case-body > .seats-matrix {
  grid-column: content-start / full-end;
  margin: 32px 0;
}

.seats-matrix-placeholder {
  aspect-ratio: 16 / 10;
  border-style: dashed !important;
}

/* (Note: .seats-figure-pair removed. Desktop UI mockups need full
   content width to be readable — side-by-side at ~548px each was
   too cramped. Pillar 1 and Pillar 2 figures now stack vertically
   at full-width via case-figure--full.) */

/* -------------------------------------------------------------
   .ph-spec inside the slider's .case-before-after-image — without
   this, the spec text inherits the parent's uppercase + 11px and
   becomes unreadable. Mirrors the .case-figure-placeholder .ph-spec
   rule from the system, scoped here.
   ------------------------------------------------------------- */
.case-before-after-image .ph-spec {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--g500);
  text-align: center;
  max-width: 320px;
  line-height: 1.4;
}

/* -------------------------------------------------------------
   Slider hint — small italic line below the case-before-after
   slider telling the reader to drag. Spans the full content width
   (matching the slider above) so it visually centers beneath it.
   Without grid-column, .case-body > * places it in the reading
   column on the left — looks misaligned against the full-width slider.
   ------------------------------------------------------------- */
.case-body > .seats-slider-hint {
  grid-column: content-start / full-end;
  margin: -32px 0 32px;
  font-size: 12px;
  font-weight: 400;
  font-style: italic;
  color: var(--g500);
  text-align: center;
  letter-spacing: -0.005em;
}

/* -------------------------------------------------------------
   Cohort comparison stack — vertical sequence of 3 cohort rows.
   Each row stacks vertically: header (reading column) → figure
   (full-width 16:10) → justification list (reading column).
   Same pattern as the pillar sections so cohorts feel like a
   continuation of the system's editorial rhythm.
   ------------------------------------------------------------- */
.case-body > .seats-cohort-stack {
  grid-column: content-start / full-end;
  display: flex;
  flex-direction: column;
  gap: 80px;
  margin: 40px 0;
}

.seats-cohort-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Header sits in the reading column, not full-width. */
.seats-cohort-head {
  max-width: var(--reading-w);
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.seats-cohort-tag {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  font-feature-settings: "tnum";
}

.seats-cohort-title {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}

.seats-cohort-line {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--g500);
  margin: 0;
  max-width: 60ch;
}

/* Figure goes full row width — it inherits .case-figure--full
   styling. Override the default case-figure margin so it sits
   tighter to the header above it. */
.seats-cohort-row .case-figure {
  margin: 24px 0 0;
}

/* Justification list — italic quoted lines, now inside the
   .seats-cohort-head block (above the figure, not below).
   No divider; it flows naturally as part of the framing text
   alongside the description line. Each quote is the user's voice
   articulating what the cohort flow gives them. */
.seats-cohort-head .seats-cohort-justification {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.seats-cohort-head .seats-cohort-justification li {
  font-size: 14px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.55;
  color: var(--ink);
  padding-left: 0;
}

.seats-cohort-head .seats-cohort-justification li::before {
  content: none;
}

/* (Decision log promoted to case-studies.css as .case-decisions / .case-decision-* — used by both Seats and Scenra.) */

/* -------------------------------------------------------------
   Sub-label utility for hero meta cells (used in role/timeline).
   Mirrors the .case-stat-sub treatment.
   ------------------------------------------------------------- */
.case-hero-meta-sub {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 400;
  color: var(--g500);
  letter-spacing: 0.02em;
}

/* -------------------------------------------------------------
   Stat sub-line — pairs with .case-stat-label for context under
   the big number. Same treatment we use elsewhere.
   ------------------------------------------------------------- */
.case-stat-sub {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--g500);
}

/* -------------------------------------------------------------
   Bottomstrip — match the topstrip treatment (reused from
   Ancillaries case study; these classes already exist in
   case-studies.css for that page, repeating here in case
   they're scoped tightly).
   ------------------------------------------------------------- */
.case-bottomstrip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 64px 0 0;
  margin-top: 96px;
  border-top: var(--hairline);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--g500);
  font-feature-settings: "tnum";
}

.case-bottomstrip-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  transition: color 0.18s var(--ease);
}

.case-bottomstrip-link:hover {
  color: var(--ink);
}

.case-bottomstrip-arrow {
  display: inline-block;
  transition: transform 0.18s var(--ease);
}

.case-bottomstrip-back:hover .case-bottomstrip-arrow {
  transform: translateX(-2px);
}

.case-bottomstrip-next:hover .case-bottomstrip-arrow {
  transform: translateX(2px);
}