/* ============================================================
   GAO Capital — responsive overrides
   ----------------------------------------------------------
   Single source of truth for all viewport-based adjustments.
   Targets the existing inline styles in pavilion.jsx, team-page.jsx,
   funds-page.jsx, media-page.jsx, insights-page.jsx and page-shell.jsx
   via class hooks and `!important` so inline-style declarations can
   be overridden without rewriting every JSX node.

   Breakpoints:
     mobile  ≤ 640px
     tablet  641-1024px
     desktop ≥ 1025px (no overrides — original inline styles win)
   ============================================================ */

/* ============================================================
   Cross-document view transitions
   ----------------------------------------------------------
   Modern browsers (Chrome 126+, Safari 18+) crossfade between pages
   instead of doing a hard cut. Combined with the speculation-rules
   prefetch, clicking a nav link feels nearly instant and smooth.
   Older browsers ignore @view-transition and get the @supports
   fallback below — a subtle fade-in on every page load.
   ============================================================ */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 280ms;
  animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
}

@supports not (view-transition-name: none) {
  body {
    animation: gao-page-fade-in 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  @keyframes gao-page-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 1ms;
  }
  body { animation: none; }
}

/* ---------- Hamburger menu (mobile nav) ---------- */
/* Hidden on desktop; the JSX renders it always — CSS toggles visibility. */
.pav-nav-burger,
.team-nav-burger,
.ledger-nav-burger {
  display: none;
  background: transparent;
  border: 0;
  padding: 8px;
  cursor: pointer;
  color: var(--ink, #1c1612);
}
.pav-nav-burger svg,
.team-nav-burger svg,
.ledger-nav-burger svg {
  display: block;
  width: 26px;
  height: 26px;
}

/* Mobile drawer container (rendered into the nav by JSX) */
.pav-nav-drawer,
.team-nav-drawer,
.ledger-nav-drawer {
  display: none;
}

/* ============================================================
   TABLET (901–1024px) — only padding adjustments, full nav still fits
   ============================================================ */
@media (min-width: 901px) and (max-width: 1024px) {
  /* Section padding — pull in from 64px to 40px */
  .pav-section,
  .team-section,
  .ledger-section {
    padding: 96px 40px !important;
  }
  .pav-nav,
  .team-nav,
  .ledger-nav {
    padding: 20px 40px !important;
  }
  .pav-nav.scrolled,
  .team-nav.scrolled,
  .ledger-nav.scrolled {
    padding: 10px 40px !important;
  }
  /* Tighten hero padding too */
  .pav-root section,
  .team-root section,
  .ledger-root section {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

/* ============================================================
   MOBILE / SMALL-TABLET (≤ 900px) — hamburger nav, stacked grids
   The 7-item desktop nav can't fit until ~900px+, so we use the
   mobile treatment up to that width.
   ============================================================ */
@media (max-width: 900px) {
  /* ---------- Section padding ---------- */
  .pav-section,
  .team-section {
    padding: 60px 20px !important;
  }
  .pav-root section,
  .team-root section {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  /* ---------- Nav (mobile) ---------- */
  .pav-nav,
  .team-nav {
    padding: 16px 20px !important;
  }
  .pav-nav.scrolled,
  .team-nav.scrolled {
    padding: 10px 20px !important;
  }
  /* Hide desktop nav links on mobile */
  .pav-nav-links,
  .team-nav-links {
    display: none !important;
  }
  /* Show hamburger button */
  .pav-nav-burger,
  .team-nav-burger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  /* Drawer — full-width panel that drops below the nav */
  .pav-nav-drawer,
  .team-nav-drawer {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(247, 247, 249, 0.98);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(28, 22, 18, 0.08);
    padding: 16px 20px 24px;
    transform-origin: top;
    transform: scaleY(0);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.25s ease;
  }
  .pav-nav-drawer.open,
  .team-nav-drawer.open {
    transform: scaleY(1);
    opacity: 1;
    pointer-events: auto;
  }
  .pav-nav-drawer a,
  .team-nav-drawer a {
    display: block;
    padding: 14px 4px;
    font-size: 16px;
    color: rgba(28, 22, 18, 0.85);
    text-decoration: none;
    border-bottom: 1px solid rgba(28, 22, 18, 0.08);
    letter-spacing: 0.02em;
  }
  .pav-nav-drawer a:last-child,
  .team-nav-drawer a:last-child {
    border-bottom: 0;
  }
  .pav-nav-drawer .pav-btn,
  .team-nav-drawer .team-btn {
    display: inline-flex;
    margin-top: 12px;
    border-bottom: 0 !important;
    /* `.pav-nav-drawer a` (0,1,1) was overriding .pav-btn (0,1,0) and
       turning the cream button text dark — making it dark on dark.
       Force the button's intended colors. */
    color: #f7f7f9 !important;
    background: #1c1612 !important;
  }
  .pav-nav-drawer .pav-btn:hover,
  .team-nav-drawer .team-btn:hover {
    background: var(--accent, #C8102E) !important;
  }

  /* ---------- Hide decorative watermarks (the giant offset 高) ---------- */
  .pav-root section img[aria-hidden="true"],
  .team-root section img[aria-hidden="true"] {
    display: none !important;
  }

  /* ---------- Grid collapse — every multi-col inline grid → single col ---------- */
  .pav-grid-hero,
  .pav-grid-stats,
  .pav-grid-logo,
  .pav-grid-press,
  .pav-grid-funds,
  .pav-grid-cta,
  .pav-grid-interviews,
  .pav-grid-videos,
  .pav-grid-dna,
  .pav-grid-team {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  /* Awards row: collapse 3-col to year above / body below / arrow inline */
  .pav-grid-awards {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 20px 0 !important;
  }
  /* Media articles row: 180px metadata col collapses */
  .pav-row-article {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 20px 0 !important;
  }
  /* Podcast list rows */
  .pav-row-podcast {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 20px 0 !important;
  }
  /* Insights list rows: number/title/cta/arrow → stack */
  .pav-row-insight {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 24px 0 !important;
  }

  /* ---------- Team page specifics ---------- */
  /* Stat trio in team hero — stack */
  .team-stats {
    flex-direction: column !important;
    gap: 24px !important;
  }
  .team-stats > div[style*="background"] {
    display: none !important;
  } /* hide vertical dividers */
  /* Team card flex basis — full width */
  .team-grid > div {
    flex: 0 1 100% !important;
    max-width: 100% !important;
  }
  /* Team bio modal — single col */
  .team-modal-grid {
    grid-template-columns: 1fr !important;
  }
  .team-modal-grid > div:first-child img {
    min-height: 320px !important;
    max-height: 50vh !important;
  }
  .team-modal-bio {
    padding: 32px 24px !important;
  }
  .team-modal-bio h3 {
    font-size: 36px !important;
  }

  /* ---------- Funds card padding ---------- */
  .pav-fund-card {
    padding: 24px !important;
  }
  .pav-fund-card h3 {
    font-size: 26px !important;
    min-height: auto !important;
  }

  /* ---------- Footer ---------- */
  .pav-footer {
    padding: 48px 20px 32px !important;
  }
  .pav-footer-top {
    flex-direction: column !important;
    gap: 32px !important;
  }
  .pav-footer-links {
    flex-direction: column !important;
    gap: 28px !important;
  }
  .pav-footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    font-size: 11px !important;
  }

  /* ---------- Hero text fine-tuning ---------- */
  .pav-root h1,
  .team-root h1 {
    margin-top: 24px !important;
  }
  /* Pavilion hero copy/CTA grid stacks → tighter gap */
  .pav-hero-cta-row {
    gap: 24px !important;
  }
  .pav-hero-cta-row a {
    width: 100%;
    justify-content: center;
  }

  /* ---------- Contact: vertical group spacing ---------- */
  .pav-contact-grid {
    flex-direction: column !important;
    gap: 24px !important;
  }

  /* ---------- LogoStack tile padding ---------- */
  .pav-logo-tile {
    padding: 16px 12px !important;
  }
  .pav-logo-tile span {
    font-size: 15px !important;
  }

  /* ---------- Press cards ---------- */
  .pav-press-article {
    padding: 24px !important;
  }
  .pav-press-article p {
    font-size: 17px !important;
  }

  /* ---------- Hide tweaks panel on mobile ---------- */
  .twk-panel {
    display: none !important;
  }
}

/* ============================================================
   LEDGER (GAO Advisors home) — mobile hamburger + grid collapse
   ----------------------------------------------------------
   The Advisors home uses the "Ledger" direction (ledger-* classes),
   not Pavilion (pav-*), so it needs its own viewport rules. These
   mirror the pav-* logic: hide the desktop links, show the burger,
   drop a full-width drawer below the masthead, and collapse every
   2-column grid to a single column.
   ============================================================ */
@media (max-width: 900px) {
  /* ---------- Nav (mobile) ---------- */
  .ledger-nav { padding: 16px 20px !important; }
  .ledger-nav.scrolled { padding: 10px 20px !important; }
  /* Hide desktop links, show hamburger */
  .ledger-nav-links { display: none !important; }
  .ledger-nav-burger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  /* Drawer — full-width panel that drops below the masthead */
  .ledger-nav-drawer {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(247, 247, 249, 0.98);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(26, 22, 17, 0.08);
    padding: 12px 20px 20px;
    transform-origin: top;
    transform: scaleY(0);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.25s ease;
  }
  .ledger-nav-drawer.open {
    transform: scaleY(1);
    opacity: 1;
    pointer-events: auto;
  }
  .ledger-nav-drawer a {
    display: block;
    padding: 14px 4px;
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(26, 22, 17, 0.85);
    text-decoration: none;
    border-bottom: 1px solid rgba(26, 22, 17, 0.08);
  }
  .ledger-nav-drawer a:last-child { border-bottom: 0; }

  /* ---------- Section padding ---------- */
  .ledger-section { padding: 60px 20px !important; }
  .ledger-hero { padding: 48px 20px 40px !important; }

  /* ---------- Hero headline + drop-cap intro ---------- */
  /* Shrink the clamp min so the headline can't overflow narrow phones,
     and kill the fixed 470px width on the intro paragraph. */
  .ledger-hero h1 { font-size: clamp(30px, 10vw, 60px) !important; margin-top: 8px !important; }
  .ledger-drop { max-width: 100% !important; }
  .ledger-drop-text {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* ---------- Grids → single column ---------- */
  .ledger-grid-split,
  .ledger-grid-head,
  .ledger-grid-cases,
  .ledger-grid-logo {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .ledger-grid-logo { gap: 40px !important; }
  .ledger-grid-head { gap: 16px !important; }
  .ledger-grid-head h2 { font-size: 38px !important; }

  /* Expertise list — was column-flow over 4 fixed 96px rows; revert to a
     natural single-column row flow so all 8 items stack vertically. */
  .ledger-grid-expertise {
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    grid-template-rows: auto !important;
    column-gap: 0 !important;
  }

  /* ---------- Contact methods stack ---------- */
  .ledger-contact-grid {
    flex-direction: column !important;
    gap: 28px !important;
  }

  /* ---------- Footer ---------- */
  .ledger-footer { padding: 48px 20px 32px !important; }
  .ledger-footer-top { flex-direction: column !important; gap: 32px !important; }
  .ledger-footer-links { flex-direction: column !important; gap: 28px !important; }
}

/* ============================================================
   SMALL MOBILE (≤ 400px) — additional tightening
   ============================================================ */
@media (max-width: 400px) {
  .pav-section,
  .team-section,
  .ledger-section {
    padding: 48px 16px !important;
  }
  .ledger-hero { padding: 40px 16px 32px !important; }
  .pav-root section,
  .team-root section,
  .ledger-root section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .pav-nav,
  .team-nav,
  .pav-nav.scrolled,
  .team-nav.scrolled,
  .ledger-nav,
  .ledger-nav.scrolled {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}