/* Wrapper di pagina con larghezza comoda */
.container-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(12px, 2vw, 24px);
}

/* Base: card “morbida” con grid e shadow */
.section-hero {
    display: grid;
    gap: clamp(16px, 3vw, 32px);
    align-items: center;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 16px;
    padding: clamp(20px, 4vw, 40px);
    box-shadow: 0 10px 25px rgba(0,0,0,.06);
    margin-bottom: clamp(20px, 4vw, 36px);
}

/* Varianti layout */
.split-50 {
    grid-template-columns: 1fr 1fr;
}
/* 50/50 */
.split-40-60 {
    grid-template-columns: 2fr 3fr;
}
/* 40/60 */

/* Immagine/area destra (contenuto centrato) */
.hero-art {
    min-height: 220px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #eee;
    display: grid;
    place-items: center;
    overflow: hidden;
}

/* Logo grande centrato dentro hero-art */
.hero-illustration {
    width: min(80%, 360px);
    height: auto;
    display: block;
}

/* Brand/logo piccoli (angolo sinistro) */
.auth-logo,
.hero-logo {
    width: 56px;
    height: auto;
    border-radius: 12px;
}

/* Testi hero */
.hero-title {
    font-weight: 800;
    font-size: clamp(1.6rem, 3.2vw, 2.2rem);
    margin: 8px 0 4px;
}

.hero-subtitle {
    color: #6c757d;
    margin-bottom: 16px;
}

/* Chip utente */
.user-chip {
    display: inline-flex;
    align-items: center;
    background: #f3f4f6;
    border: 1px solid #ececec;
    color: #333;
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 600;
    margin-bottom: 16px;
}

/* CTA “pill” */
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.btn.rounded-pill.btn-lg {
    height: 52px;
}

/* ====== Input morbidi condivisi ====== */
.soft-input {
    background: #f3f4f6;
    border: 1px solid #eeeeee;
    height: 52px;
    border-radius: 12px;
    padding: 12px 14px;
}

    .soft-input:focus {
        background: #fff;
        border-color: #ddd;
        box-shadow: 0 0 0 0.18rem rgba(17,17,17,0.12);
    }

/* ====== Card soffici ====== */
.card-soft {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 14px;
    padding: clamp(16px, 2.4vw, 22px);
    box-shadow: 0 6px 16px rgba(0,0,0,.05);
}

.card-title {
    font-weight: 700;
    margin-bottom: 10px;
}

/* ====== Griglie contenuto ====== */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(12px, 2vw, 20px);
}

/* ====== Link in card ====== */
.card-soft a {
    text-decoration: none;
}

    .card-soft a:hover {
        text-decoration: underline;
    }

/* ====== Responsiveness ====== */
@media (max-width: 992px) {
    .split-50 {
        grid-template-columns: 1fr;
    }

    .split-40-60 {
        grid-template-columns: 1fr;
    }

    .grid-3 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .grid-3 {
        grid-template-columns: 1fr;
    }
}