/* ============================================================
   Mobile layer — HVA Portfolio
   Applies to portfolio pages and case studies.
   Breakpoints: 820px (tablet/phone), 520px (small phone)
   ============================================================ */

/* Touch devices: no cursor-following preview card */
@media (hover: none) {
  .pf-preview { display: none !important; }
}

@media (max-width: 820px) {
  html { scroll-padding-top: 68px; }

  /* ── Chrome ── */
  .pf-topbar {
    padding: 12px 20px !important;
    gap: 12px;
  }
  .pf-topbar-brand { font-size: 15px !important; }
  .pf-toolbar { gap: 8px !important; }
  .pf-iconbtn { width: 34px; height: 34px; }

  /* ── Section rhythm ── */
  .pf-root section {
    padding: 64px 20px !important;
  }
  .pf-root .pf-footer { padding: 56px 20px 28px !important; }

  /* ── Hero ── */
  .pf-glitch h1 {
    font-size: clamp(34px, 10vw, 60px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.03em !important;
  }
  .pf-glitch h1 span { white-space: normal !important; }
  .pf-hero-copy { padding-right: 0 !important; }
  .pf-hero-meta {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
    margin-top: 40px !important;
  }
  .pf-hero-meta > p { font-size: 17px !important; }
  .pf-hero-badge { display: none !important; }
  .pf-hero-three-lane {
    position: relative !important;
    top: auto !important; right: auto !important; bottom: auto !important;
    width: 100% !important;
    margin: 0 0 8px !important;
    opacity: 1 !important;
    order: -1;
  }
  .pf-hero-three { aspect-ratio: 4 / 3 !important; }
  .pf-scanlines { display: none !important; }

  /* ── Marquee ── */
  .pf-marquee span { font-size: 22px !important; padding: 0 14px !important; gap: 14px !important; }

  /* ── Work list ── */
  .pf-work-list .pf-row-link {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    gap: 4px 16px !important;
    padding: 20px 0 !important;
  }
  .pf-work-list .pf-row-link h3 {
    font-size: clamp(30px, 9vw, 44px) !important;
    grid-column: 2;
  }
  .pf-work-list .pf-row-link > span:nth-child(1) { grid-row: 1; }
  .pf-work-list .pf-row-link > span:nth-child(3),
  .pf-work-list .pf-row-link > span:nth-child(4),
  .pf-work-list .pf-row-link > span:nth-child(5) {
    grid-column: 2;
    text-align: left !important;
    font-size: 13px !important;
  }
  .pf-row--editorial:hover .pf-row-link { padding-left: 0 !important; }

  /* Filter chips scroll horizontally instead of wrapping tall */
  .pf-filter-chip { flex: 0 0 auto; }

  /* ── Now ── */
  .pf-now-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 18px 0 !important;
  }
  .pf-now-row > span:nth-child(2) { font-size: 18px !important; }
  .pf-now-row > span:nth-child(3) { display: none !important; }

  /* ── About ── */
  .pf-about-grid { gap: 40px !important; }
  .pf-about-grid > div:first-child > div:first-child {
    aspect-ratio: 1 / 1 !important;
    max-height: 340px;
  }
  #about h2 { font-size: clamp(28px, 7.6vw, 40px) !important; }
  .pf-career-row { grid-template-columns: minmax(0, 1fr) !important; gap: 6px !important; }

  /* ── Process / Skills / Awards ── */
  .pf-process-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 36px !important; }
  .pf-process-grid h3 { font-size: 26px !important; }
  .pf-skills-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 56px !important; }
  .pf-root section h2 { font-size: clamp(30px, 8.4vw, 44px) !important; }

  /* ── Footer ── */
  .pf-footer h2 { font-size: clamp(34px, 10vw, 56px) !important; }
  .pf-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px !important; margin-top: 56px !important; }
  .pf-footer-bottom {
    flex-direction: column; gap: 8px; align-items: flex-start;
    margin-top: 48px !important;
  }

  /* ── Case study pages ── */
  .cs-wrap { padding: 0 20px !important; }
  .cs-section { padding: 56px 0 !important; }
  .cs-section h2 { font-size: clamp(28px, 7.6vw, 40px) !important; }
  .cs-grid-2 { grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; }
  .cs-kicker { position: static !important; }
  .cs-meta-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px !important; }
  .cs-flow { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }
  .cs-flow-col { padding: 20px !important; }
  .cs-shots { grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; }
  .cs-metric-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .cs-metric { border-bottom: 1px solid var(--pf-line); }
  .cs-metric .v { font-size: 32px !important; }
  .cs-next { grid-template-columns: minmax(0, 1fr) !important; padding: 40px 0 16px !important; }
  .cs-next a[style*="right"] { text-align: left !important; }
  .cs-pull { padding: 20px 22px !important; font-size: 20px !important; }
  .cs-body { font-size: 16px !important; }
  .cs-lead { font-size: 18px !important; }
  .cs-list li { grid-template-columns: 28px minmax(0, 1fr) !important; gap: 12px !important; }
  .cs-hero-img, .cs-wide { border-radius: 12px !important; }
}

/* ============================================================
   Wide-screen containment — content capped and centred so it never
   stretches on 1920 / 2K / 4K. Keeps the 64px minimum gutter.
   ============================================================ */
@media (min-width: 1441px) {
  .pf-root > section:not(:has(> .pf-marquee)),
  .pf-topbar {
    padding-left: max(64px, calc((100% - 1440px) / 2)) !important;
    padding-right: max(64px, calc((100% - 1440px) / 2)) !important;
  }
  .pf-hero-three-lane { right: max(64px, calc((100% - 1440px) / 2)) !important; }
  .cs-wrap { max-width: 1440px; }
  /* Container caps at 1440 here — hold the hero headline to that width's
     designed size (7.2% of 1440) instead of letting it grow with the viewport. */
  .pf-glitch h1 { font-size: 104px !important; }
}

@media (min-width: 2200px) {
  .pf-root > section:not(:has(> .pf-marquee)),
  .pf-topbar {
    padding-left: max(64px, calc((100% - 1680px) / 2)) !important;
    padding-right: max(64px, calc((100% - 1680px) / 2)) !important;
  }
  .pf-hero-three-lane { right: max(64px, calc((100% - 1680px) / 2)) !important; }
  .cs-wrap { max-width: 1680px; }
  .pf-glitch h1 { font-size: 120px !important; }
}

@media (min-width: 3000px) {
  .pf-root > section:not(:has(> .pf-marquee)),
  .pf-topbar {
    padding-left: max(64px, calc((100% - 1920px) / 2)) !important;
    padding-right: max(64px, calc((100% - 1920px) / 2)) !important;
  }
  .pf-hero-three-lane { right: max(64px, calc((100% - 1920px) / 2)) !important; }
  .cs-wrap { max-width: 1920px; }
  .pf-glitch h1 { font-size: 138px !important; }
  .pf-root section h2 { font-size: 68px !important; }
  .pf-hero-meta > p, .cs-body { font-size: 21px !important; }
}

@media (max-width: 520px) {
  .pf-nav { display: none !important; }
  .pf-root section { padding: 48px 16px !important; }
  .pf-root .pf-footer { padding: 48px 16px 24px !important; }
  .cs-wrap { padding: 0 16px !important; }
  .pf-glitch h1 { font-size: clamp(30px, 11vw, 44px) !important; }
  .pf-work-list .pf-row-link h3 { font-size: clamp(26px, 10vw, 36px) !important; }
  .cs-meta-row, .cs-metric-row, .pf-footer-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .cs-metric { border-right: none !important; }
  .pf-hero-three { aspect-ratio: 1 / 1 !important; }
  .pf-marquee span { font-size: 18px !important; }
}