/* =====================================================================
   Nusuk Travels — Responsive overrides
   Breakpoints: Mobile <=576 | Tablet 577-991 | Desktop 992-1440 | Wide 1441+
   ===================================================================== */

/* Wide screens */
@media (min-width: 1441px) {
    :root { --container: 1320px; }
}

/* ---------------------------------------------------- <= 1200px */
@media (max-width: 1200px) {
    .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
    .footer__contact { grid-column: 1 / -1; }
}

/* ---------------------------------------------------- Tablet (<= 991px) */
@media (max-width: 991px) {
    .nav, .header__actions .btn { display: none; }
    .hamburger { display: inline-flex; }

    .quickbar__inner { grid-template-columns: repeat(2, 1fr); }
    .quickbar { margin-top: 0; }
    .quickbar__inner { border-radius: 0; }

    .cat-grid { grid-template-columns: repeat(2, 1fr); }
    .pkg-grid, .blog-grid, .review-grid { grid-template-columns: repeat(2, 1fr); }
    .trustbar__grid { grid-template-columns: repeat(2, 1fr); }
    .steps { grid-template-columns: repeat(2, 1fr); }
    .step__count { right: calc(50% - 50px); }

    .why { grid-template-columns: 1fr; gap: 30px; }
    .detail-grid,
    .detail-grid--plan,
    .detail-grid--contact { grid-template-columns: 1fr; }
    .sidebar-box { position: static; }

    .modal { grid-template-columns: 1fr; max-width: 480px; max-height: 90vh; overflow-y: auto; overflow-x: hidden; }
    .modal__media { min-height: 200px; }

    .filter-grid { grid-template-columns: 1fr 1fr; }
    .footer__grid { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------- Medium tablet (577-768px) */
@media (min-width: 577px) and (max-width: 768px) {
    .cat-grid { grid-template-columns: repeat(2, 1fr); }
    .cat-card--img .cat-card__img { aspect-ratio: 16/9; }
}

/* ---------------------------------------------------- Mobile (<= 576px) */
@media (max-width: 576px) {
    .section { padding: 48px 0; }
    body { font-size: 15px; }

    /* top bar: hide email, keep phone */
    .topbar__left .topbar__item--email { display: none; }
    .topbar__right .topbar__socials { display: none; }
    .topbar { font-size: 12px; }

    .logo { font-size: 20px; }
    .logo img { height: 44px; max-width: 160px; }
    .footer__logo img { height: 60px; }

    .hero__slide { height: 78vh; min-height: 480px; }
    .hero__cta { flex-direction: column; align-items: stretch; }
    .hero__cta .btn { justify-content: center; }

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

    .cat-grid { grid-template-columns: 1fr 1fr; }
    .cat-card--img .cat-card__img { aspect-ratio: 4/3; }
    .pkg-grid, .pkg-grid--2, .blog-grid, .review-grid { grid-template-columns: 1fr; }
    .trustbar__grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
    .steps { grid-template-columns: 1fr; }
    .step__count { right: calc(50% - 46px); }
    .why__points { grid-template-columns: 1fr; }
    .incl-list { grid-template-columns: 1fr; }
    .form-grid-2,
    .form-grid-2 .form-grid-2 { grid-template-columns: 1fr; }
    .filter-grid { grid-template-columns: 1fr; }
    .form-card { padding: 20px 16px; }
    .hotel-card { padding: 12px 14px; }
    .breadcrumb { padding: 40px 0 28px; }

    .footer__grid { grid-template-columns: 1fr; gap: 30px; }
    .footer__bottom .container { flex-direction: column; text-align: center; }

    /* popup modal — centered, no overflow */
    .modal-overlay { padding: 16px; overflow: hidden; }
    .modal { width: 100%; max-width: 400px; max-height: calc(100vh - 32px); overflow-y: auto; overflow-x: hidden; grid-template-columns: minmax(0, 1fr); }
    .modal__media { display: none; }
    .modal__mobile-banner { display: block; background: var(--teal); padding: 14px 48px 14px 18px; }
    .modal__body { padding: 16px 16px 20px; }
    .modal__body > .modal__eyebrow,
    .modal__body > h3 { display: none; }
    .modal__body .form-group { margin-bottom: 10px; }
    .modal__body .form-control { padding: 10px 12px; font-size: 14px; max-width: 100%; }
    .modal__price { font-size: 1.3rem; margin: 4px 0 10px; }
    .modal__close { top: 10px; right: 10px; width: 32px; height: 32px; font-size: 15px; }

    .cookie-banner { flex-direction: column; text-align: center; left: 12px; right: 12px; bottom: 12px; }
    .cookie-banner__actions { width: 100%; }
    .cookie-banner__actions .btn { flex: 1; }

    .wa-float, .phone-float { width: 52px; height: 52px; font-size: 22px; bottom: 16px; }
    .wa-float { right: 16px; }
    .phone-float { left: 16px; }

    .tabs { gap: 0; }
    .tab-btn { padding: 10px 14px; font-size: 14px; }

    h1 { font-size: 1.9rem; }
    .price-tag__amount { font-size: 2.2rem; }
}

/* Admin tables become horizontally scrollable on small screens */
@media (max-width: 991px) {
    .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
