/*
 * MacFleek mobile responsive overrides — v2
 * ─────────────────────────────────────────
 * Prototype was desktop-only (>=1280px). These media queries make it
 * survive phones and tablets. More aggressive than v1: collapse every
 * multi-column grid, hide oversized desktop-only chrome, simplify the
 * comparison table.
 *
 * ⚠️  STABLE BLOCKS — DO NOT MODIFY without a screenshot diff
 *     User-confirmed working on iPhone 15 Pro (May 2026).
 *     Touching these silently breaks the navbar layout we spent
 *     ~10 rounds fine-tuning:
 *
 *   [NAVBAR / 1] line ~150 "NAVBAR — fit on phone width" block
 *       - header a[href*="github.com"]      → display:none
 *       - header nav                        → display:none
 *       - header a[href="/"] span           → display:none (brand text)
 *       - header button[aria-label="Toggle theme"] {32×32 icon-only}
 *         + .theme-label (span) → display:none   ← labels MUST stay in
 *           shell.js wrapped in <span class="theme-label">...</span>
 *       - .platform-toggle .pt-label → display:none (label spans in
 *         shell.js as <span class="pt-label">...</span>)
 *       - header a[href="/buy/"], header a[href="#waitlist"]
 *           padding: 6px 10px, font-size: 11.5px, nowrap
 *       - header > div: padding 10px, gap 6px
 *
 *   [TREEMAP / 2] line ~243 ".treemap-stage" exemption
 *       The aggressive "force absolute → static" rule for surface
 *       cards (needed for the Duplicate Finder demo) must SKIP the
 *       treemap container, otherwise its 5 oklch blocks collapse to
 *       zero size. Keep both ".treemap-stage" rules intact, and keep
 *       the className="treemap-stage" on the wrapper in landing.jsx.
 *
 *   If you add new selectors that match these elements, scope them
 *   so they do NOT undo the rules above. Test in mobile Safari
 *   before declaring done.
 */

/* ============================================================
 * NARROW DESKTOP (≤ 1280px) — hide secondary nav items so the CTA
 * doesn't clip when language is RU / FR / ES (long labels) and the
 * platform-toggle + lang-picker + theme button + CTA fight for space.
 * ============================================================ */
@media (max-width: 1280px) {
  header .nav-secondary a { display: none !important; }
}

/* ============================================================
 * TABLET (≤ 1024px)
 * ============================================================ */
@media (max-width: 1024px) {
  section[style*="padding: 70px 40px"],
  section[style*="padding: 80px 40px"] {
    padding: 50px 20px !important;
  }
  div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  div[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}


/* ============================================================
 * PHONE (≤ 720px)
 * ============================================================ */
@media (max-width: 720px) {

  /* ─── HIDE hero Mac-window mockup completely on phones ─────────
     The .hero-mockup-stage wrapper holds the entire HeroDiskMockup —
     the fake macOS window with sidebar + dashboard cards + floating
     menu-bar popover. On desktop it sits below the headline as a
     showcase. On phones the inner cards collapse and float over the
     hero copy, blocking the Download CTA. The screenshots section
     further down already shows the app, so killing this here costs
     nothing. */
  .hero-mockup-stage {
    display: none !important;
  }

  /* ─── Universal: kill horizontal overflow ─── */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  * {
    max-width: 100% !important;
  }

  /* ─── NAVBAR ─── */
  header nav {
    display: none !important;
  }
  header a[href*="github"] {
    display: none !important;
  }
  /* (header padding + CTA sized in the dedicated NAVBAR block below) */

  /* ─── SECTIONS: reduce padding ─── */
  section {
    padding: 28px 16px !important;
  }
  section[style*="padding: 70px 40px"],
  section[style*="padding: 80px 40px"],
  section[style*="padding: 100px 40px"],
  section[style*="60px 40px"] {
    padding: 32px 16px !important;
  }

  /* ─── HERO TITLE ─── */
  h1, h1[style*="font-size"] {
    font-size: clamp(2rem, 8vw, 2.6rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
  }

  /* ─── Persona grid ("If this sounds familiar") ─────────────────
     Override the generic "collapse all grids to 1 column" rule for
     persona cards — 8 stacked rows scrolls forever and kills the
     "scan through, find your persona" UX. 2-col on phone keeps it
     compact + visually appealing. Cards naturally stack at 380px. */
  .persona-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .persona-grid h3 { font-size: 13.5px !important; line-height: 1.2 !important; }
  .persona-grid p  { font-size: 11px !important; line-height: 1.5 !important; }
  .persona-grid .surface { padding: 14px !important; }
  h2, h2[style*="font-size"], h2[style*="clamp"] {
    font-size: clamp(1.6rem, 6.5vw, 2.2rem) !important;
    line-height: 1.1 !important;
  }

  /* ─── HERO MAC WINDOW MOCKUP — completely hide on phone ─── */
  /* It has Sidebar + content grid 240px+1fr which doesn't fit phones */
  div[style*="height: 620px"],
  div[style*="height:620px"] {
    display: none !important;
  }
  /* Also kill the floating menu-bar popover demo overlay inside hero */
  div[style*="grid-template-columns: 240px 1fr"] {
    display: none !important;
  }

  /* ─── ALL multi-column grids → 1 column ─── */
  div[style*="grid-template-columns: repeat(2"],
  div[style*="grid-template-columns: repeat(3"],
  div[style*="grid-template-columns: repeat(4"],
  div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns: 1.2fr 1fr"],
  div[style*="grid-template-columns: 1.5fr 1fr"],
  div[style*="grid-template-columns: 2fr 1fr"],
  div[style*="grid-template-columns: 1fr 220px"],
  div[style*="grid-template-columns: 1fr 280px"],
  div[style*="grid-template-columns: 240px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* ─── Buy/checkout — kill sticky positioning + shrink padding ─── */
  /* The order-summary surface is `position: sticky; top: 80px` on
     desktop. On mobile the column has stacked underneath the form, so
     "sticky" snaps it half-off-screen when scrolling. Force static. */
  .surface[style*="position: sticky"] {
    position: static !important;
    top: auto !important;
  }
  /* Wide page-wrapper paddings squeeze content below safe area */
  div[style*="padding: 40px 32px"] {
    padding: 18px 14px !important;
  }
  div[style*="padding: 70px 40px"],
  div[style*="padding: 70px 40px 60px"] {
    padding: 32px 16px !important;
  }
  div[style*="padding: 80px 40px"],
  div[style*="padding: 60px 40px"] {
    padding: 32px 16px !important;
  }

  /* btn-xl wraps to 2 lines instead of squishing into 80px width */
  .btn-xl {
    white-space: normal !important;
    text-align: center !important;
    padding: 12px 14px !important;
    font-size: 13.5px !important;
  }

  /* Universal: kill any horizontal page scroll caused by tiny over-
     flows from absolute-positioned decorations. */
  html, body { overflow-x: hidden !important; }

  /* ─── NAVBAR — fit on phone width ────────────────────────────────
     Top bar has logo + brand + platform toggle + theme toggle +
     "Get MacFleek" CTA. At 360px width these collide and the CTA
     button gets clipped behind the right edge. Strategy:
       • Hide GitHub/inline links and "Dark" label
       • Shrink platform toggle (icon-only, no label)
       • Squeeze the CTA into a compact pill */
  header a[href*="github.com"] { display: none !important; }
  header nav { display: none !important; }
  /* Theme toggle: icon-only, square. The "Dark"/"Light" label is now
     wrapped in <span class="theme-label"> in shell.js so we can hide
     just the text without breaking SVG rendering. */
  header button[aria-label="Toggle theme"] {
    padding: 0 !important;
    gap: 0 !important;
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  header button[aria-label="Toggle theme"] .theme-label { display: none !important; }
  header button[aria-label="Toggle theme"] svg {
    width: 14px !important;
    height: 14px !important;
    color: var(--text-secondary) !important;
  }
  /* Platform toggle: icon-only too */
  .platform-toggle .pt-label { display: none !important; }
  /* Brand text label hidden — only the AppIcon remains. Frees ~80px. */
  header a[href="/"] span { display: none !important; }
  /* Get MacFleek / Notify CTA tighter */
  header a[href="/buy/"], header a[href="#waitlist"] {
    padding: 6px 10px !important;
    font-size: 11.5px !important;
    white-space: nowrap !important;
    box-shadow: none !important;
  }
  /* Platform pill toggle — icon-only on phone */
  .platform-toggle button {
    padding: 5px 7px !important;
    gap: 0 !important;
  }
  .platform-toggle { margin-left: 0 !important; }
  /* Language picker (dropdown) — keep visible on mobile, shrink slightly */
  .lang-picker > button {
    padding: 5px 7px !important;
    font-size: 10.5px !important;
  }
  /* Tighten outer header padding so CTA never clips */
  header > div {
    padding: 10px 10px !important;
    gap: 6px !important;
  }

  /* ─── DiskGauge — center inside its card ─────────────────────────
     Wrapper is a fixed-size square (148px or 170px). Its parent grid
     drops it left-aligned by default, which makes the SVG look "off
     to the left" and clipped behind the card edge. Forcing margin:auto
     centers it horizontally; we also drop into a block context so the
     internal absolute-positioned 67%/USED text sits dead-center on
     the visible circle. */
  div[style*="width: 148px"][style*="height: 148px"],
  div[style*="width: 170px"][style*="height: 170px"],
  div[style*="width: 148"][style*="height: 148"],
  div[style*="width: 170"][style*="height: 170"] {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }

  /* ─── Duplicate Finder pass rows — fit on one line ───────────────
     Numbers (12,431 files) overflow on narrow cards. Hide the count
     on phones — animation conveys the meaning. */
  .surface span.tnum[style*="margin-left: auto"][style*="font-size: 10"] {
    display: none !important;
  }
  /* Pass label can wrap to 2 lines but stays inside the card */
  .surface div[style*="padding: 10px 14px"] {
    padding: 8px 10px !important;
    align-items: flex-start !important;
  }
  .surface div[style*="padding: 10px 14px"] span:not([class*="tnum"]) {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }

  /* ─── DEMO CARDS — let internal content shrink ─── */
  .surface {
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .surface[style*="height: 280"],
  .surface[style*="height: 320"],
  .surface[style*="height: 360"] {
    height: auto !important;
    min-height: 360px !important;
  }

  /* ─── DEMO CARDS — fix absolute-positioned demo content escaping ─── */
  /* Each demo card has an inner div with `position: absolute; inset: 0`
     that holds the treemap blocks, gauge circle, menubar mockup, or
     duplicate-pass cards. On mobile this content overlaps the title.
     Force the inner content area to grow naturally from a static
     position so it doesn't escape its parent. */
  .surface > div[style*="position: relative"] > div[style*="position: absolute"][style*="inset"]:not(.treemap-stage) {
    position: relative !important;
    inset: auto !important;
    margin-top: 16px;
  }
  /* If the inner has explicit height set, keep it but make it static */
  .surface > div[style*="position: relative"][style*="height"] {
    min-height: 240px;
  }
  /* Duplicate Finder Pass cards — they use absolute, force them static.
     Treemap blocks ALSO use absolute positioning to lay out the squarified
     visualisation, so explicitly exempt them via :not(.treemap-stage *). */
  .surface > div > div[style*="position: absolute"]:not(.treemap-stage),
  .surface > div > div[style*="position: absolute"]:not(.treemap-stage) {
    position: static !important;
    inset: auto !important;
  }
  /* Make sure treemap's container keeps its absolute layout + size so its
     percentage-positioned blocks have a positioning context that has area. */
  .treemap-stage {
    position: absolute !important;
    inset: 0 !important;
  }
  .treemap-stage > div { position: absolute !important; }
  /* Force the demo card visual content to stack below the title */
  .surface > div[style*="margin-top: 16"][style*="height"],
  .surface[style*="position: relative"] > div:nth-child(3) {
    position: relative !important;
    margin-top: 12px !important;
  }

  /* ─── TREEMAP blocks — smaller labels for mobile ─── */
  /* The squarified treemap shrinks blocks too much on phones; reduce
     label font size and padding so labels don't truncate. */
  .surface div[style*="grid-area"] {
    padding: 6px !important;
  }
  .surface div[style*="grid-area"] span:first-child,
  .surface div[style*="background: oklch"] span:first-child {
    font-size: 10px !important;
    line-height: 1.1 !important;
  }
  .surface div[style*="grid-area"] span:last-child,
  .surface div[style*="background: oklch"] span:last-child {
    font-size: 9px !important;
    opacity: 0.85;
  }

  /* ─── GAUGE — recenter text inside SVG ─── */
  /* DiskGauge uses position: absolute, inset: 0 wrapper with flex column.
     Make sure the wrapper takes the full SVG size and centers properly. */
  .anim-gauge,
  div[style*="width: 170"][style*="height: 170"],
  div[style*="width: 148"][style*="height: 148"] {
    margin: 0 auto !important;
  }

  /* ─── COMPARISON TABLE — simplify dramatically ─── */
  /* Strategy: shrink everything, make first column sticky so user
     never loses the feature name when scrolling horizontally */
  table {
    font-size: 12px !important;
    table-layout: auto !important;
    width: max-content !important;
    min-width: 100%;
  }
  table th, table td {
    padding: 10px 8px !important;
    white-space: normal !important;
    word-break: normal !important;
  }
  table th:first-child, table td:first-child {
    position: sticky;
    left: 0;
    background: var(--surface-1) !important;
    z-index: 2;
    border-right: 1px solid var(--hairline);
    min-width: 130px;
  }
  /* Wrap the table in a scrollable container */
  .surface:has(table) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ─── PRICING (2-col → 1-col already covered above) ─── */
  /* Pricing cards — reduce inner padding */
  div[style*="padding: 40px"] {
    padding: 24px 18px !important;
  }

  /* ─── FAQ accordion ─── */
  details[style*="padding"] {
    padding: 14px 16px !important;
  }
  details summary {
    font-size: 14px !important;
  }

  /* ─── BUTTONS — wrap on narrow ─── */
  div[style*="display: flex"][style*="gap"][style*="justifyContent"] {
    flex-wrap: wrap !important;
  }
  a[style*="padding: 14px"],
  a[style*="padding: 16px"],
  button[style*="padding: 14px"] {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
  }

  /* ─── DECORATIVE chrome → hide ─── */
  /* Floating particles, glow blobs behind hero */
  div[style*="position: absolute"][style*="filter: blur"],
  div[style*="position: absolute"][style*="opacity: 0.3"],
  div[style*="position: absolute"][style*="opacity: 0.4"],
  div[style*="position: absolute"][style*="opacity: 0.5"] {
    display: none !important;
  }
  /* Witch silhouette in hero behind window */
  section svg[viewBox="0 0 386 383"] {
    max-width: 200px !important;
    max-height: 200px !important;
  }
  /* Stars behind witch */
  g[opacity="0.85"], g[opacity="0.6"] {
    opacity: 0.3 !important;
  }

  /* ─── FOOTER — vertical stack ─── */
  footer > div {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    text-align: left;
  }
  footer span[style*="margin-left: auto"] {
    margin-left: 0 !important;
  }

  /* ─── LEGAL PAGES (Privacy/Terms) ─── */
  .legal-toc,
  aside[class*="toc"] {
    display: none !important;
  }
  .legal-content {
    padding: 16px !important;
    max-width: 100% !important;
  }
  .legal-meta {
    font-size: 11px !important;
  }
  .legal-title {
    font-size: 28px !important;
  }

  /* ─── CHECKOUT page ─── */
  /* Payment method tiles stack instead of grid */
  div[style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}


/* ============================================================
 * VERY SMALL (≤ 380px) — iPhone SE etc
 * ============================================================ */
@media (max-width: 380px) {
  /* Persona grid on tiny screens — 1 col, full-width cards */
  .persona-grid { grid-template-columns: 1fr !important; }
  /* Shrink CTA further on iPhone SE / Mini class screens */
  header a[href="/buy/"], header a[href="#waitlist"] {
    padding: 6px 9px !important;
    font-size: 11px !important;
  }
  /* Platform toggle hidden on very narrow screens to guarantee the
     CTA never clips. User can still toggle macOS/Windows on a wider
     viewport; the page itself UA-sniffs by default. */
  .platform-toggle { display: none !important; }
  /* Lang picker hidden on iPhone SE — defaults from browser locale.
     User can still pass ?lang=ru in URL to set it. */
  .lang-picker { display: none !important; }
  header > div {
    padding: 10px 8px !important;
    gap: 5px !important;
  }
}