/* ============================================================
   Celva V4 — Responsive (tablet + mobile)
   Desktop: existing rules in v4.css + site.css
   Tablet landscape: 1024px and below (light polish)
   Tablet portrait:  768px and below (layout shifts)
   Mobile:           480px and below (single-column, compact)
   ============================================================ */

/* =========================================================
   TABLET LANDSCAPE (≤ 1024px) — light polish
   ========================================================= */

/* Default (desktop): hide the mobile nav sheet + backdrop entirely */
.v4 .nav-sheet,
.v4 .nav-backdrop { display: none; }
.v4 .nav__burger { display: none; }

@media (max-width: 1024px) {
  .v4 .v4-hero__grid { gap: 56px; padding: clamp(48px, 6vw, 80px) clamp(24px, 4vw, 48px); }
  .v4 .v4-hero__h1 { font-size: clamp(2.75rem, 6.2vw, 5rem); }
  .v4 .v4-hero__sub { font-size: 17.5px; }
  .v4 .v4-hero__pillars .v4-pillar__n { font-size: 28px; }
  .v4 .v4-hero__pillars .v4-pillar__l { font-size: 12px; }

  .v4 .v4-tracks__head { grid-template-columns: 1.3fr 2.2fr 0.9fr 0.9fr 0.7fr 0.25fr; gap: 20px; padding: 12px 20px; }
  .v4 .v4-track { padding: 24px 20px; gap: 20px; }
  .v4 .v4-track__code b { font-size: 16px; }

  .v4 .v4-science__inner { gap: 56px; }

  .v4 .v4-registry__grid { grid-template-columns: repeat(3, 1fr); }
  .v4 .v4-case__body { padding: 24px; }
  .v4 .v4-case blockquote { font-size: 17px; }
}

/* =========================================================
   TABLET PORTRAIT (≤ 900px) — major layout shifts
   (existing v4.css covers ≤980; we extend here)
   ========================================================= */
@media (max-width: 900px) {

  /* Nav: show burger, hide menu */
  .v4 .nav__menu { display: none; }
  .v4 .nav__phone { display: none; }
  .v4 .nav__right .btn { padding: 11px 16px; font-size: 13px; }
  .v4 .nav__burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0;
    background: transparent; border: 1px solid var(--border-strong);
    border-radius: 4px; cursor: pointer;
    font-size: 0;
    position: relative;
  }
  .v4 .nav__burger::before,
  .v4 .nav__burger::after {
    content: ''; position: absolute; left: 10px; right: 10px; height: 1.5px;
    background: var(--ink); transition: transform 280ms var(--ease-out-expo), top 280ms, opacity 200ms;
  }
  .v4 .nav__burger::before { top: 14px; }
  .v4 .nav__burger::after  { top: 23px; }
  .v4 .nav__burger.is-open::before { top: 19px; transform: rotate(45deg); }
  .v4 .nav__burger.is-open::after  { top: 19px; transform: rotate(-45deg); }

  /* Slide-in menu */
  .v4 .nav-sheet { display: flex; }  /* un-hide at mobile */
  .v4 .nav-backdrop { display: block; }
  .v4 .nav-sheet {
    position: fixed; inset: 0;
    background: #fff;
    z-index: 55;
    padding: 96px clamp(20px, 6vw, 40px) 40px;
    display: flex; flex-direction: column; gap: 0;
    transform: translateX(100%);
    transition: transform 420ms var(--ease-out-expo);
    overflow-y: auto;
  }
  .v4 .nav-sheet.is-open { transform: translateX(0); }
  .v4 .nav-sheet__group { padding: 20px 0; border-bottom: 1px solid var(--border); }
  .v4 .nav-sheet__group .v4-mono {
    font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--ink-muted); display: block; margin-bottom: 14px;
  }
  .v4 .nav-sheet a {
    display: block; padding: 12px 0;
    font-family: var(--font-display); font-weight: 400;
    font-size: 22px; color: var(--ink);
    border: 0; text-decoration: none;
    line-height: 1.3;
  }
  /* Restore button colors inside the sheet (the generic `nav-sheet a` rule above would otherwise override them) */
  .v4 .nav-sheet a.btn--primary { color: #fff; font-family: var(--font-body); font-size: 16px; font-weight: 500; }
  .v4 .nav-sheet a.btn--ghost { font-family: var(--font-body); font-size: 16px; font-weight: 500; }
  .v4 .nav-sheet a small {
    display: block; font-family: var(--font-body); font-size: 13px;
    color: var(--ink-muted); margin-top: 2px; font-weight: 400;
  }
  .v4 .nav-sheet__footer {
    margin-top: auto; padding-top: 28px;
    display: flex; flex-direction: column; gap: 14px;
  }
  .v4 .nav-sheet__footer .btn { width: 100%; justify-content: center; padding: 16px; font-size: 16px; }
  .v4 .nav-sheet__footer .v4-mono { color: var(--ink-muted); font-size: 12px; text-align: center; }

  /* System bar: truncate */
  .v4 .v4-sysbar { padding: 10px 20px; gap: 10px; font-size: 10px; flex-wrap: wrap; }
  .v4 .v4-sysbar .v4-mono { font-size: 9.5px; }
  .v4 .v4-sysbar__sep { display: none; }
  /* Hide the middle "Hospital Angeles" chunk on mobile — redundant with footer */
  .v4 .v4-sysbar > span:nth-child(3) { display: none; }

  /* Hero */
  .v4 .v4-hero__grid { grid-template-columns: 1fr; gap: 40px; padding: 48px 24px 56px; }
  .v4 .v4-hero__h1 { font-size: clamp(2.5rem, 9vw, 3.5rem); margin-bottom: 24px; }
  .v4 .v4-hero__sub { font-size: 16.5px; margin-bottom: 28px; max-width: 100%; }
  .v4 .v4-hero__ctas { gap: 20px; margin-bottom: 40px; }
  .v4 .v4-hero__ctas .btn--lg { padding: 15px 24px; font-size: 15px; }
  .v4 .v4-hero__visual { order: 2; }
  .v4 .v4-hero__img { aspect-ratio: 4/3; }
  .v4 .v4-hero__imgcap-t { font-size: 14px; }

  /* Ticker: smaller */
  .v4 .v4-hero__ticker { padding: 11px 0; }
  .v4 .v4-ticker__row { gap: 28px; font-size: 9.5px; animation-duration: 52s; }
  .v4 .v4-ticker__row span { padding-right: 28px; }
  .v4 .v4-ticker__row span::after { width: 3px; height: 3px; }

  /* Hero pillars at tablet/tablet-narrow (3-col, 640–900px):
     uniform horizontal padding so text left-edges align across columns.
     Use longhand so the ≤640 rule can still set vertical padding. */
  .v4 .v4-hero__pillars { gap: 0; padding-top: 20px; }
  .v4 .v4-hero__pillars > div { padding-left: 14px; padding-right: 14px; }
  .v4 .v4-hero__pillars > div:last-child { border-right: 0; }
  .v4 .v4-pillar__n { font-size: 22px; }
  .v4 .v4-pillar__l { font-size: 11.5px; max-width: none; }

  /* Section head: tighter */
  .v4 .v4-section__head { max-width: 100%; margin-bottom: 40px; }
  .section__h2 { font-size: clamp(1.75rem, 5vw, 2.25rem) !important; }

  /* Container padding */
  .v4 .container { padding: 0 24px; }

  /* Tracks: already stacked via v4.css ≤980. Refine spacing. */
  .v4 .v4-track { padding: 28px 24px; grid-template-areas:
    'icon icon'
    'meta meta'
    'desc desc'
    'delivery cost'
    'pill arrow'; }
  .v4 .v4-track__code { grid-area: icon / icon / meta / meta; flex-direction: row; }
  .v4 .v4-track__icon { width: 52px; height: 52px; }
  .v4 .v4-track__code b { font-size: 17px; }
  .v4 .v4-track__quote { font-size: 15.5px; line-height: 1.45; }
  .v4 .v4-track__cell b { font-size: 14px; }
  .v4 .v4-track__cell i { font-size: 10px; }

  /* Split (San Diego → TJ) */
  .split { grid-template-columns: 1fr; }
  .v4 .split__text { padding: 56px 24px 40px; }
  .v4 .split__visual { min-height: 320px; order: 2; }
  .v4 .v4-journey { left: 20px; right: 20px; top: 20px; padding: 16px 18px 14px; }

  /* Methodology: vertical timeline */
  .v4 .v4-method__head {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 0 24px 40px;
    margin-bottom: 40px;
  }
  .v4 .v4-method__head p { font-size: 15.5px; }

  .v4 .v4-steps {
    display: flex; flex-direction: column;
    border-top: 1px solid rgba(255,255,255,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.2);
    position: relative;
  }
  /* vertical line */
  .v4 .v4-steps::before {
    content: ''; position: absolute;
    left: calc(24px + 24px);  /* container pad + inset */
    top: 32px; bottom: 32px;
    width: 1px; background: rgba(255,255,255,0.18);
    z-index: 0;
  }
  .v4 .v4-step {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 20px;
    padding: 28px 24px;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.14) !important;
    min-height: 0;
    align-items: start;
    position: relative;
    z-index: 1;
  }
  .v4 .v4-step:last-child { border-bottom: 0 !important; }
  /* Make the head's children become direct grid children so the duration
     can sit in the right-hand content column instead of being crammed
     beside the step number in column 1. */
  .v4 .v4-step__head { display: contents; }
  .v4 .v4-step__num {
    grid-column: 1; grid-row: 1 / span 2;
    font-size: 22px;
    background: var(--navy-brand);
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    position: relative; z-index: 2;
    padding: 0;
    align-self: start;
  }
  .v4 .v4-step__dur {
    grid-column: 2; grid-row: 2;
    font-size: 10.5px; align-self: start;
    margin-top: 4px;
  }
  .v4 .v4-step h3 {
    grid-column: 2; grid-row: 1;
    font-size: 20px; margin-top: 4px; line-height: 1.25;
  }
  .v4 .v4-step p { grid-column: 2; font-size: 14.5px; line-height: 1.55; margin-top: 4px; }
  .v4 .v4-step__who { grid-column: 2; padding-top: 8px; font-size: 10px; }

  /* Science diagram */
  .v4 .v4-science__inner { grid-template-columns: 1fr; gap: 40px; }
  .v4 .v4-science__text h2 { font-size: clamp(1.9rem, 5vw, 2.5rem); }
  .v4 .v4-science__text > p { font-size: 15.5px; }
  .v4 .v4-science__diagram { padding: 20px; }
  .v4 .v4-spec { grid-template-columns: 1fr 1fr; }

  /* Registry */
  .v4 .v4-registry__grid { grid-template-columns: 1fr; }
  .v4 .v4-case__img { aspect-ratio: 16/10; }
  .v4 .v4-case__body { padding: 24px; gap: 14px; }
  .v4 .v4-case blockquote { font-size: 18px; }
  .v4 .v4-case__meta > div { grid-template-columns: 96px 1fr; font-size: 12.5px; }

  /* FAQ */
  .faq--split { grid-template-columns: 1fr !important; gap: 32px !important; }
  .v4 .v4-faq__list summary { grid-template-columns: 48px 1fr 24px; gap: 12px; padding: 20px 0; }
  .v4 .v4-faq__n { font-size: 11px; }
  .v4 .v4-faq__a { margin: 16px 0 0 60px; font-size: 14.5px; }
}

/* =========================================================
   MOBILE (≤ 480px) — phone specifics
   ========================================================= */
@media (max-width: 480px) {
  .v4 .nav { padding: 14px 20px; gap: 12px; }
  .v4 .nav__logo img { height: 20px; }
  .v4 .nav__right { gap: 8px; }
  .v4 .nav__right .btn { padding: 9px 14px; font-size: 12px; }

  .v4 .v4-sysbar { padding: 8px 20px; gap: 8px; }
  .v4 .v4-sysbar .v4-mono { font-size: 9px; }
  .v4 .v4-sysbar .v4-mono--ok { font-size: 9px; }

  .v4 .v4-hero__grid { padding: 32px 20px 40px; gap: 32px; }
  .v4 .v4-hero__h1 { font-size: clamp(2.25rem, 11vw, 3rem); margin-bottom: 20px; }
  .v4 .v4-hero__sub { font-size: 15.5px; margin-bottom: 24px; }
  .v4 .v4-section-tag { margin-bottom: 20px; }
  .v4 .v4-hero__ctas { flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 32px; }
  .v4 .v4-hero__ctas .btn { width: 100%; justify-content: center; }
  .v4 .v4-hero__ctas .cta-link { align-self: center; }

  /* Hero pillars: stack to 1 column on phone — no horizontal padding,
     pillar content aligns with the hero text column (headline, subhead).
     First pillar sits flush to the top (container's padding-top handles gap);
     middle & last pillars get top+bottom padding so content isn't flush against the dividers. */
  .v4 .v4-hero__pillars { grid-template-columns: 1fr; gap: 0; }
  .v4 .v4-hero__pillars > div {
    padding: 18px 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--border);
  }
  .v4 .v4-hero__pillars > div:first-child { padding-top: 0 !important; }
  .v4 .v4-hero__pillars > div:last-child { border-bottom: 0; }

  .v4 .v4-hero__imgcap { flex-direction: column; gap: 4px; }
  .v4 .v4-hero__imgcap-t { font-size: 13px; }

  /* Ticker even smaller */
  .v4 .v4-ticker__row { gap: 20px; font-size: 9px; animation-duration: 42s; }
  .v4 .v4-ticker__row span { padding-right: 20px; }

  /* Tracks */
  .v4 .v4-tracks { border: 1px solid var(--border); border-radius: 2px; }
  .v4 .v4-track {
    padding: 22px 18px;
    grid-template-areas:
      'icon icon'
      'meta meta'
      'desc desc'
      'delivery delivery'
      'cost cost'
      'pill arrow';
    gap: 14px;
  }
  /* Place the cells explicitly — :nth-of-type counts all SPAN siblings, so use position-based selectors instead */
  .v4 .v4-track .v4-track__cell:nth-child(3) { grid-area: delivery; }
  .v4 .v4-track .v4-track__cell:nth-child(4) { grid-area: cost; }
  .v4 .v4-track__code { gap: 12px; }
  .v4 .v4-track__icon { width: 44px; height: 44px; }
  .v4 .v4-track__icon svg { width: 24px; height: 24px; }
  .v4 .v4-track__code b { font-size: 16px; }
  .v4 .v4-track__quote { font-size: 14.5px; padding-left: 10px; }
  .v4 .v4-track__cell { padding: 10px 0; border-top: 1px solid var(--border); gap: 2px; }

  .v4 .v4-footnote { font-size: 10px; padding: 14px 18px; line-height: 1.5; }

  /* Split block */
  .v4 .split__text { padding: 40px 20px 28px; }
  .v4 .split__text h2 { font-size: clamp(1.6rem, 5.5vw, 2rem) !important; }
  .v4 .split__visual { min-height: 280px; }
  .v4 .v4-journey { left: 16px; right: 16px; top: 16px; padding: 14px 16px 12px; }
  .v4 .v4-journey__title { font-size: 9px; }
  .v4 .v4-journey__svg { height: 90px; }

  /* Methodology */
  .v4 .v4-method__head { padding: 0 20px 32px; }
  .v4 .v4-steps::before { left: 44px; }
  .v4 .v4-step { grid-template-columns: 44px 1fr; gap: 16px; padding: 24px 20px; }
  .v4 .v4-step__num { width: 40px; height: 40px; font-size: 22px; }
  .v4 .v4-step h3 { font-size: 19px; }

  /* Science */
  .v4 .v4-science { padding: 64px 0 !important; }
  .v4 .v4-science__inner { padding: 0 20px; gap: 32px; }
  .v4 .v4-science__diagram { padding: 16px 12px; }
  .v4 .v4-spec { grid-template-columns: 1fr; margin-top: 24px; }
  .v4 .v4-spec > div:nth-child(odd) { border-right: 0 !important; padding-right: 0 !important; }
  .v4 .v4-spec > div:nth-child(even) { padding-left: 0 !important; }

  /* Registry */
  .v4 .v4-case__img { aspect-ratio: 4/3; }
  .v4 .v4-case__body { padding: 20px; gap: 12px; }
  .v4 .v4-case blockquote { font-size: 16.5px; }
  .v4 .v4-case__meta > div { grid-template-columns: 80px 1fr; font-size: 12px; gap: 8px; }

  /* FAQ */
  .v4 .v4-faq__list summary { grid-template-columns: 1fr 24px; padding: 18px 0; font-size: 15.5px; }
  .v4 .v4-faq__n { display: none; }
  .v4 .v4-faq__a { margin: 14px 0 0 0; font-size: 14px; }

  /* Footer / section heads */
  .section__h2 { font-size: clamp(1.65rem, 6vw, 2rem) !important; line-height: 1.1 !important; }
  .v4 .v4-section__head { margin-bottom: 32px; }
  .v4 .v4-section__head .section__lede { font-size: 15px; }

  /* General section vertical padding tighten */
  .section { padding: 64px 0 !important; }
}

/* =========================================================
   MOBILE NAV SHEET — only active at ≤900px
   ========================================================= */
body.nav-open { overflow: hidden; }
.nav-backdrop {
  position: fixed; inset: 0; background: rgba(11,29,58,0.4);
  opacity: 0; pointer-events: none;
  transition: opacity 280ms;
  z-index: 50;
}
body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }