.vcp-scheda-piano {
    display: flex;
    min-width: 0;
}

.vcp-scheda-piano__pulsante {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--vcp-spazio-10);
    min-width: 0;
    padding: var(--vcp-spazio-16);
    border: var(--vcp-bordo-spesso) solid var(--vcp-colore-bordo);
    border-radius: var(--vcp-raggio-20);
    background: var(--vcp-colore-superficie);
    text-align: left;
    color: var(--vcp-colore-testo);
    transition: background-color var(--vcp-durata), border-color var(--vcp-durata), box-shadow var(--vcp-durata);
}

@media (hover: hover) {
    .vcp-scheda-piano:not(.vcp-scheda-piano--scelta) .vcp-scheda-piano__pulsante:enabled:hover {
        border-color: var(--vcp-colore-bordo-forte);
    }
}

/* Dentro un gruppo il bordo della scelta lo disegna la cornice che scorre:
   il gruppo lo spegne qui con --vcp-scheda-piano-bordo-scelto. */
.vcp-scheda-piano--scelta .vcp-scheda-piano__pulsante {
    border-color: var(--vcp-scheda-piano-bordo-scelto, var(--vcp-colore-primario));
    background: var(--vcp-colore-primario-velato);
    box-shadow: var(--vcp-ombra-scheda-scelta);
}

.vcp-scheda-piano--disabilitato .vcp-scheda-piano__pulsante {
    opacity: var(--vcp-opacita-disattivato);
}

.vcp-scheda-piano__distintivo {
    position: absolute;
    top: 0;
    left: var(--vcp-spazio-20);
    z-index: 2;
    display: flex;
    transform: translateY(-50%);
    pointer-events: none;
}

.vcp-scheda-piano__testata {
    display: flex;
    align-items: center;
    gap: var(--vcp-spazio-12);
    min-width: 0;
    padding-right: calc(var(--vcp-radio-lato) + var(--vcp-spazio-12));
}

.vcp-scheda-piano__icona {
    display: grid;
    flex: none;
    place-items: center;
    width: var(--vcp-altezza-40);
    height: var(--vcp-altezza-40);
    border-radius: var(--vcp-raggio-12);
    background: var(--vcp-colore-primario-tenue);
    font-size: var(--vcp-testo-17);
    color: var(--vcp-colore-primario);
}

.vcp-scheda-piano--consigliato .vcp-scheda-piano__icona {
    background: var(--vcp-colore-accento-sfondo);
    color: var(--vcp-colore-accento);
}

.vcp-scheda-piano__intestazione {
    display: flex;
    flex-direction: column;
    gap: var(--vcp-spazio-2);
    min-width: 0;
}

.vcp-scheda-piano__titolo {
    font-size: var(--vcp-testo-15);
    font-weight: var(--vcp-peso-grassetto);
    line-height: var(--vcp-interlinea-stretta);
}

.vcp-scheda-piano__durata {
    font-size: var(--vcp-testo-12);
    color: var(--vcp-colore-testo-secondario);
}

.vcp-scheda-piano__radio {
    position: absolute;
    top: var(--vcp-spazio-16);
    right: var(--vcp-spazio-16);
    display: grid;
    place-items: center;
    width: var(--vcp-radio-lato);
    height: var(--vcp-radio-lato);
    border: var(--vcp-bordo-spesso) solid var(--vcp-colore-bordo-forte);
    border-radius: var(--vcp-raggio-cerchio);
    transition: border-color var(--vcp-durata);
}

.vcp-scheda-piano__punto {
    width: var(--vcp-radio-punto);
    height: var(--vcp-radio-punto);
    border-radius: var(--vcp-raggio-cerchio);
    background: var(--vcp-colore-primario);
    transform: scale(0);
    transition: transform var(--vcp-durata);
}

.vcp-scheda-piano--scelta .vcp-scheda-piano__radio {
    border-color: var(--vcp-colore-primario);
}

.vcp-scheda-piano--scelta .vcp-scheda-piano__punto {
    transform: scale(1);
}

.vcp-scheda-piano__descrizione {
    flex: 1;
    font-size: var(--vcp-testo-13);
    line-height: var(--vcp-interlinea);
    color: var(--vcp-colore-testo-tenue);
    text-wrap: pretty;
}

.vcp-scheda-piano__costo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--vcp-spazio-6);
}

.vcp-scheda-piano__prezzo {
    font-size: var(--vcp-testo-19);
    font-weight: var(--vcp-peso-grassetto);
    letter-spacing: var(--vcp-spaziatura-prezzo);
}

.vcp-scheda-piano__nota {
    font-size: var(--vcp-testo-12);
    color: var(--vcp-colore-testo-secondario);
}

.vcp-scheda-piano--gratuito .vcp-scheda-piano__pulsante {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--vcp-spazio-2) var(--vcp-spazio-12);
    padding: var(--vcp-spazio-16) var(--vcp-spazio-18);
    border: var(--vcp-bordo-medio) dashed var(--vcp-colore-bordo-forte);
    border-radius: var(--vcp-raggio-16);
    background: transparent;
    box-shadow: none;
}

.vcp-scheda-piano--gratuito.vcp-scheda-piano--scelta .vcp-scheda-piano__pulsante {
    border-color: var(--vcp-scheda-piano-bordo-scelto, var(--vcp-colore-primario));
    background: var(--vcp-colore-primario-velato);
}

.vcp-scheda-piano--gratuito .vcp-scheda-piano__radio {
    position: static;
    grid-row: 1 / span 2;
    grid-column: 1;
}

.vcp-scheda-piano--gratuito .vcp-scheda-piano__testata {
    grid-row: 1;
    grid-column: 2;
    padding-right: 0;
}

.vcp-scheda-piano--gratuito .vcp-scheda-piano__titolo {
    font-size: var(--vcp-testo-14);
    font-weight: var(--vcp-peso-semigrassetto);
}

.vcp-scheda-piano--gratuito .vcp-scheda-piano__descrizione {
    grid-row: 2;
    grid-column: 2;
    font-size: var(--vcp-testo-12);
    color: var(--vcp-colore-testo-secondario);
}

/* Sotto gli 860px la descrizione dei piani a pagamento non si mostra, come nel
   mockup; la regola è scritta al contrario per non dover ridare un display a un
   elemento che può anche essere nascosto con l'attributo hidden. */
@media (max-width: 859.98px) {
    .vcp-scheda-piano:not(.vcp-scheda-piano--gratuito) .vcp-scheda-piano__descrizione {
        display: none;
    }
}

@media (min-width: 860px) {
    .vcp-scheda-piano__pulsante {
        gap: var(--vcp-spazio-14);
        padding: var(--vcp-spazio-22) var(--vcp-spazio-20);
    }

    .vcp-scheda-piano__prezzo {
        font-size: var(--vcp-testo-22);
    }
}