.vcp-banner-agenzie {
    display: block;
    min-width: 0;
}

.vcp-banner-agenzie[hidden] {
    display: none;
}

.vcp-banner-agenzie__riquadro {
    display: flex;
    flex-direction: column;
    gap: var(--vcp-spazio-16);
    min-width: 0;
}

.vcp-banner-agenzie__intestazione {
    display: flex;
    flex-direction: column;
    gap: var(--vcp-spazio-4);
}

.vcp-banner-agenzie__dicitura {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: var(--vcp-spazio-6);
    margin-bottom: var(--vcp-spazio-4);
    padding: var(--vcp-spazio-4) var(--vcp-spazio-10);
    border-radius: var(--vcp-raggio-pillola);
    background: var(--vcp-colore-primario-tenue);
    font-size: var(--vcp-testo-11);
    font-weight: var(--vcp-peso-semigrassetto);
    letter-spacing: var(--vcp-spaziatura-maiuscole-larga);
    text-transform: uppercase;
    color: var(--vcp-colore-primario-attivo);
}

.vcp-banner-agenzie__titolo {
    margin: 0;
    font-size: var(--vcp-testo-22);
    font-weight: var(--vcp-peso-grassetto);
    line-height: var(--vcp-interlinea-stretta);
    letter-spacing: var(--vcp-spaziatura-stretta);
    color: var(--vcp-colore-testo);
    text-wrap: balance;
}

.vcp-banner-agenzie__testo {
    margin: 0;
    font-size: var(--vcp-testo-14);
    line-height: var(--vcp-interlinea);
    color: var(--vcp-colore-testo-secondario);
    text-wrap: pretty;
}

.vcp-banner-agenzie__scorrimento {
    position: relative;
    min-width: 0;
}

.vcp-banner-agenzie__freccia {
    position: absolute;
    top: 50%;
    z-index: 1;
    display: inline-grid;
    place-items: center;
    width: var(--vcp-altezza-44);
    height: var(--vcp-altezza-44);
    border: var(--vcp-bordo-sottile) solid var(--vcp-colore-bordo);
    border-radius: var(--vcp-raggio-cerchio);
    background: var(--vcp-colore-superficie);
    box-shadow: var(--vcp-ombra-rialzo);
    font-size: var(--vcp-testo-15);
    color: var(--vcp-colore-testo);
    transform: translateY(-50%);
    transition: opacity var(--vcp-durata-rapida);
}

.vcp-banner-agenzie__freccia[hidden] {
    display: none;
}

.vcp-banner-agenzie__freccia--indietro {
    left: calc(var(--vcp-spazio-12) * -1);
}

.vcp-banner-agenzie__freccia--avanti {
    right: calc(var(--vcp-spazio-12) * -1);
}

.vcp-banner-agenzie__freccia:disabled {
    opacity: 0;
    pointer-events: none;
}

.vcp-banner-agenzie__freccia:focus-visible {
    outline: var(--vcp-contorno-fuoco);
    outline-offset: var(--vcp-contorno-fuoco-distanza);
}

.vcp-banner-agenzie__elenco {
    display: flex;
    gap: var(--vcp-spazio-12);
    margin: 0;
    padding: var(--vcp-spazio-4) 0 var(--vcp-spazio-8);
    overflow-x: auto;
    list-style: none;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    container: banner-agenzie / inline-size;
}

/* Nella riga stanno solo banner interi: uno sul telefono, due o tre quando
   c'è spazio. Gli altri si raggiungono con le frecce o scorrendo. */
.vcp-banner-agenzie__voce {
    display: flex;
    flex: none;
    width: 100%;
    aspect-ratio: 2 / 1;
    scroll-snap-align: start;
}

@container banner-agenzie (min-width: 34rem) {
    .vcp-banner-agenzie__voce {
        width: calc((100% - var(--vcp-spazio-12)) / 2);
    }
}

@container banner-agenzie (min-width: 60rem) {
    .vcp-banner-agenzie__voce {
        width: calc((100% - var(--vcp-spazio-12) * 2) / 3);
    }
}

.vcp-banner-agenzie__collegamento,
.vcp-banner-agenzie__invito {
    display: flex;
    flex: 1;
    min-width: 0;
    border-radius: var(--vcp-raggio-18);
    text-decoration: none;
    transition: border-color var(--vcp-durata-rapida), box-shadow var(--vcp-durata-rapida), background-color var(--vcp-durata-rapida);
}

.vcp-banner-agenzie__collegamento {
    overflow: hidden;
    border: var(--vcp-bordo-sottile) solid var(--vcp-colore-bordo);
    background: var(--vcp-colore-superficie);
    box-shadow: var(--vcp-ombra-icona);
}

.vcp-banner-agenzie__immagine {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vcp-banner-agenzie__voce--segnaposto {
    border-radius: var(--vcp-raggio-18);
    background: var(--vcp-colore-traccia);
}

/* L'invito riprende il blu della pagina per le agenzie, con due cerchi
   luminosi di decorazione dietro al contenuto. */
.vcp-banner-agenzie__invito {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--vcp-spazio-4);
    padding: var(--vcp-spazio-20) var(--vcp-spazio-24);
    background: linear-gradient(135deg, var(--vcp-colore-primario), var(--vcp-colore-primario-attivo));
    box-shadow: var(--vcp-ombra-icona);
    color: var(--vcp-colore-superficie);
}

.vcp-banner-agenzie__invito::before,
.vcp-banner-agenzie__invito::after {
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: var(--vcp-raggio-cerchio);
    background: radial-gradient(circle, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 70%);
}

.vcp-banner-agenzie__invito::before {
    top: -40%;
    right: -12%;
    width: 70%;
    aspect-ratio: 1;
}

.vcp-banner-agenzie__invito::after {
    bottom: -55%;
    left: -15%;
    width: 55%;
    aspect-ratio: 1;
}

.vcp-banner-agenzie__invito-icona {
    display: inline-grid;
    place-items: center;
    width: var(--vcp-altezza-36);
    height: var(--vcp-altezza-36);
    margin-bottom: var(--vcp-spazio-6);
    border-radius: var(--vcp-raggio-cerchio);
    background: rgba(255, 255, 255, 0.18);
    font-size: var(--vcp-testo-15);
}

.vcp-banner-agenzie__invito-titolo {
    font-size: var(--vcp-testo-19);
    font-weight: var(--vcp-peso-grassetto);
    line-height: var(--vcp-interlinea-stretta);
}

.vcp-banner-agenzie__invito-testo {
    font-size: var(--vcp-testo-13);
    line-height: var(--vcp-interlinea);
    opacity: 0.9;
}

.vcp-banner-agenzie__invito-azione {
    display: inline-flex;
    align-items: center;
    gap: var(--vcp-spazio-6);
    margin-top: var(--vcp-spazio-10);
    padding: var(--vcp-spazio-6) var(--vcp-spazio-14);
    border-radius: var(--vcp-raggio-pillola);
    background: var(--vcp-colore-superficie);
    font-size: var(--vcp-testo-13);
    font-weight: var(--vcp-peso-semigrassetto);
    color: var(--vcp-colore-primario-attivo);
}

.vcp-banner-agenzie__collegamento:focus-visible,
.vcp-banner-agenzie__invito:focus-visible {
    outline: var(--vcp-contorno-fuoco);
    outline-offset: var(--vcp-contorno-fuoco-distanza);
}

@media (hover: hover) {
    .vcp-banner-agenzie__collegamento:hover {
        border-color: var(--vcp-colore-bordo-forte);
        box-shadow: var(--vcp-ombra-rialzo);
    }

    .vcp-banner-agenzie__invito:hover {
        box-shadow: var(--vcp-ombra-rialzo);
    }
}

.vcp-banner-agenzie--sezione {
    margin-top: var(--vcp-spazio-32);
    padding-top: var(--vcp-spazio-24);
    border-top: var(--vcp-bordo-sottile) solid var(--vcp-colore-bordo);
}

/* Il contenitore della pagina annuncio ha 12px di margine: sul telefono
   si arriva ai 16px del resto del sistema. */
@media (max-width: 575px) {
    .vcp-banner-agenzie--sezione {
        padding-inline: var(--vcp-spazio-4);
    }
}

.vcp-banner-agenzie--scheda .vcp-banner-agenzie__riquadro {
    padding: var(--vcp-spazio-20);
    border: var(--vcp-bordo-sottile) solid var(--vcp-colore-bordo);
    border-radius: var(--vcp-raggio-20);
    background: var(--vcp-colore-superficie);
}

.vcp-banner-agenzie--scheda .vcp-banner-agenzie__titolo {
    font-size: var(--vcp-testo-19);
}

.vcp-banner-agenzie--scheda .vcp-banner-agenzie__collegamento,
.vcp-banner-agenzie--scheda .vcp-banner-agenzie__invito,
.vcp-banner-agenzie--scheda .vcp-banner-agenzie__voce--segnaposto {
    border-radius: var(--vcp-raggio-14);
}


@media (prefers-reduced-motion: no-preference) {
    .vcp-banner-agenzie__collegamento,
    .vcp-banner-agenzie__invito {
        transition-property: border-color, box-shadow, background-color, transform;
    }

    @media (hover: hover) {
        .vcp-banner-agenzie__collegamento:hover,
        .vcp-banner-agenzie__invito:hover {
            transform: translateY(calc(var(--vcp-spazio-2) * -1));
        }
    }

    .vcp-banner-agenzie__voce--segnaposto {
        animation: vcp-banner-agenzie-pulsazione var(--vcp-durata-pulsazione) ease-in-out infinite;
    }

    @keyframes vcp-banner-agenzie-pulsazione {
        50% {
            opacity: var(--vcp-opacita-sollevato);
        }
    }
}

@media print {
    .vcp-banner-agenzie {
        display: none;
    }
}