/* ============================================================
   responsive.css
   ------------------------------------------------------------
   SOLO le media query. Breakpoint allineati a Bootstrap (più uno extra
   a 1599.98px per i laptop), approccio desktop-first ("down" con
   max-width). Caricato per ultimo.
   ============================================================ */

/* ≤ 1599.98px — laptop: container fluido. 90vw = 1440px proprio a 1600px,
   quindi nessuno scatto rispetto al valore base di style.css */
@media (max-width: 1599.98px) {
    :root { --container: 90vw; }
}

/* ≤ 1199.98px — large */
@media (max-width: 1199.98px) {
    :root { --container: 992px; }
}

/* ≤ 991.98px — sotto i tablet: la navbar diventa menu mobile */
@media (max-width: 991.98px) {
    :root { --container: 768px; }

    .nav-toggle { display: block; }

    .main-nav {
        position: fixed;
        top: var(--header-height); right: 0;
        width: min(320px, 84vw);
        /* 100vh su iOS/Android include la barra degli indirizzi: il pannello
           risulterebbe piu' alto dell'area visibile. 100dvh segue l'altezza
           reale; la riga 100vh resta come fallback per i browser datati. */
        height: calc(100vh - var(--header-height));
        height: calc(100dvh - var(--header-height));
        background: var(--bg);
        border-left: 1px solid var(--border);
        padding: 24px;
        transform: translateX(100%);
        transition: transform var(--transition);
        z-index: 95;
        /* overscroll-behavior: contain -> arrivato a fondo pannello lo scroll
           non "passa" alla pagina sotto (scroll chaining). */
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .main-nav.is-open { transform: translateX(0); }

    .main-nav__list { flex-direction: column; align-items: flex-start; gap: 4px; }
    .main-nav__link { display: block; width: 100%; padding: 12px 0; }

    /* CTA: nel menu mobile compare dentro la lista, non più in barra */
    .site-header__cta { display: none; }
    .main-nav__cta { display: block; margin-top: 16px; }
    .main-nav__cta .btn { display: block; text-align: center; }

    /* Hamburger -> X quando aperto */
    .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
    .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .grid-4 { grid-template-columns: repeat(2, 1fr); }

    /* Caroselli: 2 colonne visibili; esperienze torna a gap "normale".
       Connector (carosello e griglia): 2 colonne, 1 sotto i 576px. */
    .carousel__track { --per: 2; }
    .exp-carousel .carousel__track { --car-gap: clamp(24px, 3vw, 48px); }
    .connectors-grid__list { --cols: 2; }

    /* Eventi del Connector: colonne impilate (testo sopra, carosello sotto) */
    .connector-events__inner { grid-template-columns: 1fr; }
    .connector-events__cta { margin-bottom: 40px; }

    /* Pagina evento: dettagli su una colonna, la card non resta più fissa */
    .event-details__inner { grid-template-columns: 1fr; }
    .event-details__card { position: static; }
}

/* ≤ 767.98px — telefoni grandi */
@media (max-width: 767.98px) {
    :root { --container: 100%; }

    .section { padding-block: 56px; }

    /* Hero: le due colonne si impilano (testo sopra, immagine sotto) */
    .hero__inner { grid-template-columns: 1fr; gap: 32px; min-height: auto; padding-block: 48px; }
    .hero__content { max-width: none; }
    /* Bleed: immagine a tutta larghezza, appoggiata al fondo della sezione */
    .hero--bleed .hero__content { padding-bottom: 0; }
    .hero--bleed .hero__media   { margin-inline: calc(-1 * var(--gutter)); }

    /* Hero della pagina evento: altezza libera, titolo e meta più compatti */
    .event-hero { min-height: 0; }
    .event-hero__inner { padding-block: 96px 40px; }
    .event-hero__title { max-width: none; }
    .event-hero__meta { font-size: 1rem; gap: 8px 20px; }

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

    .feature-row { grid-template-columns: 1fr; gap: 24px; }
    .feature-row--reverse .feature-row__media { order: 0; }

    /* Sezione B2B: colonne impilate (testo sopra, immagine sotto) */
    .biz__inner { grid-template-columns: 1fr; gap: 32px; }

    /* Timeline home: testo impilato, linea+punto restano a sinistra */
    .ci-timeline { --ci-marker: 22px; gap: 48px; }
    .ci-row {
        grid-template-columns: var(--ci-marker) 1fr;
        grid-template-areas:
            "marker lead"
            ".      desc";
        column-gap: 18px;
        row-gap: 16px;
    }
    /* Variante wide: stessa impilatura + griglia voci a 1 colonna */
    .home-intro--wide .ci-row { grid-template-columns: var(--ci-marker) 1fr; }
    .ci-grid { grid-template-columns: 1fr; }

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

    /* Caroselli: 1 colonna visibile (Connector: 2 fino ai 576px, come la griglia) */
    .carousel__track { --per: 1; }
    .connectors .carousel__track { --per: 2; }

    /* Founder: ritratto impilato sotto al testo, a tutta larghezza;
       niente padding sotto, la foto tagliata chiude la sezione */
    .founder { padding-bottom: 0; }
    .founder__inner { min-height: auto; }
    .founder__text { max-width: none; }
    .founder__photo {
        position: static;
        left: auto;
        width: 100%; height: auto;
        max-height: 560px;
        margin-top: 32px;
        right: auto;
    }

    .site-footer { padding-block: 56px 48px; }
    .site-footer__top { margin-bottom: 72px; }
    .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 32px; }
    .site-footer__nav { gap: 48px; }
}

/* ≤ 575.98px — telefoni piccoli */
@media (max-width: 575.98px) {
    .hero__inner { padding-block: 40px; }
    .hero__actions { flex-direction: column; align-items: flex-start; }
    .hero__actions .btn { width: 100%; text-align: center; }
    .hero--centered .hero__actions { align-items: center; }

    /* Connector (griglia e carosello): una card per riga/vista, la foto nella
       cornice resta leggibile */
    .connectors-grid__list { --cols: 1; }
    .connectors .carousel__track { --per: 1; }

    .site-footer__nav { flex-direction: column; gap: 24px; }
}