/* ============================================================
   HORIZON MUNDI — responsive.css
   Mobile-first. Breakpoint principali: 1024px · 640px
   ============================================================ */

/* ─── Breakpoints
   lg:  ≤ 1024px  — tablet landscape / laptop piccolo
   sm:  ≤  640px  — mobile
────────────────────────────────────────────────────────── */

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

    /* ── Tipografia ── */
    h1                             { font-size: var(--hm-size-4xl); }
    h2                             { font-size: var(--hm-size-3xl); }
    .hm-section-header__title      { font-size: var(--hm-size-3xl); }
    .hm-manifesto__title           { font-size: var(--hm-size-3xl); }
    .hm-contact__title             { font-size: var(--hm-size-2xl); }

    /* ── Navbar ── */
    .hm-nav__toggle { display: flex; }

    .hm-nav__menu {
        position: fixed;
        inset-block-start: var(--hm-nav-height);
        inset-inline: 0;
        background-color: var(--hm-abyss);
        padding: var(--hm-space-8);
        transform: translateY(-8px);
        opacity: 0;
        pointer-events: none;
        transition:
            opacity   var(--hm-dur-base) var(--hm-ease-out),
            transform var(--hm-dur-base) var(--hm-ease-out);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .hm-nav__menu.is-open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .hm-nav__list,
    .hm-nav__menu ul {
        flex-direction: column;
        gap: 0;
    }

    .hm-nav__list li,
    .hm-nav__menu ul li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .hm-nav__link,
    .hm-nav__list a,
    .hm-nav__menu ul li a {
        display: block;
        padding: var(--hm-space-4) 0;
        font-size: var(--hm-size-sm);
        color: rgba(255, 255, 255, 0.8);
    }

    .hm-nav__link--cta {
        border: none;
        padding: var(--hm-space-4) 0;
    }

    /* ── Dropdown mobile ── */

    /* Item con dropdown: flex row per ospitare link + pulsante toggle */
    .hm-nav__item--has-dropdown,
    .hm-nav__list > li.menu-item-has-children {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    /* Link principale prende tutto lo spazio orizzontale disponibile */
    .hm-nav__item--has-dropdown > a,
    .hm-nav__list > li.menu-item-has-children > a {
        flex: 1;
    }

    /* Nasconde freccia CSS — la gestisce il chevron nel button */
    .hm-nav__link--arrow::after,
    .hm-nav__list > li.menu-item-has-children > a::after {
        display: none;
    }

    /* Toggle button visibile su mobile */
    .hm-nav__dropdown-toggle {
        display: inline-flex;
    }

    /* Dropdown panel: statico, collassato, apre con max-height */
    .hm-nav__dropdown,
    .hm-nav__list .sub-menu {
        position: static;
        flex-basis: 100%;
        max-height: 0;
        overflow: hidden;
        border-top: none;
        border-left: 2px solid var(--hm-gold);
        padding: 0 0 0 var(--hm-space-3);
        background-color: transparent;
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: max-height var(--hm-dur-base) var(--hm-ease-out);
    }

    .hm-nav__item--has-dropdown.is-dropdown-open .hm-nav__dropdown,
    .hm-nav__list > li.menu-item-has-children.is-dropdown-open > .sub-menu {
        max-height: 280px;
    }

    /* Link dei sottovoci su mobile */
    .hm-nav__dropdown-link,
    .hm-nav__dropdown a,
    .hm-nav__list .sub-menu a {
        padding: var(--hm-space-3) 0;
        white-space: normal;
        font-size: var(--hm-size-xs);
        color: rgba(255, 255, 255, 0.65);
    }

    /* ── Sezioni ── */
    .hm-section { padding-block: var(--hm-space-16); }

    /* ── Hero: stack verticale ── */
    .hm-hero {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .hm-hero__left {
        min-height: 60svh;
        padding-block: calc(var(--hm-nav-height) + var(--hm-space-16)) var(--hm-space-16);
        padding-inline: var(--hm-space-8);
    }

    .hm-hero__right {
        min-height: 40svh;
        padding: var(--hm-space-10) var(--hm-space-8);
    }

    .hm-hero__stats {
        gap: var(--hm-space-6);
    }

    .hm-stat__value { font-size: var(--hm-size-3xl); }

    /* ── Grid ── */
    .hm-grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .hm-grid--5 {
        grid-template-columns: repeat(2, 1fr);
    }
    .hm-grid--5 > *:nth-child(1),
    .hm-grid--5 > *:nth-child(2),
    .hm-grid--5 > *:nth-child(3),
    .hm-grid--5 > *:nth-child(4) {
        grid-column: span 1;
    }

    /* ── Steps: 3 per row, poi linea rimossi ── */
    .hm-steps {
        flex-wrap: wrap;
        gap: var(--hm-space-8);
    }

    .hm-steps::before {
        display: none; /* nasconde la linea connettrice su tablet */
    }

    .hm-step {
        flex: 0 0 calc(33.333% - var(--hm-space-8));
        min-width: 140px;
    }

    /* ── Split: stack ── */
    .hm-split {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .hm-split__media {
        min-height: 360px;
    }

    .hm-split__media .hm-split__img {
        position: relative;
        width: 100%;
        height: 360px;
    }

    .hm-split__content,
    .hm-split__info,
    .hm-split__form {
        padding: var(--hm-space-12) var(--hm-space-8);
    }

    /* ── Footer ── */
    .hm-footer__inner {
        grid-template-columns: 1fr 1fr;
        gap: var(--hm-space-10);
    }

    .hm-footer__inner > .hm-footer__col:first-child {
        grid-column: 1 / -1;
    }

    /* ── Market cards ── */
    .hm-market-card {
        height: 360px;
    }

    /* ── Form ── */
    .hm-form {
        max-width: 100%;
    }
}

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

    /* ── Token locali ── */
    :root {
        --hm-container-pad: var(--hm-space-5);
    }

    /* ── Tipografia ── */
    h1                            { font-size: var(--hm-size-3xl); }
    h2, .hm-section-header__title { font-size: var(--hm-size-2xl); }
    .hm-manifesto__title          { font-size: var(--hm-size-2xl); }
    .hm-contact__title            { font-size: var(--hm-size-xl);  }

    .hm-hero__subtitle   { font-size: var(--hm-size-base); }
    .hm-stat__value      { font-size: var(--hm-size-2xl);  }
    .hm-stat__label      { font-size: var(--hm-size-xs);   }

    /* ── Sezioni ── */
    .hm-section { padding-block: var(--hm-space-12); }

    /* ── Hero ── */
    .hm-hero__left {
        gap: var(--hm-space-8);
        padding-inline: var(--hm-space-5);
    }

    .hm-hero__right {
        padding: var(--hm-space-8) var(--hm-space-5);
    }

    .hm-hero__stats {
        flex-direction: column;
        gap: var(--hm-space-5);
        border-top: none;
        padding-top: 0;
    }

    .hm-stat {
        display: flex;
        align-items: baseline;
        gap: var(--hm-space-3);
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        padding-top: var(--hm-space-4);
    }

    /* ── Grid: 1 colonna ── */
    .hm-grid--2,
    .hm-grid--3,
    .hm-grid--5 {
        grid-template-columns: 1fr;
    }

    /* Reset grid-column per .hm-grid--5 su mobile */
    .hm-grid--5 > *:nth-child(1),
    .hm-grid--5 > *:nth-child(2),
    .hm-grid--5 > *:nth-child(3),
    .hm-grid--5 > *:nth-child(4) {
        grid-column: span 1;
    }

    /* ── Hero actions ── */
    .hm-hero__actions {
        flex-direction: column;
        width: 100%;
        max-width: 280px;
    }

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

    /* ── Steps: verticale ── */
    .hm-steps {
        flex-direction: column;
        gap: var(--hm-space-6);
        align-items: flex-start;
    }

    .hm-step {
        flex: none;
        width: 100%;
        flex-direction: row;
        text-align: left;
        align-items: flex-start;
        gap: var(--hm-space-5);
        padding-inline: 0;
    }

    .hm-step__circle {
        flex-shrink: 0;
        margin-bottom: 0;
    }

    .hm-step__body {
        max-width: none;
        flex: 1;
        padding-top: var(--hm-space-3);
    }

    /* ── Split ── */
    .hm-split__content,
    .hm-split__info,
    .hm-split__form {
        padding: var(--hm-space-10) var(--hm-space-5);
    }

    /* ── Market card ── */
    .hm-market-card {
        height: 320px;
    }

    .hm-market-card__title {
        font-size: var(--hm-size-2xl);
    }

    /* ── Manifesto body ── */
    .hm-manifesto__body {
        max-width: 100%;
    }

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

    /* ── Contact ── */
    .hm-contact__info-body {
        max-width: 100%;
    }

    /* ── Form ── */
    .hm-form__row--2 {
        grid-template-columns: 1fr;
    }

    .hm-form {
        gap: var(--hm-space-5);
    }

    /* ── Section header ── */
    .hm-section-header {
        margin-bottom: var(--hm-space-10);
    }

    /* ── Footer ── */
    .hm-footer__inner {
        grid-template-columns: 1fr;
        gap: var(--hm-space-8);
    }

    .hm-footer__inner > .hm-footer__col:first-child {
        grid-column: auto;
    }

    /* ── Feature cards ── */
    .hm-feature-card {
        padding: var(--hm-space-8) var(--hm-space-6);
    }
}

/* ══════════════════════════════════════════════════════════
   Print
══════════════════════════════════════════════════════════ */
@media print {
    .hm-nav,
    .hm-contact,
    .hm-footer { display: none; }

    body { font-size: 12pt; color: #000; background: #fff; }
    .hm-hero { min-height: auto; }
}

/* ══════════════════════════════════════════════════════════
   Reduced Motion
══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .hm-reveal {
        opacity: 1;
        transform: none;
    }

    .hm-market-card__bg { transition: none; }
    .hm-market-card__detail { transition: none; }
}