/* Loaded after page styles so shared layouts use the same mobile breakpoints. */
@media (max-width: 1024px) {
  .reference-footer .reference-footer__main,
  .heritage-about .heritage-about-footer__main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 20px;
  }

  .reference-footer__brand,
  .heritage-about-footer__brand { grid-column: 1 / -1; }

  .reference-footer .reference-footer__column,
  .reference-footer .reference-footer__note {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
  }

  .reference-footer .reference-footer__column > a,
  .reference-footer .reference-footer__column > span { font-size: 13px; }

  .booking-payment-shell { max-width: 760px; }
  .booking-payment-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "heading" "transfer" "summary";
    gap: 20px;
  }

  .checkout-header { grid-template-columns: minmax(0, 1fr) auto; }
  .checkout-header__nav { display: none; }
  .checkout-header__menu { display: block; }

  .checkout-guest-form .booking-field {
    display: flex;
    align-items: stretch;
    border: 0;
    padding: 0;
    gap: 0;
  }
  .checkout-guest-form .booking-field > span { flex: none; }
  .checkout-guest-form fieldset { min-width: 0; }
}

@media (max-width: 900px) {
  .account-dashboard { display: block; }
  .account-sidebar { border-right: 0; border-bottom: 1px solid #e0e3df; padding: 24px 16px 12px; }
  .account-sidebar .account-avatar, .account-sidebar > small { display: none; }
  .account-sidebar h1 { font-size: 22px; margin: 0 0 16px; }
  .account-sidebar nav { display: flex; gap: 4px; overflow-x: auto; }
  .account-sidebar nav a { flex: 1 0 auto; min-height: 44px; justify-content: center; }
  .account-content { padding-inline: 16px; }
}

@media (max-width: 820px) {
  /* A translated drawer must also be hidden from taps and keyboard navigation. */
  .rooms-filters { visibility: hidden; pointer-events: none; }
  .rooms-filters--open { visibility: visible; pointer-events: auto; }
  .rooms-filters__apply {
    position: sticky;
    bottom: 0;
    left: auto;
    right: auto;
    width: 100%;
    margin: 16px 0 0;
  }
  .rooms-filters { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .rooms-filter-trigger { bottom: calc(18px + env(safe-area-inset-bottom)); }
  .rooms-header { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  .rooms-header__actions { justify-self: end; }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 80px; }

  body :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    font-size: 16px;
    min-width: 0;
    max-width: 100%;
  }

  .heritage-header.has-header-account,
  .story-header.has-header-account {
    grid-template-columns: minmax(0, 1fr) auto;
    height: 64px;
    padding-inline: 12px;
    gap: 8px;
  }

  .has-header-account .heritage-header__logo,
  .has-header-account .story-header__logo { width: clamp(104px, 32vw, 160px); max-width: 100%; }
  .has-header-account .heritage-header__logo img,
  .has-header-account .story-header__logo img { width: 100%; }
  .has-header-account .heritage-header__actions,
  .has-header-account .story-header__actions { gap: 4px; }
  .has-header-account .heritage-book,
  .has-header-account .story-header__book { min-height: 44px; font-size: 13px; padding: 10px; }
  .has-header-account .header-account:not(.account-link--authenticated) {
    position: relative;
    width: 44px;
    height: 44px;
    padding: 10px;
  }
  .has-header-account .header-account svg { display: block; width: 22px; height: 22px; }
  .has-header-account .header-account:not(.account-link--authenticated) .account-link-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .has-header-account .heritage-menu,
  .has-header-account .story-header__menu,
  .checkout-header__menu,
  .property-header__menu,
  .rooms-menu-button,
  .about-menu-button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 10px;
  }

  .rooms-login { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  .checkout-header { padding-inline: 12px; gap: 12px; }
  .checkout-header__actions { gap: 6px; }
  .checkout-header__book { display: grid; align-items: center; min-height: 44px; font-size: 13px; }
  .checkout-header .checkout-logo { width: min(100%, 150px); }
  .property-header__book { min-height: 44px; align-content: center; }

  .menu-overlay__panel { width: min(400px, 100%); padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); }
  .menu-overlay__header { flex-shrink: 0; height: 44px; }
  .menu-overlay__header > button { width: 44px; height: 44px; }
  .menu-overlay__header > button span { left: 13px; top: 21px; }
  .menu-overlay__panel nav a { min-height: 44px; font-size: 20px; }
  .menu-overlay__foot { margin-top: 24px; }

  .heritage-booking { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .heritage-booking label, .heritage-booking label > span { min-width: 0; }
  .heritage-booking select { width: 100%; }
  .heritage-booking label { min-height: 64px; }
  .heritage-date { min-height: 28px; }
  .heritage-hero { min-height: 430px; height: auto; }
  .heritage-hero__content { position: relative; inset: auto; transform: none; padding: 56px 22px 72px; }
  .heritage-section__head .heritage-section__actions { flex-wrap: wrap; }
  .heritage-section__actions button { width: 44px; height: 44px; }
  .heritage-destinations__layout > nav { gap: 4px; }
  .heritage-destinations__layout > nav a { flex-shrink: 0; padding: 12px; }

  .destination-heading { flex-wrap: wrap; gap: 12px; }
  .destination-heading > a { margin-left: auto; }
  .destination-detail .destination-search { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .destination-search__field > div { min-width: 0; }
  .destination-detail .destination-search__field { min-height: 64px; }
  .destination-detail .destination-controls__sort { flex-wrap: wrap; gap: 8px; }
  .destination-detail .destination-controls__sort select { min-height: 44px; }
  .destination-pills a { min-height: 44px; align-content: center; }

  .reference-footer,
  .reference-footer--home { padding: 28px 20px 0; }
  .reference-footer .reference-footer__brand--lotus,
  .heritage-about-footer__brand { grid-template-columns: minmax(0, 1fr) 64px; padding-right: 0; }
  .reference-footer .reference-footer__brand--lotus > .heritage-lotus,
  .heritage-about-footer__brand > .heritage-lotus { grid-column: 2; grid-row: 1; }
  .reference-footer .reference-footer__brand--lotus > p,
  .heritage-about-footer__brand > p { grid-column: 1 / -1; font-size: 13px; line-height: 1.6; margin-top: 12px; }
  .reference-footer__brand > p { font-size: 13px; line-height: 1.6; }
  .reference-footer__brand > .reference-social { margin-top: 16px; }
  .reference-footer .reference-footer__column { gap: 4px; }
  .reference-footer__column > strong { font-size: 14px; margin-bottom: 8px; }
  .reference-footer .reference-footer__column > a { min-height: 32px; align-content: center; overflow-wrap: anywhere; }
  .reference-footer__contact a, .reference-footer__contact span { gap: 6px; }
  .reference-footer .reference-social { flex-wrap: wrap; gap: 4px; }
  .reference-footer .reference-social a { width: 36px; min-width: 36px; height: 40px; }
  .reference-footer__note > .heritage-lotus { width: 64px; margin-top: 16px; }
  .reference-footer__bottom nav, .story-footer__bottom nav, .checkout-footer__bottom nav { flex-wrap: wrap; gap: 12px; }
  .reference-footer__bottom nav a + a { padding-left: 12px; }
  .story-footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .story-footer__main > div { min-width: 0; overflow-wrap: anywhere; }
  .story-footer__main a { min-height: 32px; align-content: center; }
  .story-footer__social { flex-wrap: wrap; }
  .story-footer__social a { width: 36px; height: 36px; }
  .story-footer__brand { grid-column: 1 / -1; }
  .story-footer__brand > p br { display: none; }

  .booking-payment-page .booking-progress li { font-size: 12px; }
  .booking-progress li { display: flex; flex-direction: column; text-align: center; gap: 8px; }
  .booking-progress li::after { display: none; }
  .transfer-card { padding: 18px 14px; }
  .transfer-bank-facts dl > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .transfer-bank-facts dt { font-size: 13px; }
  .transfer-bank-facts dd { font-size: 15px; min-height: 44px; }
  .transfer-bank-facts button { width: 44px; min-height: 44px; }
  .transfer-qr__download { display: inline-flex; min-height: 44px; align-items: center; font-size: 14px; }
  .transfer-security { font-size: 12px; line-height: 1.6; }
  .payment-booking-summary > h2 button { min-height: 44px; padding: 8px; font-size: 13px; }
  .checkout-guest-dialog { max-height: calc(100dvh - 24px); }
  .checkout-guest-dialog__heading button { min-width: 44px; height: 44px; }
  .checkout-guest-form .booking-submit { padding-bottom: calc(15px + env(safe-area-inset-bottom)); }
  .login-modal { padding: 12px; }
  .login-modal__dialog { max-height: calc(100dvh - 24px); padding-inline: 22px; }
  .login-modal__form input { font-size: 16px; }
  .login-modal__close { width: 44px; height: 44px; }
  .auth-page:not(.account-page) .auth-header > a:last-child { width: 44px; height: 44px; }
  .property-room-picker__dialog > header button,
  .room-detail-modal__close,
  .property-policy-drawer__header > button { width: 44px; height: 44px; flex-shrink: 0; }
  .property-room-card__copy > button { min-height: 44px; }
  .property-room-card__price > a,
  .room-detail-modal__copy > footer > a { min-height: 44px; align-content: center; }
  .property-mobile-booking { gap: 12px; }
  .property-mobile-booking button { flex-shrink: 0; min-height: 44px; }
}

@media (max-width: 480px) {
  .destination-detail .destination-results__grid,
  .destination-detail .destination-results__grid.is-list { grid-template-columns: minmax(0, 1fr); }
  .destination-detail .is-list .destination-property { display: block; }
  .destination-detail .destination-results .destination-property__body { padding: 14px; }
  .destination-detail .destination-results .destination-property h3 { font-size: 19px; }
  .destination-detail .destination-results .destination-property__location { font-size: 13px; }
  .destination-detail .destination-property__bottom { flex-wrap: wrap; gap: 12px; }
  .rooms-result-head { height: auto; min-height: 64px; flex-wrap: wrap; }
  .rooms-result-head label { flex-basis: 160px; }
  .property-room-card__price { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .property-room-card__price > a,
  .property-room-card__price > b { grid-column: 1; grid-row: auto; width: 100%; margin-top: 12px; text-align: center; }
  .story-hero__copy h1, .story-article__header h1 { font-size: clamp(30px, 9vw, 40px); overflow-wrap: anywhere; }
}