/**
 * Annual Report - Studio Torta
 *
 * Ricalca la geometria del Figma: StudioTorta / canvas AnnualReport,
 * node 199:207 (frame 1440x2385). I valori in commento sono le misure
 * lette dal file, cosi' si capisce da dove arriva ogni numero.
 */

.st-ar,
.st-ar *,
.st-ar *::before,
.st-ar *::after {
    box-sizing: border-box;
}

.st-ar {
    font-family: 'Montserrat', sans-serif;

    /* Il tema incassa il contenuto in un .container Bootstrap da 1320px, ma
       nel Figma le fasce arrivano ai bordi della pagina: la sezione esce dal
       contenitore e si riallarga al viewport. Niente scroll orizzontale, il
       child theme ha gia' overflow-x:hidden su html/body. */
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Guida del Figma: contenuto 1358px, margine 40px dal bordo a 1440px.
   1358 + 40 di padding = 1398. */
.st-ar__container {
    width: 100%;
    max-width: 1398px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Testata di sezione ------------------------------------------------ */

.st-ar__title {
    margin: 0 0 11px; /* titolo chiude a -53, occhiello parte a -42 */
    font-family: inherit;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.5; /* 48px */
    letter-spacing: 0.32px;
    color: #707070;
    text-transform: uppercase;
}

.st-ar__subtitle {
    margin: 0;
    font-family: inherit;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.2; /* 21.6px */
    letter-spacing: 0.18px;
    color: #707070;
}

/* --- Financial highlights ---------------------------------------------- */

/* Frame 7: 1440x573, fondo #F5F5F5, 60px sopra e sotto */
.st-ar--highlights {
    background-color: #F5F5F5;
    padding: 60px 0;
}

.st-ar--highlights .st-ar__head {
    margin-bottom: 40px; /* occhiello chiude a -20, card partono a 20 */
}

/* Frame 3409 / 3410: righe centrate, gap 20 */
.st-ar__kpis {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

/* Frame 3406: 360x156, padding 20, gap 16, contenuto centrato.
   Nel Figma le due card dell'ultima riga sono 350 invece di 360:
   differenza non intenzionale, tenute tutte a 360. */
.st-ar-kpi {
    flex: 0 0 360px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background-color: #FFFFFF;
    border: 1px solid #DBE3F1;
    text-align: center;
}

.st-ar-kpi__value {
    font-weight: 700;
    font-size: 42px;
    line-height: 1.5; /* 63px */
    letter-spacing: 0.42px;
    color: #07263A;
}

/* Frame 3407: badge 37px di altezza, radius 4, padding 12/24 */
.st-ar-kpi__label {
    display: inline-flex;
    align-items: center;
    padding: 10px 24px;
    border-radius: 4px;
    background-color: #DFEAF0;
    font-weight: 300;
    font-size: 18px;
    line-height: 1;
    color: #0D4367;
    text-transform: uppercase;
}

/* --- Bilanci ------------------------------------------------------------ */

/* Frame 6: fondo bianco, titolo a +40 dall'inizio sezione */
.st-ar--bilanci {
    background-color: #FFFFFF;
    padding: 40px 0 60px;
}

.st-ar--bilanci .st-ar__head {
    margin-bottom: 80px; /* occhiello chiude a 533, card partono a 613 */
}

/* Frame 13: parte a 203px dal bordo pagina, cioe' 163px dentro la guida.
   Rientro voluto dal Figma: azzera questo padding-left per allineare le
   copertine al titolo di sezione. */
.st-ar__cards {
    display: grid;
    grid-template-columns: repeat(2, 403px);
    gap: 200px; /* card 1 chiude a 606, card 2 apre a 806 */
    padding-left: 163px;
}

/* sostenibilita-1 1 / finanziario 1: 363x500 dentro una card da 403 */
.st-ar-card__media {
    margin: 0;
    max-width: 363px;
}

.st-ar-card__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 363 / 500;
    object-fit: cover;
}

/* Frame 3: padding verticale 20, gap 20 */
.st-ar-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 20px 0;
}

/* Frame 5: gap 12 tra blocco titolo e descrizione */
.st-ar-card__meta {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Frame 11/12: titolo e anno su due righe, gap 4 */
.st-ar-card__title {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    font-family: inherit;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: -0.26px;
    color: #707070;
    text-transform: uppercase;
}

.st-ar-card__text {
    margin: 0;
    font-family: inherit;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: 0.16px;
    color: #707070;
}

/* Frame 4: 203x37, radius 50, bordo nero, padding 10/20 */
.st-ar-card__cta {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    border: 1px solid #000000;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: 0.14px;
    color: #707070;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Stato hover non presente nel Figma, aggiunto perche' un bottone
   senza feedback non e' accettabile. */
.st-ar-card__cta:hover,
.st-ar-card__cta:focus {
    background-color: #000000;
    color: #FFFFFF;
    text-decoration: none;
}

/* --- Responsive --------------------------------------------------------- */

/* Il Figma copre solo il desktop a 1440: sotto quella soglia il rientro e
   il gap da 200px non stanno piu' in pagina e vengono ridotti. */
@media (max-width: 1280px) {
    .st-ar__cards {
        padding-left: 0;
        gap: 60px;
    }
}

@media (max-width: 991px) {
    .st-ar__cards {
        grid-template-columns: repeat(2, minmax(0, 403px));
        gap: 40px;
    }
    .st-ar--bilanci .st-ar__head {
        margin-bottom: 48px;
    }
}

@media (max-width: 767px) {
    .st-ar--highlights,
    .st-ar--bilanci {
        padding: 40px 0;
    }
    .st-ar-kpi {
        flex: 1 1 100%;
    }
    .st-ar__cards {
        grid-template-columns: minmax(0, 403px);
    }
    .st-ar__title {
        font-size: 26px;
    }
    .st-ar__subtitle {
        font-size: 16px;
    }
    .st-ar-kpi__value {
        font-size: 32px;
    }
    .st-ar-kpi__label {
        font-size: 16px;
    }
    .st-ar-card__title {
        font-size: 22px;
    }
}