/* ============================================================
   layout.css — containers, grids, sections, rules
   ============================================================ */

/* -------- Containers -------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--narrow { max-width: var(--measure-wide); }
.container--full   { max-width: 100%; padding-inline: var(--container-pad); }

/* -------- Sections -------- */
.section {
  padding-block: var(--sp-10);
  position: relative;
}

.section--tight  { padding-block: var(--sp-8); }
.section--loose  { padding-block: calc(var(--sp-10) + var(--sp-7)); }

.section--bone {
  background: var(--bone);
  color: var(--ink);
}
.section--bone .eyebrow { color: var(--blood); }
.section--bone .kicker { color: var(--brick); }

.section--iron {
  background: var(--iron);
}

.section--brick {
  background: var(--brick);
  color: var(--bone);
}
.section--brick .eyebrow { color: var(--bone); opacity: 0.8; }

@media (max-width: 720px) {
  .section { padding-block: var(--sp-8); }
  .section--loose { padding-block: var(--sp-9); }
}

/* -------- Section heads -------- */
.section__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}

.section__head--split {
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  align-items: end;
}
@media (min-width: 880px) {
  .section__head--split { grid-template-columns: 1.2fr 1fr; }
}

/* -------- Rules (horizontal dividers) -------- */
.rule {
  height: 1px;
  background: var(--rule);
  border: 0;
  margin-block: var(--sp-7);
}

.rule--strong { background: var(--rule-strong); }
.rule--brick  { background: var(--brick); height: 2px; }
.rule--double {
  background: none;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule);
  height: 4px;
}

/* Edge rule: a full-bleed top/bottom hairline */
.edge-rule {
  position: relative;
}
.edge-rule::before,
.edge-rule::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--rule);
}
.edge-rule::before { top: 0; }
.edge-rule::after  { bottom: 0; }

/* -------- Grids -------- */
.grid { display: grid; gap: var(--sp-6); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr 1fr; }

@media (min-width: 720px) {
  .grid--2 { grid-template-columns: 1fr 1fr; }
  .grid--3 { grid-template-columns: 1fr 1fr 1fr; }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Asymmetric editorial grid */
.grid--editorial {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7);
}
@media (min-width: 900px) {
  .grid--editorial {
    grid-template-columns: 5fr 7fr;
    align-items: start;
  }
}

/* Numbered list grid */
.grid--numbered {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7);
  counter-reset: nlist;
}
@media (min-width: 720px) {
  .grid--numbered { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1080px) {
  .grid--numbered { grid-template-columns: repeat(4, 1fr); }
}

/* -------- Utilities -------- */
.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }
.stack-xl > * + * { margin-top: var(--sp-7); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

.center { display: grid; place-items: center; }

.text-center { text-align: center; }
.text-right { text-align: right; }
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }

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

.hide-mobile { display: none; }
@media (min-width: 720px) { .hide-mobile { display: revert; } }

.hide-desktop { display: revert; }
@media (min-width: 720px) { .hide-desktop { display: none; } }