﻿/* ============================================================
   SOSTENIBILITÀ (ESG) - foglio di stile della sezione /Sustainability
   ------------------------------------------------------------
   Caricato solo dalle viste Views/Sustainability/* tramite
   @section Styles. Convenzione: prefisso "sust-", nomi BEM
   (blocco__elemento--modificatore).

   Indice
     1. Variabili
     2. Utility (full-width, pulsante)
     3. Componenti condivisi
        3.1 Intro (titolo grande + testo a due colonne)
        3.2 Heading (titolo centrato con riga + testo)
        3.3 Data (blocco "I nostri dati") e Metric
        3.4 Report (box verde "Report annuale")
        3.5 Summary (riepilogo finale + pulsanti download)
        3.6 Links (righe di link alle altre pagine ESG)
        3.7 Back (torna alla pagina principale)
        3.8 Topic (sezione tematica: titolo, sottotitolo, testo, media)
     4. Sezioni specifiche di pagina
        4.1 Corporate: quote, chairman, strategy
        4.2 Social: mosaic
     5. Responsive
   ============================================================ */


/* ============================================================
   1. Variabili
   ============================================================ */
:root {
    --sust-orange: #E57200;
    --sust-orange-dark: #d5640e;
    --sust-green: #3D5229;        /* testi verdi */
    --sust-green-bg: #48592d;     /* pannelli verdi */
    --sust-text: #4a4a4a;
    --sust-text-soft: #555555;
    --sust-text-light: #777777;
    --sust-cream: #d8d1bd;        /* testo su pannelli verdi */
    --sust-line: #d8d8d8;
    --sust-font: "Roboto", sans-serif;
    --sust-font-cond: "Roboto Condensed", sans-serif;
}


/* ============================================================
   2. Utility
   ============================================================ */

/* Sezione a tutta larghezza anche se dentro un contenitore */
.sust-fullwidth {
    position: relative;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
}

/* Pulsante arancio */
.sust-btn {
    display: inline-block;
    padding: 16px 48px;
    border: none;
    background-color: var(--sust-orange);
    color: #ffffff;
    font-family: var(--sust-font-cond);
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 2px;
    line-height: 1.3;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.3s ease;
}

    .sust-btn:hover,
    .sust-btn:focus {
        background-color: var(--sust-orange-dark);
        color: #ffffff;
        text-decoration: none;
    }


/* ============================================================
   3. Componenti condivisi
   ============================================================ */

/* ------------------------------------------------------------
   3.1 Intro: titolo grande a sinistra, testo in grassetto a destra
   ------------------------------------------------------------ */
.sust-intro {
    padding: 60px 0 0;
}

.sust-intro__row {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.sust-intro__title {
    flex: 0 0 45%;
    margin: 0;
    font-family: var(--sust-font-cond);
    font-weight: 800;
    font-size: 56px;
    line-height: 1.1;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--sust-orange);
}

.sust-intro__text {
    flex: 1 1 55%;
    margin: 0;
    font-family: var(--sust-font);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.6;
    color: var(--sust-text);
}

/* ------------------------------------------------------------
   3.2 Heading: titolo centrato con riga sotto + testo giustificato
   ------------------------------------------------------------ */
.sust-heading {
    padding: 40px 0 60px;
    text-align: center;
}

.sust-heading__title {
    margin: 0 0 32px;
    font-family: var(--sust-font-cond);
    font-weight: 800;
    font-size: 24px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--sust-orange);
}

    .sust-heading__title::after {
        content: "";
        display: block;
        width: 200px;
        height: 2px;
        margin: 12px auto 0;
        background: var(--sust-orange);
    }

.sust-heading__text {
    max-width: 1100px;
    margin: 0 auto 30px;
    font-family: var(--sust-font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--sust-text);
    text-align: justify;
}

    .sust-heading__text:last-child {
        margin-bottom: 0;
    }

/* ------------------------------------------------------------
   3.3 Data: blocco "I nostri dati" (ambiente / persone / business)
   ------------------------------------------------------------ */
.sust-data {
    margin-top: 60px;
    font-family: var(--sust-font);
    color: var(--sust-text);
}

.sust-data__title {
    margin: 0 0 40px;
    font-family: var(--sust-font-cond);
    font-weight: 400;
    font-size: 20px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    color: var(--sust-orange);
}

    .sust-data__title::after {
        content: "";
        display: block;
        width: 200px;
        height: 2px;
        margin: 8px auto 0;
        background: var(--sust-orange);
    }

.sust-data__block {
    margin-bottom: 60px;
}

.sust-data__block-title {
    margin: 0 0 24px;
    font-family: var(--sust-font-cond);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sust-orange);
}

/* Riga di metriche affiancate (blocco ambiente) */
.sust-data__row {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 40px;
}

/* Griglia a tre colonne (blocchi persone e business) */
.sust-data__grid {
    display: grid;
    grid-template-columns: 300px 200px 1fr;
    gap: 40px;
    align-items: center;
}

.sust-data__grid--top {
    align-items: flex-start;
}

.sust-data__stack .sust-metric + .sust-metric {
    margin-top: 18px;
}

.sust-data__divider {
    margin: 40px 0 32px;
    border: 0;
    border-top: 1px solid var(--sust-line);
}

.sust-data__footnote {
    margin: 16px 0 0;
    font-size: 11px;
}

/* Metrica: valore + etichetta (+ icona opzionale) */
.sust-metric {
    flex: 1 1 260px;
}

.sust-metric--icon {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.sust-metric--center {
    align-self: center;
    text-align: center;
}

.sust-metric__icon {
    margin-bottom: 8px;
}

    .sust-metric__icon img {
        width: 220px;
        height: 200px;
        object-fit: contain;
    }

.sust-metric__value {
    margin: 8px 0 6px;
    font-family: var(--sust-font-cond);
    font-weight: 700;
    font-size: 36px;
    line-height: 1;
    color: var(--sust-orange);
}

.sust-metric__number {
    font-size: 2em;
}

.sust-metric__unit {
    margin-left: 4px;
    font-size: 1.3em;
}

.sust-metric__label {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.4px;
    line-height: 1.3;
}

.sust-metric__note {
    font-size: 20px;
    font-weight: 400;
}

/* Metrica con grafico: titolo testuale + immagine delle barre */
.sust-metric__chart-title {
    max-width: 470px;
    margin: 0 0 16px;
    font-family: var(--sust-font-cond);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.25;
    text-transform: uppercase;
    color: var(--sust-text-soft);
}

.sust-metric--chart img {
    display: block;
    width: 100%;
    max-width: 470px;
    height: auto;
}

/* Metrica con grafico piccolo affiancato al testo
   (usata dalla versione inglese finché non arrivano i dati 2025) */
.sust-metric--split {
    display: flex;
    align-items: center;
    gap: 32px;
}

    .sust-metric--split .sust-metric__chart img {
        display: block;
        width: 220px;
        height: auto;
    }

/* ------------------------------------------------------------
   3.4 Report: immagine full-width + box verde "Report annuale"
   ------------------------------------------------------------ */
.sust-report {
    margin-top: 30px;
}

.sust-report__media img {
    display: block;
    width: 100%;
    height: 480px;
    object-fit: cover;
}

.sust-report__box {
    padding: 60px 0;
    background-color: var(--sust-green-bg);
    color: #ffffff;
}

.sust-report__title {
    margin: 0 0 16px;
    font-family: var(--sust-font-cond);
    font-weight: 800;
    font-size: 36px;
    line-height: 1.2;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--sust-orange);
}

.sust-report__text {
    max-width: 560px;
    margin: 0 0 24px;
    font-family: var(--sust-font);
    font-size: 16px;
    line-height: 1.6;
    color: #ffffff;
}

.sust-report__link {
    display: inline-block;
    font-family: var(--sust-font-cond);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffffff;
    text-decoration: underline;
}

    .sust-report__link:hover,
    .sust-report__link:focus {
        color: #ffffff;
        text-decoration: underline;
        opacity: 0.8;
    }

/* ------------------------------------------------------------
   3.5 Summary: riepilogo finale con periodo e pulsanti download
   ------------------------------------------------------------ */
.sust-summary {
    padding: 60px 0;
    text-align: center;
}

.sust-summary__lead {
    max-width: 900px;
    margin: 0 auto 16px;
    font-family: var(--sust-font);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.4;
    color: var(--sust-text-soft);
}

.sust-summary__period {
    max-width: 900px;
    margin: 0 auto;
    font-family: var(--sust-font);
    font-size: 16px;
    line-height: 1.5;
    color: var(--sust-text-light);
}

.sust-summary__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin-top: 50px;
}

    .sust-summary__buttons .sust-btn {
        flex: 0 1 340px;
        padding: 16px 24px;
    }

/* ------------------------------------------------------------
   3.6 Links: righe immagine + testo colorato verso le pagine ESG
   ------------------------------------------------------------ */
.sust-links {
    background: #ffffff;
}

.sust-links__title {
    margin: 60px 0 8px;
    font-family: var(--sust-font-cond);
    font-weight: 800;
    font-size: 36px;
    text-transform: uppercase;
    text-align: center;
    color: var(--sust-green);
}

.sust-links__subtitle {
    margin: 0 0 40px;
    font-family: var(--sust-font-cond);
    font-size: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    color: var(--sust-orange);
}

    .sust-links__subtitle::after {
        content: "";
        display: block;
        width: 120px;
        height: 2px;
        margin: 8px auto 0;
        background: var(--sust-orange);
    }

.sust-links__row {
    display: flex;
    align-items: stretch;
    text-decoration: none;
}

    .sust-links__row:hover,
    .sust-links__row:focus {
        text-decoration: none;
    }

.sust-links__text,
.sust-links__image {
    flex: 1 1 50%;
    min-width: 0;
}

.sust-links__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 100px;
    box-sizing: border-box;
    background-color: var(--sust-green-bg);
}

.sust-links__row--orange .sust-links__text {
    background-color: var(--sust-orange);
}

.sust-links__text h3 {
    margin: 0 0 16px;
    font-family: var(--sust-font-cond);
    font-weight: 800;
    font-size: 32px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffffff;
}

.sust-links__text p {
    margin: 0;
    font-family: var(--sust-font);
    font-size: 16px;
    line-height: 1.5;
    color: #ffffff;
}

.sust-links__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sust-links__footer img {
    display: block;
    width: 100%;
    height: auto;
}

/* ------------------------------------------------------------
   3.7 Back: pulsante "Torna alla pagina principale"
   ------------------------------------------------------------ */
.sust-back {
    padding: 50px 0;
    text-align: center;
}

/* ------------------------------------------------------------
   3.8 Topic: sezione tematica generica
   (titolo arancio, sottotitolo verde, testo, colonne, figure)
   ------------------------------------------------------------ */
.sust-topic {
    padding: 60px 0;
}

.sust-topic__title {
    margin: 0 0 24px;
    font-family: var(--sust-font-cond);
    font-weight: 800;
    font-size: 48px;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--sust-orange);
}

.sust-topic--lg .sust-topic__title {
    font-size: 56px;
    letter-spacing: 3px;
}

.sust-topic__subtitle {
    margin: 0 0 16px;
    font-family: var(--sust-font-cond);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--sust-green);
}

.sust-topic__subtitle--orange {
    margin-bottom: 24px;
    font-weight: 800;
    font-size: 24px;
    letter-spacing: 3px;
    color: var(--sust-orange);
}

/* Etichetta di paragrafo (es. "Azione prevista", "Risultati") */
.sust-topic__label {
    margin: 32px 0 6px;
    font-family: var(--sust-font-cond);
    font-weight: 300;
    font-size: 20px;
    text-transform: uppercase;
    color: var(--sust-orange);
}

.sust-topic .sust-topic__lead {
    font-weight: 700;
}

.sust-topic p {
    margin: 0 0 16px;
    font-family: var(--sust-font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--sust-text);
}

.sust-topic--justify p {
    text-align: justify;
}

/* Elenco puntato standard */
.sust-topic__bullets {
    margin: 16px 0;
    padding-left: 20px;
    font-family: var(--sust-font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--sust-text);
}

    .sust-topic__bullets li {
        margin-bottom: 8px;
    }

/* Elenco con trattino verde */
.sust-topic__list {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--sust-font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--sust-text);
}

    .sust-topic__list li {
        position: relative;
        margin-bottom: 16px;
        padding-left: 20px;
    }

        .sust-topic__list li::before {
            content: "–";
            position: absolute;
            left: 0;
            top: 0;
            font-weight: bold;
            color: var(--sust-green);
        }

/* Colonne */
.sust-topic__row {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.sust-topic__col {
    box-sizing: border-box;
    min-width: 0;
}

.sust-topic__col--text {
    flex: 1 1 55%;
}

.sust-topic__col--media {
    flex: 0 0 45%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sust-topic__col--half {
    flex: 1 1 50%;
}

/* Figura con bordo arancio (tabelle, grafici) */
.sust-topic__figure {
    padding: 8px;
    border: 2px solid var(--sust-orange);
    border-radius: 4px;
    background: #ffffff;
    text-align: center;
}

    .sust-topic__figure img {
        display: block;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
    }

/* Immagine a tutta larghezza del contenitore */
.sust-topic__image {
    margin-top: 40px;
}

    .sust-topic__image img,
    .sust-topic__img {
        display: block;
        width: 100%;
        height: auto;
    }

.sust-topic__img {
    border-radius: 4px;
}

/* Tabella dati (es. inventario emissioni) */
.sust-table-wrap {
    overflow-x: auto;
    margin-top: 48px;
}

.sust-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-family: var(--sust-font);
    font-size: 18px;
    color: var(--sust-text-soft);
}

    .sust-table th,
    .sust-table td {
        padding: 18px 0 18px 16px;
        text-align: right;
        vertical-align: middle;
    }

    .sust-table tbody th,
    .sust-table tfoot th,
    .sust-table .sust-table__standard {
        padding-left: 0;
        text-align: left;
        font-weight: 400;
        color: var(--sust-orange);
    }

    .sust-table tbody th {
        max-width: 480px;
    }

    .sust-table tbody tr {
        border-bottom: 1px solid var(--sust-text-soft);
    }

    .sust-table tbody td,
    .sust-table tfoot td {
        font-weight: 500;
    }

.sust-table__group,
.sust-table__standard {
    font-family: var(--sust-font-cond);
    font-size: 24px;
    text-transform: uppercase;
    color: var(--sust-orange);
}

.sust-table__group {
    font-weight: 400;
}

.sust-table thead .sust-table__unit {
    padding-top: 6px;
    font-size: 16px;
    font-weight: 400;
}

.sust-table tfoot th {
    font-family: var(--sust-font-cond);
    font-weight: 700;
    font-size: 24px;
    text-transform: uppercase;
}

.sust-table tfoot td {
    font-weight: 700;
}

.sust-topic .sust-table__caption {
    margin-top: 16px;
    font-style: italic;
    font-size: 16px;
}

/* Grafico a torta (percentuale in --sust-pie-value) con legenda a lato */
.sust-pie {
    display: flex;
    align-items: center;
    gap: 40px;
    height: 100%;
    padding-top: 40px;
}

.sust-pie__chart {
    flex: 0 0 200px;
    height: 200px;
    border-radius: 50%;
    background: conic-gradient(var(--sust-green-bg) 0 var(--sust-pie-value), #e6e6e6 var(--sust-pie-value) 100%);
}

.sust-topic .sust-pie__value {
    margin: 0;
    font-family: var(--sust-font-cond);
    font-weight: 700;
    font-size: 48px;
    line-height: 1;
    color: var(--sust-green-bg);
}

.sust-topic .sust-pie__value--light {
    margin-top: 24px;
    color: #cfcfcf;
}

.sust-topic .sust-pie__text {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.4;
}

.sust-topic .sust-pie__note {
    margin: 24px 0 0;
    font-family: var(--sust-font-cond);
    font-weight: 700;
    font-size: 16px;
}

/* Video 16:9 */
.sust-video {
    overflow: hidden;
    margin-bottom: 24px;
    border-radius: 4px;
    background: #e0e0e0;
    aspect-ratio: 16 / 9;
}

    .sust-video video {
        display: block;
        width: 100%;
        height: auto;
    }


/* ============================================================
   4. Sezioni specifiche di pagina
   ============================================================ */

/* ------------------------------------------------------------
   4.1 Corporate
   ------------------------------------------------------------ */

/* Citazione con freccia "scroll down" */
.sust-quote {
    padding: 80px 0 60px;
    text-align: center;
}

.sust-quote__inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.sust-quote__text {
    margin: 0;
    font-family: var(--sust-font-cond);
    font-weight: 800;
    font-size: 24px;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--sust-green);
}

.sust-quote__highlight {
    color: var(--sust-orange);
}

.sust-quote__divider {
    width: 240px;
    height: 2px;
    margin: 24px auto 0;
    background-color: var(--sust-green);
}

.sust-quote__arrow {
    display: inline-block;
    width: 48px;
    height: 48px;
    margin-top: 40px;
    border: 2px solid var(--sust-orange);
    border-radius: 50%;
    font-size: 24px;
    line-height: 44px;
    text-align: center;
    color: var(--sust-orange);
}

/* Dichiarazione del Presidente */
.sust-chairman {
    margin: 10px 0 40px;
    padding: 60px 0 40px;
    background-color: var(--sust-green-bg);
}

.sust-chairman__row {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.sust-chairman__photo {
    flex: 0 0 50%;
}

    .sust-chairman__photo img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 4px;
    }

.sust-chairman__text {
    flex: 1 1 50%;
}

.sust-chairman__title,
.sust-chairman__subtitle {
    margin: 0;
    font-family: var(--sust-font-cond);
    font-weight: 800;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #ffffff;
}

    .sust-chairman__title::after {
        content: "";
        display: block;
        width: 120px;
        height: 2px;
        margin: 12px 0 24px;
        background-color: #ffffff;
    }

.sust-chairman__subtitle {
    margin-bottom: 24px;
}

.sust-chairman__text p {
    margin: 0 0 24px;
    font-family: var(--sust-font);
    font-style: italic;
    font-size: 14px;
    line-height: 1.6;
    color: var(--sust-cream);
}

.sust-chairman__sign {
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    color: #ffffff;
}

/* Strategia ESG */
.sust-strategy {
    margin-top: 40px;
    padding-bottom: 40px;
}

.sust-strategy__row {
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
    align-items: flex-start;
}

.sust-strategy__left,
.sust-strategy__right {
    flex: 1 1 0;
    min-width: 300px;
}

.sust-strategy__left {
    max-width: 468px;
}

.sust-strategy__title {
    margin: 0 0 20px;
    font-family: var(--sust-font-cond);
    font-weight: 800;
    font-size: 56px;
    line-height: 1.1;
    letter-spacing: 3.3px;
    text-transform: uppercase;
    color: var(--sust-orange);
}

.sust-strategy p {
    margin: 0 0 30px;
    color: var(--sust-text);
}

.sust-strategy__label {
    margin-right: 8px;
    font-weight: bold;
    color: var(--sust-green);
}

/* ------------------------------------------------------------
   4.2 Social: mosaico immagini + blocchi colorati
   ------------------------------------------------------------ */
.sust-mosaic {
    background: #ffffff;
}

.sust-mosaic__row {
    display: grid;
    gap: 20px;
    margin-bottom: 20px;
}

.sust-mosaic__row--3col {
    grid-template-columns: 1fr 2fr 1fr;
}

.sust-mosaic__row--4col {
    grid-template-columns: 1fr 1fr 2fr 1fr;
}

.sust-mosaic__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sust-mosaic__item--orange {
    background: var(--sust-orange);
}

.sust-mosaic__item--green {
    background: var(--sust-green-bg);
}

.sust-mosaic__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 100px;
}

    .sust-mosaic__text h3 {
        margin: 0 0 16px;
        font-family: var(--sust-font-cond);
        font-weight: 800;
        font-size: 24px;
        text-transform: uppercase;
        color: #ffffff;
    }

    .sust-mosaic__text p {
        margin: 0;
        font-family: var(--sust-font);
        font-size: 16px;
        line-height: 1.6;
        color: #ffffff;
    }


/* ============================================================
   5. Responsive
   ============================================================ */
@media (max-width: 991px) {
    .sust-data__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    /* Colonne impilate */
    .sust-intro__row,
    .sust-chairman__row,
    .sust-strategy__row,
    .sust-topic__row,
    .sust-links__row {
        flex-direction: column;
    }

    .sust-intro__title,
    .sust-intro__text,
    .sust-topic__col--text,
    .sust-topic__col--media,
    .sust-topic__col--half {
        flex: 1 1 100%;
    }

    /* Titoli */
    .sust-intro__title,
    .sust-topic__title,
    .sust-topic--lg .sust-topic__title,
    .sust-strategy__title {
        font-size: 36px;
        letter-spacing: 1px;
    }

    .sust-heading__title {
        font-size: 20px;
    }

    .sust-topic__subtitle--orange {
        font-size: 18px;
        letter-spacing: 2px;
    }

    .sust-pie {
        padding-top: 0;
        gap: 24px;
    }

    .sust-table {
        font-size: 15px;
    }

    .sust-table__group,
    .sust-table__standard,
    .sust-table tfoot th {
        font-size: 18px;
    }

    .sust-pie__chart {
        flex-basis: 120px;
        height: 120px;
    }

    .sust-chairman__title,
    .sust-chairman__subtitle {
        letter-spacing: 2px;
    }

    /* Pulsanti */
    .sust-btn {
        padding: 12px 32px;
        font-size: 14px;
    }

    .sust-summary__buttons .sust-btn {
        flex: 1 1 100%;
    }

    /* Dati */
    .sust-data__row {
        gap: 24px;
    }

    .sust-metric {
        flex: 1 1 100%;
    }

    .sust-metric__value {
        font-size: 28px;
    }

    .sust-metric__label {
        font-size: 18px;
    }

    .sust-metric__note {
        font-size: 16px;
    }

    .sust-metric__chart-title {
        font-size: 18px;
    }

        .sust-metric__chart-title br {
            display: none;
        }

    .sust-metric__icon img {
        width: 70px;
        height: 70px;
    }

    .sust-data__divider {
        margin: 32px 0 24px;
    }

    /* Report e riepilogo */
    .sust-report__media img {
        height: 240px;
    }

    .sust-report__title {
        font-size: 28px;
    }

    .sust-summary {
        padding: 40px 0;
    }

    .sust-summary__lead {
        font-size: 16px;
    }

    .sust-summary__period {
        font-size: 14px;
    }

    /* Link ESG e mosaico */
    .sust-links__text,
    .sust-mosaic__text {
        padding: 40px 20px;
    }

    .sust-links__text h3 {
        font-size: 24px;
    }

    .sust-links__image img {
        height: auto;
    }

    .sust-mosaic__row--3col,
    .sust-mosaic__row--4col {
        grid-template-columns: 1fr;
    }

    .sust-mosaic__item--orange:empty,
    .sust-mosaic__item--green:empty {
        display: none;
    }
}
