/* ==========================================================================
   STRATO MELBOURNE — Responsive pass, 24 September 2026
   Loaded last. Fixes found by auditing fareedk127.sg-host.com at 375px
   (phone) and 768px (tablet portrait).
   ========================================================================== */

/* --------------------------------------------------------------------------
   R4.1  HORIZONTAL OVERFLOW
   The FAQ page scrolled sideways to 522px on a 375px screen: .btn is
   white-space: nowrap, and the "enquiries@stratomelbourne.com.au" button in
   the contact strip is wider than the viewport. Buttons now wrap their label
   on small screens instead of pushing the page out.
   -------------------------------------------------------------------------- */
@media (max-width: 47.99em) {
  .btn {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
  }
  .cta-bar .btn-row,
  .blog-empty .btn-row { width: 100%; }
}

/* Belt and braces: nothing should ever push the page sideways. */
html, body { overflow-x: clip; }

/* --------------------------------------------------------------------------
   R4.2  TAP TARGETS
   Footer links measured 21px tall and nav links 37px — both under the 44px
   guideline. Padding is added rather than font size, so the layout holds.
   -------------------------------------------------------------------------- */
@media (max-width: 74.99em) {
  .nav__link {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

/* Small buttons (footer "Book a Table", card CTAs, filter chips) measured
   32px. On touch they get a 44px minimum without changing the type size. */
@media (max-width: 61.99em) {
  .btn--sm,
  .wo-item__cta,
  .filter-btn,
  .roomcard2__toggle { min-height: 44px; }
}

@media (max-width: 61.99em) {
  .footer__col li + li { margin-top: 0; }
  .footer__col a,
  .footer__contact a {
    display: inline-block;
    padding-block: 0.45rem;
  }
  .footer__social a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding-block: 0.45rem;
  }
  .footer__social { gap: var(--space-sm) var(--space-md); }
}

/* --------------------------------------------------------------------------
   R4.3  PHONE — grids that were still two-up at 375px
   Two 159px columns left no room for the labels inside them.
   -------------------------------------------------------------------------- */
@media (max-width: 33.99em) {
  .events-premium__spaces,
  .events-premium__rooms,
  .roomdetail__specs { grid-template-columns: 1fr; }

  /* Side-by-side large buttons wrap awkwardly; full width reads better. */
  .hero__cta .btn--lg,
  .finale .btn--lg { width: 100%; }
  .hero__cta,
  .finale .btn-row { width: 100%; }
}

/* --------------------------------------------------------------------------
   R4.4  TABLET — 768px was falling between the cracks
   -------------------------------------------------------------------------- */

/* The gallery jumped straight from 2 columns to 4 at 48em, so on a 768px
   tablet the photos became 165px strips. Four across now waits for 64em. */
@media (min-width: 48em) and (max-width: 63.99em) {
  .gallery__grid { grid-template-columns: repeat(2, 1fr); }
  .gallery__item--hero,
  .gallery__item--wide { grid-column: auto; grid-row: auto; }
}

/* The footer stacked into one long column all the way up to 62em. Two columns
   from tablet halves the scroll. */
@media (min-width: 44em) and (max-width: 61.99em) {
  .footer__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg) var(--space-xl); }
  .footer__brand { grid-column: 1 / -1; }
}

/* Six contact cards stacked one-per-row until 52em. Two-up from tablet. */
@media (min-width: 44em) and (max-width: 51.99em) {
  .contact-grid,
  .contact-grid--three { grid-template-columns: repeat(2, 1fr); }
}

/* Room detail: the spec tiles and gallery have room to pair up on tablet. */
@media (min-width: 40em) {
  .roomdetail__specs { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
}

/* --------------------------------------------------------------------------
   R4.5  OCCASION TABS
   Nine tabs wrapped into four or five rows on a phone. They now scroll
   sideways as one strip, which keeps the panel visible above the fold.
   -------------------------------------------------------------------------- */
@media (max-width: 47.99em) {
  .occasion-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: var(--space-2xs);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .occasion-tabs::-webkit-scrollbar { display: none; }
  .occasion-tabs > li { flex: 0 0 auto; scroll-snap-align: start; }
  .occasion-tab { white-space: nowrap; }
}

/* --------------------------------------------------------------------------
   R4.6  TYPE AND SPACING ON SMALL SCREENS
   -------------------------------------------------------------------------- */
@media (max-width: 47.99em) {
  /* The statement section is a full viewport; on a phone the copy needs more
     of it than the image does. */
  .statement { padding-block: var(--space-lg) 0; }
  .statement__slider { height: 38svh; }
  .statement__title { max-width: 20ch; }

  /* Long post and page headlines were running to five or six lines. */
  .post-hero__title,
  .hero--page .hero__title { font-size: var(--fs-h2); }

  /* Section rhythm: a little tighter so pages don't feel endless on a phone. */
  .blog,
  .faq-section,
  .legal,
  .contact-section { padding-block: var(--space-2xl); }

  /* Card padding was generous for a 335px card. */
  .postcard__body,
  .roomcard2__body { padding: var(--space-sm); }

  /* The single-post reading measure gets the full gutter back. */
  .post-body { padding-block: var(--space-xl); }
}

/* Very small phones (320–360px) */
@media (max-width: 22.5em) {
  .hero__title { font-size: clamp(1.75rem, 1.2rem + 3vw, 2.25rem); }
  .events-premium__stats { gap: var(--space-sm); }
  .roomcard2__facts li,
  .postcard__meta { font-size: 0.75rem; }
}

/* --------------------------------------------------------------------------
   R4.7  MEDIA
   -------------------------------------------------------------------------- */
/* Nothing in a content area should ever be wider than its column. */
.entry-content img,
.post-body__content img,
.legal__doc img,
.contact-card img { max-width: 100%; height: auto; }

/* The contact map is 16:9 on desktop, which is very short on a phone. */
@media (max-width: 47.99em) {
  .contact-map { aspect-ratio: 4 / 3; }
}

/* Hero video: fill the frame at every aspect ratio, including tall phones. */
.hero__video,
.hero__fallback { object-fit: cover; object-position: center; }

/* --------------------------------------------------------------------------
   R4.8  BOOKING OVERLAY ON A PHONE
   -------------------------------------------------------------------------- */
@media (max-width: 30em) {
  .bookmodal { padding: var(--space-2xs); }
  .bookmodal__panel { width: 100%; }
  .bookmodal__bar { padding: var(--space-xs) var(--space-sm); }
  .bookmodal__foot { padding: var(--space-2xs) var(--space-sm); font-size: 0.8rem; }
}

/* --------------------------------------------------------------------------
   R4.9  MOBILE STICKY BAR
   It sits over the bottom of the page, so the last section needs clearance.
   -------------------------------------------------------------------------- */
@media (max-width: 47.99em) {
  .footer__bar { padding-bottom: calc(var(--space-md) + 4.5rem); }
}