/* ============================================================
 * RESPONSIVE.CSS — Media queries mobile-first
 * Breakpoint: < 768px (mobile), 768-1024px (tablet), > 1024px (desktop)
 *
 * I valori sopra 1024px sono già il default in main.css.
 * Qui gestiamo mobile (<768) e tablet (768-1024).
 * ============================================================ */


/* === TABLET (768px – 1024px) === */
@media (max-width: 1024px) {

    .post-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }

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

    .container {
        padding: 0 var(--space-md);
    }

    .section {
        padding: var(--space-lg) 0;
    }

    .hero {
        padding: var(--space-lg) var(--space-md) var(--space-md);
    }

    /* Header */
    .primary-menu {
        gap: var(--space-md);
    }

    .primary-menu a {
        font-size: 0.78rem;
    }
}


/* === MOBILE (< 768px) === */
@media (max-width: 767px) {

    /* Layout */
    .container {
        padding: 0 var(--space-md);
    }

    .section {
        padding: var(--space-lg) 0;
    }

    .post-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    /* Card orizzontale → impila verticalmente su mobile */
    .post-card {
        flex-direction: column;
        min-height: auto;
    }

    .post-card__image {
        flex: none;
        aspect-ratio: 16 / 9;
    }

    .post-card__body {
        padding: var(--space-md);
    }

    /* Bio cards (Chi siamo) → impilate verticalmente su mobile */
    .bio-row {
        flex-direction: column;
        gap: var(--space-lg);
    }

    .gallery-flow {
        gap: var(--space-xl);
    }

    /* Header — hamburger menu */
    .header-inner,
    .is-inner-page .header-inner {
        padding: var(--space-md) var(--space-md);
        justify-content: center;
    }

    /* Logo più compatto su mobile */
    .site-logo img {
        height: 60px;
    }

    .menu-toggle {
        display: flex;
        position: absolute;
        right: var(--space-md);
        top: 50%;
        transform: translateY(-50%);
    }

    .hero-nav {
        display: none;
    }

    .primary-menu,
    .is-inner-page .primary-menu {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--color-header-bg);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--space-lg);
        z-index: var(--z-header);
    }

    .primary-menu.is-open {
        display: flex;
    }

    .primary-menu a {
        font-size: 1.1rem;
        padding: var(--space-sm);
        display: flex;
        align-items: center;
        gap: 0.6rem;
    }

    .menu-icon {
        width: 36px;
        height: 36px;
    }

    .menu-icon--wide {
        width: 63px;
        height: 31px;
    }

    /* Hero */
    .hero {
        padding: var(--space-md);
    }

    /* Brand e globo impilati su mobile */
    .hero-row {
        flex-direction: column;
        gap: var(--space-lg);
    }


    /* Globo grande su mobile: occupa la larghezza disponibile */
    .hero__globe {
        width: 100%;
        max-width: 420px;
        aspect-ratio: 4 / 3;
    }

    .hero__payoff {
        font-size: 1.1rem;
    }

    /* Instabee sidebar → nascosta su mobile (banner la sostituisce) */
    .home-layout {
        grid-template-columns: 1fr;
    }

    .instabee-sidebar {
        display: none;
    }

    /* Banner mobile: TV compatto tra hero e post */
    .instabee-banner {
        display: block;
        padding: var(--space-md) var(--space-md) 0;
        max-width: 100%;
        margin: 0 auto;
    }

    .instabee-banner .instabee-tv--big {
        max-width: 200px;
        margin: 0 auto;
    }

    /* Single post */
    .post-hero {
        max-height: 50vh;
    }

    .post-hero img {
        max-height: 50vh;
    }

    .post-header {
        padding: var(--space-lg) var(--space-md);
    }

    .post-content {
        padding: 0 var(--space-md) var(--space-lg);
    }

    /* Related posts */
    .related-posts .post-grid {
        grid-template-columns: 1fr;
    }

    /* Footer */
    .footer-inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--space-lg);
    }

    .social-links {
        justify-content: center;
    }

    /* Page content */
    .page-content,
    .archive-posts {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }

    /* Lightbox */
    .lightbox__prev,
    .lightbox__next {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    .lightbox__prev { left: var(--space-sm); }
    .lightbox__next { right: var(--space-sm); }

    .lightbox__close {
        top: var(--space-sm);
        right: var(--space-sm);
        width: 40px;
        height: 40px;
    }
}


/* === DARK MODE === */
/* Attivato con classe .dark-mode su <html> (toggle manuale o auto-detect JS) */
/* I colori sono in CSS custom properties: per cambiarli, modifica solo questi valori. */

html.dark-mode {
    --color-bg:         #1A1428;
    --color-bg-alt:     #241E38;
    --color-bg-white:   #2C2440;
    --color-text:       #E8E0F0;
    --color-text-light: #B8AEC8;
    --color-text-muted: #7B6E8E;
    --color-border:     #3A2E50;
    --color-border-light: #2A1E40;
    --color-header-bg:  #100C1E;
    --color-footer-bg:  #100C1E;
    --shadow-card:      0 2px 12px rgba(0, 0, 0, 0.2);
    --shadow-card-hover: 0 4px 20px rgba(0, 0, 0, 0.35);
    --shadow-nav:       0 1px 8px rgba(0, 0, 0, 0.3);
}

html.dark-mode .post-card__title a {
    color: var(--color-text);
}

html.dark-mode .post-card__title a:hover {
    color: var(--color-secondary);
}

html.dark-mode .post-content blockquote {
    color: var(--color-text-light);
}