/* Ponti - Siti tematici v1.4.0.
   Stile ispirato alle tessere del Fauser e adattato alla palette del Ponti.
   CSS limitato a .ponti-st: nessuna modifica ai componenti del tema.
*/
.ponti-st {
    box-sizing: border-box;
    width: 100%;
    clear: both;
    padding: 28px 16px 38px;
    background: #f4f4f4;
    color: #17324c;
    text-align: center;
}
.ponti-st *,
.ponti-st *::before,
.ponti-st *::after { box-sizing: border-box; }
.ponti-st .ponti-st__container {
    width: 100%;
    max-width: var(--ponti-st-max-width, 1130px);
    margin: 0 auto;
}
.ponti-st .ponti-st__title {
    margin: 0 0 24px;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 500;
    color: #17324c;
}
.ponti-st .ponti-st__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: var(--ponti-st-hgap, 14px);
    row-gap: 12px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ponti-st .ponti-st__list + .ponti-st__list { margin-top: var(--ponti-st-vgap, 14px); }
.ponti-st .ponti-st__list--left { justify-content: flex-start; }
.ponti-st .ponti-st__list--center { justify-content: center; }
.ponti-st .ponti-st__list--right { justify-content: flex-end; }
.ponti-st .ponti-st__item {
    display: flex;
    flex: 0 0 auto;
    width: min(var(--ponti-st-card-width, 128px), 100%);
    height: var(--ponti-st-card-height, 78px);
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Aspetto Fauser: tessera bianca, cornice quasi invisibile, ombra corta. */
.ponti-st .ponti-st__link,
.ponti-st .ponti-st__link:link,
.ponti-st .ponti-st__link:visited {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 5px;
    border: 1px solid #e1e5e8;
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .09);
    text-decoration: none;
    cursor: pointer;
    color: #17324c;
    opacity: 1;
    transform: none !important;
    filter: none !important;
    transition: border-color 160ms ease, background-color 160ms ease,
                box-shadow 160ms ease;
}
/* L'interazione e' affidata alla banda sovrapposta, non a bordi o movimenti del riquadro. */
.ponti-st .ponti-st__link:hover,
.ponti-st .ponti-st__link:focus-visible {
    background: #fff;
    border-color: #d2dbe0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .09);
    transform: none !important;
    filter: none !important;
}
.ponti-st .ponti-st__link:focus-visible {
    outline: 2px solid #2f617c;
    outline-offset: 3px;
}
.ponti-st .ponti-st__logo,
.ponti-st .ponti-st__link img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    min-width: 0;
    object-fit: contain;
    object-position: center center;
    opacity: 1;
    transform: none !important;
    filter: none !important;
}
/* Fauser: banner immobile; etichetta in una fascia semitrasparente al passaggio.
   Palette adattata al Ponti: azzurro petrolio, non viola.
   Lo stesso foglio CSS e' caricato nella bacheca per l'anteprima. */
.ponti-st .ponti-st__overlay {
    position: absolute;
    z-index: 2;
    inset: auto 4px 4px;
    height: 64%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    overflow: hidden;
    border-radius: 1px;
    background: rgba(49, 103, 133, .89);
    color: #fff;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, visibility .18s ease;
}
.ponti-st .ponti-st__overlay-text {
    display: block;
    font-size: clamp(11px, 0.875rem, 15px);
    line-height: 1.22;
    font-weight: 600;
    color: #fff;
    white-space: normal;
    overflow-wrap: anywhere;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .12);
}
.ponti-st .ponti-st__link:hover .ponti-st__overlay,
.ponti-st .ponti-st__link:focus-visible .ponti-st__overlay {
    opacity: 1;
    visibility: visible;
}
/* Non mostrare una banda sempre visibile su dispositivi esclusivamente touch:
   i link rimangono normalmente cliccabili. */
@media (max-width: 600px) {
    .ponti-st { padding: 24px 12px 30px; }
    .ponti-st .ponti-st__title { margin-bottom: 18px; }
    .ponti-st .ponti-st__list { column-gap: min(var(--ponti-st-hgap, 14px), 10px); row-gap: 10px; }
    .ponti-st .ponti-st__item { max-width: calc(100vw - 24px); }
    .ponti-st .ponti-st__link { padding: 5px; }
}
@media (prefers-reduced-motion: reduce) {
    .ponti-st .ponti-st__link,
    .ponti-st .ponti-st__overlay { transition: none !important; }
}