/* Greek Mansion - responsive refinements layered over the built stylesheet.
   Tuned for 320/360/375/390/412/430 phones, 768/820/834/1024 tablets and 1280-1920 desktops.
   Design, colours and layouts stay as built; this only refines sizes, spacing and safety. */

/* Transformed/animated elements must never create a sideways scroll on touch devices. */
body { overflow-x: clip; }
img, video { max-width: 100%; }
/* Last-resort wrapping only. "anywhere" let oversized headings shrink their columns and split
   words ("FEATURE/D", "FAVOURIT/ES"); headings are now sized to fit at every width below. */
main :where(h1, h2, h3), footer :where(h2, h3) { overflow-wrap: break-word; }

/* ---------- Phones (up to 767px) ---------- */
@media (max-width: 767.98px) {
  /* Body copy: 14px reads small on modern phones; 15px with a relaxed line height. */
  main p.text-sm, main li.text-sm, main dd.text-sm, footer p.text-sm, footer a.text-sm { font-size: 15px; line-height: 1.7; }
  main p.text-base { font-size: 16px; line-height: 1.7; }
  /* Micro labels: keep the uppercase tracking style but never below 10.5px. */
  main .text-\[9px\], main .text-\[8px\], footer .text-\[9px\] { font-size: 10.5px; }
  main .text-\[10px\], main .text-\[11px\], footer .text-\[10px\], footer .text-\[11px\], footer .text-\[\.6875rem\], footer .text-\[\.5625rem\] { font-size: 11.5px; }
  .eyebrow { font-size: 0.8rem; }
  /* Comfortable tap targets for every pill button and the mobile bar. */
  main a[class*="rounded-full"], main button[class*="rounded-full"], main .arrow-fill-button { min-height: 44px; }
  /* Menu listing: give prices their own line on narrow phones so long dish names never squeeze. */
  #gm-live-menu article > span { max-width: 52%; }
  /* Footer grid: two columns is right, but the brand card padding was desktop-sized. */
  footer .footer-brand-card { padding: 1.5rem; }
}

/* ---------- Small phones (320 - 389px) ---------- */
@media (max-width: 389.98px) {
  main section.px-5, main header.px-5, footer.px-4 { padding-left: 16px; padding-right: 16px; }
  main h2.display.text-5xl, main h1.display.text-6xl { font-size: 2.55rem; }
  main h2.text-5xl { font-size: 2.55rem; }
  main h3.text-3xl { font-size: 1.6rem; }
  .cinematic-hero .hero-title-large { font-size: clamp(2.4rem, 13vw, 6.4rem); }
  .cinematic-hero .hero-title-wide { font-size: clamp(2rem, 10.8vw, 5.55rem); }
  #gm-live-menu article { gap: 0.75rem; }
  #gm-live-menu article > span { max-width: 56%; }
  #gm-live-menu article .gold-plate { padding-left: 0.5rem; padding-right: 0.5rem; }
  footer nav { grid-template-columns: 1fr 1fr; column-gap: 1.25rem; }
}

/* ---------- Tablets (768 - 1023px) ---------- */
@media (min-width: 768px) and (max-width: 1023.98px) {
  /* Desktop display sizes kick in at 768px; ease them so headings do not dominate a tablet. */
  main h2.md\:text-7xl { font-size: 4.25rem; }
  main h1.md\:text-8xl, main h2.md\:text-8xl { font-size: 5rem; }
  main h2.md\:text-6xl { font-size: 3.5rem; }
  .cinematic-hero .hero-title-large { font-size: clamp(4rem, 11.5vw, 5.75rem); }
  .cinematic-hero .hero-title-wide { font-size: clamp(3.4rem, 9.5vw, 5rem); }
  .cinematic-hero .hero-title-small { font-size: clamp(2.2rem, 7.4vw, 3.8rem); }
  main p.md\:text-base { font-size: 16px; line-height: 1.75; }
  main section.md\:py-40 { padding-top: 6.5rem; padding-bottom: 6.5rem; }
  main section.md\:py-28 { padding-top: 5.5rem; padding-bottom: 5.5rem; }
}

/* ---------- Phones: display headings fit the column ----------
   One long word ("SCARBOROUGH", "DIRECTIONS") must fit a 288-350px column whole. */
@media (max-width: 767.98px) {
  main h1.display.text-5xl, main h2.display.text-5xl { font-size: clamp(2.05rem, 10.4vw, 3rem); }
  main h2.display.text-\[2\.75rem\] { font-size: clamp(2.2rem, 10.6vw, 2.75rem); }
}
/* Footer "Come hungry." - an empty accent span before the full stop is a break point, so
   the stop dropped to its own line whenever the phrase was wider than the card. */
footer h2 .accent:empty { display: none; }
@media (max-width: 767.98px) {
  footer h2.display.text-4xl { font-size: min(2.25rem, calc((100vw - 82px) / 8)); }
}
@media (max-width: 429.98px) {
  /* Handwritten lines never wrap and carry an inline size; scale them to the column. */
  main .handwriting-text { font-size: min(2.6rem, 10.4vw) !important; }
}
@media (max-width: 389.98px) {
  /* Price plates ("Sandwich Only $10.95") may wrap inside the plate rather than widen the page. */
  #gm-live-menu article .gold-plate, #gm-live-catering article .gold-plate { white-space: normal; text-align: right; }
  footer h3.font-label { letter-spacing: .08em; }
  /* Header: keep the open/closed status clear of the fixed MENU pill. */
  header .w-\[118px\] { width: 104px; }
  header [role="status"] { margin-left: 8px; gap: 6px; font-size: 10.5px; letter-spacing: .06em; }
}

/* ---------- Tablets (768 - 1023px): one column where desktop uses two ----------
   Tailwind's md: switches every split layout on at 768px, but these were drawn for 1024px+:
   at tablet width each half is ~330px, so headings split mid-word, the fanned dish cards ran
   off both edges and the footer brand card shrank to 170px. Here they stack like the phone
   layout, at tablet sizes. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  /* Header: the Order + Menu pills are fixed on the right; keep the status clear of them. */
  header .md\:w-\[230px\] { width: 172px; }
  header [role="status"] > .sm\:inline { display: none; }

  /* Home - featured dishes intro: heading, then badges and copy underneath. */
  main .md\:flex-row.md\:items-end { flex-direction: column; align-items: flex-start; }
  /* Home - "From the flame", catering showcase, our story: photo and words stacked. */
  main .md\:grid-cols-2.items-center,
  main .md\:grid-cols-\[1fr_1\.1fr\] { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
  main .md\:grid-cols-2.items-center > :first-child img { max-height: 520px; }
  /* Home - Greek favourites: intro stacked, then the four cards as a 2 x 2 grid. */
  main .md\:grid-cols-\[1\.3fr_\.7fr\] { grid-template-columns: minmax(0, 1fr); }
  main .md\:flex.md\:flex-nowrap:has(> .mh-slot) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.5rem; max-width: 640px; margin-left: auto; margin-right: auto; }
  main .mh-slot { width: auto !important; }
  main .mh-slot h3 { font-size: 1.75rem; }
  /* Catering page - "A table everyone remembers". */
  main .md\:grid-cols-2.md\:items-center { grid-template-columns: minmax(0, 1fr); }
  /* About - recipes block. */
  main .md\:grid-cols-2.gap-16 { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
  /* Contact - details card above the map. */
  main .md\:grid-cols-\[\.8fr_1\.2fr\] { grid-template-columns: minmax(0, 1fr); }
  /* Menu and catering listings: one comfortable column instead of two 330px ones. */
  main .md\:grid-cols-2.max-w-4xl { grid-template-columns: minmax(0, 1fr); max-width: 640px; }

  /* Footer: brand card full width, the four link groups in one row beneath it. */
  footer .md\:grid-cols-\[7fr_13fr\] { grid-template-columns: minmax(0, 1fr); }
  footer nav.grid-cols-2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Laptops (1024 - 1279px) ---------- */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  main section.md\:px-10, main header.md\:px-10 { padding-left: 2rem; padding-right: 2rem; }
  /* Split-column headings scale with the window so the longest word always fits its half. */
  main h2.md\:text-7xl { font-size: min(4.5rem, 5.6vw); }
  main h2.display.text-\[2\.75rem\] { font-size: min(6rem, 7.6vw); }
  main .mh-slot h3 { font-size: clamp(1.6rem, 2.6vw, 2.25rem); }
}

/* Greek favourites: four cards at 23vw each overflow the row until ~1400px; let them share it. */
@media (min-width: 1024px) and (max-width: 1439.98px) {
  main .md\:flex.md\:flex-nowrap > .mh-slot { flex: 0 1 300px; width: auto !important; min-width: 0; }
}

/* ---------- Large desktops (1536px and up) ---------- */
@media (min-width: 1536px) {
  /* Content columns are capped at 1240-1440px; a touch more body size keeps them readable. */
  main p.text-sm, footer p.text-sm, footer a.text-sm { font-size: 15px; }
  main p.md\:text-base, main p.text-base { font-size: 17px; line-height: 1.75; }
  .eyebrow { font-size: 0.78rem; }
}

/* ---------- Short landscape phones ---------- */
@media (max-height: 480px) and (max-width: 1023.98px) {
  .cinematic-hero { min-height: 0; }
  .cinematic-hero > div:last-child { min-height: 0; padding-top: 5.5rem; padding-bottom: 3rem; }
}

/* Motion-sensitive visitors: the site already honours reduced motion; also stop smooth
   anchor scrolling, which some devices render as a long animation. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- Hero -> page handoff ----------
   The curve under the hero used to be a flat block of ink painted by the next section's
   wave: with a photograph behind the hero that read as a colour band cutting the picture
   off. The hero now runs the full depth of the curve and is cut to the wave's own shape,
   so the uploaded hero image (and its overlays) fill the curved area at full strength and
   the wave becomes a window onto the photograph instead of a lid over it. */
:root { --gm-hero-curve: 42px; }
@media (min-width: 640px) { :root { --gm-hero-curve: 64px; } }
@media (min-width: 768px) { :root { --gm-hero-curve: 86px; } }

@supports ((-webkit-mask-image: url("#m")) or (mask-image: url("#m"))) {
  .cinematic-hero {
    /* Grows downwards over the next section, then gives the space straight back so
       nothing below moves. The photograph is inset-0 of the padding box, so it covers
       the curve too. */
    padding-bottom: var(--gm-hero-curve);
    margin-bottom: calc(var(--gm-hero-curve) * -1);
    z-index: 1;
    /* Same path and viewBox as WaveDivider position="top", so the cut lands exactly
       where the painted wave used to. */
    --gm-hero-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1440 V34 C1318,34 1268,74 1150,74 C1020,74 968,26 840,26 C700,26 654,78 520,78 C398,78 356,38 236,38 C140,38 92,62 0,62 Z' fill='%23000'/%3E%3C/svg%3E");
    -webkit-mask-image: linear-gradient(#000, #000), var(--gm-hero-wave);
    mask-image: linear-gradient(#000, #000), var(--gm-hero-wave);
    -webkit-mask-size: 100% calc(100% - var(--gm-hero-curve) + 1px), 100% var(--gm-hero-curve);
    mask-size: 100% calc(100% - var(--gm-hero-curve) + 1px), 100% var(--gm-hero-curve);
    -webkit-mask-position: 0 0, 0 100%;
    mask-position: 0 0, 0 100%;
    -webkit-mask-repeat: no-repeat, no-repeat;
    mask-repeat: no-repeat, no-repeat;
  }
  /* The painted wave is now the hero itself; the leftover SVG would re-cover it. */
  .cinematic-hero + section > svg[aria-hidden="true"] { color: transparent; }
}

/* ---------- Curved dividers: no hairline under the curve ----------
   The wave's straight edge sat exactly on the section edge. At fractional display scaling
   (125%, 150%, most phones) that edge is anti-aliased half transparent, so a one-pixel line of
   the section's own colour showed between the curve and the neighbouring section. Each wave
   now overlaps the edge by a pixel; the section clips the overhang, so nothing else moves. */
main section > svg.top-0[aria-hidden="true"], main header > svg.top-0[aria-hidden="true"] { top: -1px !important; }
main section > svg.bottom-0[aria-hidden="true"], main header > svg.bottom-0[aria-hidden="true"] { bottom: -1px !important; }
/* overflow:hidden would clip that overhang at the very same fractional edge where the section's
   own background starts, and the two half-covered layers still leave the line. Waved sections
   clip sideways only, so the curve covers the edge row completely. */
@supports (overflow: clip) {
  main section.overflow-hidden:has(> svg.top-0[aria-hidden="true"], > svg.bottom-0[aria-hidden="true"]) { overflow: clip visible; }
}

/* ---------- Photo ribbons and the photo gallery ----------
   The menu's category photos and the gallery share one carousel. Each screen width shows a
   whole number of cards - 4 on desktop, 3 on tablets, 2 on large phones, 1 on small phones - so
   no card is ever cut off at the edge. When a ribbon has no more cards than that, they sit
   centred and the arrows and "swipe" hint go away; otherwise the arrows sit in their own space
   on either side and never cover a card. Cards keep the same size whether a ribbon scrolls or
   not, so a row of three matches a row of four. */
.gm-ribbon { --gm-per: 4; --gm-gap: 16px; --gm-gutter: 58px; position: relative; padding: 0 var(--gm-gutter); }
.gm-ribbon > .snap-x { display: flex !important; gap: var(--gm-gap) !important; margin: 0 !important; padding: 4px 0 20px !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.gm-ribbon > .snap-x::-webkit-scrollbar { display: none; }
.gm-ribbon > .snap-x > * { flex: 0 0 calc((100% - (var(--gm-per) - 1) * var(--gm-gap)) / var(--gm-per)) !important; width: auto !important; max-width: none !important; min-width: 0; scroll-snap-align: start; }
/* Auto margins centre a row that fits and collapse to nothing when it scrolls. */
.gm-ribbon > .snap-x > :first-child { margin-left: auto !important; }
.gm-ribbon > .snap-x > :last-child { margin-right: auto !important; }
.gm-ribbon > button { position: absolute !important; top: calc(50% - 10px) !important; transform: translateY(-50%) !important; display: grid !important; place-items: center; width: 44px !important; height: 44px !important; z-index: 2; transition: opacity .2s ease; }
.gm-ribbon > button:first-of-type { left: 4px !important; right: auto !important; }
.gm-ribbon > button:last-of-type { right: 4px !important; left: auto !important; }
.gm-ribbon > button[disabled] { opacity: .35; cursor: default; box-shadow: none; }
@media (max-width: 1023.98px) { .gm-ribbon { --gm-per: 3; } }
@media (max-width: 767.98px) {
  /* Arrows keep the full 44px tap target on phones, as round buttons in a slightly narrower gutter. */
  .gm-ribbon { --gm-per: 2; --gm-gap: 12px; --gm-gutter: 50px; }
  .gm-ribbon > button:first-of-type { left: 0 !important; }
  .gm-ribbon > button:last-of-type { right: 0 !important; }
}
@media (max-width: 479.98px) { .gm-ribbon { --gm-per: 1; } }
/* Everything fits at this width: no arrows, no swipe hint. */
@media (min-width: 1024px) {
  .gm-ribbon:not(:has(> .snap-x > :nth-child(5))) > button, .gm-ribbon-box:not(:has(.snap-x > :nth-child(5))) > .gm-ribbon-hint { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .gm-ribbon:not(:has(> .snap-x > :nth-child(4))) > button, .gm-ribbon-box:not(:has(.snap-x > :nth-child(4))) > .gm-ribbon-hint { display: none !important; }
}
@media (min-width: 480px) and (max-width: 767.98px) {
  .gm-ribbon:not(:has(> .snap-x > :nth-child(3))) > button, .gm-ribbon-box:not(:has(.snap-x > :nth-child(3))) > .gm-ribbon-hint { display: none !important; }
}
@media (max-width: 479.98px) {
  .gm-ribbon:not(:has(> .snap-x > :nth-child(2))) > button, .gm-ribbon-box:not(:has(.snap-x > :nth-child(2))) > .gm-ribbon-hint { display: none !important; }
}