/* ============================================================
   MotoGP Data — landing.css
   ------------------------------------------------------------
   Estils de la landing «Seguir el mundial». Carrega DESPRÉS de
   tokens.css + base.css. Tot sobre tokens; tema clar, responsive,
   zero ombres (elevació per to + aire).
   ============================================================ */

/* ---- Capçalera ---- */
.lp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--rule);
}
.lp-brand { display: flex; align-items: baseline; gap: var(--sp-2); }
.lp-brand__name { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-20); letter-spacing: var(--tr-tight); color: var(--text-primary); }
.lp-brand__name .gp { color: var(--blue-600); }
.lp-brand__tag { font-size: var(--fs-12); color: var(--text-muted); letter-spacing: var(--tr-caps-sm); }

.lp-nav { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.lp-nav a { font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--text-secondary); }
.lp-nav a.is-active { color: var(--text-primary); }
.lp-nav a.is-active::after { content: ""; display: block; height: 2px; background: var(--blue-600); margin-top: 2px; }
.lp-nav a.is-disabled { color: var(--text-faint); cursor: default; pointer-events: none; }

.lp-tools { display: flex; align-items: center; gap: var(--sp-3); }
.lp-lang { display: inline-flex; gap: var(--sp-1); }
.lp-lang a { font-size: var(--fs-12); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tr-caps-sm); color: var(--text-muted); padding: 2px var(--sp-2); border-radius: var(--r-1); }
.lp-lang a:hover { color: var(--text-primary); text-decoration: none; background: var(--surface-sunken); }

.lp-dev { font-family: var(--font-mono); font-size: var(--fs-11); color: var(--text-on-accent); background: var(--accent); padding: 2px var(--sp-2); border-radius: var(--r-1); }

/* ---- Hero del GP actual ---- */
.lp-hero { padding: var(--sp-10) 0 var(--sp-8); border-bottom: 1px solid var(--rule); }
.lp-hero__eyebrow { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.lp-hero__round { color: var(--text-muted); font-size: var(--fs-12); letter-spacing: var(--tr-caps-sm); }
.lp-hero__title { font-size: clamp(1.875rem, 5vw, 3rem); line-height: var(--lh-tight); letter-spacing: var(--tr-display); margin-bottom: var(--sp-3); }
.lp-hero__meta { display: flex; align-items: center; gap: var(--sp-3) var(--sp-5); flex-wrap: wrap; color: var(--text-secondary); font-size: var(--fs-14); }
.lp-hero__meta .num { color: var(--text-primary); font-weight: var(--fw-medium); }
.lp-countdown { display: inline-flex; align-items: baseline; gap: var(--sp-2); }
.lp-countdown__label { font-size: var(--fs-12); text-transform: uppercase; letter-spacing: var(--tr-caps-sm); color: var(--text-muted); }
.lp-countdown__value { font-weight: var(--fw-semibold); color: var(--text-primary); }

/* Circuit sota el títol del hero (nom + país + tira tècnica). */
.lp-hero__circuit { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-1); }
.lp-hero__circuit-name { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-18); color: var(--text-primary); }
.lp-hero__circuit-loc { font-size: var(--fs-14); color: var(--text-muted); }
.lp-hero__tech { font-size: var(--fs-13); color: var(--text-secondary); margin-bottom: var(--sp-3); }

/* Chip d'estat (pill) */
.lp-state-chip { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-12); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tr-caps-sm); padding: 3px var(--sp-3); border-radius: var(--r-pill); background: var(--blue-600); color: var(--text-on-blue); }
.lp-state-chip--live { background: var(--accent); color: var(--text-on-accent); }

/* ---- Hero de 2 columnes: identitat a l'esquerra, horari a la dreta ---- */
@media (min-width: 860px) {
  .lp-hero { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: var(--sp-8); align-items: start; }
}
.lp-hero__aside { margin-top: var(--sp-6); }
@media (min-width: 860px) { .lp-hero__aside { margin-top: 0; } }

/* Caixa d'horari (al costat del nom del GP): 2 columnes, compacta. */
.lp-schedule {
  background: var(--surface-raised);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-4);   /* vertical −4px per costat = ~8px més baixa */
}
.lp-schedule__title { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-13); text-transform: uppercase; letter-spacing: var(--tr-caps-sm); color: var(--text-muted); margin-bottom: var(--sp-2); }

/* Subtítol: quina sessió toca (+ compte enrere). Substitueix el compte enrere del hero. */
.pv-sched-next { font-size: var(--fs-13); color: var(--text-secondary); padding-bottom: var(--sp-3); margin-bottom: var(--sp-3); border-bottom: 1px solid var(--rule); }
.pv-sched-next b { color: var(--text-primary); font-weight: var(--fw-semibold); }
.pv-sched-next__lbl { text-transform: uppercase; letter-spacing: var(--tr-caps-sm); font-size: var(--fs-11); font-weight: var(--fw-semibold); color: var(--blue-600); }
.pv-sched-next.is-live .pv-sched-next__lbl { color: var(--accent-text); }
.pv-sched-next__when { color: var(--text-muted); }

/* Una columna per dia: la proporció natural del cap de setmana. */
.pv-sched-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: var(--sp-4) var(--sp-5); align-items: start; }

/* Fila de la propera sessió: ressaltat subtil (wash + èmfasi), sense píndola. */
.pv-sched-row.is-next { background: var(--accent-surface); border-radius: var(--r-1); margin: 0 calc(var(--sp-2) * -1); padding-inline: var(--sp-2); }
.pv-sched-row.is-next .pv-sched-name { font-weight: var(--fw-semibold); color: var(--text-primary); }

/* ---- Pila de fases (acumulativa, nou a dalt) ---- */
.lp-stack { display: flex; flex-direction: column; }
.lp-phase { padding: var(--sp-10) 0; border-bottom: 1px solid var(--rule); }
.lp-phase__head { max-width: var(--container-text); margin-bottom: var(--sp-6); }
.lp-phase__title { font-size: var(--fs-30); margin: var(--sp-1) 0 var(--sp-2); }
.lp-phase__lead { color: var(--text-secondary); font-size: var(--fs-16); }

/* Reixa de peces */
.lp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-4); }

/* Peça (placeholder de widget). Tractament d'estimat/pendent: vora puntejada. */
.lp-piece {
  background: var(--surface-raised);
  border: 1px dashed var(--border-default);
  border-radius: var(--r-2);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-height: 132px;
}
.lp-piece__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.lp-piece__code { font-family: var(--font-mono); font-size: var(--fs-11); font-weight: var(--fw-bold); color: var(--blue-600); }
.lp-piece__title { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-16); color: var(--text-primary); }
.lp-piece__desc { font-size: var(--fs-13); line-height: var(--lh-normal); color: var(--text-secondary); }
.lp-piece__soon { margin-top: auto; font-size: var(--fs-11); text-transform: uppercase; letter-spacing: var(--tr-caps-sm); color: var(--text-faint); }

/* Peça PLENA (amb dades reals): vora sòlida (= observat, regla 3), alçada lliure. */
.lp-piece.is-filled { border-style: solid; border-color: var(--rule); min-height: 0; }
.lp-piece--wide { grid-column: 1 / -1; }
.lp-piece__body { margin-top: var(--sp-1); }

/* Taula compacta dins una peça (pronòstic). */
.pv-table { width: 100%; border-collapse: collapse; font-size: var(--fs-13); }
.pv-table th, .pv-table td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.pv-table th.num, .pv-table td.num { text-align: right; }
.pv-table thead th { font-size: var(--fs-11); text-transform: uppercase; letter-spacing: var(--tr-caps-sm); color: var(--text-muted); font-weight: var(--fw-semibold); }
.pv-table tbody tr:last-child td { border-bottom: 0; }

/* Llista de vencedors (qui ha guanyat aquí). */
.pv-list { list-style: none; margin: 0; padding: 0; }
.pv-list li { display: flex; align-items: baseline; gap: var(--sp-3); font-size: var(--fs-13); padding: 4px 0; border-bottom: 1px solid var(--rule); }
.pv-list li:last-child { border-bottom: 0; }
.pv-win-name { font-weight: var(--fw-semibold); color: var(--text-primary); }
.pv-win-con { margin-left: auto; color: var(--text-muted); font-size: var(--fs-12); }

/* Horari del cap de setmana. */
.pv-sched-day { font-size: var(--fs-11); text-transform: uppercase; letter-spacing: var(--tr-caps-sm); color: var(--text-muted); font-weight: var(--fw-semibold); margin: 0 0 var(--sp-1); }
.pv-sched-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); font-size: var(--fs-12); padding: 2px 0; }
.pv-sched-name { white-space: nowrap; }

/* Nota de credibilitat (C20). */
.pv-note { font-size: var(--fs-13); line-height: var(--lh-normal); color: var(--text-secondary); margin: 0; }

/* Línia de context del DNF per circuit (mitjana aquí vs global). */
.pv-dnf-ctx { font-size: var(--fs-12); color: var(--text-muted); margin-bottom: var(--sp-2); }
.pv-dnf-ctx .num { color: var(--text-primary); font-weight: var(--fw-semibold); }

/* ---- Transversal (mundial) ---- */
.lp-cross { padding: var(--sp-10) 0; }

/* ---- Peu ---- */
.lp-footer { padding: var(--sp-8) 0 var(--sp-12); border-top: 1px solid var(--rule); display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; color: var(--text-muted); font-size: var(--fs-12); }
.lp-footer a { color: var(--text-secondary); }

/* ---- Responsive ---- */
@media (max-width: 640px) {
  .lp-header { gap: var(--sp-3); }
  .lp-brand__tag { display: none; }
  .lp-phase { padding: var(--sp-8) 0; }
  .lp-hero { padding: var(--sp-8) 0 var(--sp-6); }
}