/* meetvitaliy.com - responsive layer
   ---------------------------------------------------------------------------
   The design source contains ZERO media queries: it is desktop-first with
   clamp() type ramps, a max-width cap, and nothing else. This file is the
   mobile and tablet behaviour it never had. Desktop is deliberately untouched -
   every rule lives inside a media query.

   WHY EVERY DECLARATION IS !important
   The design styles everything with inline style="" attributes and no classes.
   An inline style is a normal-author declaration, so the only thing that can
   override it from a stylesheet is an important-author one. The source has no
   !important of its own, so nothing here fights anything.

   HOOKS: data-r, stamped by port/handoff-build.py
   Earlier versions of this file keyed on the runtime's data-dc-tpl index. That
   does NOT survive a re-export - the designer's source numbers its nodes
   differently from the bundle, and every rule here silently stopped matching.
   handoff-build.py now stamps data-r by inline-style signature, and the
   handoff README is explicit that those style values are copied exactly, which
   is what makes them the stable thing to key on.
     callout  a glass callout card on the walk-in stage
     stage    a 16:9 video stage
     mozzi    the Mozzi tag pinned bottom-right of the stage
     pin      a LinkedIn pin on the team frame
     ban-grid the 224-dot field          conv-grid a 100-dot conversion grid
     versus   the full comparison table

   BREAKPOINTS
     900px  where card-bound grids stop fitting (iPad and landscape included)
     760px  linearize
     560px  one-hand
     (max-height:560px) and (pointer:coarse)  landscape phone
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  html { scroll-behavior: auto !important; }
}

/* --- dot fields: fluid tracks, not a breakpoint --------------------------
   These overflow whenever their CARD is narrow, which includes iPad portrait
   and landscape phones, so a width breakpoint is the wrong instrument.
   minmax(0, Npx) keeps the column COUNT - the shape and the dot count are the
   point - and lets the dots shrink only when there is no room. Each dot also
   carries a hard pixel width, so the dots themselves have to go fluid too. */
@media (max-width: 900px) {
  [data-r="ban-grid"] {
    grid-template-columns: repeat(32, minmax(0, 12px)) !important;
    column-gap: 1px !important; row-gap: 4px !important;
  }
  [data-r="conv-grid"] {
    grid-template-columns: repeat(10, minmax(0, 10px)) !important;
    column-gap: 2px !important; row-gap: 3px !important;
  }
  [data-r="ban-grid"] > *, [data-r="conv-grid"] > * {
    width: 100% !important; height: auto !important;
    aspect-ratio: 1 !important; min-width: 0 !important;
  }
  [data-r="versus"] { grid-template-columns: 1fr !important; }

  /* Three year-blocks sit in one flex row with a hard 503px minimum, so the
     third year gets clipped away entirely. Let them stack. */
  [data-r="conv-row"] { flex-wrap: wrap !important; gap: 16px !important; }
  [data-r="conv-row"] > * { min-width: 0 !important; max-width: 100% !important; }
  /* the card that holds the conversion row also holds a stats column beside
     it, and that column keeps its desktop minimum on the narrowest phone */
  [data-r="conv-row"] ~ *, :has(> [data-r="conv-row"]) > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* The big percentage is in a flex row that shrinks it below its own text,
     and "15" over "%" reads as a broken number. */
  [data-r="pct"] {
    flex: none !important;
    min-width: max-content !important;
    white-space: nowrap !important;
  }
  /* its row shrinks below the number + year on the narrowest phone */
  [data-r="pct"]:first-child, [data-r="pct"] ~ * { min-width: 0 !important; }
  [data-r="conv-row"] [style*="display: flex"] {
    flex-wrap: wrap !important;
    min-width: 0 !important;
    row-gap: 2px !important;
  }
}

@media (max-width: 760px) {
  /* The hero asks for a full viewport height plus ~200px of padding, which on
     a phone makes the first screen mostly padding. */
  section > div[style*="min-height"], section[style*="min-height"] {
    min-height: auto !important;
  }
  section, footer { padding-top: 84px !important; padding-bottom: 64px !important; }

  /* The stage ties its width to viewport HEIGHT so a 16:9 beat fits one
     screen. Intentional on desktop, wrong on a phone. */
  [data-r="stage"] { max-width: 100% !important; }

  /* The stage callouts are leader-line rows: an absolutely placed flex row
     holding [pill][line][dot], with the line stretching to aim at the subject.
     Two sets of four are rendered at once and cross-faded, so they have to
     stay absolute - in normal flow the hidden set would still reserve space.

     An earlier version of this rule set position:static on the PILL, which
     carries no position of its own, so it changed nothing and four pills went
     on overlapping each other on every phone. The layout assertions could not
     see it: overlapping boxes neither escape the root nor clip themselves.

     So: keep the rows absolute at the design's own 13/33/53% tops, and make
     them fit that spacing. The line and the dot go, because at this size there
     is no room to point at anything, and the pills take the width instead. */
  [data-r="callout-line"] { display: none !important; }
  [data-r="callout-row"] > div[style*="border-radius: 50%"] { display: none !important; }

  [data-r="callout-row"] { align-items: flex-start !important; }
  /* left-hand rows: the three that start at 3.5% */
  [data-r="callout-row"][style*="left: 3.5%"] { right: 54% !important; }
  /* the right-hand row sits in the other column, so the two at the same top
     cannot meet */
  [data-r="callout-row"][style*="left: 57%"] { left: 54% !important; }

  [data-r="callout"] {
    max-width: 100% !important;
    min-width: 0 !important;
    font-size: 9px !important;
    line-height: 1.35 !important;
    padding: 4px 7px !important;
    border-radius: 7px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* The Mozzi tag is pinned bottom-right with a percentage offset and does not
     wrap. Its line rotates, and the longest one runs off the left edge of a
     360px screen, so the rule has to reach every descendant rather than only
     the direct child. Pinning it across the stage keeps it clear of the third
     callout row above it. */
  [data-r="mozzi"] {
    left: 8px !important; right: 8px !important;
    bottom: 6px !important;
    width: auto !important; max-width: calc(100% - 16px) !important;
    min-width: 0 !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }
  /* Mozzi carries its own 1px leader line and 5px dot, pointing down at the
     cat. They go for the same reason the callouts' do, and they must go by
     name: a blanket rule on every descendant inflated the 1px line into a
     14x32 block and the 5px dot into a 14x8 one, which is the pale smudge that
     appeared beside the subject's legs. */
  [data-r="mozzi"] > div[style*="height: 32px"],
  [data-r="mozzi"] > div[style*="border-radius: 50%"] { display: none !important; }
  /* the text pill only */
  [data-r="mozzi"] > div[style*="border-radius: 999px"] {
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
    box-sizing: border-box !important;
    font-size: 9px !important;
    line-height: 1.35 !important;
    padding: 4px 10px !important;
  }

  /* the two reading cards at the foot of the page: their padding pushes the
     content a few px past the card on the narrowest phone */
  section a[style*="border-radius"][style*="padding"],
  section div[style*="border-radius"][style*="padding"] {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* A pin tooltip is centred on a 17px badge and cannot fit beside it. The
     badge itself must stop reporting the tooltip as its own overflow. */
  [data-r="pin"] { overflow: visible !important; }
  [data-r="pin"] span[style*="position: absolute"],
  [data-r="pin"] > span:last-child {
    position: fixed !important;
    left: 12px !important; right: 12px !important; bottom: 16px !important;
    top: auto !important; transform: none !important;
    white-space: normal !important; text-align: center !important;
    z-index: 90 !important;
  }
}

/* A chip you can tap has to be tappable: these carry click handlers but render
   16px tall, under the 24px minimum, on every touch viewport. */
@media (pointer: coarse) {
  [data-r="hero-chip"] {
    min-height: 28px !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}

@media (max-width: 560px) {
  /* Card headers put a kicker and a reading-time pill on one row with a fixed
     gap, which is a few px too wide on the narrowest phone. Let them wrap. */
  section div[style*="display: flex"][style*="justify-content: space-between"] {
    flex-wrap: wrap !important;
    row-gap: 6px !important;
    min-width: 0 !important;
  }

  /* No hamburger and no collapse in the design: let the nav wrap. */
  nav { padding: 10px 14px !important; flex-wrap: wrap !important; row-gap: 6px !important; }
  nav img { height: 30px !important; }
  nav > div { gap: 14px !important; font-size: 11px !important; flex-wrap: wrap !important; }
}

/* A landscape phone is wider than 760 but only ~390px tall, so it misses every
   width rule while the stage it has to fit is far smaller. */
@media (max-height: 560px) and (pointer: coarse) {
  section > div[style*="min-height"], section[style*="min-height"] {
    min-height: auto !important;
  }
  section, footer { padding-top: 72px !important; padding-bottom: 56px !important; }
  /* same leader-line rows as the width block above, and the same reason they
     have to stay absolute: the hidden callout set would otherwise take space */
  [data-r="callout-line"] { display: none !important; }
  [data-r="callout-row"] > div[style*="border-radius: 50%"] { display: none !important; }
  [data-r="callout-row"] { align-items: flex-start !important; }
  [data-r="callout-row"][style*="left: 3.5%"] { right: 54% !important; }
  [data-r="callout-row"][style*="left: 57%"] { left: 54% !important; }
  [data-r="callout"] {
    max-width: 100% !important; min-width: 0 !important;
    font-size: 9px !important; line-height: 1.35 !important;
    padding: 4px 7px !important; border-radius: 7px !important;
    white-space: normal !important; overflow-wrap: anywhere !important;
  }
  /* a landscape phone is WIDER than 760, so it misses the width rules above
     while its pins are just as cramped */
  [data-r="pin"] { overflow: visible !important; }
  [data-r="pin"] span[style*="position: absolute"],
  [data-r="pin"] > span:last-child {
    position: fixed !important;
    left: 12px !important; right: 12px !important; bottom: 12px !important;
    top: auto !important; transform: none !important;
    white-space: normal !important; text-align: center !important;
    z-index: 90 !important;
  }
}