/* NOAT Responsive Layout System — STEP010
   Mobile-first layout primitives. Breakpoints are documented contracts;
   components consume these primitives instead of inventing page widths. */
:root{
  --bp-sm:36rem;--bp-md:48rem;--bp-lg:64rem;--bp-xl:80rem;--bp-2xl:96rem;
  --container-sm:40rem;--container-md:48rem;--container-lg:64rem;--container-xl:80rem;--container-2xl:96rem;
  --container-content:75rem;--container-wide:90rem;
  --grid-columns:12;--grid-gap:clamp(1rem,2vw,2rem);
  --layout-gutter:var(--page-gutter);
}

/* Full-width section -> bounded container -> 12-column grid. */
.noat-section{width:100%;padding-block:var(--section-space)}
.noat-container{width:min(calc(100% - (2 * var(--layout-gutter))),var(--container-content));margin-inline:auto}
.noat-container--wide{max-width:var(--container-wide)}
.noat-container--narrow{max-width:var(--container-md)}
.noat-container--full{width:100%;max-width:none;margin-inline:0;padding-inline:var(--layout-gutter)}
.noat-grid{display:grid;grid-template-columns:repeat(var(--grid-columns),minmax(0,1fr));gap:var(--grid-gap)}
.noat-grid>*{min-width:0}
.noat-stack{display:flex;flex-direction:column;gap:var(--grid-gap)}
.noat-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--grid-gap)}

/* Mobile is intentionally one column unless an explicit span is requested. */
.noat-col{grid-column:1/-1}
.noat-col-1{grid-column:span 1}.noat-col-2{grid-column:span 2}.noat-col-3{grid-column:span 3}.noat-col-4{grid-column:span 4}.noat-col-5{grid-column:span 5}.noat-col-6{grid-column:span 6}.noat-col-7{grid-column:span 7}.noat-col-8{grid-column:span 8}.noat-col-9{grid-column:span 9}.noat-col-10{grid-column:span 10}.noat-col-11{grid-column:span 11}.noat-col-12{grid-column:span 12}

.noat-hide-mobile{display:none!important}.noat-show-mobile{display:initial}

@media (min-width:48rem){
  .noat-col-md-1{grid-column:span 1}.noat-col-md-2{grid-column:span 2}.noat-col-md-3{grid-column:span 3}.noat-col-md-4{grid-column:span 4}.noat-col-md-5{grid-column:span 5}.noat-col-md-6{grid-column:span 6}.noat-col-md-7{grid-column:span 7}.noat-col-md-8{grid-column:span 8}.noat-col-md-9{grid-column:span 9}.noat-col-md-10{grid-column:span 10}.noat-col-md-11{grid-column:span 11}.noat-col-md-12{grid-column:span 12}
  .noat-hide-mobile{display:initial!important}.noat-show-mobile{display:none!important}
}
@media (min-width:64rem){
  .noat-col-lg-1{grid-column:span 1}.noat-col-lg-2{grid-column:span 2}.noat-col-lg-3{grid-column:span 3}.noat-col-lg-4{grid-column:span 4}.noat-col-lg-5{grid-column:span 5}.noat-col-lg-6{grid-column:span 6}.noat-col-lg-7{grid-column:span 7}.noat-col-lg-8{grid-column:span 8}.noat-col-lg-9{grid-column:span 9}.noat-col-lg-10{grid-column:span 10}.noat-col-lg-11{grid-column:span 11}.noat-col-lg-12{grid-column:span 12}
}
@media (min-width:80rem){
  .noat-col-xl-1{grid-column:span 1}.noat-col-xl-2{grid-column:span 2}.noat-col-xl-3{grid-column:span 3}.noat-col-xl-4{grid-column:span 4}.noat-col-xl-5{grid-column:span 5}.noat-col-xl-6{grid-column:span 6}.noat-col-xl-7{grid-column:span 7}.noat-col-xl-8{grid-column:span 8}.noat-col-xl-9{grid-column:span 9}.noat-col-xl-10{grid-column:span 10}.noat-col-xl-11{grid-column:span 11}.noat-col-xl-12{grid-column:span 12}
}

/* Prevent wide media/content from forcing horizontal page overflow. */
img,svg,video,canvas,iframe{max-width:100%}img,video{height:auto}pre,table{max-width:100%}