/* ==========================================================================
   In-Store Café (page-in-store-cafe.php)
   Scoped under the page root class, .cb-cafe. Hero and Visit sections reuse
   the shared .cb-hero* / .cb-visit* rules already in main.css; only the
   café-menu panels are new here.
   ========================================================================== */

/* --- 2. Café menu ---------------------------------------------------------
   Image-led rounded panels, alternating image/copy per group. Imagery stays
   restrained and contained: capped height, fixed aspect-ratio, object-fit
   cover, rounded corners. No full-bleed photography. */
.cb-cafe .cb-cafe-menu { padding-block: var(--cb-section-y); }

.cb-cafe .cb-cafe-menu__groups {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2rem);
}

.cb-cafe .cb-cafe-menu__group {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: var(--cb-border-width) solid var(--cb-border);
  background: var(--cb-surface);
  border-radius: var(--cb-radius-xl);
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .cb-cafe .cb-cafe-menu__group { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .cb-cafe .cb-cafe-menu__group--reverse .cb-cafe-menu__media { order: 2; }
  .cb-cafe .cb-cafe-menu__group--reverse .cb-cafe-menu__copy { order: 1; }
}

.cb-cafe .cb-cafe-menu__media {
  margin: 0;
  height: 100%;
}
.cb-cafe .cb-cafe-menu__image {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  max-height: 22rem;
  object-fit: cover;
  object-position: center;
}
@media (min-width: 1024px) {
  .cb-cafe .cb-cafe-menu__image { aspect-ratio: auto; max-height: none; min-height: 24rem; }
}

.cb-cafe .cb-cafe-menu__copy {
  padding: clamp(1.75rem, 4vw, 3rem);
}
.cb-cafe .cb-cafe-menu__title {
  font-size: var(--cb-text-3xl);
  margin: 0;
}
.cb-cafe .cb-cafe-menu__subtitle {
  margin: 0.85rem 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: var(--cb-text-xl);
  color: var(--cb-accent);
}
.cb-cafe .cb-cafe-menu__items {
  margin-top: 1.75rem;
  display: grid;
  gap: 0 2rem;
  grid-template-columns: 1fr;
  list-style: none;
}
@media (min-width: 640px) {
  .cb-cafe .cb-cafe-menu__items { grid-template-columns: repeat(2, 1fr); }
}
.cb-cafe .cb-cafe-menu__item {
  display: flex;
  align-items: center;
  min-height: 3.6em; /* two lines tall, so single- and double-line items align */
  padding-block: 0.5rem;
  border-bottom: var(--cb-border-width) solid var(--cb-border);
  font-size: var(--cb-text-sm);
  line-height: 1.5;
  color: var(--cb-text);
}
.cb-cafe .cb-cafe-menu__note {
  margin-top: 1.5rem;
  font-size: var(--cb-text-sm);
  line-height: 1.55;
  color: var(--cb-text-muted);
}