/* MTB Roadbook: gli stili del plugin (assets/js/mtb-roadbook.js).
   Caricato solo dalle pagine che usano il roadbook (HeadExtraStylesheets), dopo main.css.
   Due parti: il motore (percorso, rilievo, coordinate: li disegna il JS) e i componenti
   dell'elenco (mese, riga, data, card), riutilizzabili da qualunque sezione.
   Le personalizzazioni di pagina (fondo, spazi, card speciali) restano in pages.css.

   Misure sul contenitore .roadbook (le legge anche il JS):
   --route-col colonna del percorso, --route-x asse della traccia, --route-sway ampiezza
   delle pieghe, --route-stroke spessore, --date-col colonna delle date.
   .roadbook-aligned allinea un blocco esterno alla colonna delle card del roadbook. */

.roadbook {position: relative; isolation: isolate; padding: clamp(2.5rem,5vw,4rem) 0 0 var(--route-col);}

/* Le misure della colonna del percorso, condivise con i blocchi allineati alle card. */
.roadbook,
.roadbook-aligned {--route-col: 160px; --route-x: 80px; --route-sway: 36px; --route-stroke: 5; --date-col: 96px;}

.roadbook-aligned {padding-left: var(--route-col);}

/* Il percorso, nella grammatica del menu M ma da elemento di supporto: un filo sottile in
   una scala tonale con il fondo. Bianco il fondo, grigio-azzurro la strada da fare,
   azzurro profondo la strada fatta, azzurro del marchio il punto e la sua scia. */
.roadbook-route {position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none;}

.roadbook-route__line,
.roadbook-route__ridden {fill: none; stroke-width: calc(var(--route-stroke) * 1px); stroke-linecap: round; stroke-linejoin: round;}

.roadbook-route__line {stroke: var(--mtb-route);}

.roadbook-route__ridden {stroke: var(--mtb-trail); stroke-dasharray: 0 100000;}

/* Le gare: anelli sottili sul filo; si riempiono quando il punto le supera. */
.roadbook-route__stops circle {r: 5px; fill: var(--mtb-paper); stroke: var(--mtb-route); stroke-width: 2;}

.roadbook-route__stops circle.is-next {fill: var(--mtb-paper); stroke: var(--mtb-azzurro); stroke-width: 2.5;}

.roadbook-route__stops circle.is-passed {fill: var(--mtb-trail); stroke: var(--mtb-trail);}

.roadbook-route__trail {opacity: 0; transition: opacity .7s ease-out;}

.roadbook-route__trail circle {r: 2.4px; fill: var(--mtb-azzurro);}

.roadbook-route__rider {r: 6px; fill: var(--mtb-azzurro); stroke: var(--mtb-paper); stroke-width: 2.5;}

/* Le coordinate accanto al punto, a sinistra del filo, come la lettura del menu M. */
.roadbook-coords {position: absolute; z-index: 1; left: calc(var(--coords-x, 80px) - 18px); top: var(--coords-y, 0px); display: grid; justify-items: end; gap: .1875rem; color: var(--color-text); font: var(--weight-bold) .6875rem/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap; pointer-events: none; transform: translate(-100%, -50%);}

/* La didascalia del GPS sotto le coordinate: km da Oggi, dislivello positivo, quota. */
.roadbook-coords__caption {display: grid; justify-items: end; gap: .1875rem; margin-top: .25rem; color: var(--color-muted);}

/* Il rilievo: curve di livello finte, nella scala tonale del filo, sotto il percorso e
   dietro le card; ogni quinta curva (direttrice) appena piu marcata, come sulle carte. */
.roadbook-terrain {position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none;}

.roadbook-terrain__contour {fill: none; stroke: var(--mtb-route); stroke-opacity: .35; stroke-width: 1; stroke-linecap: round;}

.roadbook-terrain__contour--index {stroke-opacity: .6; stroke-width: 1.25;}

/* La partenza: "Oggi", allineata con le date. */
.roadbook-today {display: flex; align-items: baseline; gap: .75rem; margin: 0;}

/* Tutto il roadbook in Manrope come il resto del sito (2026-10-07): Archivo eliminato. */
.roadbook-today b {font: var(--weight-display) 1.875rem/1 var(--font-display); letter-spacing: var(--tracking-editorial);}

.roadbook-today time {color: var(--color-muted); font: var(--weight-bold) .9375rem/1 var(--font-display); letter-spacing: .01em;}

/* I mesi: un titolo con il filetto, l'anno solo se non e quello in corso. */
/* Ritmo su una griglia di 8 px: 48 sopra il mese, 24 sotto il titolo e tra le card. */
.roadbook-month {padding-top: 3rem;}

.roadbook-month__title {margin: 0 0 1.5rem; padding-bottom: .75rem; border-bottom: 1px solid var(--color-text); font: var(--weight-display) 2rem/1.1 var(--font-display); letter-spacing: var(--tracking-editorial);}

/* Dentro il mese in testa del sito (components.css, .list-month__head) filetto e margine
   passano alla testata, che resta in alto scorrendo. */
.list-month__head > .roadbook-month__title {margin: 0; padding: .5rem 0 .75rem; border-bottom: 0;}

.roadbook-month__title span {color: var(--color-muted); font-weight: var(--weight-bold);}

.roadbook-list {display: grid; gap: 1.5rem;}

/* La riga: data | card. */
.roadbook-row {display: grid; grid-template-columns: var(--date-col) minmax(0,1fr); gap: 1rem; align-items: center;}

.roadbook-row[hidden] {display: none !important;}

.roadbook-date {display: flex; flex-direction: column; align-items: center; gap: .2rem; color: var(--color-text); text-align: center;}

.roadbook-date b {font: var(--weight-display) 2.75rem/.9 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.04em;}

.roadbook-date span {font: var(--weight-display) .9375rem/1 var(--font-display); letter-spacing: .02em;}

.roadbook-date small {margin-top: .2rem; color: var(--color-muted); font: var(--weight-bold) .8125rem/1 var(--font-display); white-space: nowrap;}

.roadbook-row.is-next .roadbook-date small {color: var(--mtb-trail);}

/* La card: logo | testo | stati e minimappa. */
.roadbook-card {display: grid; grid-template-columns: 132px minmax(0,1fr) auto; gap: 1.75rem; align-items: center; min-height: 152px; padding: .75rem 1.5rem .75rem .75rem; color: var(--color-text); background: var(--mtb-paper); border-radius: 8px; text-decoration: none; transition: box-shadow .2s ease;}

a.roadbook-card:is(:hover, :focus-visible) {color: var(--color-text); box-shadow: inset 0 0 0 2px var(--mtb-azzurro);}

a.roadbook-card:focus-visible {outline: 2px solid var(--color-text); outline-offset: 3px;}

.roadbook-card__logo {display: grid; width: 132px; aspect-ratio: 1; place-items: center; overflow: hidden; background: var(--bg-soft); border-radius: 6px;}

.roadbook-card__logo img {width: 72%; height: 72%; object-fit: contain;}

.roadbook-card__logo b {color: var(--color-muted); font: var(--weight-display) 1.25rem/1 var(--font-display); letter-spacing: -.04em;}

.roadbook-card__body {display: flex; min-width: 0; flex-direction: column; gap: .625rem;}

.roadbook-card__type {display: inline-flex; align-items: center; gap: .5rem; color: var(--mtb-trail); font: var(--weight-bold) .8125rem/1.2 var(--font-body);}

.roadbook-card__type svg path {fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round;}

.roadbook-card__title {margin: 0; color: var(--color-text); font: var(--weight-display) 1.625rem/1.05 var(--font-display); letter-spacing: var(--tracking-editorial); overflow-wrap: anywhere; text-wrap: pretty;}

.roadbook-card__place {display: inline-flex; align-items: center; gap: .5rem; color: var(--color-muted); font-size: .875rem; line-height: 1.3;}

.roadbook-card__place svg {flex: none;}

.roadbook-card__place svg path {fill: none; stroke: currentColor; stroke-width: 1.5;}

.roadbook-card__place svg circle {fill: currentColor;}

.roadbook-card__aside {display: flex; align-self: stretch; flex-direction: column; align-items: flex-end; justify-content: center; gap: .5rem;}

.roadbook-tag {display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .625rem; color: var(--color-text); background: var(--bg-soft); border-radius: 999px; font: var(--weight-medium) .75rem/1.2 var(--font-body); white-space: nowrap;}

.roadbook-tag i {width: 7px; height: 7px; border-radius: 50%; background: var(--mtb-azzurro);}

/* La minimappa del percorso (oggi l'immagine esistente, domani il PNG di Racelab). */
.roadbook-card__map {display: block; width: 196px; height: 70px; object-fit: contain;}

/* Tablet: percorso piu stretto, stati e minimappa sotto il testo. */
@media (max-width: 991.98px) {
  .roadbook,
  .roadbook-aligned {--route-col: 112px; --route-x: 84px; --route-sway: 16px; --route-stroke: 4; --date-col: 76px;}

  .roadbook-card {grid-template-columns: 96px minmax(0,1fr); gap: 1.25rem; min-height: 0; padding: .75rem;}

  .roadbook-card__logo {width: 96px;}

  .roadbook-card__aside {grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start;}

  .roadbook-date b {font-size: 2.25rem;}
}

/* Smartphone: percorso | data | card, la card si impila. */
@media (max-width: 767.98px) {
  .roadbook,
  .roadbook-aligned {--route-col: 36px; --route-x: 16px; --route-sway: 7px; --route-stroke: 3.5; --date-col: 48px;}

  .roadbook-route__stops circle {r: 4px; stroke-width: 1.75;}

  .roadbook-route__trail circle {r: 1.8px;}

  .roadbook-route__rider {r: 5px; stroke-width: 2;}

  /* Nella colonna stretta non c'e posto per le coordinate: restano punto e scia. */
  .roadbook-coords {display: none;}

  .roadbook-today b {font-size: 1.5rem;}

  .roadbook-today time {font-size: .8125rem;}

  .roadbook-month__title {font-size: 1.5rem;}

  .roadbook-list {gap: 1rem;}

  .roadbook-row {gap: .625rem; align-items: start;}

  .roadbook-date {padding-top: .5rem;}

  .roadbook-date b {font-size: 1.75rem;}

  .roadbook-date span {font-size: .75rem;}

  .roadbook-date small {font-size: .6875rem;}

  .roadbook-card {grid-template-columns: 56px minmax(0,1fr); gap: .75rem;}

  .roadbook-card__logo {width: 56px; border-radius: 4px;}

  .roadbook-card__body {gap: .375rem;}

  .roadbook-card__type {font-size: .75rem;}

  .roadbook-card__title {font-size: 1.125rem; line-height: 1.1;}

  .roadbook-card__place {font-size: .8125rem;}

  .roadbook-card__aside {grid-column: 1 / -1;}

  .roadbook-card__map {width: 100%; height: 64px;}
}

@media (prefers-reduced-motion: reduce) {
  .roadbook-card,
  .roadbook-route__trail {transition: none;}
}