/* ===========================================================================
   Grabstein's — Bento homepage. Dark canvas, rounded tiles, sentence-case
   display headings. Layered on top of site.css + DS tokens.
   =========================================================================== */
:root {
  --bento-radius:    22px;
  --bento-radius-sm: 14px;
  --bento-gap:       16px;
  --bento-pad:       var(--bento-gap);
  --bento-max:       100%;
  --header-h:        76px;
}

/* Dark page canvas for the whole bento home */
html, body.bento { background: var(--gb-black); }
.bento-main { background: var(--gb-black); }

.bento-wrap {
  max-width: var(--bento-max);
  margin: 0;
  width: 100%;
  padding-inline: var(--bento-pad);
}

/* All-caps display heading — Oswald, matches the rest of the site */
.bento-display {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.95;
  margin: 0;
}

/* Tile base */
.bento-tile {
  position: relative;
  border-radius: var(--bento-radius);
  overflow: hidden;
}

/* Photo tile with hover lift + zoom */
.bento-photo { display: block; text-decoration: none; color: inherit; transition: transform var(--dur-base) var(--ease-out); }
.bento-photo .bento-img { transition: transform var(--dur-slow) var(--ease-out); }
.bento-photo:hover { transform: translateY(-4px); }
.bento-photo:hover .bento-img { transform: scale(1.045); }
.bento-photo:hover .bento-roundarrow { background: var(--gb-warm-white); color: var(--gb-black); border-color: var(--gb-warm-white); }
.bento-photo:hover .bento-roundarrow svg { transform: translateX(2px); }

/* Round outline arrow chip */
.bento-roundarrow {
  width: 42px; height: 42px; flex: none; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.85); color: var(--gb-warm-white);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.bento-roundarrow svg { transition: transform var(--dur-base) var(--ease-out); }

/* Rounded pill button (outline, on dark) */
.bento-pill {
  display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 14px; line-height: 1;
  padding: 0.95rem 1.4rem; border-radius: 999px;
  background: transparent; color: var(--gb-warm-white);
  border: 1.5px solid rgba(255,255,255,0.55); text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.bento-pill:hover { background: var(--gb-warm-white); color: var(--gb-black); border-color: var(--gb-warm-white); }
.bento-pill.solid { background: var(--gb-warm-white); color: var(--gb-black); border-color: var(--gb-warm-white); }
.bento-pill.solid:hover { background: #e7e4dc; border-color: #e7e4dc; }
.bento-pill.on-light { color: var(--gb-black); border-color: rgba(10,10,10,0.4); }
.bento-pill.on-light:hover { background: var(--gb-black); color: var(--gb-warm-white); border-color: var(--gb-black); }

/* Open-now / status pill */
.bento-status {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  letter-spacing: 0.02em; padding: 0.45rem 0.85rem; border-radius: 999px;
  background: var(--gb-warm-white); color: var(--gb-black); white-space: nowrap;
}
.bento-status.soon { background: transparent; color: var(--gb-warm-white); border: 1.5px solid rgba(255,255,255,0.55); }

/* Gradient scrim for photo tiles */
.bento-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,0) 38%, rgba(10,10,10,0.82) 100%); pointer-events: none; }

/* ===== Header ===== */
.bento-header {
  position: sticky; top: 0; z-index: 60; background: var(--gb-black);
}
.bento-header-inner {
  max-width: var(--bento-max); margin: 0; width: 100%;
  display: flex; align-items: center; gap: var(--space-6);
  padding: 18px var(--bento-pad);
}
.bento-nav { display: flex; gap: clamp(1.2rem, 2.4vw, 2.4rem); margin-left: auto; }
.bento-nav a {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 14px; color: var(--gb-warm-white);
  text-decoration: none; opacity: 0.82; transition: opacity var(--dur-fast) var(--ease-out);
}
.bento-nav a:hover, .bento-nav a.on { opacity: 1; }

/* ===== Hero — fills the viewport, white canvas, old marquee band at the bottom ===== */
.bento-hero-section {
  background: var(--gb-warm-white);
  display: flex; flex-direction: column;
  min-height: calc(100svh - var(--header-h));
}
.bento-hero-stage {
  flex: 1 1 auto; min-height: 0; display: flex;
  padding-block: var(--bento-gap);
}
.bento-hero {
  flex: 1; min-height: 460px;
  display: grid; grid-template-columns: 1.04fr 1.02fr 1.06fr; gap: var(--bento-gap);
}
.bento-hero-right { display: grid; grid-template-rows: 1.05fr 1.05fr auto; gap: var(--bento-gap); min-height: 0; }
/* Left hero tile crossfade carousel */
.bento-hero-slide { transition: opacity 1.1s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .bento-hero-slide { transition: none; } }

/* ===== Menu 2x2 ===== */
.bento-menu-section { padding-top: var(--space-8); }
.bento-menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bento-gap); }
.bento-menu-tile { aspect-ratio: 16 / 4.8; }

/* ===== Locations grid ===== */
/* All location cards share one height — about half the old 4/3 storefront height. */
.bento-loc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bento-gap); }
.bento-loc-store, .bento-loc-card { height: clamp(300px, 12.2vw, 340px); }
.bento-loc-card { display: flex; flex-direction: column; }

/* ===== Reviews ===== */
.bento-rev-top { display: grid; grid-template-columns: 1fr 1.12fr; gap: var(--bento-gap); align-items: stretch; }
.bento-rev-photo { min-height: 360px; }
/* infinite auto-scrolling review marquee */
.bento-rev-mq { overflow: hidden; width: 100%; }
.bento-rev-mq-track {
  display: flex; gap: var(--bento-gap); width: max-content; align-items: stretch;
  animation: gb-marquee 60s linear infinite;
}
.bento-rev-mq:hover .bento-rev-mq-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .bento-rev-mq-track { animation: none; } }
.bento-rev-card {
  flex: 0 0 320px; margin: 0;
  background: var(--gb-paper); border: none; border-radius: 24px;
  padding: var(--space-7) var(--space-6);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-5);
}
.bento-rev-card:nth-child(odd)  { background: var(--gb-tile-white); }
.bento-rev-card:nth-child(even) { background: var(--gb-paper); }
.bento-navbtn {
  width: 50px; height: 50px; flex: none; border-radius: 50%; cursor: pointer;
  border: 1.5px solid var(--gb-black); background: var(--gb-black); color: var(--gb-warm-white);
  display: inline-flex; align-items: center; justify-content: center;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.bento-navbtn:hover { transform: scale(1.06); }
.bento-navbtn:disabled { opacity: 0.3; cursor: default; transform: none; }

/* REAL REVIEWS marquee */
.bento-marquee { background: var(--gb-black); overflow: hidden; white-space: nowrap; }
.bento-marquee-track { display: inline-block; animation: gb-marquee 30s linear infinite; }
.bento-marquee-track span { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: 15px; color: var(--gb-paper); padding-inline: 1.2rem; }
@media (prefers-reduced-motion: reduce) { .bento-marquee-track { animation: none; } }

/* ===== Footer ===== */
.bento-foot-cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.4fr; gap: var(--space-7); }
.bento-foot-locs { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-5); }

/* ===========================================================================
   Responsive
   =========================================================================== */
@media (max-width: 1080px) {
  .bento-hero-section { min-height: 0; }
  .bento-hero-stage { flex: none; display: block; }
  .bento-hero { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(0, auto); min-height: 0; }
  .bento-hero > .bento-hero-center { order: -1; grid-column: 1 / -1; min-height: 320px; }
  .bento-hero-left { min-height: 340px; }
  .bento-rev-top { grid-template-columns: 1fr; }
  .bento-foot-cols { grid-template-columns: 1fr 1fr; }
}
/* iPad / tablet: black headline card as the LEFT half-column, with the
   two food photos + locations card stacked beside it on the right.
   (min-width guard keeps phones on the single-column layout below.) */
@media (min-width: 761px) and (max-width: 1080px) {
  .bento-hero { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; min-height: 560px; }
  .bento-hero-left { display: none; }
  .bento-hero > .bento-hero-center { order: 0; grid-column: 1; grid-row: 1; min-height: 0; }
  .bento-hero-right { grid-column: 2; grid-row: 1; grid-template-rows: 1fr 1fr auto; min-height: 0; }
}
@media (max-width: 820px) {
  .bento-loc-grid { grid-template-columns: 1fr 1fr; }
  .bento-foot-locs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .bento-nav { display: none; }
  .bento-hero { grid-template-columns: 1fr; }
  .bento-hero-left { min-height: 300px; }
  .bento-hero-right { grid-template-rows: none; }
  .bento-menu-grid { grid-template-columns: 1fr; }
  .bento-menu-tile { aspect-ratio: 16 / 10; }
  .bento-foot-cols { grid-template-columns: 1fr; gap: var(--space-6); }
  /* Mobile hero: shorter copy, no locations card, tighter gap to "Explore the
     Menu", no menu CTA — so a food photo lands above the fold. */
  .bento-hero-sub { display: none; }
  .bento-hero-loc { display: none !important; } /* beat inline display:flex */
  /* The left tile is now a crossfading carousel — drop the two right-column
     food shots on mobile so it's the single bagel photo above the fold. */
  .bento-hero-right .bento-photo { display: none; }
  .bento-menu-cta { display: none; }
  .bento-menu-section { padding-top: var(--space-4); }
  /* Hero photos collapse to 0 on mobile (basket has inline min-height:0; the
     stack tiles lose their grid rows) — give them real height so the bagel
     shots actually render, with the basket sitting just under the black card. */
  .bento-hero .bento-photo { min-height: 240px !important; }
  .bento-hero-center { min-height: 0 !important; }
}
@media (max-width: 560px) {
  .bento-loc-grid { grid-template-columns: 1fr; }
  .bento-rev-card { flex-basis: 82%; }
  .bento-foot-locs { grid-template-columns: 1fr; }
}

/* Entrance: fade-up tiles once (respect reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  .bento-rise { opacity: 0; transform: translateY(18px); animation: gb-fade-up 0.6s var(--ease-out) forwards; }
}