/* ==========================================================================
   RESPONSIVE CSS — All media queries
   ========================================================================== */

/* ----------------------------------------
   1200px — Wide
   ---------------------------------------- */
@media (max-width: 1200px) {
    .rbx-posts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ----------------------------------------
   1024px — Tablet landscape
   ---------------------------------------- */
@media (max-width: 1024px) {
    .rbx-layout-two-col {
        grid-template-columns: 1fr 260px;
        gap: var(--gap);
    }

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

    .rbx-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: var(--gap);
    }
}

/* ----------------------------------------
   768px — Tablet portrait
   ---------------------------------------- */
@media (max-width: 768px) {
    /* Two-col layout becomes single col */
    .rbx-layout-two-col {
        grid-template-columns: 1fr;
    }

    .rbx-sidebar {
        position: static;
    }

    /* Nav */
    .rbx-menu-toggle {
        display: flex;
    }

    .rbx-primary-nav {
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        background: var(--rbx-dark-alt);
        border-bottom: 1px solid var(--rbx-border);
        z-index: 999;
        padding: var(--gap-sm);
    }

    .rbx-nav-menu {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        display: none;
    }

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

    .rbx-nav-menu > li {
        width: 100%;
    }
    .rbx-nav-menu > li > a {
        padding: 0.7em 1em;
        display: block;
    }

    /* Hero */
    .rbx-hero {
        min-height: 360px;
        padding: var(--gap-lg) 0;
    }
    .rbx-hero-content {
        text-align: center;
    }
    .rbx-hero-actions {
        justify-content: center;
    }
    .rbx-hero-subtitle {
        margin-left: auto;
        margin-right: auto;
    }

    /* Posts grid */
    .rbx-posts-grid {
        grid-template-columns: 1fr;
    }

    /* Footer widgets */
    .rbx-footer-widgets-grid {
        grid-template-columns: 1fr;
        gap: var(--gap);
    }

    /* Post navigation */
    .rbx-post-navigation {
        grid-template-columns: 1fr;
    }
    .nav-next a { text-align: left; }

    /* Post inner */
    .rbx-post-inner {
        padding: var(--gap);
    }

    /* Stats */
    .rbx-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Footer bottom */
    .rbx-footer-bottom-inner {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    /* Header */
    .rbx-site-header { position: relative; }
    .rbx-header-inner { height: 60px; }
}

/* ----------------------------------------
   480px — Mobile
   ---------------------------------------- */
@media (max-width: 480px) {
    :root {
        --gap: 16px;
        --gap-lg: 32px;
    }

    .rbx-hero-title {
        font-size: 1.9rem;
    }

    .rbx-hero-actions {
        flex-direction: column;
    }

    .rbx-hero-actions .rbx-btn {
        width: 100%;
        justify-content: center;
    }

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

    .rbx-category-pills {
        justify-content: center;
    }

    .rbx-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--gap-sm);
    }

    .rbx-post-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5em;
    }

    .rbx-404 { padding: var(--gap-lg) 0; }
}

/* ----------------------------------------
   Print
   ---------------------------------------- */
@media print {
    .rbx-site-header,
    .rbx-site-footer,
    .rbx-sidebar,
    .rbx-hero-bg,
    .rbx-stats-bar,
    .rbx-category-strip {
        display: none;
    }
    .rbx-layout-two-col { grid-template-columns: 1fr; }
    body { background: #fff; color: #000; }
    a { color: #000; }
}