/* ============================================================================
   Striscia orizzontale di gettoni (le date).

   La usano la vista Biglietti (.mhb-rail__track) e la pagina evento
   (.mhc-dates). Prima erano due righe che scorrevano e basta: niente diceva che
   ci fosse altro fuori campo, e la barra di scorrimento del sistema tagliava il
   bordo inferiore.

   Qui la barra sparisce, i bordi sfumano e compaiono due frecce - ma solo se
   c'e' davvero qualcosa da scorrere, e ognuna solo dal lato in cui si puo'
   ancora andare. Le classi le mette mh-strip.js; senza JavaScript resta una
   striscia che scorre col dito, come prima.
   ============================================================================ */

.mh-strip { position: relative; }

.mh-strip__track {
    scroll-snap-type: x proximity;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.mh-strip__track::-webkit-scrollbar { width: 0; height: 0; }
.mh-strip__track > * { scroll-snap-align: start; }

/* Niente sfumature ai bordi: erano nate per dire "la riga continua", ma cadono
   proprio sopra il primo e l'ultimo gettone e li fanno sembrare spenti - e col dito,
   dove le frecce non ci sono, restavano l'unico segno ed erano il piu' fastidioso.
   Il gettone tagliato a meta' dal bordo dice gia' che si puo' scorrere, e lo dice
   senza coprire niente. */

.mh-strip__arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    display: none; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0;
    border: 1px solid var(--line); border-radius: 50%;
    background: var(--surface); color: var(--ink);
    cursor: pointer; box-shadow: 0 4px 14px var(--shadow);
    transition: border-color .15s ease, color .15s ease;
}
.mh-strip__arrow:hover { border-color: var(--hover); color: var(--hover); }
.mh-strip__arrow--prev { left: 0; }
.mh-strip__arrow--next { right: 0; }
.mh-strip.has-scroll:not(.at-start) .mh-strip__arrow--prev,
.mh-strip.has-scroll:not(.at-end) .mh-strip__arrow--next { display: flex; }

/* Col dito le frecce non servono e ruberebbero spazio ai gettoni. */
@media (hover: none) {
    .mh-strip__arrow { display: none !important; }
}

/* Dove le frecce ci sono, la riga si fa da parte: stavano SOPRA il primo e l'ultimo
   gettone, e sul mese - che e' la prima cosa della riga - ci cadevano in pieno,
   rendendolo illeggibile. Lo spazio si riserva appena la riga puo' scorrere, non
   quando la freccia compare: se no la riga si sposterebbe sotto al dito. */
@media (hover: hover) {
    .mh-strip.has-scroll .mh-strip__track {
        padding-left: 46px; padding-right: 46px; scroll-padding-left: 46px;
    }
    /* Col mouse si usano le frecce: la striscia non sconfina piu' oltre il margine
       della pagina, se no le frecce finirebbero mezze fuori dallo schermo. */
    .mh-strip.has-scroll .mhb-rail__track { margin-left: 0; margin-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .mh-strip__track { scroll-behavior: auto; }
}