/* ============================================================
   SIPI v10 — Layouts
   Extracted from docs/v2-source-of-truth/sipi_v10_mock.html (Task A2)
   Containers, section spacing, background variants, responsive
   breakpoints.
   ============================================================ */

/* --- Main wrapper --- */
main{padding-top:72px}

/* --- Container + section spacing --- */
.con{max-width:var(--con);margin:0 auto;padding:0 var(--gut)}
.sec{padding:clamp(60px,7.5vw,104px) 0}
.sec-sm{padding:clamp(40px,5vw,72px) 0}
.alt{background:var(--off)}
.dark{background:var(--navy);color:#fff}

/* --- Section head scaffold (reused across pages) --- */
.sec-head{margin-bottom:40px;max-width:780px}
.sec-head .lbl{margin-bottom:14px}
.sec-head .rule{margin-bottom:22px}
.sec-head .h2{margin-bottom:18px}
.sec-head .lead-text{color:var(--muted)}

/* --- Two-column layout helper (legacy; About no longer uses) --- */
.col2{display:grid;grid-template-columns:1.3fr 1fr;gap:64px;align-items:start}
.col2 .lead-text{margin-bottom:24px}
.col2-side{background:var(--off);padding:36px 32px;border-top:3px solid var(--gold)}
.col2-side .lbl{margin-bottom:8px}
/* ============================================================
   .col2 globally suppressed 2026-05-05 (theme 1.0.83) per Anjali —
   the two-column layout was not adding value across templates and
   the right-side aside content (Active work / sidebar blocks) is
   intentionally muted for now. Implementation:
     1. .col2 is forced to single-column block flow (override the
        grid-template-columns rule defined elsewhere in this file).
     2. .col2-side is hidden — its post-meta content stays in the DB
        so the aside can be reinstated by deleting these two rules.
   The .col2-side h4 / p typography rules are kept below as harmless
   no-ops so reinstating doesn't require restoring the typography too.
   ============================================================ */
.col2{display:block;grid-template-columns:none;gap:0}
.col2-side{display:none}
.col2-side h4{font-family:var(--ff-display);font-size:20px;font-weight:300;color:var(--heading);margin-bottom:14px}
.col2-side p{font-size:15.5px;line-height:1.7;color:var(--muted);font-weight:300;margin-bottom:14px}

/* --- About page: single-column prose + inline horizontal "at a glance" callout
       Replaces the 1.3fr/1fr split that left whitespace on the right of the prose.
       The callout takes the place of the old <aside class="col2-side"> but
       reads horizontally below the prose, full-width, minimal vertical space. --- */
.about-prose{max-width:820px;margin:0 auto}
.about-prose .lead-text{margin-bottom:24px}
.about-glance{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;
  background:var(--off);padding:28px 32px;border-top:3px solid var(--gold);
  border-radius:var(--r);margin-top:48px}
.about-glance-cell .lbl{margin-bottom:6px}
.about-glance-h{font-family:var(--ff-display);font-size:20px;font-weight:300;
  color:var(--heading);margin:0 0 8px;line-height:1.25}
.about-glance-cell p{font-size:15.5px;line-height:1.7;color:var(--muted);
  font-weight:300;margin:0}

/* --- Responsive breakpoints --- */
@media (max-width:1100px){
  .nav-inner{gap:24px}
  .nav-links{gap:22px}
  .lp-row{grid-template-columns:repeat(2,1fr)}
  .acc-body-inner{grid-template-columns:1fr;gap:24px}
  .col2,.support-grid{grid-template-columns:1fr;gap:32px}
  .about-glance{grid-template-columns:1fr;gap:20px;padding:24px 22px}
  .about-prose{max-width:none}
}
@media (max-width:860px){
  .nav-inner{padding:0 24px}
  /* CRITICAL: drop backdrop-filter on .nav at mobile breakpoint.
     backdrop-filter creates a new containing block which traps any
     position:fixed descendant relative to .nav (64-72px tall) instead
     of the viewport. Without this override, the drawer was being
     height-clipped to the nav's own height. Solid white bg gives the
     same visual result without the containing-block side-effect. */
  .nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:#ffffff}
  /* nav-links: hide as inline row, show via .open class as full-screen drawer.
     The :target fallback (`#nav-links-main:target`) is a JS-free safety net —
     if for any reason the toggle's JS handler fails (CSP block, cache miss,
     race condition), an `<a href="#nav-links-main">` link path still opens
     the drawer. Both .open and :target produce the same visible state. */
  .nav-links{
    display:none;position:fixed;top:72px;left:0;right:0;bottom:0;
    background:#ffffff;
    flex-direction:column;align-items:flex-start;gap:0;
    padding:32px 28px;overflow-y:auto;z-index:1000;
    border-top:1px solid var(--border);
    box-shadow:0 8px 30px rgba(0,0,0,.12);
  }
  .nav-links.open,
  #nav-links-main:target{display:flex}
  .nav-links .nl{
    display:block;width:100%;font-size:18px;padding:18px 0;
    border-bottom:1px solid var(--border);
  }
  .nav-links .nl-drop::after{float:right}
  .nav-links .dd{
    position:static;transform:none;opacity:1;visibility:visible;
    box-shadow:none;border:0;background:transparent;min-width:0;
    padding:0 0 0 14px;margin-top:6px;
  }
  .nav-links .ddi{padding:12px 0;border-bottom:0;font-size:15px}
  .nav-ctas .nav-cta-ghost{display:none}
  /* Hamburger toggle: visible only at this breakpoint */
  .nav-toggle{
    display:flex;flex-direction:column;justify-content:center;
    width:44px;height:44px;padding:10px;margin-left:auto;
    background:transparent;border:0;cursor:pointer;
  }
  .nav-toggle span{
    display:block;height:2px;width:100%;background:var(--navy);
    transition:transform .25s ease,opacity .25s ease;
  }
  .nav-toggle span:not(:last-child){margin-bottom:5px}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){
    transform:translateY(7px) rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
  }
  .flip-row,.tao-row,.gc-row,.tc-row,.event-row,.ins-row,.benefit-row,.stage-row,.vision-row{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr;gap:36px}
  .hero{min-height:auto;padding:120px 0 80px}
  .hero-meta{display:none}
  .cycle-row,.amt-row{grid-template-columns:repeat(2,1fr)}
  .lp-row{grid-template-columns:1fr}
}
/* Above 860px: hamburger hidden, nav-links inline */
@media (min-width:861px){
  .nav-toggle{display:none}
}
/* --- Phone-tight breakpoint (iPhone SE / Pro) --- */
@media (max-width:560px){
  .nav{height:64px}
  .nav-inner{padding:0 18px;gap:14px}
  .nav-links{top:64px}
  .nav-ctas{margin-left:0;gap:8px}
  .nav-ctas .nav-cta{padding:8px 12px;font-size:12px}
  .sec{padding:44px 0}
  .con{padding:0 22px}
  .hero{padding:96px 0 56px}
  .h1{font-size:clamp(32px,8vw,42px)}
  .h2{font-size:clamp(24px,6vw,32px)}
  .lead-text{font-size:17px}
  .foot-grid{grid-template-columns:1fr;gap:28px}
  .cycle-row,.amt-row{grid-template-columns:1fr}
  .flip-card{height:340px}
  .tao-cell{height:auto;min-height:260px}
  /* v1.0.63 (Anjali 2026-05-03 ask) — TAO/flip/vision rows STACK VERTICALLY on
   * phone instead of horizontal-scrolling. The earlier scroll-snap pattern
   * (v1.0.35) caused content to overflow off-screen, hurting comprehension. */
  .flip-row,
  .tao-row,
  .vision-row{
    display:grid !important;
    grid-template-columns:1fr !important;
    overflow-x:visible !important;
    scroll-snap-type:none !important;
    gap:1px;padding-bottom:0;
  }
  .flip-row .flip-card,
  .tao-row .tao-cell,
  .vision-row > *{
    flex:none;width:auto;min-width:0;scroll-snap-align:none;
  }
  /* Legacy block (v1.0.35) kept inert below — superseded by the rules above. */
  .vision-row-legacy{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    grid-template-columns:none;gap:1px;padding-bottom:8px;
    -webkit-overflow-scrolling:touch;
  }
  .vision-row > .vision-card,
  .vision-row > .flip-card{
    flex:0 0 88%;scroll-snap-align:center;min-width:300px;
  }
}