/* ==========================================================================
   Theme Responsive — bingo ruby / toprankthailand.com
   ========================================================================== */

/* --------------------------------------------------------------------------
   Breakpoint: max-width 1199px (large tablets / small desktops)
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
    .ruby-container {
        max-width: 100%;
        padding: 0 20px;
    }

    .post-wrap-featured .post-thumb-featured img {
        height: 260px;
    }

    .col-sm-3 { width: 25%; }
    .col-sm-4 { width: 33.3333%; }
    .col-sm-6 { width: 50%; }
    .col-sm-8 { width: 66.6667%; }
}

/* --------------------------------------------------------------------------
   Breakpoint: max-width 991px (tablets)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .hamburger-btn {
        display: flex;
    }

    .main-menu-wrap {
        display: none;
    }

    .navbar-inner {
        height: 56px;
    }

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

    .hero-main-post,
    .hero-side-posts {
        width: 100%;
    }

    .hero-side-posts {
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .post-wrap-side {
        width: 100%;
    }

    .col-sm-3 { width: 50%; }
    .col-sm-4 { width: 50%; }
    .col-sm-6 { width: 100%; }

    .ruby-page-wrap {
        flex-direction: column;
    }

    .ruby-content-wrap.col-sm-8 {
        width: 100%;
    }

    .ruby-sidebar-wrap.col-sm-4 {
        width: 100%;
    }

    .feat-posts-inner {
        flex-wrap: wrap;
    }

    .feat-post-item {
        width: 48%;
    }

    .category-sections-inner {
        flex-wrap: wrap;
    }

    .category-col.col-sm-4 {
        width: 100%;
        margin-bottom: 30px;
    }

    .post-grid-item.col-sm-3 { width: 50%; }
    .post-grid-item.col-sm-4 { width: 50%; }

    .related-post-item.col-sm-4 {
        width: 50%;
    }

    .sidebar-footer.col-sm-4 {
        width: 50%;
    }
}

/* --------------------------------------------------------------------------
   Breakpoint: max-width 767px (large phones)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }

    .navbar-inner {
        height: 52px;
    }

    .logo-link {
        font-size: 1.1rem;
    }

    .hero-section { padding: 20px 0 0; }

    .post-wrap-side { width: 100%; }

    .feat-post-item { width: 100%; }

    .col-sm-3,
    .col-sm-4,
    .col-sm-6,
    .col-sm-8 {
        width: 100%;
    }

    .post-grid-item.col-sm-3,
    .post-grid-item.col-sm-4 {
        width: 50%;
    }

    .post-wrap-horizontal {
        flex-direction: column;
    }

    .post-thumb-horizontal {
        width: 100%;
        height: 200px;
    }

    .single-post-content-outer {
        padding: 20px 16px;
    }

    .single-post-title {
        font-size: 1.4rem;
    }

    .related-post-item.col-sm-4 {
        width: 100%;
    }

    .sidebar-footer.col-sm-4 {
        width: 100%;
    }

    .bottom-footer-inner {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .footer-menu { justify-content: center; }

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

    .block-section { padding: 24px 0; }
}

/* --------------------------------------------------------------------------
   Breakpoint: max-width 480px (small phones)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .ruby-container { padding: 0 12px; }

    .navbar-inner { height: 48px; }

    .logo-link { font-size: 1rem; }

    .post-grid-item.col-sm-3,
    .post-grid-item.col-sm-4 {
        width: 100%;
    }

    .post-thumb-card img { height: 200px; }

    .post-thumb-featured img { height: 220px; }

    .feat-posts-inner { flex-direction: column; }

    .pagination-list { gap: 3px; }

    .pagination-link {
        min-width: 30px;
        height: 30px;
        font-size: 0.78rem;
    }

    .share-btn { width: 30px; height: 30px; }

    .error-404-code { font-size: 3.5rem; }

    .error-404-outer { padding: 40px 0; }
}