/* ==========================================================================
   Travel Brand — Page-level responsive rules (header, homepage, placeholders).
   Component rules: flight-search.css, flight-results.css.
   Breakpoints: 1199 / 991 / 767 / 479
   ========================================================================== */

@media (max-width: 1199.98px) {
    .offer-scroller { grid-auto-columns: calc((100% - 20px) / 2); }
    .pkg-scroller, .tour-scroller { grid-auto-columns: calc((100% - 40px) / 3); }
    .hotel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .routes__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .villas { gap: 32px; }
    .site-footer__top { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .site-footer__brand { grid-column: 1 / -1; }
    /* Header links go icon-only (text kept for screen readers; title shows on hover) so the Business flag,
       currency and account buttons fit between 992 and 1199px. */
    .header-link { padding: 0 10px; }
    .header-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (max-width: 991.98px) {
    :root { --tb-section-gap: 56px; }
    .header-nav { display: none; }
    .header-actions { margin-left: auto; border-left: 0; padding-left: 0; }
    .header-menu-btn { display: inline-flex; }

    .hero { padding: 40px 0 36px; }
    .hero__title { font-size: 40px; }
    .trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
    .trust__item:nth-child(3) { border-left: 0; padding-left: 4px; }
    .dest-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 280px 200px 200px; }
    .dest-tile--lg { grid-column: 1 / -1; grid-row: auto; }
    .pkg-scroller, .tour-scroller { grid-auto-columns: calc((100% - 20px) / 2); }
    .villas { grid-template-columns: minmax(0, 1fr); }
    .villas__media { min-height: 320px; }
    .engage { grid-template-columns: minmax(0, 1fr); }
    .engage__media { min-height: 220px; }
}

@media (max-width: 767.98px) {
    :root { --tb-section-gap: 44px; --tb-header-h: 60px; }
    body { font-size: 14.5px; }
    .tb-container { padding: 0 16px; }
    .header-btn--register { display: none; }
    .header-btn { height: 38px; padding: 0 10px; }
    .site-header__inner { gap: 12px; }
    .tb-logo__text { font-size: 14px; }
    .tb-logo__mark { width: 32px; height: 32px; }

    .hero { padding: 22px 0 24px; }
    .hero__title { font-size: 30px; }
    .hero__sub { font-size: 14.5px; }
    .search-shell { margin-top: 18px; }
    .search-shell .service-nav { margin: 0 0 10px; }
    .service-nav__list { padding: 4px; border-radius: 12px; }
    .service-nav__item { height: 34px; padding: 0 11px; font-size: 13px; border-radius: 9px; }

    .section-head { align-items: flex-start; flex-direction: column; gap: 10px; margin-bottom: 20px; }
    .section-head__title { font-size: 23px; }
    .section-head__sub { font-size: 14px; }
    .section-head__actions .btn-icon { display: none; }

    .trust { padding-top: 28px; }
    .trust__list { row-gap: 16px; }
    .trust__item { padding: 0 10px; gap: 10px; align-items: flex-start; }
    .trust__item:first-child, .trust__item:nth-child(3) { padding-left: 0; }
    .trust__item > i { font-size: 20px; }
    .trust__item b { font-size: 13.5px; }
    .trust__item small { font-size: 12px; }

    .h-scroller { margin: 0 -16px; padding: 4px 16px 8px; scroll-padding: 0 16px; gap: 14px; }
    .offer-tabs { gap: 18px; }
    .offer-scroller { grid-auto-columns: 88%; }
    .offer-card { grid-template-columns: 38% minmax(0, 1fr); min-height: 180px; }
    .offer-card__body { padding: 14px; }
    .pkg-scroller { grid-auto-columns: 74%; }
    .tour-scroller { grid-auto-columns: 62%; }

    .dest-mosaic { grid-template-rows: 230px 160px 160px; gap: 10px; }
    .dest-tile--lg .dest-tile__text b { font-size: 26px; }
    .dest-tile__text b { font-size: 17px; }
    .dest-tile__overlay { padding: 14px; gap: 4px; }
    .dest-tile__text small { display: none; }
    .dest-tile--lg .dest-tile__text small { display: block; }

    .routes { padding: 14px; }
    .routes__head { flex-direction: column; gap: 2px; }
    .routes__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

    .hotel-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .hotel-card { flex-direction: row; }
    .hotel-card__img { aspect-ratio: auto; width: 34%; min-height: 100%; flex-shrink: 0; }
    .hotel-card__body { padding: 12px 14px; min-width: 0; }
    .hotel-card__amen { display: none; }
    .hotel-card__title { font-size: 15.5px; }

    .villas__media { min-height: 220px; }
    .villa-item { gap: 12px; }
    .villa-item__img { width: 72px; height: 56px; }

    .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .svc-tile { padding: 16px 14px; }
    .svc-tile__arrow { display: none; }

    .engage__content { padding: 24px 20px; }
    .engage__title { font-size: 22px; }
    .newsletter { flex-direction: column; }
    .newsletter .btn { width: 100%; }

    .site-footer { padding-top: 44px; }
    .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
    .site-footer__bottom { flex-direction: column; }

    .placeholder-card { padding: 28px 20px; }
    .placeholder-card h1 { font-size: 24px; }
}

@media (max-width: 479.98px) {
    .header-btn--signin { font-size: 13.5px; }
    .header-btn--signin i { display: none; }
    .site-header .tb-cur { display: none; }   /* phones: the currency list is in the menu */
    .hero__title { font-size: 28px; }
    .offer-scroller { grid-auto-columns: 92%; }
    .villa-item__price small { display: none; }
}