/* Layout — container, section padding, and grid-column system.
   Breakpoints match the approved design exactly: 560 / 900 / 1024 / 1260.
   Mobile-first: base rules are the smallest-screen layout; min-width queries progressively restore desktop layouts. */

/* ---------- No-horizontal-overflow guarantee ----------
   IMPORTANT: no ancestor of the sticky header may carry overflow-x other than `visible`
   (that silently upgrades overflow-y to auto and breaks position:sticky). Containment is
   achieved instead via box-sizing + max-width:100% below, exactly as documented by the
   design handoff's "Responsive rules" gotcha #1. */
* { min-width: 0; }
html, body { width: 100%; max-width: 100%; }
main, section, header, footer { box-sizing: border-box; max-width: 100%; }
@media (max-width: 900px) {
  html, body { overflow-x: hidden; }
}
/* Belt-and-suspenders overflow guard carried over from the approved design (its narrowest
   breakpoint, 767px, additionally capped div/form at 100vw) — kept as a safety net for any
   future content (a long unbroken string, a fixed-width embed) that might otherwise push a
   generic container wider than the viewport on small screens. */
@media (max-width: 767px) {
  html, body, main, section, header, footer, div, form { max-width: 100vw; box-sizing: border-box; }
}

/* ---------- Container ---------- */
.dd-container{max-width:var(--dd-container-max);margin:0 auto;padding:0 var(--dd-container-pad);box-sizing:border-box;width:100%}
@media (max-width:900px){ .dd-container{padding:0 var(--dd-container-pad-mobile)} }

/* Standard inner page (Programs / Curriculum / Gallery / Insights / Contact / System) */
.dd-page{max-width:var(--dd-container-max);margin:0 auto;padding:96px 48px 130px;box-sizing:border-box}
@media (max-width:900px){ .dd-page{padding:48px 20px 56px} }

.dd-page-narrow{max-width:820px;margin:0 auto;padding:96px 48px 130px;box-sizing:border-box}
@media (max-width:900px){ .dd-page-narrow{padding:48px 20px 56px} }

/* ---------- Section vertical padding ---------- */
.dd-py-130{padding-top:130px;padding-bottom:130px}
.dd-py-120{padding-top:120px;padding-bottom:120px}
.dd-py-110-90{padding-top:110px;padding-bottom:90px}
.dd-py-100{padding-top:100px;padding-bottom:100px}
@media (max-width:900px){
  .dd-py-130{padding-top:56px;padding-bottom:56px}
  .dd-py-120{padding-top:52px;padding-bottom:52px}
  .dd-py-110-90{padding-top:56px;padding-bottom:44px}
  .dd-py-100{padding-top:48px;padding-bottom:48px}
}

/* ---------- Two-column header row (heading + short intro paragraph) ----------
   Gotcha #2: any two-column flex header row must stack below 900px, or a heading with
   no explicit width gets squeezed by justify-content:space-between and breaks words mid-letter. */
.dd-header-row{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
@media (max-width:900px){ .dd-header-row{flex-direction:column;align-items:flex-start;gap:20px} }

/* ---------- Grid system ---------- */
.grid{display:grid}

/* repeat(4,1fr) */
.g-4{grid-template-columns:1fr}
@media (min-width:561px) and (max-width:900px){ .g-4{grid-template-columns:1fr 1fr} }
@media (min-width:901px){ .g-4{grid-template-columns:repeat(4,1fr)} }

/* repeat(3,1fr) */
.g-3{grid-template-columns:1fr}
@media (min-width:561px) and (max-width:900px){ .g-3{grid-template-columns:1fr 1fr} }
@media (min-width:901px){ .g-3{grid-template-columns:repeat(3,1fr)} }

/* repeat(5,auto) — hero stats */
.g-5auto{grid-template-columns:repeat(3,1fr);row-gap:16px}
@media (min-width:561px) and (max-width:900px){ .g-5auto{grid-template-columns:repeat(3,auto)} }
@media (min-width:901px){ .g-5auto{grid-template-columns:repeat(5,auto);row-gap:0} }

/* 1fr 1fr */
.g-2{grid-template-columns:1fr}
@media (min-width:901px){ .g-2{grid-template-columns:1fr 1fr} }

/* 1.1fr 1fr */
.g-11-1{grid-template-columns:1fr}
@media (min-width:901px){ .g-11-1{grid-template-columns:1.1fr 1fr} }

/* 1.2fr 1fr */
.g-12-1{grid-template-columns:1fr}
@media (min-width:901px){ .g-12-1{grid-template-columns:1.2fr 1fr} }

/* 1.35fr 1fr */
.g-135-1{grid-template-columns:1fr}
@media (min-width:901px){ .g-135-1{grid-template-columns:1.35fr 1fr} }

/* 1.3fr 1fr */
.g-13-1{grid-template-columns:1fr}
@media (min-width:901px){ .g-13-1{grid-template-columns:1.3fr 1fr} }

/* 1.4fr 1fr */
.g-14-1{grid-template-columns:1fr}
@media (min-width:901px){ .g-14-1{grid-template-columns:1.4fr 1fr} }

/* 1fr 1.25fr */
.g-1-125{grid-template-columns:1fr}
@media (min-width:901px){ .g-1-125{grid-template-columns:1fr 1.25fr} }

/* 1fr 1.15fr */
.g-1-115{grid-template-columns:1fr}
@media (min-width:901px){ .g-1-115{grid-template-columns:1fr 1.15fr} }

/* 1.3fr 1fr 1fr 1fr */
.g-13-1-1-1{grid-template-columns:1fr}
@media (min-width:901px){ .g-13-1-1-1{grid-template-columns:1.3fr 1fr 1fr 1fr} }

/* 44px 1fr — "what you'll build" numbered rows */
.g-44-1{grid-template-columns:1fr;gap:14px}
@media (min-width:901px){ .g-44-1{grid-template-columns:44px 1fr;gap:28px} }

/* 44px 1fr auto — solutions rows */
.g-44-1-auto{grid-template-columns:1fr;gap:10px}
@media (min-width:901px){ .g-44-1-auto{grid-template-columns:44px 1fr auto;gap:28px} }

/* 230px 1fr — learning journey timeline */
.g-230-1{grid-template-columns:1fr;gap:16px}
@media (min-width:901px){ .g-230-1{grid-template-columns:230px 1fr;gap:48px} }

/* 120px 1fr 40px — curriculum level toggle (superseded on mobile by .level-toggle's own areas layout) */
.g-120-1-40{grid-template-columns:1fr auto;gap:8px}
@media (min-width:901px){ .g-120-1-40{grid-template-columns:120px 1fr 40px;gap:32px} }

/* columns:2 / columns:3 (masonry-ish text columns, unused by default components but kept available) */
.dd-columns-2{columns:1}
@media (min-width:561px) and (max-width:900px){ .dd-columns-2{columns:2} }
@media (min-width:901px){ .dd-columns-2{columns:3} }