/*
 * Card di download (widget df_download e shortcode [schemi_elettrici_download]).
 *
 * Rifa' in CSS il template Elementor 478463: riga con occhiello + titolo a
 * sinistra e bottone nero a destra. Differenze volute rispetto all'originale:
 *  - da 1024px in giu' la riga diventa una colonna, invece di andare a capo
 *    portandosi dietro gli 80px di padding verticale che il template applicava
 *    per errore anche alla colonna di testo (una regola tablet copiata su due
 *    elementi);
 *  - il bottone ha uno stato :hover / :focus-visible: nell'originale non c'era,
 *    ma la transizione dichiarata dai token .ave-button la dava per scontata;
 *  - le spaziature arrivano dai token del design system, quindi seguono il
 *    breakpoint (12/10/8px fra occhiello e titolo, invece dei 10px fissi).
 *
 * Il bottone prende padding, raggio e corpo da .ave-button--default e colore e
 * tipografia dal Theme Style del kit: qui non si dichiara nessuno dei due. Fino
 * al 06/08/2026 la card li riscriveva (Inter 500 minuscolo, hover #353535),
 * quindi era l'unico bottone del sito che non seguiva il design system.
 */

.df-download {
    display: flex;
    flex-direction: column;
    gap: var(--df-download-gap, 40px);
}

.df-download__card {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--ave-gap-md, 24px);
}

.df-download__text {
    display: flex;
    flex-direction: column;
    gap: var(--ave-gap-2xs, 10px);
    /* Senza, un titolo lungo non manda a capo e spinge fuori il bottone. */
    min-width: 0;
}

/*
 * Occhiello: la tipografia sta nella classe `ave-title-tag` del kit, che il
 * markup mette sull'elemento. Era 14px Manrope scritti qui.
 */
.df-download__tag {
    margin: 0;
}

/*
 * Titolo e sottotitolo: nessuna tipografia locale. Il titolo e' un `h3` (la card
 * sta sotto un h2 di sezione) vestito dalla classe `ave-text-h5` del kit, perche'
 * in elenco vuole i 26px di DF - H5 e non i 37 del proprio livello; il sottotitolo
 * porta `ave-text-small` (13px). Prima erano un `p` agganciato a mano alle
 * variabili del global font `58a63df` e il corpo del testo a 18px.
 */
.df-download__title,
.df-download__subtitle {
    margin: 0;
}

/* Il bottone non si stringe mai: la colonna di testo cede prima. */
.df-download__action {
    flex: none;
}

/*
 * Nessun colore e nessuna tipografia: li da' il Theme Style del kit a tutti i
 * bottoni del sito (Manrope 18/500 maiuscolo, nero su bianco, hover #1A1A1A),
 * padding e raggio arrivano da `.ave-button--default`. Qui resta il solo
 * allineamento verticale di etichetta e freccia.
 */
.df-download .df-download__action .elementor-button {
    display: inline-flex;
    align-items: center;
    text-align: center;
    text-decoration: none;
}

/* Etichetta e freccia: 20px fra i due, come nel template. */
.df-download__action .elementor-button-content-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.df-download__icon {
    display: inline-flex;
}

/*
 * Il colore della freccia sta sul tracciato, non sull'<svg>: l'elemento svg
 * porta fill="none" (serve a non riempire il tracciato di nero di serie) e
 * quel valore vincerebbe su qualunque fill ereditato dal contenitore.
 * Il rosso e' il #d53221 dell'originale, che NON e' il rosso del brand
 * (--ave-color-brand vale #E30613).
 */
.df-download__icon svg path {
    fill: var(--df-download-icon-color, #d53221);
}

/* --- Tablet e mobile: il bottone scende sotto al testo ------------------- */
@media (max-width: 1024px) {
    .df-download__card {
        flex-direction: column;
        align-items: flex-start;
    }
}