/* ==========================================================================
   Hospitality News — Responsive
   Tested breakpoints: 320 / 375 / 414 / 768 / 1024 / 1280 / 1440
   Loaded after style.css so these rules override the desktop base.
   ========================================================================== */

/* ---------- ≤ 1180px : condense nav ---------- */
@media (max-width: 1180px) {
  .nav-menu > li > a,
  .nav-menu > li > button.nav-link { padding: .85rem .7rem; font-size: .88rem; }
  .header-ad { max-width: 460px; }
  .mega-menu { width: min(620px, 92vw); }
}

/* ---------- ≤ 1024px : tablet ---------- */
@media (max-width: 1024px) {
  .page-with-sidebar { grid-template-columns: 1fr; }
  .widget-area { border-top: 2px solid var(--rule); padding-top: 1.75rem; }

  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .share-rail { display: none; }
  .mobile-share-bar {
    display: flex;
    gap: .5rem;
    align-items: center;
    padding: .8rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.5rem;
    font-family: var(--font-sans);
    font-size: .82rem;
    color: var(--text-muted);
    flex-wrap: wrap;
  }

  .hero-grid { grid-template-columns: 1fr; }
  .hero-side {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.25rem;
    border-top: 1px solid var(--border);
    padding-top: 1.25rem;
  }
  .hero-side .featured-story--sub { flex: 1 1 280px; border-bottom: 0; padding-bottom: 0; }

  .picks-grid { grid-template-columns: 1fr 1fr; }
  .picks-grid .pick-lead { grid-column: 1 / -1; grid-row: auto; }
  .intl-grid { grid-template-columns: repeat(2, 1fr); }
  .video-layout { grid-template-columns: 1fr; }
  .events-layout { grid-template-columns: 1fr; }
  .mini-calendar { max-width: 380px; }
  .opinion-grid { grid-template-columns: 1fr 1fr; }

  .footer-top { grid-template-columns: 1fr 1fr; }

  .jobs-layout { grid-template-columns: 1fr; }
  .jobs-filters { position: static; }

  .booking-panel form { grid-template-columns: repeat(3, 1fr); }
  .booking-panel form .btn { grid-column: 1 / -1; }

  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .gallery-masonry { columns: 2; }
  .hotel-detail-gallery { grid-template-columns: 1fr 1fr; }
  .event-fact-grid { grid-template-columns: 1fr 1fr; }
  .dept-grid, .value-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- ≤ 1024px : switch to mobile navigation ---------- */
@media (max-width: 1024px) {
  .primary-navigation .nav-menu,
  .primary-navigation .nav-quick { display: none; }
  .primary-navigation__inner {
    justify-content: space-between;
    align-items: center;
    min-height: 48px;
  }
  .primary-navigation .nav-mobile-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: .75rem;
  }
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: #fff;
    font-family: var(--font-sans);
    font-size: .88rem;
    font-weight: 600;
    padding: .5rem .25rem;
  }
  .menu-toggle svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }
  .nav-mobile-quick { display: flex; gap: .5rem; }
  .nav-mobile-quick a {
    font-family: var(--font-sans);
    font-size: .76rem;
    font-weight: 600;
    padding: .32rem .7rem;
    border-radius: 4px;
    white-space: nowrap;
  }

  .mobile-quickbar { display: block; }
  body { padding-bottom: 62px; }
  .back-to-top { bottom: 72px; }
  .cookie-notice { bottom: 72px; }
  .toast-region { bottom: 72px; }

  .utility-bar__dates .utility-weather,
  .utility-bar__dates .utility-location { display: none; }
  .utility-bar__links > a:not(.utility-live) { display: none; }
  .utility-social { display: none; }

  .site-branding-row { grid-template-columns: 1fr auto; }
  .header-ad { display: none; }
}

/* Desktop-only helpers */
@media (min-width: 1025px) {
  .nav-mobile-row { display: contents; }
  .nav-mobile-quick { display: none; }
}

/* ---------- ≤ 768px ---------- */
@media (max-width: 768px) {
  .grid--3, .grid--2 { grid-template-columns: 1fr 1fr; }
  .picks-grid { grid-template-columns: 1fr; }
  .category-featured { grid-template-columns: 1fr; }
  .newsletter-band { grid-template-columns: 1fr; }
  .footer-newsletter { flex-direction: column; align-items: flex-start; }
  .include-cols { grid-template-columns: 1fr; }
  .room-row { grid-template-columns: 110px 1fr; }
  .room-row > :last-child { grid-column: 2; justify-self: start; }
  .job-card { flex-wrap: wrap; }
  .job-card__actions { flex-direction: row; width: 100%; }
  .post-nav { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
}

/* ---------- ≤ 560px : phones ---------- */
@media (max-width: 560px) {
  .grid--2, .grid--3, .grid--4, .intl-grid, .opinion-grid,
  .value-grid, .dept-grid, .event-fact-grid { grid-template-columns: 1fr; }
  .gallery-masonry { columns: 1; }

  .article-card--horizontal .card-media { width: 118px; }
  .article-card--horizontal .entry-excerpt { display: none; }

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

  .site-branding__logo { width: 48px; height: 48px; }
  .site-branding__title { font-size: 1.18rem; }
  .site-branding__tagline { font-size: .56rem; letter-spacing: .12em; }

  .breaking-bar__label { font-size: .66rem; padding: 0 .7rem; padding-right: 1rem; }
  .breaking-bar__controls { display: none; }

  .booking-panel form { grid-template-columns: 1fr 1fr; }
  .booking-panel form .form-field--wide { grid-column: 1 / -1; }

  .hotel-detail-gallery { grid-template-columns: 1fr; grid-template-rows: none; }
  .hotel-detail-gallery .ph:first-child { grid-row: auto; }

  .entry-byline { flex-wrap: wrap; }
  .entry-byline__actions { width: 100%; justify-content: flex-start; }

  .compact-story .card-media { width: 74px; }
  .schedule-list li { grid-template-columns: 84px 1fr; }
  .day-plan .day-no { width: 38px; height: 38px; }
  .day-plan::before { left: 18px; }

  .utility-bar__inner { justify-content: center; }
  .pagination a:not(.is-current):not([rel]) { display: none; }
}

/* ---------- ≤ 374px : smallest phones ---------- */
@media (max-width: 374px) {
  :root { --gutter: .85rem; }
  .nav-mobile-quick a:nth-child(2) { display: none; }
  .event-card__body { flex-direction: column; }
}

/* Print: strip chrome, keep the article */
@media print {
  .utility-bar, .primary-navigation, .trending-bar, .breaking-bar,
  .site-footer, .share-rail, .mobile-share-bar, .widget-area,
  .mobile-quickbar, .back-to-top, .comments-area, .ad-slot,
  .newsletter-band, .post-nav, .header-actions, .header-ad { display: none !important; }
  body { background: #fff; color: #000; }
  .article-layout { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Navigation responsiveness upgrades
   ========================================================================== */

/* Mega menus anchor to the nav bar (not the item) so they can never
   spill past the viewport edge, and scroll on short screens. */
.nav-menu > li.has-mega { position: static; }
.mega-menu {
  left: 50%;
  width: min(760px, calc(100vw - 32px));
  max-height: min(70vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Plain dropdowns near the right edge open leftward instead of clipping */
.nav-menu > li:nth-last-child(-n+3) > .sub-menu { left: auto; right: 0; }
.sub-menu { max-height: min(70vh, 480px); overflow-y: auto; overscroll-behavior: contain; }

/* 1025–1280px: keep the full menu comfortable — free the row of extras */
@media (max-width: 1280px) and (min-width: 1025px) {
  .nav-quick { display: none; }
  .nav-menu > li > a,
  .nav-menu > li > button.nav-link { padding: .85rem .62rem; font-size: .86rem; }
  .mega-menu__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Comfortable touch targets in dropdowns on coarse pointers */
@media (pointer: coarse) {
  .sub-menu a, .mega-menu__grid a { padding-top: .65rem; padding-bottom: .65rem; }
}

/* Tabs: single scrollable row on small screens; stronger active state */
.tabs__tab[aria-selected="true"] { font-weight: 700; }
@media (max-width: 640px) {
  .tabs__list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .tabs__tab { flex: none; white-space: nowrap; }
}