/* Quina da Sorte: in-page nav, how it works, next edition, program, cascade +
 * modalidades, verification, results archive, rules. Shared pieces reused. */

html { scroll-padding-top: 16px; }

/* ── in-page nav ──────────────────────────────────────────────────────── */
.q-nav { padding: 26px 0 0; }
.q-nav .seg { list-style: none; margin: 0; padding: 0; }
.q-nav .seg li { display: flex; }
.q-nav .seg li + li { border-left: var(--bw) solid var(--color-ink); }
.q-nav .seg a { font-size: 15px; }

/* ── 1 como funciona ──────────────────────────────────────────────────── */
.cf-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: start; }
.cf-text { margin-top: 22px; }
.cf-side { display: grid; gap: 28px; }
.cf-side .stats b { color: var(--color-brand-text); }
.cf-photo { margin: 0; }
.cf-photo .print { aspect-ratio: 1203 / 529; }
.cf-steps-h { margin-top: 56px; font: 400 clamp(24px, 2.2vw, 30px)/1.1 var(--font-display); }
.cf-steps { margin-top: 34px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cf-gallery { margin-top: 44px; }

/* ── 2 próxima edição ─────────────────────────────────────────────────── */
.pe-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: center; }
.pe-facts { margin-top: 24px; }
.pe-btns { margin-top: 26px; }
.pe-media .xilo { aspect-ratio: 16 / 9; border: var(--bw) solid var(--color-ink); box-shadow: var(--shadow-block); }

/* ── 3 programa ───────────────────────────────────────────────────────── */
.q-prog td { vertical-align: middle; }
.q-sorteio { font: 400 13px/1.35 var(--font-data); color: var(--color-ink-2); }
.sup-h { margin-top: 44px; font: 400 clamp(24px, 2.2vw, 30px)/1.1 var(--font-display); }
.sup-lead { margin: 8px 0 18px; color: var(--color-ink-2); max-width: 46em; }

/* ── 4 modalidades ────────────────────────────────────────────────────── */
.md-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: start; }
.md-sub { font: 400 13px/1.3 var(--font-data); text-transform: uppercase; letter-spacing: .06em; color: var(--color-ink-2); }
.md-note { margin-top: 18px; font-size: 16px; line-height: 1.6; max-width: 40em; }
.md-list { display: grid; gap: 0; border: var(--bw) solid var(--color-ink); background: var(--color-surface); box-shadow: var(--shadow-block); }
.md-item { padding: 16px 18px; }
.md-item + .md-item { border-top: 1.5px dashed var(--color-ink); }
.md-item h3 { display: flex; align-items: center; gap: 10px; font: 700 17px/1.3 var(--font-body); }
.md-item h3 .icon { color: var(--color-brand-text); }
.md-item p { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--color-ink-2); }
.md-warn { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 14px 18px; background: var(--color-ink); color: var(--color-bg); font-size: 14px; line-height: 1.5; }
.md-warn .icon { color: var(--color-sun); }

/* ── 5 conferência ────────────────────────────────────────────────────── */
.cn-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cn-grid .fo-text a { color: var(--color-accent); font-weight: 600; }
.cn-gallery { margin-top: 48px; }
.cn-gallery figure.wide .print { aspect-ratio: 1280 / 322; }

/* ── 6 resultados ─────────────────────────────────────────────────────── */
.rs-last { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 44px; align-items: center; }
.rs-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 22px; font: 700 15px/1.3 var(--font-data); }
.rs-photo { margin: 0; }
.rs-photo .print { aspect-ratio: 1280 / 335; }
.rs-full { margin-top: 30px; }
.arq-h { margin: 52px 0 18px; font: 400 clamp(24px, 2.2vw, 30px)/1.1 var(--font-display); }
.q-arq .combo-cell { white-space: nowrap; }
.q-pos { display: block; font-size: 14px; line-height: 1.35; }
.q-pos b { display: inline-block; min-width: 24px; font-weight: 700; }
.arq-note { margin-top: 14px; }

/* ── 7 regulamento ────────────────────────────────────────────────────── */
.rg-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; }
.rg-honest { margin-top: 24px; }
.rg-btns { margin-top: 24px; }
.rg-btns .btn--ink small { color: var(--color-foot-muted); }
.rg-photo { margin: 32px 0 0; }
.rg-photo .xilo { aspect-ratio: 4 / 3; border: var(--bw) solid var(--color-ink); }
.rg-photo .xilo img { object-position: 50% 40%; }
.rg-list { list-style: none; padding: 0; margin: 0; counter-reset: rg; border-top: var(--bw) solid var(--color-ink); }
.rg-list li { counter-increment: rg; display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--color-line-soft); }
.rg-list li::before { content: counter(rg, decimal-leading-zero); grid-row: 1 / span 2; font: 400 30px/1 var(--font-display); color: var(--color-brand-text); }
.rg-list h3 { font: 700 17px/1.3 var(--font-body); }
.rg-list p { margin-top: 4px; font-size: 15px; line-height: 1.55; color: var(--color-ink-2); }

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .cf-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .cf-grid, .pe-grid, .md-grid, .rs-last, .rg-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .cn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .q-nav .seg { display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; }
  .q-nav .seg a { white-space: nowrap; padding: 0 14px; }
  .cf-steps { grid-template-columns: minmax(0, 1fr); }
  .cn-grid { grid-template-columns: minmax(0, 1fr); }
  .cn-grid .folheto:nth-child(n) { --tilt: 0deg; }
  .dtable--cards caption { display: block; }
  .q-pos { display: inline; }
  .rg-list li { grid-template-columns: 40px minmax(0, 1fr); }
  .rg-list li::before { font-size: 24px; }
}
.rs-full-h { font: 700 17px/1.3 var(--font-body); }
.cn-grid .fo-link { white-space: normal; flex-wrap: wrap; }

/* the four Quina buttons sit 2 × 2 in the narrow column at every desktop width */
@media (min-width: 761px) {
  .btn-row:has(> :nth-child(4):last-child) { display: grid; grid-template-columns: repeat(2, max-content); }
}