/* ==========================================================================
   grid.css — minimal & robust (mobile-first)
   - container
   - layout grid (12 cols)
   - utility rows for editorial sections
   ========================================================================== */

:root{
  --max: 1180px;
  --gutter: clamp(18px, 4vw, 40px);
  --gap: clamp(14px, 2vw, 24px);

  --s1: clamp(8px, 1.2vw, 12px);
  --s2: clamp(12px, 1.6vw, 18px);
  --s3: clamp(18px, 2.2vw, 26px);
  --s4: clamp(26px, 3.6vw, 44px);
  --s5: clamp(38px, 5.6vw, 76px);
}

.container{
  width: min(var(--max), 100% - (var(--gutter) * 2));
  margin-inline: auto;
}

.section{ padding-block: var(--s5); }
.section--tight{ padding-block: var(--s4); }
.section--line{ border-top: 1px solid var(--line); }

.grid{
  display:grid;
  gap: var(--gap);
  grid-template-columns: repeat(12, minmax(0,1fr));
  align-items: start;
}

.col-12{ grid-column: 1 / -1; }
.col-8{ grid-column: span 8; }
.col-7{ grid-column: span 7; }
.col-6{ grid-column: span 6; }
.col-5{ grid-column: span 5; }
.col-4{ grid-column: span 4; }
.col-3{ grid-column: span 3; }

@media (max-width: 980px){
  .col-8,.col-7,.col-6,.col-5,.col-4,.col-3{ grid-column: 1 / -1; }
}

.stack{ display:grid; gap: var(--gap); }
.stack-sm{ display:grid; gap: var(--s2); }
.stack-md{ display:grid; gap: var(--s3); }
.stack-lg{ display:grid; gap: var(--s4); }

.row{
  display:flex;
  gap: var(--gap);
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}