/* 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%; }
main :where(h1, h2, h3) { overflow-wrap: anywhere; }

/* ---------- 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; }
}

/* ---------- 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; }
}

/* ---------- 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; }
}

/* ---------- 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; }
}