/* ============================================================================
   MOBILE — overrides for handheld (320–430). Loaded after base/components/pages.
   Purpose: ensure esiama.com displays appropriately when mostly visited by mobile.
   No JS, no new tokens; only tightening at narrow widths.
   ============================================================================ */

/* Prevent iOS zoom on form fields (16px floor) and horizontal overflow from long words */
html { 
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html, body { overflow-x: clip; }
img, svg, .gallery__item, .media-card { max-inline-size: 100%; }
.snap-scroll { max-inline-size: 100%; overflow-x: auto; }

/* Long contact email must not cause overflow on 320 */
a[href^="mailto:"],
.drawer__meta a,
.footer__contact a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ------------------------------------------------------------------ */
/* Header — the tightest row. At 320 the brand + actions would clip, so we compress stepwise. */
/* ------------------------------------------------------------------ */
@media (max-width: 400px) {
  .site-header {
    padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px));
    padding-block: var(--space-xs);
  }
  .site-header__brand { gap: 0.45rem; }
  .site-header__brand img { width: 34px; height: 34px; }
  .site-header__wordmark { font-size: 1rem; line-height: 1.1; }
  .site-header__wordmark small { font-size: 0.62rem; }
  .site-header__actions { gap: 0.3rem; }
  .currency-toggle { font-size: 0.62rem; }
  .currency-toggle button { padding: 0.32rem 0.45rem; min-height: 36px; } /* 36 is compromise — secondary control; primary Reserve stays 44 */
  .btn.header-reserve { padding: 0.45rem 0.75rem; min-height: 44px; font-size: 0.68rem; }
  .burger { inline-size: 44px; block-size: 44px; gap: 5px; }
  .burger__line { inline-size: 20px; }
}
@media (max-width: 360px) {
  .site-header__wordmark small { display: none; } /* keep "Esiama" only, save 18px */
  .btn.header-reserve { padding-inline: 0.65rem; }
}
@media (max-width: 320px) {
  .site-header { gap: var(--space-2xs); }
  .currency-toggle button { padding: 0.3rem 0.4rem; }
}

/* Drawer should be scrollable if viewport short (landscape, SE) */
.drawer {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.drawer { padding-block-start: calc(var(--space-2xl) + var(--space-xs)); }
.drawer__link[href] {
  font-size: clamp(1.1rem, 3.6vw, 1.3rem);
  min-height: 44px;
  padding-block: var(--space-2xs);
  gap: var(--space-xs);
}
.drawer__list { gap: var(--space-2xs); }
.drawer__meta { padding-block-start: var(--space-sm); gap: var(--space-xs); }
.drawer__meta a { min-height: 40px; font-size: var(--text-xs); }

/* Short viewports (landscape phones, SE) — compress so the whole menu fits once
   while keeping targets above the WCAG 2.5.8 minimum (24px). */
@media (max-height: 720px) {
  .drawer { padding-block-start: calc(var(--space-lg) + var(--space-sm)); padding-block-end: var(--space-sm); }
  .drawer__link[href] { font-size: 1rem; min-height: 36px; padding-block: var(--space-3xs); }
  .drawer__list { gap: var(--space-3xs); }
  .drawer__meta { padding-block-start: var(--space-xs); }
  .drawer__meta a { min-height: 36px; }
}
@media (max-height: 620px) {
  .drawer__link[href] { font-size: 0.9rem; min-height: 30px; }
  .drawer__meta a { min-height: 30px; }
}

/* ------------------------------------------------------------------ */
/* Hero — 92svh is correct, but on 320 the title clamp stays 2.6rem (41px) which crowds. Soften. */
/* Also ensure booking bar never overflows and date inputs stay 16px. */
/* ------------------------------------------------------------------ */
@media (max-width: 380px) {
  .hero__title { font-size: clamp(1.9rem, 9vw, 2.6rem); }
  .hero__content { padding-block-start: calc(var(--space-3xl) + var(--space-md)); }
  .hero__lede { font-size: 1rem; }
}
.booking-bar {
  max-inline-size: 100%;
}
.booking-bar__row .field input,
.booking-bar__row .field select {
  font-size: 16px; /* iOS no-zoom */
}
@media (max-width: 700px) {
  .booking-bar__row { gap: var(--space-xs); }
  .booking-bar .btn { inline-size: 100%; }
}

/* Band (interior hero) shorter on mobile to reduce scroll */
@media (max-width: 600px) {
  .band { min-block-size: 38svh; }
  .band__content { padding-block-start: calc(var(--space-3xl) + var(--space-sm)); }
  .band__title { font-size: clamp(1.7rem, 8vw, 2.6rem); }
}

/* ------------------------------------------------------------------ */
/* Cards & snap — 82% peek is good, but on 320 it leaves 58px peek which feels cramped; widen to 85% and ensure snap doesn't cause body overflow. */
/* ------------------------------------------------------------------ */
@media (max-width: 380px) {
  .snap-scroll { gap: var(--space-xs); }
  .snap-scroll > * { flex-basis: 85%; }
  .media-card__copy { padding: var(--space-sm); }
  .media-card__title { font-size: clamp(1.25rem, 5vw, 1.5rem); }
}
.media-card__foot { flex-wrap: wrap; }
.media-card__foot .btn { margin-inline-start: auto; }

.snap-scroll, .chip-row, .compare-panel {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.snap-scroll::-webkit-scrollbar, .chip-row::-webkit-scrollbar, .compare-panel::-webkit-scrollbar { display:none; }

/* Chips — ensure horizontal scroll is obvious and touch-friendly; keep 44px target (WCAG 2.5.8) */
.chip-row { scroll-padding-inline: var(--gutter); -webkit-overflow-scrolling: touch; }
.chip { min-height: 44px; padding: 0.5rem 0.9rem; font-size: 0.8rem; }

/* Compare table — keep horizontal scroll contained, not body scroll */
.compare-panel { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
@media (min-width: 700px) {
  .compare-panel { margin-inline: 0; padding-inline: var(--space-md); }
}

/* ------------------------------------------------------------------ */
/* Gallery — keep 2 cols but ensure tap targets 44px and no overflow on 320 */
/* ------------------------------------------------------------------ */
@media (max-width: 380px) {
  .gallery { gap: 6px; }
  .gallery__item::after { inline-size: 28px; block-size: 28px; font-size: 0.8rem; }
}

/* ------------------------------------------------------------------ */
/* Sections & typography — tighten spacing on mobile to reduce long scroll (10k bodyH) */
/* ------------------------------------------------------------------ */
@media (max-width: 600px) {
  .section { padding-block: var(--space-xl); }
  .section-head { margin-block-end: var(--space-lg); gap: var(--space-xs); }
  .section-head__title { font-size: clamp(1.5rem, 6vw, 1.9rem); }
  .lede { font-size: 1rem; line-height: 1.6; }
  .split { gap: var(--space-lg); }
  .value-row, .grid-3, .grid-2 { gap: var(--space-sm); }
  .tile { padding: var(--space-sm); }
  .cta-band { padding-block: var(--space-xl); }
}

/* Footer — email and legal stack without overflow */
.site-footer .footer__legal { gap: var(--space-xs) var(--space-sm); }
@media (max-width: 400px) {
  .footer__grid { gap: var(--space-lg); }
  .footer__contact a { font-size: 0.85rem; }
  .footer__legal { font-size: 0.7rem; }
  .marquee__item { font-size: 1rem; }
}

/* ------------------------------------------------------------------ */
/* Dialogs — ensure they fit short viewports (landscape SE 320x568) and not hidden behind keyboard */
/* ------------------------------------------------------------------ */
.res-dialog, .lightbox {
  max-block-size: 92dvh;
}
.res-dialog__body { padding: var(--space-md); }
@media (max-width: 380px) {
  .res-dialog__body { padding: var(--space-sm); gap: var(--space-sm); }
  .res-dialog__title { font-size: 1.25rem; }
}
/* Inputs inside dialog must be 16px */
.res-dialog input, .res-dialog select, .res-dialog textarea,
.enquiry-form input, .enquiry-form select, .enquiry-form textarea,
.newsletter input {
  font-size: 16px;
}

/* Reserve bar — ensure it doesn't cover content and text wraps */
.reserve-bar { padding: max(var(--space-xs), env(safe-area-inset-bottom, 0px)) var(--gutter); }
.reserve-bar__price { min-width: 0; overflow-wrap: anywhere; }

/* CTA actions wrap without overflow */
.hero__cta, .cta-band__actions { row-gap: var(--space-xs); }
.hero__cta .btn, .cta-band__actions .btn { flex: 1 1 auto; min-width: min(100%, 12rem); max-width: 100%; }
@media (max-width: 380px) {
  .hero__cta .btn { inline-size: 100%; }
}

/* Status & form hints must wrap */
.field__hint, .field__error, .status { overflow-wrap: anywhere; }

/* Newsletter — stack nicely on mobile (already grid, but ensure input not squashed) */
.newsletter { gap: var(--space-xs); }
@media (max-width: 767px) {
  .newsletter .btn { inline-size: 100%; }
}

/* Art card aspect — slightly shorter on mobile to reduce scroll */
@media (max-width: 600px) {
  .art-card { aspect-ratio: 4 / 4.2; }
}

/* Ensure no body horizontal scroll from absolute children */
.hero, .band, .section--evening, .cta-band, .site-footer { overflow-x: clip; }

/* ------------------------------------------------------------------ */
/* Palace office — mobile: officer cards become image-only tiles; the  */
/* full card opens on tap via dialog (royalty.html .office-grid).      */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .office-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
  }
  .office-grid .media-card {
    background: none;
    border: 0;
    border-radius: var(--radius-s);
    display: block;
    height: auto;
    overflow: hidden;
    cursor: pointer;
  }
  .office-grid .media-card__art {
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-s);
  }
  .office-grid .media-card__copy {
    display: none;
  }
  .office-grid .media-card:active .media-card__art {
    transform: scale(0.98);
  }
}

/* Officer card dialog — portrait art window for the officer modal */
.office-modal__art {
  aspect-ratio: 4 / 5;
  max-block-size: 46vh;
}
@media (max-width: 480px) {
  .office-modal__art { max-block-size: 40vh; }
}