/* ============================================================
   MIGLIOR ARREDO — mobile.css
   Responsive breakpoints (mobile-first approach)
   ============================================================ */

/* ─── TABLET: max 1024px ────────────────────────────────────── */
@media (max-width: 1024px) {

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

    .home-content__grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .home-content__sidebar {
        order: 2;
    }

    .article-layout,
    .archive-layout,
    .page-layout {
        grid-template-columns: 1fr;
    }

    .article-sidebar,
    .archive-sidebar,
    .page-sidebar {
        display: none;
    }

    .product-box__body {
        grid-template-columns: 160px 1fr;
    }
}

/* ─── MOBILE: max 768px ─────────────────────────────────────── */
@media (max-width: 768px) {

    /* Header */
    .site-header__search {
        order: 3;
        flex-basis: 100%;
    }

    /* Su mobile: mostra solo il Login inline, Iscriviti come riga separata */
    .site-header__auth {
        display: flex;
        order: 4;
        flex-basis: 100%;
        gap: 8px;
    }

    .site-header__auth .btn-ghost {
        display: inline-block;
    }

    .site-header__auth .btn-outline {
        flex: 1;
        text-align: center;
    }

    .site-header__hamburger {
        display: flex;
    }

    .site-header__inner {
        flex-wrap: wrap;
    }

    /* Nav: hidden by default, shown when open */
    .site-nav {
        display: none;
    }

    .site-nav.is-open {
        display: block;
    }

    .site-nav__list {
        flex-direction: column;
    }

    .site-nav__list > li > a {
        padding: 14px 20px;
        border-bottom: 1px solid var(--color-border);
    }

    /* Dropdown in mobile: show inline */
    .site-nav__list .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        border-top: 1px solid var(--color-border);
        border-radius: 0;
        display: none;
    }

    .site-nav__list li.is-open > .sub-menu {
        display: block;
    }

    .site-nav__list .sub-menu li a {
        padding: 12px 32px;
        border-bottom: 1px solid var(--color-border);
        font-size: 0.875rem;
    }

    /* Hero */
    .hero__bg {
        min-height: 220px;
    }

    .hero__title {
        font-size: 1.6rem;
    }

    .hero__overlay {
        padding: 36px 0;
    }

    /* Post grid */
    .post-grid {
        grid-template-columns: 1fr;
    }

    /* Section title */
    .section-title {
        font-size: 1.3rem;
        margin: 32px 0 18px;
    }

    /* Article */
    .article-header__title {
        font-size: 1.6rem;
    }

    .article-layout {
        padding: 24px 0 40px;
    }

    /* Product box */
    .product-box__body {
        grid-template-columns: 1fr;
    }

    .product-box__image {
        max-width: 200px;
    }

    /* Archive header */
    .archive-header { padding: 24px 0 16px; }
    .archive-header__title { font-size: 1.5rem; }

    /* Footer */
    .site-footer__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

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

    .site-footer__nav-list li a {
        padding: 6px 0;
    }

    .site-footer__bottom {
        flex-direction: column;
        gap: 6px;
        text-align: center;
        align-items: center;
    }

    /* Container padding */
    .container { padding: 0 16px; }

    /* Logo centered on mobile */
    .site-header__logo {
        flex: 1;
        text-align: center;
    }

    .site-header__hamburger {
        flex-shrink: 0;
    }
}

/* ─── SMALL MOBILE: max 480px ───────────────────────────────── */
@media (max-width: 480px) {

    .hero__title {
        font-size: 1.35rem;
    }

    .article-header__title {
        font-size: 1.4rem;
    }

    .comparison-table {
        font-size: 0.8rem;
    }

    .comparison-table thead th,
    .comparison-table tbody td {
        padding: 10px 10px;
    }

    .error-404__title {
        font-size: 4rem;
    }
}