/* ============================================================
     Mobile (max-width: 760px) — chrome + states A/B/E.
     States C and D (and the narrow-desktop case) live in their own
     media query below.

     ───────────  MOBILE TYPOGRAPHY / CHROME KNOBS  ──────────────
     The :root block here overrides token defaults from base.css.
     Everything below is structural — to retune phone presentation,
     edit this block, not the structural rules below.
     Keep the breakpoint in sync with MOBILE_QUERY in
     scripts/hero-scroll.js.
     ============================================================ */
  @media (max-width: 760px) {
    :root {
      /* State A: a small phone barely fills the 32vw / 32vh clamp, so
         the assembled logo can disappear into the middle of the screen.
         Push it up to ~60% of the smaller viewport side. */
      --logo-w: clamp(180px, min(60vw, 50vh), 440px);
      /* Side text typography (state B) — flat sizes so lines don't
         start looking like a vertical stack on narrow columns. Bumped
         up a step to balance the larger state-A/B halves. */
      --story-fs-h2: 18px;
      --story-fs-p:  13px;
      /* Note: --below-h3-fs is overridden in the narrow @media below
         (it applies to phones too, and the later rule wins). */
    }

    .nav { padding: 20px 24px; }
    .row {
      grid-template-columns: 40px 1fr 24px;
      gap: 16px;
      padding: 24px 0;
    }
    .row .desc { grid-column: 2 / 3; }
    .services { padding: 60px 24px 100px; }
    .services-head { grid-template-columns: 1fr; gap: 20px; padding-bottom: 40px; }
    footer { grid-template-columns: 1fr; text-align: center; padding: 32px 24px; }
    footer .right { text-align: center; }
    .contact { padding: 80px 24px; }

    /* State B mobile rework: diagonal split (clock up-left, smiley
       down-right) with text in the opposite quadrants. Halves also
       shrink to 0.80 across the split — matches the desktop rule in
       hero.css so the bigger state-A logo doesn't leave state-B
       feeling cramped on phones either. */
    .part-left {
      transform:
        translate(calc(var(--p2) * -14vw), calc(var(--p1) * -26vh))
        scale(calc(1 - var(--p1) * 0.20));
    }
    .part-right {
      transform:
        translate(calc(var(--p2) *  18vw), calc(var(--p1) *  26vh))
        scale(calc(1 - var(--p1) * 0.20));
    }

    .story { max-width: none; width: auto; }
    .story-top {
      top: 19vh;
      left: calc(50% + 3vw);
      right: 5vw;
      text-align: left;
      transform: translateX(calc(
        (1 - var(--p2)) * -16px
        + max(0, var(--pBC) - var(--pDE) * 2) * -90vw
      ));
    }
    .story-bottom {
      bottom: 19vh;
      right: calc(50% + 3vw);
      left: 5vw;
      text-align: right;
      transform: translateX(calc(
        (1 - var(--p2)) * 16px
        + max(0, var(--pBC) - var(--pDE) * 2) * -90vw
      ));
    }
    /* Plain left/right alignment for the paragraph blocks. The previous
       text-align: justify made the lines look ragged on narrow columns
       — words got pushed into a wide-spaced vertical stack. */
    .story-top h2 { width: auto; max-width: 100%; text-align: left; }
    .story-top p {
      width: auto;
      max-width: 32ch;
      text-align: left;
    }
    .story-bottom h2 { width: auto; max-width: 100%; text-align: right; }
    .story-bottom p {
      width: auto;
      max-width: 32ch;
      margin-left: auto;
      text-align: right;
    }
    /* Font sizes come from --story-fs-h2 / --story-fs-p (overridden in
       the :root block above). Only mobile-specific layout tweaks here. */
    .story h2 { line-height: 1.2; margin-bottom: 8px; }
    .story p  { letter-spacing: 0.3px; line-height: 1.55; }

    /* Arrows shift to the half's side at state B so they don't crash
       into the text in the opposite column. */
    .hint.hint-up { justify-self: start; padding-left: 6vw; padding-right: 0; padding-top: clamp(56px, 9vh, 90px); }
    #scrollDown { justify-self: end; padding-right: 6vw; padding-left: 0; }
    .hint { padding-bottom: clamp(28px, 5vh, 60px); }

  }

  /* ============================================================
     Narrow viewport (phones + narrow desktop windows).
     Triggered by either a portrait-ish aspect ratio or a small width,
     so an 830-wide laptop window gets the same simplified C/D layout
     as a 380-wide phone.
     States C and D here drop the side-by-side layout entirely: the
     big half fills the viewport as a 10%-opacity backdrop, and the
     paragraph stack is centred on top. D→E still scales/lifts/shifts
     the halves to their state-E pose — the opacity ramps from 0.1 to
     1.0 so the final small logo reads as a regular foreground mark.

     ────────────  NARROW LAYOUT / HALF-GEOMETRY KNOBS  ───────────
     The :root block here overrides base.css token defaults. To
     retune the narrow-mode big-half presentation (sizes, overlap,
     final scale), edit this block — the structural rules below
     read from these tokens.
     ============================================================ */
  @media (max-aspect-ratio: 4/3), (max-width: 760px) {
    :root {
      /* Halves grow to fill more vertical space in this mode. The
         derived pull / shrink-dx values track --big-half-h so the
         offsets re-derive automatically. */
      --big-half-h: 88vh;
      /* No edge anchor in this mode, so no rest-inset to apply. */
      --big-half-inset: 0vw;
      /* Pull contribution is zeroed: the halves already overlap at
         viewport centre via the centered anchor below. */
      --big-pull-r: 0vw;
      --big-pull-l: 0vw;
      /* Shrink-dx is also zeroed: the halves are already on top of
         each other, no inter-half gap to close as they scale. */
      --big-shrink-dx-r: 0vw;
      --big-shrink-dx-l: 0vw;
      /* Middle mast also centred — drop its assembled-position offset
         in this mode so it scales/lifts/shifts from dead centre. */
      --big-middle-dx: 0vw;
      --big-middle-dy: 0vw;
      --big-shrink-dx-mid: 0vw;
      --big-shrink-dy-mid: 0vw;
      /* Final scale a touch smaller — looks better in portrait. */
      --big-final-scale: 0.28;
      /* "Spojme se" headline scales with viewport in this layout. */
      --below-h3-fs: clamp(22px, 4.6vw, 32px);
    }

    /* Re-anchor both halves to viewport centre. side now controls
       slide-off from the relevant edge as a translateX in vw, not as
       a percentage of the element's own width.
       Height cap shared by BOTH halves: big-right's wider aspect would
       bleed past 78vw if it stayed at the full --big-half-h on slim
       viewports, but big-left's narrower aspect wouldn't — so capping
       only big-right left it shrinking in state C while big-left stayed
       tall in state D. Sharing the cap makes both halves track the
       same height and feel symmetric across states. */
    .big-half {
      top: 50%;
      left: 50%;
      right: auto;
      --r-rendered-h: min(var(--big-half-h), calc(78vw / 0.848));
      height: var(--r-rendered-h);
    }
    /* Halves slide in/out from the relevant edge, stay at 0.1 opacity
       while at rest in C/D, then FADE OUT entirely across D→E. The
       small assembled logo (.logo-wrap below) crossfades in to take
       over at state E — no big-halves shrinking on narrow viewports.

       big-right's natural width (height × 0.848) easily exceeds the
       viewport on portrait windows and bleeds past the right rim. Cap
       its height by a vw-derived ceiling so its widest extent stays
       around 78vw — same in-viewport horizontal extent as big-left's
       narrower clock arc, so the two states feel symmetric.

       Also compensate the right-biased SVG content: part-right's
       visible paths span roughly viewBox x=290..1165 (the inner
       smile curve doesn't reach the SVG's left edge), so its visual
       centre sits ~11% of the rendered height to the right of the
       SVG's geometric centre. We shift the element left by that
       amount so the smiley reads as centred — without this fix it
       looks markedly more right-biased than the clock half does. */
    .big-half-right {
      /* height + --r-rendered-h inherited from .big-half above */
      transform: translate(
        calc(
          -50%
          + var(--bigR-side) * 110vw
          - var(--r-rendered-h) * 0.11
        ),
        -50%
      );
      opacity: calc(
        var(--bg-half-opacity)
        * max(0, 1 - max(0, var(--pDE) - 0.25) * 2.5)
      );
    }
    /* part-left's content fills its viewBox edge-to-edge, so its SVG
       geometric centre is also its visual centre — no compensation
       needed. */
    .big-half-left {
      transform: translate(
        calc(-50% - var(--bigL-side) * 110vw),
        -50%
      );
      opacity: calc(
        var(--bg-half-opacity)
        * max(0, 1 - max(0, var(--pDE) - 0.25) * 2.5)
      );
    }
    /* Middle never appears in narrow mode — the small .logo-wrap fades
       in for state E and already includes the mast. */
    .big-half-middle { display: none; }

    /* .logo-wrap takes over at state E in narrow mode. It still fades
       out across the first half of B→C (same as desktop), but it
       fades back IN as the big halves dissolve during D→E, and it
       carries the lift up to the final state-E anchor. No horizontal
       shift here — the wordmark stacks below the logo instead of
       sitting to its right. */
    .logo-wrap {
      transform: translate(
        calc(max(0, var(--pBC) - var(--pDE) * 2) * -80vw),
        calc(var(--pLift) * -1 * var(--e-lift))
      );
      opacity: calc(
        max(0, 1 - var(--pBC) * 2)
        + min(1, max(0, (var(--pDE) - 0.30) * 2.5))
      );
    }

    /* Text blocks float ON TOP of the backdrop half, centred both
       axes. Block + paragraphs are both centred so the column reads
       as a balanced block over the faded logo backdrop — left-align
       in this layout pushed the visible mass off-centre on portrait
       viewports. */
    .story-c, .story-d {
      top: 50%;
      left: 50%;
      right: auto;
      bottom: auto;
      width: min(84vw, 540px);
      max-width: none;
      transform: translate(-50%, -50%);
      text-align: center;
      z-index: 3;
    }
    .story-c p {
      font-size: clamp(14px, 2vh, 20px);
      line-height: 1.6;
      margin-bottom: 1em;
      letter-spacing: 0.2px;
    }
    .story-d {
      text-align: center;
    }
    .story-d .kicker { margin-bottom: 20px; }
    .story-d .services { gap: clamp(20px, 3.2vh, 32px); align-items: center; }
    .story-d .services li { align-items: center; gap: 7px; }
    .story-d .services strong {
      font-size: clamp(36px, 5.6vh, 60px);
      line-height: 0.96;
      letter-spacing: -0.035em;
    }
    .story-d .services span { font-size: clamp(14px, 1.9vh, 19px); line-height: 1.45; letter-spacing: 0.2px; }

    /* Stacked layout for state E: logo (lifted to ~38vh) → wordmark →
       Kontaktuje nás + email.
       Wordmark's top anchor is the max of:
         (a) a vh floor (72vh) so on shallow viewports it stays low
         (b) "logo centre + logo half-diameter + 32px gap" so on big
             viewports where the logo grows the wordmark slides down
             with it instead of crashing into the smile.
       The logo radius is half of the same clamp the .logo-wrap uses,
       so this formula is the single source of truth for the gap. */
    .contact-reveal {
      top: max(
        72vh,
        calc(50vh - var(--e-lift) + clamp(90px, min(30vw, 25vh), 220px) + 32px)
      );
      left: 50%;
      /* Narrower than before (was clamp(160px, 52vw, 360px)). The wordmark
         SVG keeps its aspect ratio, so a smaller width means a shorter
         element overall — but the stacked NO / TIME / FACTORY layout
         still reads as a tall block. */
      width: clamp(130px, 38vw, 260px);
      transform: translate(-50%, calc(-50% + (1 - var(--p3)) * 16px));
    }
    .below-logo {
      /* Sits a fixed 22vh below the wordmark anchor (same max() pair). */
      top: max(
        92vh,
        calc(50vh - var(--e-lift) + clamp(90px, min(30vw, 25vh), 220px) + 32px + 22vh)
      );
      left: 50%;
      transform: translate(-50%, calc(-50% + (1 - var(--p3)) * 12px));
    }
    /* Size comes from --below-h3-fs (overridden in :root above). */
    .below-logo h3 { margin-bottom: 14px; }
  }

  /* ============================================================
     Narrow desktop only (portrait-ish window, but wider than the
     760px mobile breakpoint). State B keeps the desktop side-text
     layout from hero.css, but the base --story-fs-* tokens lean on
     vw and collapse to the clamp floor on these windows (e.g. ~925w
     gives 0.95vw ≈ 9px → 11px floor), leaving paragraphs visibly
     small next to the half-circle icons. Raise the floor + cap.
     ============================================================ */
  @media (max-aspect-ratio: 4/3) and (min-width: 761px) {
    :root {
      /* Bumped to balance the bigger state-B halves — the previous
         floors collapsed to small sizes on portrait-ish laptop windows
         and read as undersized next to the half-circles. */
      --story-fs-h2: clamp(26px, min(3.6vw, 4.8vh), 38px);
      --story-fs-p:  clamp(15px, min(1.85vw, 2.4vh), 20px);
    }
  }