/*
 * «Altri mestieri e esperienze che potrebbero interessarti» (13/9).
 *
 * La fascia in fondo alla scheda, chiesta da Elind «a mo' di carosello
 * orizzontale, come su Amazon».
 *
 * Le card sono quelle del feed e si vestono da sole: qui si disegna solo la
 * pista che le contiene, la testata e le due frecce. Niente regole sulle
 * card, altrimenti ci sarebbero due posti dove cambiare un raggio.
 */

/*
 * <main> della scheda e' una griglia a due colonne (550 e 390) sopra i
 * 1024 px, e la fascia arriva come quarto figlio: senza questa riga
 * finirebbe schiacciata nella colonna stretta a destra, sotto il calendario.
 */
.tbp-correlate {
  grid-column: 1 / -1;
  min-width: 0;
  max-width: 100%;
  margin-block-start: 10px;
}

.tbp-correlate__testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-block-end: 12px;
}

/*
 * Nessuna misura per il corpo del titolo, di proposito: la prende dalla
 * regola globale degli h2, la stessa di «Descrizione» e «Recensioni». La
 * fascia e' una sezione della pagina come quelle, non un'etichetta, e
 * scriverci sopra una misura diversa vorrebbe dire avere due linguaggi per
 * gli stessi titoli. Sul telefono la frase va a tre righe: e' lunga, non e'
 * grande.
 */
.tbp-correlate__titolo {
  margin: 0;
  color: #084828;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Le frecce servono a chi ha un puntatore. Col dito si scorre, e due bottoni
   in piu' rubano larghezza al titolo su uno schermo stretto. Le mostra il
   codice solo quando la pista e' davvero piu' lunga dello spazio. */
.tbp-correlate__frecce {
  display: none;
  flex: 0 0 auto;
  gap: 8px;
}

@media (hover: hover) and (pointer: fine) {
  .tbp-correlate__frecce:not([hidden]) {
    display: flex;
  }
}

/*
 * Le frecce vanno strappate alla pelle globale dei bottoni. In
 * tobepolo-italia-rebrand.css (file di Codex, non si tocca) c'e':
 *
 *   button:not(.mfp-close), ... {
 *     border: 0 !important; border-radius: var(--tbp-radius-control) !important;
 *     background: var(--tbp-green) !important; color: var(--tbp-white) !important;
 *   }
 *   ...:hover { background: var(--tbp-red) !important; }
 *
 * Due motivi per non lasciarle cosi'. Il primo: nella stessa striscia ci sono
 * i pulsanti «Acquista». Il verde pieno e' il linguaggio di quel gesto —
 * comprare — e due frecce dello stesso verde gli tolgono forza. Una freccia
 * non e' una chiamata all'azione, e' un modo di guardare. Il secondo: al
 * passaggio del dito diventerebbero rosse, che sul resto del sito vuol dire
 * un'altra cosa.
 *
 * Specificita' (0,2,2) contro la (0,1,1) della regola globale, e !important
 * solo sulle cinque proprieta' che quella impone.
 */
html body .tbp-correlate .tbp-correlate__freccia {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-height: 0;
  padding: 0;
  border: 1px solid rgba(8, 72, 40, 0.24) !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #084828 !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}

html body .tbp-correlate .tbp-correlate__freccia:hover:not([disabled]) {
  border-color: rgba(8, 72, 40, 0.46) !important;
  background: #eef4ef !important;
  color: #084828 !important;
}

html body .tbp-correlate .tbp-correlate__freccia:active:not([disabled]) {
  transform: scale(0.94);
}

/* Non si nasconde la freccia inutile: sparirebbe da sotto il dito mentre lo
   si sta usando, e la testata si riassesterebbe a ogni scorrimento. */
html body .tbp-correlate .tbp-correlate__freccia[disabled] {
  border-color: rgba(8, 72, 40, 0.12) !important;
  background: #fff !important;
  color: rgba(8, 72, 40, 0.3) !important;
  cursor: default;
}

.tbp-correlate__pista {
  min-width: 0;
  max-width: 100%;
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 2px 0 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  list-style: none;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  /* La barra di scorrimento sotto una fila di card la taglia in due. Il modo
     per andare avanti resta: il dito, la rotella, le frecce, il tasto Tab. */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.tbp-correlate__pista::-webkit-scrollbar {
  display: none;
}

.tbp-correlate__pista:focus-visible {
  outline: 2px solid #084828;
  outline-offset: 3px;
  border-radius: 14px;
}

/* Una card intera piu' un pezzo della successiva: e' il pezzo che dice che
   si puo' scorrere, senza doverlo scrivere. */
.tbp-correlate__posto {
  flex: 0 0 clamp(216px, 62vw, 258px);
  scroll-snap-align: start;
}

@media (prefers-reduced-motion: reduce) {
  .tbp-correlate__pista {
    scroll-behavior: auto;
  }

  .tbp-correlate__freccia {
    transition: none;
  }

  .tbp-correlate__freccia:active:not([disabled]) {
    transform: none;
  }
}

/* The outer list owns horizontal gestures; media dots still select inner slides. */
html body #tbp-correlate-pista .tbp-exp-card,
html body #tbp-correlate-pista .tbp-exp-card .tbp-exp-card__track {
  touch-action: pan-x pan-y pinch-zoom !important;
}
html body #tbp-correlate-pista .tbp-exp-card .tbp-exp-card__track {
  overflow-x: hidden !important;
}
.tbp-correlate__pista.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; user-select: none; }