/* =============================================================================
   case-fixes.css  —  shared re-layout layer for LEGACY /cases/* pages
   -----------------------------------------------------------------------------
   Loaded only on case pages that carry `main.case-detail--fixed` (added batch by
   batch). It brings the legacy case template up to the yusmp-case-layout skill
   WITHOUT rewriting each page's HTML across 4 locales: it targets the existing
   legacy markup (bare <details> FAQ, inline-styled comparison tables inside the
   narrow feature column, unstyled .case-detail__hero-grid, full-width text walls)
   and repairs the recurring defects Артур has been flagging.

   The reworked flagship cases (limp-vpn / joyjet / edplace) DON'T load this file —
   they have their own scoped CSS + rebuilt markup. Nothing here scopes to a bare
   .case-detail, so it can't leak onto them.

   Device frame is chosen by ACTUAL screenshot orientation, not app type:
     .case-detail--fixed            → neutral branded stage (any orientation, no crop)
     .case-detail--fixed.case-detail--browser → + browser chrome (all-landscape cases)
     .case-detail--fixed.case-detail--phone   → + phone bezel  (all-portrait cases)
   Page runs on the dark Quiet-Aurora theme (navy bg, light text), so lines/tables
   use explicit ruling colours that are actually visible on navy — the theme's
   --c-border (8%) / --c-border-strong (16%) wash out to nothing.
   ========================================================================== */

.case-detail--fixed {
  --cl-line: rgba(255, 255, 255, 0.26);
  --cl-line-soft: rgba(255, 255, 255, 0.14);
  --cl-faq: rgba(255, 255, 255, 0.16);
}

/* ---- 1. Gap after the hero (first block) — cap combined gap to ≤120px -------
   Base hero padding-bottom (≤104px) + first section padding-top (≤88px) stacks
   to ~192px of dead air under the fold. Cap to 64 + 56 = 120px. */
.case-detail--fixed .case-detail__hero { padding-bottom: clamp(40px, 5vw, 64px); }
.case-detail--fixed .case-detail__hero + .case-detail__section { padding-top: clamp(36px, 4.5vw, 56px); }

/* ---- 2. Hero grid fix ------------------------------------------------------
   Legacy markup uses .case-detail__hero-grid / -copy / -visual, but the sitewide
   hero CSS is written for -inner / -cover, so none matched: the hero never became
   a grid and the cover dropped flush under the copy. Restore two columns. */
.case-detail--fixed .case-detail__hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 4.5vw, 56px);
  align-items: center;
}
@media (min-width: 900px) {
  .case-detail--fixed .case-detail__hero-grid { grid-template-columns: 55fr 45fr; }
}
.case-detail--fixed .case-detail__hero-visual { margin-top: clamp(8px, 1.5vw, 16px); }
.case-detail--fixed .case-detail__hero-meta {
  gap: 20px 44px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--c-border);
}

/* ---- 3. Section rhythm + brand-yellow title accent + readable measure ------- */
.case-detail--fixed .section__title { position: relative; }
.case-detail--fixed .case-detail__section > .container > .section__title::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 14px;
  border-radius: 3px;
  background: var(--c-brand);
}
/* Comfortable measure for lone lead paragraphs — kills the full-width "wall". */
.case-detail--fixed .case-detail__section > .container > .section__lead {
  max-width: 68ch;
  font-size: 1.06rem;
  line-height: 1.72;
}
.case-detail--fixed .section__lead + .section__lead { margin-top: 20px; }
.case-detail--fixed .case-highlights { gap: 14px; margin-top: 28px; }
.case-detail--fixed .grid { gap: clamp(20px, 2.4vw, 32px); }
.case-detail--fixed .grid .card { padding: clamp(22px, 2.4vw, 30px); }
.case-detail--fixed .card strong[style] {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

/* ---- 4. Feature rows: balance media against copy, give copy a measure ------- */
@media (min-width: 900px) {
  .case-detail--fixed .case-feature {
    align-items: center;
    gap: clamp(40px, 5vw, 72px);
  }
  .case-detail--fixed .case-feature__copy { max-width: 62ch; }
}
.case-detail--fixed .case-feature__text p { margin-bottom: 16px; }
.case-detail--fixed .case-feature__text p:last-child { margin-bottom: 0; }

/* ---- 5. Device stage (base — any orientation, never crops) ------------------
   Screenshots must not be shown as bare full-width <img>. Wrap each in a soft
   on-brand stage; the image keeps its natural ratio (height:auto, no forced
   aspect-ratio → no distortion / no crop) with a capped height and a lifted card
   shadow. Works for both portrait and landscape shots. */
.case-detail--fixed .case-feature__media {
  display: grid;
  place-items: center;
  padding: clamp(20px, 3.4vw, 40px);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(46, 92, 242, 0.16), rgba(46, 92, 242, 0) 62%),
    linear-gradient(180deg, #f2f6ff 0%, #e9f0ff 100%);
  border: 1px solid var(--c-border);
  overflow: hidden;
}
.case-detail--fixed .case-feature__media img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: clamp(430px, 58vh, 580px);
  border-radius: 16px;
  background: #fff;
  box-shadow:
    0 34px 60px -26px rgba(11, 16, 32, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset;
  transition: transform var(--dur-3, 480ms) var(--ease-out, ease),
              box-shadow var(--dur-3, 480ms) var(--ease-out, ease);
}
.case-detail--fixed .case-feature__media:hover img {
  transform: translateY(-6px);
  box-shadow:
    0 44px 70px -24px rgba(11, 16, 32, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}

/* ---- 5a. PHONE bezel (all-portrait cases) ---------------------------------- */
.case-detail--phone .case-feature__media img {
  max-width: min(300px, 80%);
  border-radius: 34px;
  border: 7px solid #0b1020;
  background: #fff;
}

/* ---- 5b. BROWSER chrome (all-landscape cases) ------------------------------
   Turn the media cell itself into a browser window: light chrome bar with three
   traffic-light dots, then the landscape screenshot at natural width below. */
.case-detail--browser .case-feature__media {
  display: block;
  padding: 0;
  background: #fff;
  border: 1px solid rgba(11, 16, 32, 0.14);
  border-radius: 14px;
  box-shadow:
    0 34px 60px -26px rgba(11, 16, 32, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}
.case-detail--browser .case-feature__media::before {
  content: "";
  display: block;
  height: 30px;
  background:
    radial-gradient(circle at 18px 50%, #ff5f57 0 5px, transparent 6px),
    radial-gradient(circle at 38px 50%, #febc2e 0 5px, transparent 6px),
    radial-gradient(circle at 58px 50%, #28c840 0 5px, transparent 6px),
    linear-gradient(180deg, #f4f5f7 0%, #e9ebef 100%);
  border-bottom: 1px solid rgba(11, 16, 32, 0.1);
}
.case-detail--browser .case-feature__media img {
  width: 100%;
  max-width: none;
  max-height: none;
  border-radius: 0;
  box-shadow: none;
}

/* ---- 6. Hero cover polish -------------------------------------------------- */
.case-detail--fixed .case-detail__hero-cover img {
  filter: drop-shadow(0 20px 40px rgba(11, 16, 32, 0.28));
}

/* ---- 7. Comparison table — lifted OUT of the feature copy, full-width below --
   The limp-vpn pattern (Артур 2026-07-03): the feature row stays a clean two
   columns — screenshot LEFT, explanatory copy RIGHT — and the wide comparison
   table is moved by build/relayout_cases.py into a `.cl-compare--full` block
   that sits full-width DIRECTLY BELOW the feature row. This kills the old defect
   where the table was jammed into the ~60ch copy column (scrolled, read as
   broken) and the later "flex-column, image on the bottom" workaround.
   Legacy tables are inline-styled with row lines rgba(127,127,127,.2) that are
   invisible on navy, so we re-rule them dark-native (visible lines, air, zebra). */
.case-detail--fixed .cl-compare--full {
  margin-top: clamp(32px, 4.5vw, 56px);
}
.case-detail--fixed .cl-compare--full > div[style*="overflow"] {
  border: 1px solid var(--cl-line);
  border-radius: var(--radius-lg);
  background: var(--c-surface-card);
  box-shadow: 0 24px 60px -34px rgba(0, 0, 0, 0.7);
  padding: clamp(6px, 1vw, 12px) clamp(10px, 1.4vw, 18px);
}
.case-detail--fixed .cl-compare--full table { width: 100%; }
.case-detail--fixed .cl-compare--full table th,
.case-detail--fixed .cl-compare--full table td {
  padding: 15px 18px !important;
  border-bottom-color: var(--cl-line) !important;
}
.case-detail--fixed .cl-compare--full table thead tr,
.case-detail--fixed .cl-compare--full table thead th {
  border-bottom-color: var(--cl-line) !important;
}
.case-detail--fixed .cl-compare--full table tr {
  border-bottom-color: var(--cl-line) !important;
}
.case-detail--fixed .cl-compare--full table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.05);
}
.case-detail--fixed .cl-compare--full table caption {
  color: var(--c-text);
  padding: 4px 6px 12px !important;
}

/* ---- 7c. Compare feature row → text LEFT / image RIGHT (limp-vpn --reverse) --
   Артур 2026-07-03: the feature row that leads the full-width comparison table
   now mirrors the limp-vpn compare block exactly — explanatory copy on the LEFT,
   screenshot on the RIGHT. Targeted with :has() on the one feature that is
   immediately followed by a .cl-compare--full block, so no per-page HTML edits
   are needed and only that block flips (the other feature rows keep alternating).
   Ordered at EVERY width, not just desktop, so the heading always leads: on
   mobile the single column reads heading → text → image, never a lone image on
   top (Артур's "no orphan image" rule). */
.case-detail--fixed .case-feature:has(+ .cl-compare--full) .case-feature__copy { order: 1; }
.case-detail--fixed .case-feature:has(+ .cl-compare--full) .case-feature__media { order: 2; }

/* ---- 7b. Two big text blocks → side-by-side columns (limp-vpn .cl-prose) -----
   Any run of 2+ consecutive .section__lead paragraphs is wrapped (by
   build/relayout_cases.py) in a .cl-prose block. On desktop we columnise that
   wrapper so the two essays sit side by side at a ~55–68ch measure instead of
   stacking as two full-width walls. The <h2> stays OUTSIDE .cl-prose, so there
   is no `column-span:all` (the Safari multicol-collapse bug). The
   :not(:has(.grid)) guard keeps any prose that also holds a card grid single-
   flow, so the grid is never fragmented by multicol. */
.case-detail--fixed .cl-prose { max-width: 1000px; }
.case-detail--fixed .cl-prose > .section__lead {
  font-size: 1.06rem;
  line-height: 1.72;
  max-width: 68ch;
}
@media (min-width: 761px) {
  .case-detail--fixed .cl-prose:not(:has(.grid)) {
    column-count: 2;
    column-gap: clamp(40px, 4.5vw, 72px);
  }
  .case-detail--fixed .cl-prose:not(:has(.grid)) > .section__lead {
    max-width: none;
    margin-top: 0;
    orphans: 3;
    widows: 3;
  }
  .case-detail--fixed .cl-prose:not(:has(.grid)) > .section__lead + .section__lead { margin-top: 1.05rem; }
  .case-detail--fixed .cl-prose:has(.grid) > .section__lead { max-width: 68ch; }
}

/* ---- 8. FAQ — pictograms + hover on the legacy bare <details> ---------------
   Legacy FAQ is a bare <details><summary><strong>Q</strong></summary><p>A</p>.
   Bare <details> has no +/× pictogram and no hover cue (the regression Артур
   flagged on joyjet). Rather than rewrite the markup in 4 locales, style the
   legacy <details> to match the site accordion: card, circular +/× pictogram,
   explicit hover. Scoped to direct children of the FAQ section container. */
.case-detail--fixed .case-detail__section > .container > details {
  max-width: 900px;
  margin: 0 0 12px;
  border: 1px solid var(--cl-faq);
  border-radius: var(--radius-md);
  background: var(--c-surface-card);
  overflow: hidden;
  transition: border-color var(--dur-2, 220ms) var(--ease, ease);
}
.case-detail--fixed .case-detail__section > .container > details:hover { border-color: var(--c-cta); }
.case-detail--fixed .case-detail__section > .container > details[open] { border-color: var(--c-cta); }
.case-detail--fixed .case-detail__section > .container > details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  font-weight: 800;
  font-size: 1.08rem;
  color: var(--c-text);
  letter-spacing: -0.01em;
}
.case-detail--fixed .case-detail__section > .container > details > summary::-webkit-details-marker { display: none; }
.case-detail--fixed .case-detail__section > .container > details > summary strong { font-weight: 800; }
.case-detail--fixed .case-detail__section > .container > details > summary::after {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c-cta-soft);
  color: var(--c-cta);
  font-size: 1.25rem;
  line-height: 1;
  transition: background var(--dur-2, 220ms) var(--ease, ease),
              color var(--dur-2, 220ms) var(--ease, ease);
}
.case-detail--fixed .case-detail__section > .container > details[open] > summary::after {
  content: "\00d7";
  background: var(--c-cta);
  color: #fff;
  font-size: 1.5rem;
}
.case-detail--fixed .case-detail__section > .container > details:hover > summary::after {
  background: var(--c-cta);
  color: #fff;
}
.case-detail--fixed .case-detail__section > .container > details > p {
  margin: 0;
  padding: 0 20px 18px;
  color: var(--c-text-muted);
  line-height: 1.6;
}

/* ---- 9. Motion honours reduced-motion (base .case-feature__media hover) ----- */
@media (prefers-reduced-motion: reduce) {
  .case-detail--fixed .case-feature__media img,
  .case-detail--fixed .case-feature__media:hover img { transition: none; transform: none; }
}