/* Home — hero from mockup A, new sections in its language. */

/* ── hero (М) ─────────────────────────────────────────────────────────── */
.hero { padding-block: clamp(40px, 5vw, 72px); background: var(--color-bg); }
.hero__top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-32) var(--space-48); align-items: end; }
.hero h1 {
  font-family: var(--font-display); font-weight: 850; font-stretch: 70%;
  font-size: var(--fs-h1); line-height: .9; letter-spacing: -.01em; text-transform: uppercase;
}
.hero__sub { font-family: var(--font-display); font-stretch: 88%; font-weight: 500; font-size: var(--fs-lead); line-height: 1.2; margin-top: 18px; }
.hero__side { display: flex; flex-direction: column; gap: 18px; padding-bottom: 6px; }
.hero__side p { color: var(--color-muted); max-width: 44ch; }
.hero .cta .btn { padding: 0 20px; }

.hero__strip {
  position: relative; margin-top: clamp(32px, 4vw, 52px); height: clamp(88px, 9vw, 132px); overflow: hidden;
  border-top: 1px solid var(--line-dark-strong); border-bottom: 1px solid var(--line-dark-strong);
}
/* the photo layer fills the strip explicitly — never rely on the generic .ph box here */
.hero__strip .hero__photo { position: absolute; inset: 0; aspect-ratio: auto !important; }
.hero__strip .hero__photo img { object-position: 50% 62%; }
.hero__strip figcaption {
  position: absolute; left: 0; bottom: 0; z-index: 1; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-mono); font-size: var(--fs-micro); padding: 6px 12px 6px 0;
}
.hero__strip figcaption span { color: var(--color-muted); }

.gate { margin-top: clamp(28px, 3vw, 40px); }
.next { margin-top: clamp(36px, 4vw, 56px); }

/* ── montarias + calendário (new) ─────────────────────────────────────── */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.duo > div > .btn { margin-top: 24px; }
.mounts { margin-top: 24px; border-top: 1px solid var(--line-dark-strong); }
.mounts li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line-dark); }
.mounts__j { font-weight: 700; display: flex; flex-direction: column; gap: 4px; }
.mounts__j small { font: 400 var(--fs-label) var(--font-mono); color: var(--color-muted); }
.mounts__list { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--fs-small); }
.mounts__list b { font-family: var(--font-mono); font-weight: 600; color: var(--color-data); }
.cal { margin-top: 24px; border-top: 1px solid var(--line-dark-strong); }
.lane--cal { grid-template-columns: 64px minmax(0, 1fr) auto 44px; min-height: 84px; align-items: start; }
.lane--cal .box { width: 52px; height: 52px; font-size: 1.0625rem; }

/* ── replays (new) ────────────────────────────────────────────────────── */
.replays { border-top: 1px solid var(--line-dark-strong); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
.lane--rep { grid-template-columns: 56px minmax(0, 1.1fr) minmax(0, 1fr) 44px; min-height: 84px; gap: 18px; align-items: start; }
.lane--rep .box { width: 44px; height: 44px; font-size: 1.0625rem; }

/* ── grandes provas / tablada (new) ───────────────────────────────────── */
.gp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.gp--rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.gp__media .ph { border: 1px solid var(--line-dark-strong); }
.gp__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 28px 0; border-top: 1px solid var(--line-dark-strong); }
.gp__facts div { padding: 16px 20px 16px 0; border-bottom: 1px solid var(--line-dark); }
.gp__facts div + div { padding-left: 20px; border-left: 1px solid var(--line-dark); }
.gp__facts dt { font: 500 var(--fs-micro)/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 8px; }
.gp__facts dd { margin: 0; font-weight: 700; }
.gp__facts dd.dim { font: 400 var(--fs-small) var(--font-mono); margin-top: 4px; }

/* ── notícias (new) ───────────────────────────────────────────────────── */
.news { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-dark-strong); }
.news__item { padding: 24px 28px 28px 0; border-bottom: 1px solid var(--line-dark); }
.news__item + .news__item { padding-left: 28px; border-left: 1px solid var(--line-dark); }
.news__meta { font: var(--fs-label) var(--font-mono); color: var(--color-data); letter-spacing: .02em; }
.news__item h3 { font-family: var(--font-display); font-stretch: 85%; font-weight: 800; font-size: 1.375rem; line-height: 1.15; margin: 12px 0 10px; }
.news__item h3 a { text-decoration: none; background: linear-gradient(var(--color-brand), var(--color-brand)) 0 100% / 0 2px no-repeat; transition: background-size var(--dur-slow) var(--ease); }
.news__item h3 a:hover { background-size: 100% 2px; }
.news__item p:last-child { color: var(--color-muted); font-size: var(--fs-small); }

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .duo { grid-template-columns: minmax(0, 1fr); }
  .replays { grid-template-columns: minmax(0, 1fr); }
  .lane--rep { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr) 44px; grid-template-areas: none; }
  .lane--rep .box, .lane--rep .lane__data, .lane--rep .lane__go { grid-area: auto; }
  .lane--cal { grid-template-columns: 64px minmax(0, 1fr) 44px; grid-template-areas: "box data go" "box tag go"; }
  .gp, .gp--rev { grid-template-columns: minmax(0, 1fr); }
  .gp--rev .gp__media { order: -1; }
  .news { grid-template-columns: minmax(0, 1fr); }
  .news__item + .news__item { padding-left: 0; border-left: 0; }
}
@media (max-width: 860px) {
  .hero__top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .hero__strip figcaption span { display: none; }
  .mounts li { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .lane--rep { grid-template-columns: 48px minmax(0, 1fr) 40px; grid-template-areas: "box a go" "box b go"; gap: 6px 14px; }
  .lane--rep .box { grid-area: box; align-self: start; }
  .lane--rep .lane__data--a { grid-area: a; }
  .lane--rep .lane__data--b { grid-area: b; }
  .lane--rep .lane__go { grid-area: go; }
  .lane--cal { grid-template-columns: 48px minmax(0, 1fr) 40px; }
  .lane--cal .box { width: 44px; height: 44px; font-size: 1rem; }
  .gp__facts { grid-template-columns: minmax(0, 1fr); }
  .gp__facts div + div { padding-left: 0; border-left: 0; }
}