/* =====================================================================
   assets/css/responsive.css
   Breakpoints: Mobile <=576px, Tablet 577-991px, Desktop >=992px.
   Mobile-first: base styles above already target small screens where
   sensible; this file adjusts grid/flex layouts per breakpoint.
   ===================================================================== */

/* ---------- Tablet & below (<=991px): navbar becomes hamburger ---------- */
@media (max-width: 991px) {
    .navbar__menu {
        position: fixed;
        top: var(--navbar-height);
        left: 0;
        right: 0;
        background: var(--color-white);
        border-bottom: 1px solid var(--color-border);
        flex-direction: column;
        justify-content: flex-start;
        padding: 8px 24px 20px;
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
        box-shadow: var(--shadow-md);
    }

    .navbar__menu.is-open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .navbar__list {
        flex-direction: column;
        gap: 4px;
    }

    .navbar__link {
        display: block;
        padding: 12px 0;
        border-bottom: 1px solid var(--color-border);
    }

    .navbar__toggle {
        display: flex;
    }

    .navbar__actions .btn--live span.btn__dot {
        display: inline-block;
    }

    .program-section__inner {
        flex-direction: column;
    }

    .highlight-grid {
        grid-template-columns: 1fr 1fr;
    }

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

    .contact-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer__inner {
        grid-template-columns: 1fr 1fr;
    }
}

/* ---------- Tablet (577px - 991px): coupon cards 2 columns ---------- */
@media (max-width: 991px) and (min-width: 577px) {
    .coupon-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---------- Mobile (<=576px) ---------- */
@media (max-width: 576px) {
    :root {
        --navbar-height: 66px;
    }

    .container {
        padding: 0 16px;
    }

    .navbar__logo {
        height: 26px;
    }

    .navbar__actions .btn--live {
        padding: 9px 14px;
        font-size: 0.78rem;
    }

    .live-section__inner {
        padding: 22px 16px;
        text-align: center;
        justify-content: center;
    }

    .live-section__cta {
        width: 100%;
        align-items: center;
    }

    .live-section__cta .btn {
        width: 100%;
    }

    .coupon-section {
        padding: 44px 0;
    }

    .coupon-form {
        flex-direction: column;
    }

    .coupon-form__field {
        min-width: 0;
    }

    .coupon-form .btn--search {
        width: 100%;
    }

    .coupon-result__summary {
        padding: 20px;
    }

    .coupon-result__stats {
        gap: 24px;
    }

    .coupon-grid {
        grid-template-columns: 1fr;
    }

    .highlight-grid {
        grid-template-columns: 1fr;
    }

    .prizes-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .footer__inner {
        grid-template-columns: 1fr;
        padding: 40px 16px 32px;
        text-align: left;
    }

    .footer__bottom-inner {
        flex-direction: column;
        text-align: center;
    }

    /* Keep floating live button from covering coupon input/button */
    .floating-live {
        width: 62px;
        height: 62px;
        right: 14px;
        bottom: 14px;
    }

    .floating-live__text {
        font-size: 0.52rem;
    }

    .program-section__inner {
        padding: 24px;
    }

    .pagination {
        gap: 8px;
    }

    .pagination__nav {
        padding: 8px 10px;
        font-size: 0.78rem;
    }
}

/* Prevent any horizontal scroll on very narrow devices */
@media (max-width: 400px) {
    .pagination__nav {
        flex-basis: 100%;
        text-align: center;
        order: 3;
    }
}