/* Home — hero + bento as in mockup A; sections 03/05/06/07 new, same sheet grid. */

/* ── hero (mockup) ────────────────────────────────────────────────────── */
.hero { padding: 56px 0 0; }
.hero h1 { font-size: var(--fs-h1); line-height: .9; letter-spacing: -.055em; font-weight: 600; margin: 40px 0 0; max-width: 10ch; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 32px 48px; margin-top: 28px; align-items: end; }
.hero__sub { font-size: var(--fs-h1-sub); line-height: 1.05; letter-spacing: -.035em; font-weight: 500; margin: 0; display: flex; gap: 16px; align-items: flex-start; }
.hero__sub .oct { --s: 36px; font-size: 10px; margin-top: 4px; }
.hero__sub em { font-style: normal; color: var(--color-brand); }
.hero__lead { margin: 0 0 20px; color: var(--color-muted); font-size: var(--fs-lead); max-width: 44ch; }
.hero__lead strong { color: var(--color-text); font-weight: 600; }

/* ── bento (mockup) ───────────────────────────────────────────────────── */
.bento { margin-top: 48px; }
.t-next { grid-column: 1 / 8; grid-row: 1 / 3; padding: 28px 32px; }
.t-photo { grid-column: 8 / 13; grid-row: 1; margin: 0; display: flex; flex-direction: column; }
.t-result { grid-column: 8 / 13; grid-row: 2; padding: 22px 24px; }
.t-docs { grid-column: 1 / 7; grid-row: 3; padding: 26px 28px 18px; }
.t-replay { grid-column: 7 / 13; grid-row: 3; padding: 26px 28px 24px; display: flex; flex-direction: column; }

.next__top { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; }
.next__top .oct { --s: 84px; font-size: 30px; }
.next__date { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.25rem); line-height: .95; letter-spacing: -.05em; font-weight: 600; margin: 10px 0 0; }
.next__top .kick { line-height: 1.35; }
.next__date .mono { font-weight: 500; letter-spacing: -.04em; }
.next__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; align-items: center; margin-top: 10px; }
.next__place { font-size: 13px; color: var(--color-muted); }

.t-photo picture { flex: 1; display: block; min-height: 220px; }
.t-photo img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; }
.t-photo figcaption { padding: 12px 20px 14px; font-size: 14px; color: var(--color-muted); border-top: 1px solid var(--color-border); }
.t-photo figcaption b { color: var(--color-text); font-weight: 600; }
.credit { font-family: var(--font-mono); font-size: 12px; display: block; margin-top: 2px; color: var(--color-muted); }

.res { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center; margin-top: 12px; }
.res .oct { --s: 48px; font-size: 19px; grid-row: span 2; }
.res__horse { font-size: 24px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.res__who { font-size: 14px; color: var(--color-muted); }
.res__nums { display: grid; grid-template-columns: repeat(3, 1fr); margin: 16px 0 4px; border-top: 1px solid var(--color-text); }
.res__nums div { padding: 8px 10px 0 0; }
.res__nums div + div { padding-left: 10px; border-left: 1px solid var(--color-border); }
.res__nums dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-muted); }
.res__nums dd { margin: 2px 0 0; font-family: var(--font-mono); font-size: 20px; font-weight: 600; letter-spacing: -.03em; }

.replay__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; margin-top: auto; padding-top: 10px; }

/* ── 03 recent results ────────────────────────────────────────────────── */
.winners { margin: 0; padding: 0; border-top: 1px solid var(--color-text); }
.winners li { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--color-border); }
.winners__p { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 0; text-decoration: none; color: var(--color-text); }
.winners__p .oct { --s: 30px; font-size: 12px; }
.winners__p > span:not(.oct) { display: flex; flex-direction: column; min-width: 0; }
.winners__p b { font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; }
.winners__p small { font-size: 12px; color: var(--color-muted); }
.winners__p:hover b { color: var(--color-brand); text-decoration: underline; text-underline-offset: 3px; }
.winners__v .ico { fill: currentColor; }
.more { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 16px; }

/* ── 04 retrospecto / rateios / canal (mockup) ────────────────────────── */
.t-retro { grid-column: 1 / 5; padding: 26px 28px 18px; }
.t-rateio { grid-column: 5 / 9; padding: 26px 28px 18px; }
.t-bet { grid-column: 9 / 13; padding: 26px 24px 22px; display: flex; flex-direction: column; }
.t-retro .tile__h, .t-rateio .tile__h, .t-bet .tile__h { margin-bottom: 16px; }
.t-bet__cta { margin-top: auto; }
.t-bet__cta .btn { width: 100%; }

/* ── 05 grandes provas ────────────────────────────────────────────────── */
.gp__photo { grid-column: 1 / 7; margin: 0; display: flex; flex-direction: column; }
.gp__photo picture { flex: 1; display: block; }
.gp__photo img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; }
.gp__photo .credit { padding: 10px 20px; border-top: 1px solid var(--color-border); margin: 0; }
.gp__main { grid-column: 7 / 13; padding: 28px 30px 22px; }
.gp__main .res .oct { background: var(--color-text); }
.gp__hist { margin-top: 18px; }
.gp__hist caption { padding-bottom: 6px; }
.gp__links { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 8px; }
.gp__about { color: var(--color-muted); margin: 8px 0 14px; max-width: 52ch; }

/* ── 06 tablada + guia ────────────────────────────────────────────────── */
.tb__photo { grid-column: 1 / 6; margin: 0; display: flex; flex-direction: column; }
.tb__photo picture { flex: 1; display: block; }
.tb__photo img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.tb__photo .credit { padding: 10px 20px; border-top: 1px solid var(--color-border); margin: 0; }
.tb__txt { grid-column: 6 / 13; }
.tb__guide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 8px 40px; align-items: start; }
.tb__guide .kick, .tb__guide .tile__h { grid-column: 1; }
.tb__guide .readline { grid-column: 2; grid-row: 1 / span 2; }
.tb__guide .gloss { grid-column: 1 / -1; }
.facts { margin: 16px 0 6px; border-top: 1px solid var(--color-text); }
.facts div { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.facts dt { font-family: var(--font-mono); font-weight: 600; font-size: 15px; }
.facts dd { margin: 0; color: var(--color-muted); }
.readline { display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; border: 1px solid var(--color-text); counter-reset: c; }
.readline li { counter-increment: c; flex: 1 1 110px; padding: 10px 12px; border-right: 1px solid var(--color-border); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.readline li::before { content: counter(c, decimal-leading-zero); display: block; color: var(--color-accent); font-size: 11px; margin-bottom: 2px; }
.gloss { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; margin: 20px 0 4px; border-top: 1px solid var(--color-text); }
.gloss div { padding: 10px 0; }
.gloss dt { font-weight: 600; }
.gloss dd { margin: 2px 0 0; color: var(--color-muted); font-size: 15px; }

/* ── 07 news ──────────────────────────────────────────────────────────── */
.news__i { display: flex; flex-direction: column; gap: 10px; }
.news__h { font-size: 20px; line-height: 1.2; letter-spacing: -.02em; font-weight: 600; margin: 0; }
.news__h a { text-decoration: none; }
.news__h a:hover { color: var(--color-brand); text-decoration: underline; text-underline-offset: 3px; }
.news__i p:last-child { margin: 0; color: var(--color-muted); font-size: 15px; }

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1279px) {
  .t-retro { grid-column: 1 / 7; } .t-rateio { grid-column: 7 / 13; } .t-bet { grid-column: 1 / -1; }
  .recent__m { grid-column: 1 / -1; }
}
@media (max-width: 1180px) { .hero__grid { grid-template-columns: 1fr; gap: 20px; } }
@media (max-width: 1023px) { .hero { padding-top: 32px; } }
@media (max-width: 899px) {
  .hero__grid { grid-template-columns: 1fr; gap: 20px; }
  .t-next { grid-column: 1 / -1; grid-row: auto; }
  .t-photo { grid-column: 1 / 8; grid-row: auto; }
  .t-result { grid-column: 8 / 13; grid-row: auto; }
  .t-docs, .t-replay { grid-column: 1 / -1; grid-row: auto; }
  .gp__photo, .gp__main, .tb__photo, .tb__txt { grid-column: 1 / -1; }
  .tb__guide { grid-template-columns: 1fr; }
  .tb__guide .readline { grid-column: 1; grid-row: auto; }
  .gloss { grid-template-columns: 1fr; }
}
@media (max-width: 759px) {
  .hero h1 { margin-top: 28px; }
  .cta .btn { flex: 1 1 100%; }
  .t-next, .t-docs, .t-replay, .t-result, .t-retro, .t-rateio, .t-bet, .gp__main { padding: 22px 18px; }
  .next__top { gap: 14px; }
  .next__top .oct { --s: 64px; font-size: 23px; }
  .readline li { flex-basis: 50%; }
}