/* ============================================================
   Responsive layer — mobile-first overrides
   Breakpoints: 1024 (tablet) · 900 (nav) · 768 (large phone) · 560 (phone)
   ============================================================ */

/* Hamburger toggle (hidden on desktop) */
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 8px; }
.nav-toggle span { display: block; width: 26px; height: 2px; background: var(--navy-500); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
#siteHeader.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#siteHeader.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
#siteHeader.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------------- ≤1024: tablet ---------------- */
@media (max-width: 1024px) {
  :root { --container-pad: 40px; }
  h1 { font-size: 52px; }
  .section__header h2, .section__home-intro h2 { font-size: 38px; }

  .usp-row { grid-template-columns: repeat(3, 1fr); row-gap: var(--space-40); }
  .card-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .feature-row { grid-template-columns: repeat(2, 1fr); }
  .testi-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-cols { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-40); }

  /* Bento → two even columns; large cards no longer span */
  .bento-row, .bento-row--1, .bento-row--2 { grid-template-columns: 1fr 1fr; }
  .htype-card { min-height: 0; }

  .split { grid-template-columns: 1fr; gap: var(--space-32); }
  .brochure { grid-template-columns: 1fr; gap: var(--space-32); }
  .brochure__covers { height: 320px; }

  /* Search fields grow to fill rows instead of fixed widths */
  .hsearch__fields .hfield { flex: 1 1 220px; width: auto; }
  .hfield--guests { min-width: 220px; }
}

/* ---------------- Mobile nav (≤900) ---------------- */
@media (max-width: 900px) {
  .site-header { background: transparent; backdrop-filter: none; }
  .nav-desktop__inner { height: 76px; }
  .nav-toggle { display: flex; z-index: 30; }
  /* v8 mobile menu is WHITE, full-height, 3-level drill accordion */
  #siteHeader.nav-open { background: #fff; }
  /* on the white menu the inverse (white) logo is invisible → swap to default */
  #siteHeader.nav-open .brand__logo--inverse { display: none; }
  #siteHeader.nav-open .brand__logo--default { display: block; }
  .nav-desktop__right {
    position: fixed; top: 100px; left: 0; right: 0; bottom: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
    z-index: 20;
    padding: 0 var(--container-pad) 40px;
  }
  #siteHeader.nav-open .nav-desktop__right { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav-desktop__list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }

  /* Level 1 — section rows (Azo Sans Medium 18, navy) */
  .nav-desktop__list > li { border-bottom: 1px solid var(--border-default); }
  .nav-desktop__list > li > a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 0; text-shadow: none;
    font-family: var(--font-display); font-size: 18px; line-height: 26px; font-weight: var(--fw-medium);
    color: var(--navy-500);
  }
  .nav-desktop__list > li > a .nav-caret, .nav-account .nav-user { display: none; }  /* white img icons invisible on white */
  .has-menu > a::after {
    content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin: -3px 2px 0 12px;
    border-right: 2px solid var(--navy-500); border-bottom: 2px solid var(--navy-500);
    transform: rotate(45deg); transition: transform .2s ease;
  }
  .has-menu.is-expanded > a::after { transform: rotate(-135deg); margin-top: 3px; }

  /* Level 2 — group rows (Montserrat Medium 15, #62625c, indented) */
  .nav-acc__body { display: none; }
  .has-menu.is-expanded > .nav-acc__body { display: block; }
  .nav-acc__body .mega__col-title {
    display: flex; align-items: center; justify-content: space-between;
    margin: 0; padding: 14px 0 14px 16px; cursor: pointer;
    border-top: 1px solid var(--border-default);
    font-family: var(--font-body); font-size: 15px; font-weight: var(--fw-medium); color: var(--neutral-600);
  }
  .nav-acc__body .mega__col-title::after {
    content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin: -3px 0 0 12px;
    border-right: 2px solid var(--neutral-500); border-bottom: 2px solid var(--neutral-500);
    transform: rotate(45deg); transition: transform .2s ease;
  }
  .nav-acc__body .mega__col.acc-open .mega__col-title::after { transform: rotate(-135deg); margin-top: 3px; }

  /* Level 3 — links */
  .nav-acc__body .mega__col ul { display: none; gap: 0; padding: 2px 0 10px; }
  .nav-acc__body .mega__col.acc-open ul { display: block; }
  .nav-acc__body .mega__col a { display: block; padding: 9px 0 9px 32px; font-size: 15px; color: var(--neutral-600); white-space: normal; }
  .nav-acc__body .mega__col a:hover { color: var(--teal-600); }
  .nav-acc__body .mega__viewall { font-weight: var(--fw-semibold); color: var(--navy-500) !important; }

  .mega-wrap { display: none; }               /* desktop mega panel hidden on mobile */
  .nav-desktop__right .btn { margin: var(--space-24) 0 var(--space-8); justify-content: center; }

  /* Bottom "Order Our Brochure" card */
  .nav-brochure { display: block; margin-top: var(--space-16); padding: var(--space-16); background: var(--navy-500); border-radius: var(--radius-lg); }
  .nav-brochure__head { display: flex; align-items: center; gap: var(--space-12); margin-bottom: var(--space-12); }
  .nav-brochure__img { width: 46px; height: 58px; object-fit: cover; border-radius: var(--radius-sm); flex: 0 0 auto; }
  .nav-brochure__text strong { display: block; color: #fff; font-size: 15px; font-weight: var(--fw-semibold); }
  .nav-brochure__text span { color: rgba(255,255,255,.7); font-size: 13px; }
  .nav-brochure__btns { display: flex; gap: var(--space-8); }
  .nav-brochure__btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); height: 42px; border-radius: var(--radius-sm); font-size: 14px; font-weight: var(--fw-semibold); background: var(--teal-500); color: #fff; }
  .nav-brochure__btn img { width: 18px; height: 18px; }
  .nav-brochure__btn--alt { background: transparent; border: 1px solid rgba(255,255,255,.5); }
}

/* ---------------- ≤768: large phone ---------------- */
@media (max-width: 768px) {
  :root { --hero-height: 560px; }
  .section { padding-block: var(--space-48); }
  h1, .hero__title { font-size: 40px; }
  .section__header h2, .section__home-intro h2, .search-block__title,
  .split__text h2, .brochure__text h2 { font-size: 30px; }
  .section__header p { font-size: 16px; }

  .usp-row { grid-template-columns: repeat(2, 1fr); }
  .feature-row { grid-template-columns: repeat(2, 1fr); }
  .testi-grid { grid-template-columns: repeat(2, 1fr); }

  .filter-tabs { gap: var(--space-20); overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .filter-tab { font-size: 16px; white-space: nowrap; }

  .hsearch__fields .hfield { flex: 1 1 100%; }   /* stack search fields */
  .hfield--submit, .hfield--guests { flex-basis: 100%; }

  .section__header--split { flex-direction: column; align-items: flex-start; gap: var(--space-16); }
  .banner-help { flex-direction: column; align-items: stretch; text-align: left; gap: var(--space-20); }
  .banner-help__trust { flex-wrap: wrap; gap: var(--space-12); }
  .banner-help__trust li { border-left: 0; padding-left: 0; }
  .banner-help__cta { align-self: flex-start; }

  .footer-mid { flex-direction: column; }
  .footer-news__form { grid-template-columns: 1fr 1fr; }
  .footer-news__form button { grid-column: 1 / -1; padding-block: 14px; }
}

/* ---------------- ≤560: phone ---------------- */
@media (max-width: 560px) {
  :root { --container-pad: 20px; --hero-height: 520px; }
  h1, .hero__title { font-size: 34px; }
  .section__header h2, .section__home-intro h2, .search-block__title,
  .split__text h2, .brochure__text h2, .section__header--split h2 { font-size: 26px; }
  h2, h3 { overflow-wrap: break-word; }
  .hero__content { padding-bottom: 56px; gap: var(--space-16); }

  .usp-row { grid-template-columns: repeat(2, 1fr); gap: var(--space-24); }
  .card-grid-4 { grid-template-columns: 1fr; }
  .bento-row, .bento-row--1, .bento-row--2 { grid-template-columns: 1fr; }
  .feature-row { grid-template-columns: 1fr; }
  .testi-grid { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr; }
  .footer-news__form { grid-template-columns: 1fr; }

  .rating-row { flex-wrap: wrap; font-size: 15px; }
  .brochure__covers { height: 360px; }
  .brochure__cover { width: 200px; height: 275px; }
  .brochure__cover--2 { left: 150px; }
}