/* =========================================================
   SUPERBASE — RESPONSIVE
   Loaded last on every page so these rules win.
   Breakpoints: 1200 (desktop) / 992 (laptop) /
   768 (tablet) / 576 (mobile) / 480 (small mobile)
   ========================================================= */

/* ---------------------------------------------------------
   LAPTOP  ≤1199px
   Slightly denser layout, still comfortable.
--------------------------------------------------------- */

@media (max-width: 1199px) {

    .cards {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    .terminal {
        max-width: 880px;
    }

    .post-section {
        max-width: 800px;
    }
}

/* ---------------------------------------------------------
   TABLET  ≤991px
--------------------------------------------------------- */

@media (max-width: 991px) {

    .section {
        padding: 48px 32px;
    }

    .cards,
    .focus-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }

    .featured-card {
        padding: 28px 30px;
    }

    /* Terminal hero */
    .hero {
        padding: 48px 32px 56px;
    }

    .terminal {
        max-width: 100%;
    }

    .terminal-body {
        padding: 26px 28px 32px;
    }

    /* Post layout */
    .post-section {
        max-width: 100%;
    }

    .toc {
        position: static;
        margin-bottom: 24px;
    }
}

/* ---------------------------------------------------------
   MOBILE  ≤767px
--------------------------------------------------------- */

@media (max-width: 767px) {

    /* Navbar */
    .navbar {
        padding: 16px 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .navbar nav {
        gap: 18px;
        flex-wrap: wrap;
    }

    /* Hero / terminal */
    .hero {
        padding: 36px 16px 40px;
    }

    .terminal-body {
        padding: 22px 20px 28px;
    }

    .terminal-body h1 {
        font-size: 25px;
    }

    .terminal-body p {
        font-size: 13.5px;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .btn-primary,
    .btn-secondary {
        text-align: center;
        padding: 11px 18px;
    }

    /* Boot sequence: shrink type, wrap long lines instead of overflowing */
    .boot-line {
        font-size: 12px;
        line-height: 1.7;
    }

    .boot-output {
        font-size: 14px;
    }

    .terminal-bar::after {
        font-size: 11.5px;
    }

    /* Sections / cards / focus grid */
    .section {
        padding: 36px 18px;
    }

    .section-title {
        font-size: 12px;
    }

    .cards,
    .focus-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .card {
        padding: 22px 20px;
    }

    .featured-card {
        padding: 24px 20px;
    }

    .blog-card {
        padding: 18px 20px;
    }

    .blog-card img,
    .featured-card img {
        height: 140px;
    }

    /* Posts */
    .post-header h1 {
        font-size: 24px;
    }

    .post-body {
        font-size: 15px;
    }

    .post-body h2 { font-size: 19px; }
    .post-body h3 { font-size: 16.5px; }

    .post-body pre {
        padding: 14px 16px;
    }

    .post-body th,
    .post-body td {
        padding: 8px 10px;
    }

    /* Empty / loading / error states */
    [data-state="empty"],
    [data-state="error"] {
        padding: 22px 20px;
        font-size: 12.5px;
    }
}

/* ---------------------------------------------------------
   SMALL MOBILE  ≤575px
--------------------------------------------------------- */

@media (max-width: 575px) {

    .logo {
        font-size: 14px;
    }

    .navbar nav {
        gap: 14px;
    }

    .navbar nav a {
        font-size: 12px;
    }

    .terminal-bar::after {
        display: none;
    }

    .terminal-body h1 {
        font-size: 21px;
    }

    .listing-title {
        font-size: 22px;
    }

    .search-box,
    .search-input {
        font-size: 13.5px;
        padding: 12px 14px;
    }

    .tag-btn {
        font-size: 11px;
        padding: 5px 11px;
    }

    .post-body {
        font-size: 14.5px;
        line-height: 1.7;
    }

    .post-body pre code {
        font-size: 12.5px;
    }

    .post-body table {
        font-size: 12.5px;
    }
}

/* ---------------------------------------------------------
   SHARED, BREAKPOINT-INDEPENDENT SAFETY RULES
   Prevent overflow regardless of screen size.
--------------------------------------------------------- */

@media (max-width: 991px) {

    .post-body pre,
    .post-body table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .post-body img,
    .featured-card img,
    .blog-card img {
        max-width: 100%;
        height: auto;
    }
}