/*
 * Mobile-first layout pass over the built bundle (index-*.css).
 * The app source is not on this box, so these are overrides loaded after the
 * bundle. They are unlayered on purpose: the bundle is Tailwind v4, whose
 * utilities live in @layer, and unlayered rules beat layered ones regardless
 * of specificity. Keep selectors narrow for that reason.
 * Rollback: remove the <link> to this file from index.html.
 */

/* --- 1. The big one: no horizontal overflow ------------------------------
 * Grid items default to min-width:auto, so the booking widget's day strip
 * (overflow-x:auto, 14 x 64px buttons) forced its grid column to ~1000px.
 * On an iPhone that made the whole page 1040px wide: a strip of content and
 * a huge white void to the right. min-width:0 lets the strip scroll inside
 * its own box as intended. */
.grid > * { min-width: 0; }
html, body { overflow-x: clip; }
img, video, svg { max-width: 100%; }

/* Raleway's old-style figures make "$35" and "11:00" bounce; lining figures
 * read as prices and times. */
body { font-variant-numeric: lining-nums; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }

/* --- 2. Section rhythm (phone first) ------------------------------------ */
main > section[id] { padding-top: 56px; padding-bottom: 56px; }
main > section#gallery { padding-top: 48px; padding-bottom: 56px; }
footer > div { padding-top: 48px; padding-bottom: 32px; }

/* Body copy: slightly tighter leading and a touch darker for small screens. */
.prose-lab { line-height: 1.65; }

/* Headings: balance line breaks so they never leave a one-word orphan. */
h1, h2, h3 { text-wrap: balance; }

/* --- 3. Hero ------------------------------------------------------------
 * 88svh plus 96px top padding left a band of empty track above the copy. */
main > section:first-child,
main > section:first-child > div.min-h-\[88svh\] { min-height: min(86svh, 760px); }
main > section:first-child > div.min-h-\[88svh\] { padding-top: 88px; padding-bottom: 40px; }
main > section:first-child h1 { margin-top: 12px; }
main > section:first-child h1 + p { margin-top: 16px; font-size: 1.0625rem; }
main > section:first-child .flex-wrap.gap-3 { margin-top: 28px; }
main > section:first-child p:last-child { margin-top: 18px; }

/* Phone: the two hero buttons stack full-width, so they are easy thumbs. */
@media (max-width: 639.98px) {
  main > section:first-child .flex-wrap.gap-3 { flex-direction: column; align-items: stretch; }
  main > section:first-child .flex-wrap.gap-3 > a { width: 100%; }
}

/* --- 4. Our Story ------------------------------------------------------- */
#story .grid { row-gap: 36px; }
#story h3 { margin-top: 36px; }
#story figure img { aspect-ratio: 4 / 4.2; }

/* --- 5. Cards: a little less inner padding on a 390px screen ------------ */
@media (max-width: 767.98px) {
  #why .grid { gap: 16px; }
  #why .grid > * { padding: 24px; }
  #how .grid { gap: 12px; }
  #reviews .grid { gap: 12px; }
  #why h2 + p, #how h2 + p { margin-top: 12px; }
  #why .mt-12, #how .mt-12, #reviews .mt-12, #why .mt-14, #how .mt-14, #reviews .mt-14 { margin-top: 32px; }
}

/* --- 6. Gallery ---------------------------------------------------------
 * Phone: lead photo full width, then a tidy 2-up grid of the other six.
 * Desktop: the 2-1-1 / 2-2 / 1-1 pattern left half of the last row empty;
 * the last two now span two columns each so every row is full. */
#gallery ul { gap: 10px; }
#gallery ul > li { border-radius: 18px; }
#gallery ul > li:first-child { grid-column: span 2 / span 2; }
#gallery ul > li img { aspect-ratio: 4 / 3; height: 100%; width: 100%; }
#gallery .mt-10 { margin-top: 28px; }
@media (min-width: 768px) {
  #gallery ul { gap: 16px; }
  #gallery ul > li:nth-child(6),
  #gallery ul > li:nth-child(7) { grid-column: span 2 / span 2; }
  #gallery ul > li:nth-child(6) img,
  #gallery ul > li:nth-child(7) img { aspect-ratio: 16 / 9; }
}

/* --- 7. Booking + demo forms -------------------------------------------- */
/* Only the form's two columns: the slot and length grids keep their tight gap-2. */
#book form.grid { row-gap: 28px; }
#book .space-y-8 > * + * { margin-top: 28px; }
#book button { min-height: 44px; }
/* The day strip bleeds to the screen edge and scrolls; snap per day. */
/* contain:paint stops the strip's scrolled content leaking into the page's scroll width (measured: 1009px -> 390px). */
#book .overflow-x-auto { contain: paint; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
#book .overflow-x-auto::-webkit-scrollbar { display: none; }
#book .overflow-x-auto > * { scroll-snap-align: start; flex-shrink: 0; }
@media (max-width: 767.98px) {
  /* The booking form has no card chrome of its own, so its side padding only
   * squeezed the day, length and time buttons ("10:00 PM - 11:00 PM" spilled). */
  #book form { padding: 20px 0; }
  #demo form { padding: 20px; }
}
#demo .grid { row-gap: 28px; }

/* Inputs: 16px text stops iOS Safari zooming the page on focus; 48px tall
 * clears the 44px tap target comfortably. */
.mantine-Input-input { font-size: 16px !important; min-height: 48px; }
textarea.mantine-Input-input { min-height: 96px; }

/* --- 8. Footer: real tap targets ---------------------------------------- */
footer nav a,
footer .flex-col > a { display: inline-flex; align-items: center; min-height: 44px; }
footer nav, footer .flex-col.gap-3 { gap: 0; }
footer .grid { gap: 32px; }
footer p.mt-14 { margin-top: 32px; }

/* Header menu button and mobile menu links. */
header a, header button { min-height: 44px; }

/* --- 9. Desktop --------------------------------------------------------- */
@media (min-width: 768px) {
  main > section[id] { padding-top: 96px; padding-bottom: 96px; }
  main > section#gallery { padding-top: 80px; padding-bottom: 96px; }
  footer > div { padding-top: 72px; padding-bottom: 40px; }
  main > section:first-child > div.min-h-\[88svh\] { padding-bottom: 80px; }
  main > section:first-child h1 + p { font-size: 1.25rem; }
  main > section:first-child,
  main > section:first-child > div.min-h-\[88svh\] { min-height: min(84vh, 820px); }
  #story h3 { margin-top: 48px; }
  #story figure img { aspect-ratio: 5 / 6; }
}
@media (min-width: 1024px) {
  /* Gallery heading sat 30px left of every other section's text column. */
  #gallery > div > div:first-child { padding-left: max(0px, calc((100% - 1180px) / 2 + 32px)); padding-right: 0; }
}