/* Greek street food page (owner brief 2026-10-25): three tiers, the five pittas, street boxes and sides.
   Loads after canapes-page.css and corporate-page.css and reuses their cb-* cards and co-* blocks. */

/* Hero: the overhead spread of four pittas, kept bright behind the words */
.menu-page main .gs-hero .mhero-copy{max-width:680px}
.menu-page main .gs-hero h1{font-size:clamp(2.6rem,5vw,4.4rem);line-height:1.04;letter-spacing:-.025em}
/* Santorini hero (owner artwork 2026-10-25): the picture is already night-blue on the left, so the shade is lighter
   and the crop keeps the bottom, where the white houses, blue door and sea are */
.menu-page main .gs-hero .mhero-visual{inset:0;width:auto}
.menu-page main .gs-hero .mhero-food{object-position:50% 85%}
.menu-page main .gs-hero .mhero-shade{background:linear-gradient(90deg,#0c173c99 0%,#0c173c59 30%,#0c173c00 55%),linear-gradient(0deg,#0c173c00 0%,#0c173c00 30%,#0c173c40 100%)}
.menu-page main .gs-hero .mhero-glow{opacity:.4}

/* Choose your pitta: five matching photos in a row */
.menu-page main .gs-pittas{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;list-style:none;margin:0;padding:0}
.menu-page main .gs-pitta{margin:0;text-align:center}
/* The wraps sit top-left in their boxes, so each photo is zoomed in on the pitta inside a feathered circle */
.menu-page main .gs-pitta-photo{display:block;aspect-ratio:1/1;border-radius:50%;overflow:hidden;
  -webkit-mask-image:radial-gradient(circle,#000 60%,#0000 71%);mask-image:radial-gradient(circle,#000 60%,#0000 71%)}
.menu-page main .gs-pitta img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--focus,35% 25%);transform:scale(1.55);transform-origin:var(--focus,35% 25%)}
.menu-page main .gs-pitta h3{font-size:1.25rem;letter-spacing:-.02em;margin-top:6px}
.menu-page main .gs-pitta p{font-size:.875rem;line-height:1.55;color:var(--muted);margin-top:6px}
.menu-page main .gs-diet{display:inline-block;margin-left:6px;font-family:var(--sans);font-size:.6875rem;font-weight:700;letter-spacing:.12em;color:var(--gold);vertical-align:.2em}

/* Street boxes, sides and sweet: a simple photo grid with names */
.menu-page main .gs-boxes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:8px}
.menu-page main .gs-boxes-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.menu-page main .gs-box{margin:0}
.menu-page main .gs-box img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:10px;
  -webkit-mask-image:var(--banner-feather);-webkit-mask-composite:source-in;mask-image:var(--banner-feather);mask-composite:intersect}
.menu-page main .gs-box figcaption{margin-top:10px;font-family:var(--serif);font-size:1.125rem;line-height:1.3;color:var(--navy)}
.menu-page main .gs-box figcaption small{display:block;font-family:var(--sans);font-size:.8125rem;color:var(--muted);margin-top:3px}
.menu-page main .gs-group{font-family:var(--sans);font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:44px 0 16px}
.menu-page main .gs-group:first-of-type{margin-top:0}

/* Who it is for: three short cards */
.menu-page main .gs-for{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.menu-page main .gs-for article{padding:30px 28px;border:1px solid #e6dccb;border-radius:6px;background-color:#fffdf8;background-image:var(--tex-grain),var(--tex-weave-soft),linear-gradient(180deg,#fffefa,#fbf6ec);box-shadow:0 14px 30px -22px #4a3a2259}
.menu-page main .gs-for small{display:block;font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.menu-page main .gs-for h3{font-size:1.5rem;letter-spacing:-.025em;margin-top:10px}
.menu-page main .gs-for p{margin-top:12px;line-height:1.7;color:var(--muted)}

@media(max-width:900px){
  .menu-page main .gs-pittas{grid-template-columns:repeat(3,minmax(0,1fr))}
  .menu-page main .gs-boxes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .menu-page main .gs-for{grid-template-columns:1fr}
}
@media(max-width:600px){
  .menu-page main .gs-hero h1{font-size:2.3rem}
  /* On a phone the hero is tall and narrow, so show the village and sea behind the words */
  .menu-page main .gs-hero .mhero-food{object-position:24% 100%}
  .menu-page main .gs-pittas{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .menu-page main .gs-pitta:last-child{grid-column:1/-1;max-width:50%;justify-self:center}
  .menu-page main .gs-boxes{gap:16px}
  .menu-page main .gs-box figcaption{font-size:1rem}
}