/* contact-tiles: box + pannelli espandibili (sostituisce expanding_grid nelle pagine contattaci)
   Markup e comportamento: vedi contact-tiles.js. Tutto è scoped sotto .ct, nessuna dipendenza da altri CSS/JS. */

.ct { width: 98%; margin: 0 1%; } /* allineato a .ricerca_contatti */
.ct, .ct * { box-sizing: border-box; }

/* ---------- box ---------- */
.ct-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 2.8%; margin: 0 0 20px; }

.ct-tile {
    -webkit-appearance: none; appearance: none;
    display: flex; align-items: center; justify-content: center;
    width: 100%; aspect-ratio: 1 / 1; margin: 0; padding: 0;
    background: #f0f0f0; border: 1px solid #b5c0c6; border-radius: 0; box-shadow: none;
    color: #fff; font: inherit; text-decoration: none; cursor: pointer;
}
.ct-tile:hover, .ct-tile:focus { text-decoration: none; color: #fff; }
.ct-tile:focus-visible { outline: 2px solid #333; outline-offset: 2px; }

.ct-tile-inner { display: flex; align-items: center; justify-content: center; width: 86%; height: 86%; border-radius: 20px; background: #333; text-align: center; }
.ct-tile-txt { padding: 6px; font-family: 'suzuki-headlineregular'; font-size: 16px; line-height: 18px; text-transform: uppercase; }

/* ---------- pannelli ---------- */
/* tutti i pannelli occupano la stessa cella: aprendone uno mentre un altro si chiude non si spostano a vicenda */
.ct-panels { position: relative; display: grid; }

.ct-panel {
    grid-area: 1 / 1; display: grid; grid-template-rows: 0fr;
    background: #f0f0f0; text-align: left;
    visibility: hidden; transition: grid-template-rows .3s ease, visibility 0s linear .3s;
}
.ct-panel.is-open { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .3s ease, visibility 0s; }

.ct-panel-clip { position: relative; min-height: 0; overflow: hidden; } /* min-height:0 + overflow: necessari al collasso 0fr */
.ct-panel-body { padding: 70px 30px 50px; } /* 70px sopra: il testo parte sotto la X (top 20 + 40) */

/* freccia sotto il box attivo (posizione orizzontale impostata da JS in --ct-arrow-x) */
.ct-panels::before {
    content: ''; position: absolute; top: -35px; left: var(--ct-arrow-x, 50%); margin-left: -20px;
    width: 0; height: 0; border: 20px solid transparent; border-bottom-color: #f0f0f0;
    opacity: 0; transition: opacity .2s; pointer-events: none;
}
.ct-panels.has-open::before { opacity: 1; }

/* X di chiusura */
.ct-close {
    -webkit-appearance: none; appearance: none;
    position: absolute; top: 20px; right: 20px; z-index: 2; width: 40px; height: 40px;
    margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer;
}
.ct-close::before, .ct-close::after { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: #888; transform: rotate(45deg); }
.ct-close::after { transform: rotate(-45deg); }
.ct-close:hover::before, .ct-close:hover::after { background: #333; }
.ct-close:focus-visible { outline: 2px solid #333; outline-offset: 2px; }

/* ---------- contenuto dei pannelli ---------- */
.ct-panel-body h3 { margin: 0 0 10px; padding: 0; font-size: 18px; line-height: 22px; font-weight: 700; text-transform: uppercase; color: #333; }
.ct-panel-body p { margin: 0 0 16px; font-size: 16px; line-height: 22px; }
.ct-panel-body a { text-decoration: underline; }
.ct-panel-body a:hover { text-decoration: none; }
.ct-panel-body .bottone { display: inline-block; margin-left: 0; text-decoration: none; }
.ct-numero-verde { display: block; margin: 10px 0; padding: 9px; background: #fff; }
.ct-panel-body.feedback { padding-top:0px !important; }

/* UC ucFeedback ospitato in un pannello: neutralizza margini/sfondo/container propri dell'UC */
.ct-panel #ucFeedback.v2 { margin-top: 0; background: transparent; }
.ct-panel #ucFeedback.v2 .container { width: auto; max-width: none; padding: 0 !important; }
.ct-panel #ucFeedback.v2 .w { padding: 70px 0px 0px 0px !important; }

.ct-note { margin: 20px 0 0; text-align: center; }

/* ---------- mobile: 2 box per riga ---------- */
@media screen and (max-width: 767px) {
    .ct-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 4%; }
    .ct-tile { aspect-ratio: 16 / 9; }
    .ct-tile-txt { line-height: 20px; }
    .ct-panels::before { display: none; } /* il pannello sta sotto tutte le righe: la freccia non toccherebbe il box */
    .ct-panel-body { padding: 50px 20px 30px; }
    .ct-close { top: 15px; right: 15px; width: 26px; height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
    .ct-panel, .ct-panel.is-open, .ct-panels::before { transition: none; }
}