/* Responsive foundations.
   Mobile-first. Four breakpoints; media queries always min-width so the base
   declaration IS the mobile case. Values below are the only widths the system
   recognises — do not invent per-component breakpoints. */

:root{
/* Breakpoints. Not usable inside @media (CSS vars are illegal there) —
   they are documentation + JS reference. Literal values must match. */
--bp-sm:480px;
--bp-md:768px;
--bp-lg:1024px;
--bp-xl:1280px;

/* Page gutters: the inline padding of every full-bleed section. */
--gutter:20px; /* @kind spacing */

/* Container widths. --container-max (1120px) lives in spacing.css. */
--container-narrow:760px;
--container-wide:1360px;

/* Reading measure. Body copy never exceeds this regardless of container. */
--measure:64ch;

/* Vertical rhythm between page sections. */
--section-y:var(--space-16);
--section-y-lg:var(--space-20);

/* Grid: 6 columns on mobile, 12 from --bp-md up. */
--grid-cols:6; /* @kind other */
--grid-gap:var(--space-5);
}

@media (min-width:768px){:root{--gutter:32px; /* @kind spacing */ --grid-cols:12; /* @kind other */ --grid-gap:var(--space-6);--section-y:var(--space-20);--section-y-lg:var(--space-24)}}
@media (min-width:1024px){:root{--gutter:48px; /* @kind spacing */ --grid-gap:var(--space-8);--section-y:var(--space-24);--section-y-lg:var(--space-32)}}

/* Fluid display type. Scales between the --bp-sm and --bp-xl viewports, then
   locks. Overrides the fixed values in typography.css, which remain the
   desktop ceiling and the value print templates use. */
:root{
--text-display-xl:clamp(2.5rem,1.35rem + 5.75vw,4.5rem);
--text-display-lg:clamp(2rem,1.28rem + 3.6vw,3.25rem);
--text-display-md:clamp(1.5rem,1.36rem + 0.7vw,1.75rem);
--text-display-sm:clamp(1.25rem,1.18rem + 0.35vw,1.375rem);
--text-body-lg:clamp(1rem,0.93rem + 0.35vw,1.125rem);
}

@media print{:root{--gutter:0; /* @kind spacing */}}

/* Print resets fluid type to the fixed scale — vw units are meaningless on paper. */
@media print{:root{--text-display-xl:4.5rem;--text-display-lg:3.25rem;--text-display-md:1.75rem;--text-display-sm:1.375rem;--text-body-lg:1.125rem}}

/* Utilities. Optional — components may inline the same values. */
.ds-container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--gutter);box-sizing:border-box}
.ds-container--narrow{max-width:var(--container-narrow)}
.ds-container--wide{max-width:var(--container-wide)}
.ds-section{padding-block:var(--section-y)}
.ds-section--lg{padding-block:var(--section-y-lg)}
.ds-grid{display:grid;grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr));gap:var(--grid-gap)}
.ds-measure{max-width:var(--measure)}
/* SectionHeader split layout collapses to a single column below md. */
@media (max-width:767px){.ds-sh-split{grid-template-columns:1fr !important;gap:var(--space-5) !important}
.ds-hero-split{grid-template-columns:1fr !important;gap:var(--space-10) !important}
.ds-cta-inline{flex-direction:column !important;align-items:flex-start !important;gap:var(--space-6) !important}
.ds-pract-row{flex-direction:column !important;gap:var(--space-5) !important}
.ds-pract-row>div:first-child{width:100% !important}
.ds-form-grid{grid-template-columns:1fr !important}}

/* NavBar drawer keyframes — the only component animation that cannot be inline. */
@keyframes dsFade{from{opacity:0}to{opacity:1}}
@keyframes dsSlideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){@keyframes dsSlideIn{from{transform:none}to{transform:none}}}

/* Touch targets: 44px minimum below --bp-lg, where input is likely touch. */
@media (max-width:1023px){.ds-touch,button,a.ds-btn,input,select,textarea{min-height:44px}}