/* ============================================================
   HORIZON MUNDI — chi-siamo.css
   Stili specifici della pagina Chi Siamo.
   Estende global.css + components.css + layout.css.
   ============================================================ */

/* ─── Token locali ───────────────────────────────────────── */
:root {
    --hm-gradient-cs:      linear-gradient(135deg, #1A3A3A 0%, #7D2E3E 100%);
    --hm-cs-abyss-lighter: #243F3F;
}

/* ─── Grid 2 colonne (ridefinita per isolamento) ─────────── */
.hm-grid--2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--hm-space-8);
}

/* ─── Inner links gold (ridefiniti per isolamento) ───────── */
.hm-inner-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hm-space-4) var(--hm-space-8);
    justify-content: center;
}

.hm-inner-links__item {
    font-family: var(--hm-font-heading);
    font-size: var(--hm-size-sm);
    font-weight: var(--hm-weight-medium);
    color: var(--hm-gold);
    letter-spacing: var(--hm-tracking-wide);
    transition: color var(--hm-dur-fast);
}

.hm-inner-links__item:hover {
    color: var(--hm-sand);
}

/* ══════════════════════════════════════════════════════════
   § 1  HERO — sfondo bianco, centrato
══════════════════════════════════════════════════════════ */
.hm-cs-hero {
    background-color: var(--hm-white);
    padding-top: calc(var(--hm-nav-height) + var(--hm-space-20));
    padding-bottom: var(--hm-space-12);
    text-align: center;
}

.hm-cs-hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hm-cs-hero__title {
    font-family: var(--hm-font-heading);
    font-size: clamp(var(--hm-size-3xl), 5vw, var(--hm-size-5xl));
    font-weight: var(--hm-weight-light);
    color: var(--hm-abyss);
    line-height: var(--hm-leading-snug);
    letter-spacing: var(--hm-tracking-tight);
    margin-top: var(--hm-space-4);
    margin-bottom: var(--hm-space-6);
}

.hm-cs-hero__subtitle {
    font-size: var(--hm-size-md);
    font-weight: var(--hm-weight-light);
    color: var(--hm-color-text-muted);
    line-height: var(--hm-leading-normal);
    max-width: 600px;
    margin-inline: auto;
    margin-bottom: var(--hm-space-8);
}

/* Linea decorativa gold */
.hm-cs-hero__line {
    width: 40px;
    height: 2px;
    background-color: var(--hm-gold);
}

/* ══════════════════════════════════════════════════════════
   § 2  LA STORIA — sfondo platino, split 50/50
══════════════════════════════════════════════════════════ */
.hm-cs-storia {
    background-color: var(--hm-platinum);
}

.hm-cs-storia__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--hm-space-12);
    align-items: start;
    margin-top: var(--hm-space-2);
}

/* Testo sinistra */
.hm-cs-storia__text {
    font-size: var(--hm-size-md);
    color: var(--hm-color-text-muted);
    line-height: var(--hm-leading-normal);
    margin-bottom: var(--hm-space-5);
}

.hm-cs-storia__text:last-child {
    margin-bottom: 0;
}

/* Box destra — Verde Abisso */
.hm-cs-storia__right {
    /* sticky alla top durante lo scroll del contenuto sinistra */
    position: sticky;
    top: calc(var(--hm-nav-height) + var(--hm-space-8));
}

.hm-cs-storia__box {
    background-color: var(--hm-abyss);
    padding: var(--hm-space-12);
    display: flex;
    flex-direction: column;
}

.hm-cs-storia__quote {
    font-family: var(--hm-font-heading);
    font-size: clamp(var(--hm-size-lg), 1.5vw, 1.3rem);
    font-weight: var(--hm-weight-light);
    color: var(--hm-white);
    line-height: var(--hm-leading-normal);
    letter-spacing: var(--hm-tracking-normal);
    margin-top: var(--hm-space-5);
    margin-bottom: var(--hm-space-6);
}

/* Linea separatrice gold nel box */
.hm-cs-storia__box-line {
    width: 40px;
    height: 1px;
    background-color: var(--hm-gold);
    margin-bottom: var(--hm-space-6);
}

.hm-cs-storia__box-note {
    font-size: var(--hm-size-sm);
    color: rgba(255, 255, 255, 0.6);
    line-height: var(--hm-leading-normal);
    margin: 0;
}

/* ══════════════════════════════════════════════════════════
   § 3  IL TEAM — sfondo bianco
══════════════════════════════════════════════════════════ */
.hm-cs-team {
    background-color: var(--hm-white);
}

/* Griglia 2 card centrate max-width 900px */
.hm-cs-team__cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--hm-space-10);
    max-width: 900px;
    margin-inline: auto;
}

/* Singola card */
.hm-cs-team-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Segnaposto foto — 200×200px, gradiente, iniziale */
.hm-cs-team-card__photo {
    display: block;
    width: 200px;
    height: 200px;
    object-fit: cover;
    object-position: top center;
    flex-shrink: 0;
    margin-bottom: var(--hm-space-8);
}

/* Body */
.hm-cs-team-card__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.hm-cs-team-card__name {
    font-family: var(--hm-font-heading);
    font-size: var(--hm-size-2xl);
    font-weight: var(--hm-weight-light);
    color: var(--hm-abyss);
    letter-spacing: var(--hm-tracking-tight);
    margin-bottom: var(--hm-space-2);
}

.hm-cs-team-card__role {
    font-family: var(--hm-font-heading);
    font-size: var(--hm-size-xs);
    font-weight: var(--hm-weight-semibold);
    letter-spacing: var(--hm-tracking-widest);
    text-transform: uppercase;
    color: var(--hm-gold);
    margin-bottom: var(--hm-space-5);
    display: block;
}

.hm-cs-team-card__text {
    font-size: var(--hm-size-base);
    color: var(--hm-color-text-muted);
    line-height: var(--hm-leading-normal);
    margin-bottom: var(--hm-space-5);
}


/* ══════════════════════════════════════════════════════════
   § 4  I VALORI — sfondo Verde Abisso
══════════════════════════════════════════════════════════ */
.hm-cs-valori {
    background-color: var(--hm-abyss);
}

.hm-cs-valori__grid {
    margin-top: var(--hm-space-4);
}

/* Card valore su sfondo leggermente più chiaro */
.hm-cs-valore-card {
    background-color: var(--hm-cs-abyss-lighter);
    border-left: 4px solid var(--hm-gold);
    padding: var(--hm-space-10) var(--hm-space-8);
}

.hm-cs-valore-card__title {
    font-family: var(--hm-font-heading);
    font-size: var(--hm-size-xl);
    font-weight: var(--hm-weight-semibold);
    color: var(--hm-white);
    letter-spacing: var(--hm-tracking-tight);
    margin-bottom: var(--hm-space-4);
}

.hm-cs-valore-card__text {
    font-size: var(--hm-size-base);
    color: rgba(255, 255, 255, 0.75);
    line-height: var(--hm-leading-normal);
    margin: 0;
}

/* ══════════════════════════════════════════════════════════
   § 5  PERCHÉ DIVERSI — sfondo bianco, split 50/50
══════════════════════════════════════════════════════════ */
.hm-cs-differenza {
    background-color: var(--hm-white);
}

.hm-cs-differenza__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--hm-space-12);
    align-items: start;
}

/* Testo sinistra */
.hm-cs-differenza__text {
    font-size: var(--hm-size-md);
    color: var(--hm-color-text-muted);
    line-height: var(--hm-leading-normal);
    margin-bottom: var(--hm-space-5);
}

.hm-cs-differenza__text:last-child {
    margin-bottom: 0;
}

/* Destra — due box con altezza uguale tramite flex */
.hm-cs-differenza__right {
    display: flex;
    flex-direction: column;
    gap: var(--hm-space-4);
}

/* Box comparativi */
.hm-cs-compare-box {
    background-color: var(--hm-platinum);
    padding: var(--hm-space-8);
    flex: 1;
}

/* Box Agenzia — bordo bordeaux */
.hm-cs-compare-box--agenzia {
    border-left: 4px solid #7D2E3E;
}

/* Box Horizon Mundi — bordo Verde Abisso */
.hm-cs-compare-box--hm {
    border-left: 4px solid var(--hm-abyss);
}

.hm-cs-compare-box__label {
    display: block;
    font-family: var(--hm-font-heading);
    font-size: var(--hm-size-xs);
    font-weight: var(--hm-weight-semibold);
    letter-spacing: var(--hm-tracking-widest);
    text-transform: uppercase;
    color: var(--hm-color-text-muted);
    margin-bottom: var(--hm-space-3);
}

/* Label Horizon Mundi — gold */
.hm-cs-compare-box__label--hm {
    color: var(--hm-abyss);
}

.hm-cs-compare-box__text {
    font-size: var(--hm-size-base);
    color: var(--hm-color-text-muted);
    line-height: var(--hm-leading-normal);
    margin: 0;
}

.hm-cs-compare-box__text--hm {
    color: var(--hm-abyss);
    font-weight: var(--hm-weight-medium);
}

/* ══════════════════════════════════════════════════════════
   § 6  CTA FINALE — gradiente scuro
══════════════════════════════════════════════════════════ */
.hm-cs-finale {
    background: var(--hm-gradient-cs);
    padding-block: var(--hm-space-24);
    text-align: center;
}

.hm-cs-finale__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--hm-space-12);
}

.hm-cs-finale__title {
    font-family: var(--hm-font-heading);
    font-size: clamp(var(--hm-size-xl), 3vw, var(--hm-size-3xl));
    font-weight: var(--hm-weight-light);
    color: var(--hm-white);
    letter-spacing: var(--hm-tracking-tight);
    line-height: var(--hm-leading-snug);
    margin-top: var(--hm-space-4);
    margin-bottom: var(--hm-space-6);
    max-width: 560px;
}

.hm-cs-finale__text {
    font-size: var(--hm-size-md);
    color: rgba(255, 255, 255, 0.75);
    line-height: var(--hm-leading-normal);
    max-width: 480px;
    margin-inline: auto;
    margin-bottom: var(--hm-space-10);
}

.hm-cs-finale__actions {
    display: flex;
    gap: var(--hm-space-4);
    flex-wrap: wrap;
    justify-content: center;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — max-width: 1024px
══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

    /* Hero */
    .hm-cs-hero {
        padding-top: calc(var(--hm-nav-height) + var(--hm-space-14));
    }

    /* Storia split → 1 colonna */
    .hm-cs-storia__split {
        grid-template-columns: 1fr;
        gap: var(--hm-space-8);
    }

    /* Box storia: sticky non necessario su 1 col */
    .hm-cs-storia__right {
        position: static;
    }

    /* Team cards → 1 colonna */
    .hm-cs-team__cards {
        grid-template-columns: 1fr;
        max-width: 480px;
    }

    /* Valori grid → 1 colonna */
    .hm-grid--2 {
        grid-template-columns: 1fr;
    }

    /* Differenza split → 1 colonna */
    .hm-cs-differenza__split {
        grid-template-columns: 1fr;
        gap: var(--hm-space-8);
    }

    /* Box compare: stesso sizing */
    .hm-cs-differenza__right {
        max-width: 560px;
    }

    /* Inner links */
    .hm-inner-links {
        flex-direction: column;
        align-items: center;
        gap: var(--hm-space-3);
    }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — max-width: 640px
══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

    /* Hero */
    .hm-cs-hero {
        padding-top: calc(var(--hm-nav-height) + var(--hm-space-10));
        padding-bottom: var(--hm-space-8);
    }

    .hm-cs-hero__subtitle {
        font-size: var(--hm-size-base);
    }

    /* Storia box */
    .hm-cs-storia__box {
        padding: var(--hm-space-8) var(--hm-space-6);
    }

    /* Team: photo leggermente ridotta */
    .hm-cs-team-card__photo {
        width: 160px;
        height: 160px;
    }

    /* Valori */
    .hm-cs-valore-card {
        padding: var(--hm-space-8) var(--hm-space-6);
    }

    /* Differenza */
    .hm-cs-compare-box {
        padding: var(--hm-space-6);
    }

    /* CTA finale */
    .hm-cs-finale {
        padding-block: var(--hm-space-12);
    }

    .hm-cs-finale__actions .hm-btn {
        width: 100%;
        max-width: 320px;
        justify-content: center;
        text-align: center;
    }
}