/* ============================================================
   HORIZON MUNDI — grazie.css
   Pagina di conferma post-form. Standalone, no navbar/footer.
   ============================================================ */

/* ── Layout principale ── */
.hm-grazie {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A3A3A 0%, #7D2E3E 100%);
    padding: var(--hm-space-12) var(--hm-space-8);
}

.hm-grazie__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 640px;
}

/* ── Logo ── */
.hm-grazie__logo-link {
    display: inline-block;
    margin-bottom: 3rem;
}

.hm-grazie__logo {
    width: 200px;
    height: auto;
    display: block;
}

/* ── Checkmark SVG ── */
.hm-grazie__check {
    margin-bottom: var(--hm-space-8);
    animation: hm-fadein 0.6s var(--hm-ease-out) both;
}

@keyframes hm-fadein {
    from {
        opacity: 0;
        transform: scale(0.85);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ── Titolo ── */
.hm-grazie__title {
    font-family: var(--hm-font-heading);
    font-size: var(--hm-size-5xl);
    font-weight: var(--hm-weight-light);
    color: var(--hm-white);
    letter-spacing: var(--hm-tracking-tight);
    line-height: 1;
    margin-bottom: var(--hm-space-6);
    animation: hm-fadein 0.6s 0.15s var(--hm-ease-out) both;
}

/* ── Testo conferma ── */
.hm-grazie__lead {
    font-family: var(--hm-font-body);
    font-size: var(--hm-size-md);
    font-weight: var(--hm-weight-light);
    color: rgba(255, 255, 255, 0.85);
    line-height: var(--hm-leading-normal);
    max-width: 500px;
    margin-bottom: 2rem;
    animation: hm-fadein 0.6s 0.25s var(--hm-ease-out) both;
}

/* ── Linea separatore gold ── */
.hm-grazie__divider {
    width: 40px;
    height: 1.5px;
    background-color: var(--hm-gold);
    margin: 2rem auto;
    animation: hm-fadein 0.6s 0.35s var(--hm-ease-out) both;
}

/* ── Aforisma ── */
.hm-grazie__quote {
    margin: 0 0 var(--hm-space-6);
    padding: 0;
    border: none;
    animation: hm-fadein 0.6s 0.45s var(--hm-ease-out) both;
}

.hm-grazie__quote-text {
    font-family: var(--hm-font-heading);
    font-size: 1.3rem;
    font-weight: var(--hm-weight-light);
    color: var(--hm-white);
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto var(--hm-space-5);
}

.hm-grazie__quote-footer {
    font-family: var(--hm-font-heading);
    font-size: 0.7rem;
    font-weight: var(--hm-weight-semibold);
    color: var(--hm-gold);
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

/* ── Bottoni ── */
.hm-grazie__actions {
    display: flex;
    gap: var(--hm-space-4);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 3rem;
    animation: hm-fadein 0.6s 0.55s var(--hm-ease-out) both;
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .hm-grazie {
        padding: var(--hm-space-10) var(--hm-space-5);
    }

    .hm-grazie__title {
        font-size: var(--hm-size-4xl);
    }

    .hm-grazie__quote-text {
        font-size: var(--hm-size-lg);
    }

    .hm-grazie__actions {
        flex-direction: column;
        width: 100%;
        max-width: 280px;
    }

    .hm-grazie__actions .hm-btn {
        width: 100%;
        justify-content: center;
    }
}