/* ==========================================================================
   responsive.css — layout changes per breakpoint, loaded last.
   Mobile is redesigned, not shrunk:
   - food photography leads each hero; overlapping glass cards stack below it
   - blur is lighter (cheaper to render, cleaner on small screens)
   - the ticket rail becomes a swipeable strip
   - a thumb-reach Call / WhatsApp / Book bar appears
   ========================================================================== */

/* ≤1199px: tighten nav */
@media (max-width: 1199.98px) {
  .sk-nav__links a { padding: .5rem .55rem; font-size: .9rem; }
  .sk-nav__brand img { height: 52px; }
  .sk-hero__copy { grid-column: 1 / span 7; }
  .sk-hero__visual { grid-column: 7 / span 6; }
}

/* ≤991px: tablet & mobile */
@media (max-width: 991.98px) {
  :root { --sk-nav-h: 72px; --sk-glass-blur-amt: 12px; }
  .sk-nav__links, .sk-nav__actions .sk-btn--book { display: none; }
  .sk-nav__actions { margin-left: auto; }
  .sk-menu-btn { display: grid; }
  .sk-nav.is-scrolled { height: 72px; }
  .sk-nav::before { inset: 8px; border-radius: 18px; }
  .sk-nav__brand img, .sk-nav.is-scrolled .sk-nav__brand img { height: 44px; }

  .sk-mobile-bar { display: flex; }
  body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .sk-toasts { top: auto; bottom: calc(90px + env(safe-area-inset-bottom)); right: .75rem; left: .75rem; width: auto; }

  /* Hero: photo first, then copy, then the rail */
  .sk-hero__grid { display: flex; flex-direction: column; }
  .sk-hero__visual { order: -1; padding-bottom: 1.5rem; margin-bottom: 1rem; }
  .sk-hero__main { min-height: 0; height: auto; aspect-ratio: 4 / 3; max-height: 62vh; border-radius: 34% 28px 28px 28px / 30% 28px 28px 28px; }
  .sk-hero__visual { align-self: stretch; }
  .sk-stack, .sk-bowl-stage { max-width: 520px; width: 100%; margin-inline: auto; }
  .sk-hero__bowl { width: 30%; right: -2%; border-width: 6px; }
  .sk-hero__copy { padding-block: 0; max-width: 40rem; }
  .sk-rail { width: 100%; margin-bottom: 1rem; }

  /* Service cards */
  .sk-svc--catering { grid-column: span 12; min-height: 520px; }
  .sk-svc--homemade, .sk-svc--bowls { grid-column: span 6; }
  .sk-svc--bowls { flex-direction: column; align-items: flex-start; }
  .sk-svc--bowls .sk-svc__photo { flex: 0 0 auto; width: 52%; }

  /* Catering */
  .sk-cat-hero { min-height: 0; padding-top: calc(var(--sk-nav-h) + 38vw); }
  .sk-cat-events__grid, .sk-about { display: block; }
  .sk-cat-events__photo { aspect-ratio: 16 / 10; }
  .sk-cat-events__card, .sk-about__panel { margin: -5rem 1rem 0; }
  .sk-why { grid-template-columns: repeat(2, 1fr); }
  .sk-booking__aside { position: static; }
  .sk-summary, .sk-detail__panel { position: static; }

  /* About */
  .sk-about__photos { padding-bottom: 10%; }
  .sk-about__main { width: 78%; aspect-ratio: 4 / 4; }

  /* Gallery: a simpler two-column rhythm */
  .sk-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 170px; }
  .sk-gallery figure:nth-child(n) { grid-column: auto; grid-row: span 1; margin: 0; border: 0; box-shadow: none; border-radius: var(--sk-radius-lg); }
  .sk-gallery figure:nth-child(4n+1) { grid-column: span 2; grid-row: span 2; }
  .sk-gallery figure:nth-child(4n+3) { grid-row: span 2; }

  .sk-bowl-stage { max-width: 520px; margin-inline: auto; }
}

/* ≤767px: phones */
@media (max-width: 767.98px) {
  :root { --sk-radius-xl: 26px; --sk-radius-lg: 20px; --sk-glass-blur-amt: 10px; }
  .sk-hero { padding-top: calc(var(--sk-nav-h) + .75rem); }
  .sk-hero__visual { margin-inline: calc(var(--sk-gutter) * -.5); }
  .sk-hero__tag { right: .75rem; top: .75rem; font-size: .75rem; }
  .sk-hero__actions .sk-btn { flex: 1 1 100%; }

  /* the rail becomes a horizontal, swipeable strip */
  .sk-rail { margin-inline: calc(var(--sk-gutter) * -1); width: calc(100% + var(--sk-gutter) * 2); padding-inline: var(--sk-gutter); }
  .sk-rail::before { left: var(--sk-gutter); right: 0; }
  .sk-rail__tickets {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%;
    overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 1.25rem; margin: -4px;
    scrollbar-width: none;
  }
  .sk-rail__tickets::-webkit-scrollbar { display: none; }
  .sk-rail__item { scroll-snap-align: start; }

  .sk-svc--homemade, .sk-svc--bowls { grid-column: span 12; }
  .sk-svc--catering { min-height: 480px; }
  .sk-svc--bowls { flex-direction: row; align-items: center; }
  .sk-svc--bowls .sk-svc__photo { width: 40%; flex: 0 0 40%; }
  .sk-svc--bowls .sk-svc__panel h3 { font-size: 1.5rem; }

  .sk-band { min-height: 0; align-items: flex-end; padding-top: 52vw; }
  .sk-band::before { background: linear-gradient(180deg, rgba(3, 30, 15, 0) 0%, rgba(3, 30, 15, .75) 60%); }
  .sk-cta { min-height: 0; padding-top: 48vw; align-items: flex-end; }
  .sk-cta::before { background: linear-gradient(180deg, rgba(3, 50, 26, .1) 0%, rgba(3, 50, 26, .85) 55%); }
  .sk-cat-hero { padding-top: calc(var(--sk-nav-h) + 52vw); }
  .sk-cat-hero__panel, .sk-band__panel, .sk-cta__panel { padding: 1.4rem; }

  .sk-cat-events__card, .sk-about__panel { margin: -3rem .5rem 0; }
  .sk-events { grid-template-columns: 1fr; }
  .sk-why { grid-template-columns: 1fr; }

  .sk-stack__small { width: 42%; left: -2%; }
  .sk-bowl-stage { padding: 0 6% 12% 0; }
  .sk-bowl-stage__side { width: 32%; }

  .sk-line { grid-template-columns: 72px 1fr; align-items: start; gap: 1rem; }
  .sk-line__img { width: 72px; height: 72px; }
  .sk-line__total { grid-column: 2; text-align: left; }
  .sk-planner { grid-template-columns: 1fr; text-align: left; }
  .sk-booking__nav { flex-wrap: wrap; }
  .sk-booking__nav .sk-btn { flex: 1; }
  .sk-gallery { grid-auto-rows: 140px; gap: 10px; }
  .sk-gallery figcaption { font-size: .85rem; left: .6rem; bottom: .6rem; }
  .sk-cta__actions .sk-btn, .sk-page-hero__actions .sk-btn, .sk-state__actions .sk-btn { flex: 1 1 100%; }
  .sk-result__ticket dl { grid-template-columns: 1fr; }
  .sk-result__ticket dd { text-align: left; margin-bottom: .5rem; }
}

/* ≤400px: smallest phones */
@media (max-width: 400px) {
  .sk-svc--bowls { flex-direction: column; align-items: flex-start; }
  .sk-svc--bowls .sk-svc__photo { width: 56%; }
  .sk-bowl-stage__timer { left: 0; }
}

/* Short laptop screens (wide but not tall): keep every hero inside the window */
@media (min-width: 992px) and (max-height: 760px) {
  .sk-rail .sk-ticket p { display: none; }               /* titles carry the message */
  .sk-rail .sk-ticket { padding: 1.15rem 1.1rem .9rem; }
  .sk-hero__intro .sk-lead { font-size: 1rem; line-height: 1.5; }
  .sk-hero__main { height: clamp(340px, calc(var(--sk-screen) - 3.5rem), 680px); }
  .sk-page-hero { padding-bottom: 1.5rem; }
  .sk-page-hero .sk-lead { margin-top: .75rem; }
  .sk-page-hero__actions { margin-top: 1.25rem; }
  .sk-detail__panel.sk-panel { padding: 1.5rem; }
  .sk-detail .sk-h2 { font-size: 2rem; }
  .sk-detail__media { max-height: calc(var(--sk-screen) - 6.5rem); }
  .sk-detail { padding-bottom: 1.5rem; }
  .sk-detail .sk-breadcrumb { margin-bottom: .9rem; }
  .sk-hero { padding-bottom: .5rem; }
  .sk-hero__visual { padding-bottom: 1.5rem; }
}

/* ≥1600px: let the layout breathe on large monitors */
@media (min-width: 1600px) {
  .sk-container { max-width: 1360px; }
}