/* ============================================================
   WMC House — Food & Drinks
   The immersive band. Dishes from the hub crossfade at size on
   one side; the kitchen's paragraph and the way into the menus
   on the other.
   ============================================================ */

/* === Band === */
.food { background: var(--bg-food, var(--nav-bg)); color: var(--on-dark); }

/* === Grid ===
   The photograph runs to the left edge of the screen and sets the band's
   height through its 3:2 frame; the copy keeps the site's right gutter. At 58%
   of a laptop screen a 1200x800 hub photo shows close to its own size instead
   of being blown up. */
.food__grid { display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); align-items: center; }

/* === Stage === */
.food__stage { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: color-mix(in srgb, var(--on-dark) 8%, var(--nav-bg)); }
.food__shot { margin: 0; }
.food__shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.food__cap { position: absolute; left: var(--s-2); bottom: var(--s-2); padding: .45rem .8rem; border-radius: calc(var(--radius) * .6); background: color-mix(in srgb, var(--nav-bg) 70%, transparent); color: var(--on-dark); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }

/* === Copy === */
.food__copy { max-width: calc(var(--measure) + 8rem); padding: clamp(2.5rem, 5vw, 5rem) var(--gutter) clamp(2.5rem, 5vw, 5rem) clamp(2rem, 5vw, 5.5rem); }
.food__eyebrow { margin: 0 0 var(--s-2); color: color-mix(in srgb, var(--on-dark) 70%, transparent); }
.food__title { margin: 0 0 var(--s-3); color: var(--on-dark); text-wrap: balance; }
.food__para { margin: 0 0 1.1rem; color: color-mix(in srgb, var(--on-dark) 88%, transparent); }
.food__para:last-of-type { margin-bottom: 0; }

/* === Actions === */
.food__acts { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.food__subs { display: flex; flex-wrap: wrap; gap: .6rem var(--s-3); margin: var(--s-3) 0 0; padding: 0; list-style: none; }
.food__subs a { color: var(--on-dark); }

/* === Narrow ===
   Photograph full width on top, copy underneath. */
@media (max-width: 1000px) {
	.food__grid { grid-template-columns: minmax(0, 1fr); }
	.food__copy { max-width: none; padding: var(--s-4) var(--gutter) var(--s-5); }
}