/* mobile-v2.css — VectorOS landing v2 · mobile optimisation
   ------------------------------------------------------------
   Strategy:
     · Tighten section + hero padding (desktop has 96–128px; mobile 56–72px).
     · Reduce H2 / lede ramp so a section header is one screen, not three.
     · Convert the four long card grids (pain · tg · sources · refs) into
       horizontal SCROLL-SNAP rotators with a progress hairline and a
       "01 / 04" counter that auto-advances. One card on screen at a time
       with a small peek of the next one. Swipe pauses; resumes after 2 s.
     · Keep the pull-quote, pos-chart, quiet pause, price card, and final
       CTA as full-width single columns — they're already compact.

   This file is mobile-only (single @media block) so it never touches desktop
   layout. JS toggles .m-rot-target on the four target grids; the chrome
   (counter + progress) is rendered alongside.
*/

/* ============================================================
   1 · Section + hero density
   ============================================================ */
@media (max-width: 700px) {
  body { --pad-section: 64px; --pad-block: 32px; --pad-card: 22px; --gap-card: 12px; }

  /* Hero — typewriter owns the first screen. Layout is a flex column
     that fills the section height: the heading + lede form a group
     centred in the free space above, and the CTA sits pinned to the
     bottom of the screen. min-height on the heading reserves enough
     vertical space for the longest question (5 lines) so the lede +
     CTA never shift while typing. */
  .hero--v2 .shell {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .hero--v2 .hero__content {
    max-width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .tw-heading {
    font-size: clamp(34px, 9.6vw, 52px);
    line-height: 1.05;
    max-width: 13ch;
    /* Reserve worst-case wrap (longest question wraps to ~5 lines at
       13ch). Locks the lede+CTA position so typing never reflows. */
    min-height: calc(1.05em * 5);
    margin: auto 0 0;  /* heading pushed down by auto top margin */
  }

  .hero--v2 .hero__lede {
    font-size: 17px;
    line-height: 1.5;
    margin: 18px 0 0;  /* sits right under the heading */
  }

  /* CTA pinned to the bottom of the hero screen; auto top margin
     absorbs the remaining slack. Combined with the heading's auto
     top margin above, the heading+lede group ends up vertically
     centred in the free space. */
  .hero--v2 .cta-row {
    margin-top: auto;
    padding-top: 40px;  /* visual breathing room above the buttons */
  }

  .cta {
    height: 48px;
    padding: 0 18px;
    font-size: 14.5px;
    width: 100%;
    justify-content: center;
    white-space: nowrap;
    min-width: 0;
  }
  .cta svg { flex-shrink: 0; }
  .cta-row { gap: 10px; flex-wrap: nowrap; flex-direction: column; align-items: stretch; }
  /* Final CTA + price card CTAs — keep wide-stack pattern there too */
  .final .cta-row { flex-direction: column; }
  .price-card .cta-row { flex-direction: column; }

  /* Topbar — wordmark only, drop nav clutter, keep CTA after scroll. */
  .topbar.is-scrolled .topbar__cta { display: inline-flex; height: 32px; padding: 0 12px; font-size: 12px; }

  /* Pull-quote — quieter on phones, no min-height. */
  .pull { min-height: 0; padding: 64px 0; }
  .pull__text { font-size: clamp(28px, 8vw, 40px); }
  .pull__text .lead-in { margin-bottom: 12px; }
  .pull__beam { opacity: 0.55; }

  /* Section heads — H2 lands first, lede stays subordinate. */
  .section { padding: 56px 0; }
  .section-head { gap: 14px; margin-bottom: 28px; }
  .section-head h2 {
    font-size: clamp(28px, 7.2vw, 36px);
    line-height: 1.05;
    margin-top: 8px;
  }
  .section-head .lede {
    font-size: 14.5px;
    line-height: 1.55;
    margin-top: 14px !important;
  }
  .section-head .num { font-size: 10px; }

  /* Section captions — short, single-line. */
  .section-caption {
    font-size: 10px;
    margin-top: 28px;
    line-height: 1.4;
  }

  /* Quiet pause — same composition, tighter. */
  .quiet { padding: 72px 0; }
  .quiet p { font-size: 18px; line-height: 1.5; }

  /* Pricing — single column already; reduce internal padding. */
  .price-card__left, .price-card__right { padding: 24px; }
  .price-readout { font-size: 48px; }
  .price-includes { gap: 12px; }
  .price-includes .desc { font-size: 12.5px; }

  /* Final CTA */
  .final { padding: 72px 0 80px; }
  .final--v2 h2 { font-size: clamp(40px, 11vw, 64px); }
  .final p { font-size: 14.5px; }

  /* Footer wraps softly */
  footer { padding: 28px 0 40px; }
  footer .shell { gap: 16px; }
  footer .links { gap: 14px; flex-wrap: wrap; }
}

/* ============================================================
   2 · Auto-rotator — one card at a time + progress hairline
   ============================================================
   .m-rot-chrome is rendered by JS just BEFORE each rotator target;
   it carries the "01 / 04" counter and the progress hairline.
   The grid itself becomes a horizontal scroll-snap row.
*/

/* Desktop: chrome hidden, grids untouched. */
.m-rot-chrome { display: none; }

@media (max-width: 700px) {
  .m-rot-chrome {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 18px;
    padding: 0;
  }
  .m-rot-id {
    font-family: var(--font-mono);
    font-size: var(--t-mono-s);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    color: var(--fg-3);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    line-height: 1;
  }
  .m-rot-id em {
    font-style: normal;
    color: var(--fg-1);
    margin-right: 2px;
  }
  .m-rot-id span.sep { color: var(--fg-4); margin: 0 4px; }
  .m-rot-progress {
    flex: 1;
    height: 1px;
    background: var(--line-2);
    position: relative;
    overflow: hidden;
  }
  .m-rot-progress > i {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--accent);
    will-change: width;
  }

  /* The rotator grid itself — convert grid → flex scroll-snap row */
  .m-rot-target {
    /* Kill the desktop grid */
    display: flex !important;
    grid-template-columns: none !important;
    /* Bleed out to the screen edges so cards peek nicely */
    margin: 0 calc(var(--m-bleed, 20px) * -1);
    padding: 4px calc(var(--m-bleed, 20px) - 4px) 8px;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Kill the outer grid hairline; each card carries its own. */
    border: 0 !important;
    background: transparent !important;
  }
  .m-rot-target::-webkit-scrollbar { display: none; }

  .m-rot-target > * {
    flex: 0 0 86% !important;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    min-height: 0 !important;
    grid-column: auto !important;
    /* Restore card chrome — every cell becomes a free-floating card. */
    border: var(--border) !important;
    background: var(--bg-1) !important;
  }

  /* Accent treatment for the SOON / wide source cell when free-floating. */
  .src-cell--wide {
    background: var(--bg-2) !important;
  }
  .src-cell--wide::before { display: block; }

  /* Pain-cell internal borders are designed for a grid — neutralise. */
  .pain-cell { border-right: var(--border) !important; }
  .pain-cell:not(:last-child) { border-bottom: var(--border) !important; }

  /* Refs grid: every cell becomes a free-floating card. */
  .ref-cell {
    border-right: var(--border) !important;
    border-bottom: var(--border) !important;
    min-height: 0 !important;
    padding: 22px;
  }

  /* ----------------------------------------------------------
     Section 02 (.tg-grid) is NOT rotated — it has its own
     choreography (tg-animator.js). On mobile the three cards
     stack in a single slot and cross-fade through, with the
     animator's progress chrome rendered above.
     ---------------------------------------------------------- */
  .tg-grid {
    display: block !important;
    position: relative;
    /* Reserve room for one phone-proportion card. The shell sets
       the width; aspect-ratio gives the height. */
    aspect-ratio: 9 / 15;
    max-height: calc(100svh - var(--topbar-h, 56px) - 280px);
    min-height: 440px;
  }
  .tg-grid .tg-card {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
    /* On mobile cards are stacked; the animator toggles .is-on /
       .is-off to crossfade between them. */
    opacity: 0;
    transform: none;
    transition: opacity .5s ease;
    pointer-events: none;
  }
  .tg-grid .tg-card.is-on {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    z-index: 2;
  }
  .tg-grid .tg-card.is-off {
    opacity: 0;
    z-index: 1;
  }
  .tg-grid .tg-msg { font-size: 13px; padding: 11px 13px; }
  .tg-grid .tg-thread { padding: 16px 14px 20px; gap: 8px; }
  .tg-grid .tg-msg .readout {
    grid-template-columns: max-content 1fr;
    column-gap: 10px;
    row-gap: 3px;
  }

  /* Reduced-motion / no-JS fallback on mobile — abandon the stacking
     and lay cards out as a normal column so all three are readable. */
  .tg-grid.tg-static {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    aspect-ratio: auto;
    max-height: none;
    min-height: 0;
  }
  .tg-grid.tg-static .tg-card {
    position: relative;
    inset: auto;
    width: auto;
    height: auto;
    aspect-ratio: auto;
    /* No animator on mobile → cards must be visible by default
       (override the opacity:0 / pointer-events:none used by the
       animator's stacked-layer mode). */
    opacity: 1;
    pointer-events: auto;
    transition: none;
  }

  /* Sources grid: each cell becomes a card. */
  .src-cell {
    padding: 22px;
    min-height: 0 !important;
  }
  .src-cell__title { font-size: 22px; }
  .src-cell--wide .src-cell__title { font-size: 22px; }

  /* Pain cell typography on mobile */
  .pain-cell__slogan { font-size: 22px; }
  .pain-cell { gap: 16px; padding: 22px; }
}

/* ============================================================
   3 · Pos-chart (kept linear, just tightened) and pricing card
   ============================================================ */
@media (max-width: 700px) {
  /* Two-column transposed map (see landing-v2.css) — tighten node type so
     two columns of nodes fit a portrait screen without crowding. */
  .pc-node__name { font-size: 14.5px; line-height: 1.25; }
  .pc-node p { font-size: 12px; line-height: 1.45; }

  /* Drop the second decorative grid line in hero on mobile — keeps the
     stage quiet so the typewriter dominates. */
  .hero__grid--bright { display: none; }

  /* Accessibility: smaller tap focus rings still visible */
  .m-rot-target:focus-visible { outline: 1px solid var(--fg-1); outline-offset: 2px; }
}

/* ============================================================
   4 · Reduce motion — disable auto-advance progress bar
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .m-rot-progress > i { transition: none !important; }
}

/* ============================================================
   5 · Full-screen sections on mobile — without scroll snap
   ------------------------------------------------------------
   Each top-level section claims AT LEAST one viewport height so the
   user's focus lands on a single message at a time (especially the
   hero — the typewriter must own the first screen, section 01 sits
   below the fold). Content that's longer than 100svh grows naturally.

   We DO NOT enforce scroll-snap-type: the snap was pulling the page
   to nearest section once momentum settled, which read as "the page
   is scrolling on its own". Native scrolling, full-height sections —
   both at the same time.
   ============================================================ */
@media (max-width: 700px) {
  .hero--v2,
  .section,
  .pull,
  .quiet,
  .final {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
  }

  /* Hero anchors at the top so the typewriter sits right below the
     topbar; the content area then fills the rest of the screen. */
  .hero--v2 {
    justify-content: flex-start;
    padding-top: calc(var(--topbar-h, 56px) + 56px);
    padding-bottom: 56px;
  }

  /* Block padding is now the safety margin for content that does
     overflow 100svh — we don't need the heavy desktop padding. */
  .section { padding: 48px 0; }
  .pull    { padding: 48px 0; }
  .quiet   { padding: 48px 0; }
  .final   { padding: 56px 0; }

  .hero--v2 > .shell,
  .section  > .shell,
  .pull     > .shell,
  .quiet    > .shell,
  .final    > .shell {
    width: 100%;
  }

  footer { min-height: 0; }
}

/* ============================================================
   6 · Full-bleed visuals as backgrounds (pull-quote + final CTA)
   ------------------------------------------------------------
   On phones the SphereField and the BeamLocus sit BEHIND the copy as
   ambient backgrounds (matching desktop), instead of dropping into the
   flow as a separate 360–420px block above/below the text. The headlines
   keep a ground-coloured halo so they stay legible over the motion.
   ============================================================ */
@media (max-width: 700px) {
  /* «Я управляю или реагирую?» — sphere field is a full-bleed background
     behind the headline. Overrides the ≤1000px rule that turns it into a
     relative 420px block. */
  .pull--field .pull__field {
    position: absolute;
    inset: 0;
    left: 0;
    height: auto;
  }

  /* «Пора вернуть фокус» — the BeamLocus is pinned to the TOP of the
     section as a background so the beam originates at the seam with the
     white manifesto section above ("луч упирается в белую секцию") and
     strikes down into the locus. Text is pushed to the lower half.
     Overrides the ≤1000px rule (relative · 360px · order: 2). */
  .final--beam { justify-content: flex-end; }
  .final--beam .final__beam {
    position: absolute;
    inset: auto;
    top: 0;
    left: 0;
    right: 0;
    height: 48svh;
    order: 0;
    z-index: 0;
    pointer-events: none;
  }
  .final--beam .shell { position: relative; z-index: 1; }
  .final--beam h2,
  .final--beam p {
    text-shadow: 0 0 16px var(--bg-0), 0 0 32px var(--bg-0);
  }
}

/* ============================================================
   7 · Section 05 (Основания) — recede-to-back card deck
   ------------------------------------------------------------
   The 30+ bibliography cards collapse to a single-card pile instead of a
   long list / horizontal rotator. Tap the front card → it recedes to the
   back of the pile, revealing the next. Built by refs-animator.js, which
   adds .refs-deck and a [data-depth] attribute (0 = front … 3 = hidden)
   to each .ref-cell on mobile.
   ============================================================ */
@media (max-width: 700px) {
  .refs-deck {
    display: block !important;
    position: relative;
    height: 340px;
    margin: 0;
    border: 0 !important;
    background: transparent !important;
    cursor: pointer;
    overflow: visible;
    -webkit-tap-highlight-color: transparent;
  }
  .refs-deck:focus-visible { outline: 1px solid var(--fg-1); outline-offset: 4px; }

  .refs-deck .ref-cell {
    position: absolute;
    inset: 0;
    margin: 0;
    height: auto;
    min-height: 0 !important;
    padding: 24px !important;
    border: var(--border) !important;
    background: var(--bg-1) !important;
    overflow: hidden;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.30);
    transform-origin: center bottom;
    transition: transform .45s cubic-bezier(.2,.7,.3,1), opacity .45s ease;
    will-change: transform, opacity;
  }
  .refs-deck .ref-cell[data-depth="0"] { transform: translateY(0)    scale(1);    opacity: 1; }
  .refs-deck .ref-cell[data-depth="1"] { transform: translateY(10px) scale(.955); opacity: .55; }
  .refs-deck .ref-cell[data-depth="2"] { transform: translateY(20px) scale(.91);  opacity: .26; }
  .refs-deck .ref-cell[data-depth="3"] { transform: translateY(28px) scale(.88);  opacity: 0; }

  /* Chrome above the deck: just the counter, left-aligned. */
  .refs-deck__chrome { justify-content: flex-start; }
}
@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .refs-deck .ref-cell { transition: opacity .2s linear; }
}