/* =====================================================================
   Food & drink (/food-and-drink) - page-only styles on top of luminate.css
   ===================================================================== */

.fd-hero { min-height: min(80svh, 780px); }

/* ---------- Street food village ---------- */

.fd-village { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.fd-village-text .lx-lede { margin-top: 20px; max-width: 34ch; }
.fd-village-text strong { color: var(--lx-ink); font-weight: 600; }
.fd-village-photos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vw, 20px); }
.fd-village-photos .lx-tile { aspect-ratio: 1 / 1; }
.fd-village-photos .fd-village-main { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
@media (max-width: 860px) { .fd-village { grid-template-columns: 1fr; } }

/* Cut-out treats float on a warm glow instead of sitting in a frame */
.fd-cutout { position: relative; isolation: isolate; }
.fd-cutout::before {
  content: ""; position: absolute; inset: 8% 6% 4%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(249, 192, 84, .32), rgba(204, 0, 102, .16) 60%, transparent);
  filter: blur(6px);
}
.lx-tile.fd-cutout img {
  object-fit: contain; background: none; border-radius: 0;
  filter: saturate(1.1) drop-shadow(0 18px 24px rgba(0, 0, 0, .55)) drop-shadow(0 0 22px rgba(249, 192, 84, .25));
  transition: transform .6s var(--lx-ease);
}
.fd-cutout:hover img { transform: translateY(-6px) rotate(-2deg) scale(1.03); }

/* ---------- Food grid ---------- */

.fd-head { display: grid; grid-template-columns: 1fr 1fr; gap: 16px clamp(32px, 5vw, 72px); align-items: end; }
.fd-head .lx-lede { margin-top: 0; }
.fd-head strong { color: var(--lx-paper-ink); font-weight: 600; }
.fd-note { margin-top: 14px; font-size: 15px; color: var(--lx-paper-ink-2); display: flex; gap: 8px; align-items: baseline; }
@media (max-width: 860px) { .fd-head { grid-template-columns: 1fr; } }

.fd-grid, .fd-drinks, .fd-faces { list-style: none; margin: 0; padding: 0; }
.fd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.fd-tile { aspect-ratio: 1 / 1; }
.fd-tile img, .fd-drink img { transition: transform .8s var(--lx-ease); }
.fd-tile:hover img, .fd-drink:hover img { transform: scale(1.03); }
@media (max-width: 760px) {
  .fd-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Drinks ---------- */

.fd-drinks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.fd-drink { aspect-ratio: 4 / 5; }
@media (max-width: 760px) {
  .fd-drinks { grid-template-columns: 1fr 1fr; }
  .fd-drinks li:first-child { grid-column: 1 / -1; }
  .fd-drinks li:first-child .fd-drink { aspect-ratio: 16 / 10; }
  .fd-drink { aspect-ratio: 1 / 1; }
}

/* ---------- Local traders ---------- */

.fd-local { padding-top: 0; }
.fd-local-inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.fd-local-photo { aspect-ratio: 1 / 1; }
.fd-local-text { margin-top: 20px; color: var(--lx-ink-2); font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.5; max-width: 46ch; }
.fd-local-text strong { color: var(--lx-ink); font-weight: 600; }
@media (max-width: 860px) {
  .fd-local-inner { grid-template-columns: 1fr; }
  .fd-local-photo { aspect-ratio: 4 / 3; }
}

/* ---------- Visitors ---------- */

.fd-faces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 16px); margin-bottom: clamp(40px, 6vw, 64px); }
.fd-faces img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--lx-radius-sm); }
@media (max-width: 640px) { .fd-faces { grid-template-columns: 1fr 1fr; } }