/* ==================================================================
   estia/ecosystem — style.css
   Layout fluido fedele al frozen reference (nuova_home/ecosystem.css).
   Architettura:
     - .eco-top : grid 2-col 41/59% con aspect-ratio fissato dal canvas frozen
                  (1780/830) per garantire proporzioni desktop coerenti.
     - .eco-cards : grid 3-col allineata a destra (~58.5% larghezza, right offset
                    ~5.3% del wrap) sovrapposta al join blue/photo via margin-top
                    negativo (-30vw clamped). Stack <820px.
     - Tutti i selettori scope-isolated sotto .estia-ecosystem.
   ================================================================== */

.estia-ecosystem {
    --eco-scale:       0.85;

    --eco-blue:        #4C70AF;
    --eco-yellow:      #F5BE42;
    --eco-radius:      16px;
    --eco-dur:         220ms;
    --eco-ease:        cubic-bezier(.2, .7, .2, 1);

    display: block;
    width: 100%;
    background: #ffffff;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    box-sizing: border-box;
    color: #ffffff;
}

.estia-ecosystem *,
.estia-ecosystem *::before,
.estia-ecosystem *::after { box-sizing: inherit; }

/* --- wrapper --- */
.estia-ecosystem .eco-wrap {
    width: 100%;
    max-width: 1844px;
    margin: 0 auto;
    padding: calc(clamp(40px, 5vw, 80px) * var(--eco-scale))
             calc(clamp(16px, 1.5vw, 32px) * var(--eco-scale));
    background: #ffffff;
    position: relative;
}

/* --- top: blue-panel + photo (2 colonne, aspect-ratio fissato dal canvas frozen) --- */
.estia-ecosystem .eco-top {
    display: grid;
    grid-template-columns: 41.3% 58.7%;        /* 736fr / 1044fr in frozen */
    align-items: stretch;
    aspect-ratio: 1780 / 830;
    border-radius: var(--eco-radius);
    overflow: hidden;
    background: var(--eco-blue);
}

.estia-ecosystem .eco-panel {
    background: var(--eco-blue);
    padding: calc(clamp(28px, 4.7vw, 86px) * var(--eco-scale))
             calc(clamp(20px, 4.2vw, 75px) * var(--eco-scale))
             calc(clamp(48px, 7vw, 114px) * var(--eco-scale));
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: calc(clamp(14px, 2.4vw, 38px) * var(--eco-scale));
    color: #ffffff;
    overflow: hidden;
}

.estia-ecosystem .eco-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    background: var(--eco-blue);
}

/* --- copy ---
   Tipografia frozen (canvas 1844): headline 43.2px, intro 24.8px,
   focus 35.3px, note 24.8px. Convertiti in clamp() target 1440-1680px. */

.estia-ecosystem .eco-headline {
    margin: 0;
    font-size: calc(clamp(1.5rem, 3vw, 2.7rem) * var(--eco-scale));     /* 24px → 43.2px */
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.005em;
    color: #ffffff;
}

.estia-ecosystem .eco-intro {
    margin: 0;
}

.estia-ecosystem .eco-intro p {
    margin: 0;
    font-size: calc(clamp(0.95rem, 1.55vw, 1.55rem) * var(--eco-scale)); /* 15.2px → 24.8px */
    font-weight: 500;
    line-height: 1.29;
    color: rgba(255, 255, 255, 0.92);
}

.estia-ecosystem .eco-intro strong {
    font-weight: 700;
    color: #ffffff;
}

.estia-ecosystem .eco-focus {
    margin: 0;
    font-size: calc(clamp(1.25rem, 2.2vw, 2.2rem) * var(--eco-scale));  /* 20px → 35.3px */
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: 0.005em;
    color: #ffffff;
    text-transform: uppercase;
}

/* --- note (postit con bg PNG, posizionato in basso al panel) --- */
.estia-ecosystem .eco-note {
    position: relative;
    width: 100%;
    max-width: calc(clamp(280px, 36vw, 598px) * var(--eco-scale));
    aspect-ratio: 598 / 121;
    background: url('assets/note-bg.png') center / 100% 100% no-repeat;
    margin-top: auto;
}

.estia-ecosystem .eco-note p {
    position: absolute;
    inset: 14% 6% 14% 5%;
    margin: 0;
    font-size: calc(clamp(0.75rem, 1.25vw, 1.275rem) * var(--eco-scale));
    font-weight: 500;
    line-height: 1.18;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* --- service cards (3 in fila, sovrapposte al top, allineate a destra) ---
   Larghezza ~58.7% del wrap (matches photo column), margin-right ~5.3% (97/1844 frozen).
   margin-top negativo crea sovrapposizione verticale al join blue/photo. */
.estia-ecosystem .eco-cards {
    width: calc(clamp(280px, 67%, 1100px) * var(--eco-scale));
    margin-left: auto;
    margin-right: calc(clamp(8px, 5.3%, 100px) * var(--eco-scale));
    margin-top: calc(clamp(-260px, -26vw, -130px) * var(--eco-scale));
    display: grid;
    grid-template-columns: 358fr 360fr 340fr;
    gap: calc(clamp(6px, 0.85vw, 13px) * var(--eco-scale));
    position: relative;
    z-index: 2;
}

.estia-ecosystem .eco-card {
    position: relative;
    aspect-ratio: 358 / 355;
    background-image: var(--eco-card-bg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: var(--eco-blue);
    text-align: center;
    padding: calc(clamp(14px, 2.5vw, 38px) * var(--eco-scale))
             calc(clamp(10px, 1.8vw, 28px) * var(--eco-scale));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: calc(clamp(6px, 1.2vw, 18px) * var(--eco-scale));
    transition: color var(--eco-dur) var(--eco-ease),
                transform var(--eco-dur) var(--eco-ease);
    will-change: transform;
}

.estia-ecosystem .eco-card--admin           { --eco-card-bg: url('assets/card-admin-bg.png');           --eco-card-bg-hover: url('assets/card-admin-bg-blue.png'); }
.estia-ecosystem .eco-card--intermediazione { --eco-card-bg: url('assets/card-intermediazione-bg.png'); --eco-card-bg-hover: url('assets/card-intermediazione-bg-blue.png'); }
.estia-ecosystem .eco-card--condomini       { --eco-card-bg: url('assets/card-condomini-bg.png');       --eco-card-bg-hover: url('assets/card-condomini-bg-blue.png'); }

@media (hover: hover) {
    .estia-ecosystem .eco-card:hover {
        background-image: var(--eco-card-bg-hover);
        color: #ffffff;
        transform: translateY(-4px);
    }
}

.estia-ecosystem .eco-card__icon {
    display: block;
    width: calc(clamp(36px, 4.5vw, 82px) * var(--eco-scale));
    height: auto;
    margin: 0 auto;
    object-fit: contain;
    /* Vira PNG bianco a blu Estia (#4C70AF) per coerenza col testo a riposo */
    filter: brightness(0) saturate(100%) invert(40%) sepia(43%) saturate(673%) hue-rotate(184deg) brightness(91%) contrast(89%);
    transition: filter var(--eco-dur) var(--eco-ease);
    flex-shrink: 0;
}

.estia-ecosystem .eco-card:hover .eco-card__icon {
    /* On hover: bg blu, icona bianca (matching col testo) */
    filter: brightness(0) invert(1);
}

.estia-ecosystem .eco-card__title {
    margin: 0;
    font-size: calc(clamp(0.9rem, 1.7vw, 1.75rem) * var(--eco-scale));      /* 14.4px → 28px */
    font-weight: 700;
    line-height: 1.16;
    color: inherit;
}

.estia-ecosystem .eco-card__body {
    margin: 0;
    font-size: calc(clamp(0.6875rem, 1.4vw, 1.4375rem) * var(--eco-scale));  /* 11px → 23px */
    font-weight: 500;
    line-height: 1.18;
    color: inherit;
}

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

/* Desktop wide (>=1280px) — riduzione scale + max-width per evitare un
   blocco troppo grande sui laptop Full-HD. Mantiene layout invariato.
   Cards: override espliciti perché clamp(...) * scale con percentuali
   relative al wrap diventava troppo grande (cards uscivano dalla viewport
   sui Full-HD con scrollbar). Capping con min(width%, max-px). */
@media (min-width: 1280px) {
    .estia-ecosystem {
        --eco-scale: 0.7;
    }
    .estia-ecosystem .eco-wrap {
        max-width: 1280px;
        padding: 48px 28px 56px;
    }
    .estia-ecosystem .eco-cards {
        width: min(60%, 740px);
        margin-right: 32px;
        margin-top: -180px;
    }
    .estia-ecosystem .eco-card {
        aspect-ratio: 358 / 320;
    }
}

@media (min-width: 1700px) {
    .estia-ecosystem {
        --eco-scale: 0.62;
    }
    .estia-ecosystem .eco-wrap {
        max-width: 1380px;
        padding: 56px 36px 64px;
    }
    .estia-ecosystem .eco-cards {
        width: min(58%, 800px);
        margin-right: 40px;
        margin-top: -200px;
    }
}

/* 1280px: cards width slightly increases relative to top */
@media (max-width: 1280px) {
    .estia-ecosystem .eco-panel {
        padding-bottom: calc(clamp(80px, 14vw, 180px) * var(--eco-scale));
    }
}

/* 1024px: tightens grid column ratio, less aggressive overlap */
@media (max-width: 1024px) {
    .estia-ecosystem .eco-top {
        grid-template-columns: 45% 55%;
    }
}

/* 820px: stack vertically — eco-top diventa 1col, cards in row separata */
@media (max-width: 820px) {
    .estia-ecosystem .eco-top {
        grid-template-columns: 1fr;
        aspect-ratio: auto;
    }

    .estia-ecosystem .eco-panel {
        padding: clamp(32px, 6vw, 56px) clamp(24px, 5vw, 40px) clamp(36px, 7vw, 64px);
        gap: clamp(18px, 3vw, 28px);
    }

    .estia-ecosystem .eco-photo {
        max-height: 360px;
    }

    .estia-ecosystem .eco-headline   { font-size: clamp(1.5rem, 5vw, 2rem); }
    .estia-ecosystem .eco-intro p    { font-size: clamp(0.9375rem, 2.6vw, 1.125rem); }
    .estia-ecosystem .eco-focus      { font-size: clamp(1.25rem, 4vw, 1.625rem); }

    .estia-ecosystem .eco-note {
        max-width: 480px;
    }

    .estia-ecosystem .eco-cards {
        width: 100%;
        margin: clamp(20px, 4vw, 36px) 0 0;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .estia-ecosystem .eco-card {
        padding: clamp(14px, 3vw, 24px) clamp(8px, 2vw, 16px);
    }

    .estia-ecosystem .eco-card__title,
    .estia-ecosystem .eco-card__body {
        font-size: clamp(0.6875rem, 1.6vw, 0.875rem);
    }
}

/* 520px: cards stack 1-col */
@media (max-width: 520px) {
    .estia-ecosystem .eco-cards {
        grid-template-columns: 1fr;
        gap: 14px;
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
    }

    .estia-ecosystem .eco-card {
        aspect-ratio: auto;
        min-height: 240px;
    }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .estia-ecosystem .eco-card,
    .estia-ecosystem .eco-card__icon {
        transition: none !important;
    }

    .estia-ecosystem .eco-card:hover {
        transform: none;
    }
}