/*
 * thebamboostudio-v1 theme — "This Week's Menu" page.
 * Styles markup rendered by extension/bamboo/catalog/view/template/menu/menu.twig.
 * Reuses .bb-menu-grid/.bb-menu-item/.bb-menu-photo (menu.css), .bb-badge-stamp
 * (hero.css), .bb-countdown/.bb-dot (menu.css), .bb-btn/.bb-btn-outline (theme.css)
 * as-is — only new classes are defined here.
 */

/* Page-level background — matches homepage body (var(--color-bg)). */
.thebamboostudio-v1 .bb-menu-page { background: var(--color-bg); }

.thebamboostudio-v1 .bb-crumb { padding-block: 1.1rem 0; font-size: var(--fs-sm); color: var(--color-text-muted); }
.thebamboostudio-v1 .bb-crumb a { text-decoration: none; }
.thebamboostudio-v1 .bb-crumb a:hover { text-decoration: underline; }
.thebamboostudio-v1 .bb-crumb-current { color: var(--color-text); font-weight: 600; }

.thebamboostudio-v1 .bb-page-head { padding-block: clamp(1.8rem, 4vw, 2.8rem) clamp(1rem, 3vw, 1.6rem); }
/* Menu page only: wider bottom padding so the divider (theme.css) has
   comfortable room, since this page's page-head owns that whole gap. */
.thebamboostudio-v1 .bb-menu-page .bb-page-head {
  position: relative;
  --bb-divider-pad: clamp(3.8rem, 6.5vw, 5.2rem);
  padding-bottom: var(--bb-divider-pad);
}
.thebamboostudio-v1 .bb-page-head h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 3vw + 1.4rem, 3.6rem);
  font-weight: 600;
  letter-spacing: -.01em;
  margin-top: .6rem;
  max-width: 16ch;
  line-height: 1.02;
  color: var(--color-heading);
}
/* Italic blush accent on the closing phrase — shared across every page.head (story, menu, ...) */
.thebamboostudio-v1 .bb-page-head h1 em { font-style: italic; color: var(--brand-accent); }
.thebamboostudio-v1 .bb-lede { margin-top: 1rem; max-width: 56ch; color: var(--color-text-muted); font-size: 1.1rem; }
.thebamboostudio-v1 .bb-page-head-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 1.4rem; }
/* Reset the homepage countdown's margin-top here so it sits flush with the
   other pills in the row — the page-head-row already owns the spacing. */
.thebamboostudio-v1 .bb-page-head-row .bb-countdown { margin-top: 0; }

.thebamboostudio-v1 .bb-week-switcher { display: flex; gap: .6rem; flex-wrap: wrap; }
.thebamboostudio-v1 .bb-week-switcher a {
  display: inline-flex; align-items: center; gap: .45rem; text-decoration: none;
  font-family: var(--font-eyebrow); font-weight: 700; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-text-muted); border: 1.5px solid var(--color-border); border-radius: var(--radius-pill);
  padding: .5rem 1rem;
}
.thebamboostudio-v1 .bb-week-switcher a:hover { border-color: var(--color-text-muted); color: var(--color-text); }
.thebamboostudio-v1 .bb-week-switcher a .bb-swatch { width: 8px; height: 8px; border-radius: 50%; }
.thebamboostudio-v1 .bb-week-switcher a[data-week="archive"] .bb-swatch { background: var(--color-text-muted); }
.thebamboostudio-v1 .bb-week-switcher a[data-week="current"] .bb-swatch { background: var(--brand-accent); }
.thebamboostudio-v1 .bb-week-switcher a[data-week="upcoming"] .bb-swatch { background: var(--brand-warm); }
.thebamboostudio-v1 .bb-week-switcher a[data-week="current"] { border-color: var(--brand-accent); color: var(--color-text); font-weight: 700; }

.thebamboostudio-v1 .bb-sec-head { }
/* h2 is a flex container so the heading + " · Week of …" share a line on
   desktop (single row, plenty of room) and the sub wraps as one atomic
   chunk to a new line on narrow viewports. */
.thebamboostudio-v1 .bb-sec-head h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 2vw + 1.2rem, 2.4rem);
  margin-block: .6rem .6rem;
  font-weight: 600;
  color: var(--color-heading);
}
.thebamboostudio-v1 .bb-sec-head p { color: var(--color-text-muted); font-size: 1.1rem; }

.thebamboostudio-v1 .bb-stamp {
  font-family: var(--font-mono); font-weight: 600; font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; border: 1.5px solid currentColor; border-radius: var(--radius-md);
  padding: .28rem .55rem; display: inline-block; transform: rotate(-3deg);
}

#current { scroll-margin-top: 5.5rem; }
/* No padding-bottom here — .bb-upcoming-band's own top padding (needed
   regardless for its card inset) already governs the gap to it; adding
   one here would silently double it, same bug class fixed on the homepage. */
.thebamboostudio-v1 #current .bb-menu-grid { margin-top: clamp(2.4rem, 5vw, 3.2rem); }

/* ---- Upcoming band ---- */
#upcoming { scroll-margin-top: 5.5rem; }
.thebamboostudio-v1 .bb-upcoming-band { background: var(--color-bg-soft); border-radius: 32px; padding: clamp(2rem, 4vw, 3rem); margin-top: clamp(3.2rem, 6vw, 5rem); margin-bottom: clamp(2rem, 4vw, 3rem); }
.thebamboostudio-v1 .bb-upcoming-grid { margin-top: clamp(2rem, 4vw, 2.6rem); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
@media (max-width: 820px) { .thebamboostudio-v1 .bb-upcoming-grid { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; } }
.thebamboostudio-v1 .bb-upcoming-item {
  background: var(--color-paper); border: 1px solid var(--color-border); border-radius: 22px;
  padding: 1.5rem 1.4rem 1.7rem; text-align: center; box-shadow: var(--shadow-md);
}
.thebamboostudio-v1 .bb-upcoming-photo { width: 132px; height: 132px; margin-inline: auto; position: relative; }
.thebamboostudio-v1 .bb-upcoming-photo img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  filter: blur(7px) saturate(.85) drop-shadow(0 10px 16px rgba(74, 63, 45, 0.12)); transform: scale(1.08);
}
.thebamboostudio-v1 .bb-veil-mark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2; }
.thebamboostudio-v1 .bb-veil-mark svg { width: 26px; height: 26px; color: var(--color-paper); filter: drop-shadow(0 1px 3px rgba(0,0,0,.35)); }
.thebamboostudio-v1 .bb-upcoming-item .bb-stamp { border-color: var(--brand-warm); color: var(--brand-warm); margin-top: 1rem; transform: rotate(0); }
.thebamboostudio-v1 .bb-upcoming-item h3 { font-family: var(--font-display); font-size: 1.08rem; font-weight: 600; margin-top: .7rem; color: var(--color-heading); }
.thebamboostudio-v1 .bb-upcoming-item p { color: var(--color-text-muted); font-size: .88rem; margin-top: .35rem; }
.thebamboostudio-v1 .bb-notify-btn { margin-top: 1rem; width: 100%; justify-content: center; padding-block: .6rem; }
.thebamboostudio-v1 .bb-notify-btn[aria-pressed="true"] { background: var(--brand-warm); color: var(--color-text); border-color: var(--brand-warm); }

/* ---- Archive shelf ---- */
#archive { scroll-margin-top: 5.5rem; }
.thebamboostudio-v1 .bb-archive-shelf-wrap { margin-top: clamp(2rem, 4vw, 2.6rem); }
/* Flowing flex-wrap grid — no carousel, no prev/next, no horizontal scroll.
   Cards keep a fixed 168px width; rows wrap naturally on all widths. */
.thebamboostudio-v1 .bb-archive-shelf {
  display: flex; flex-wrap: wrap; gap: 1.6rem 1.4rem; justify-content: flex-start;
}
.thebamboostudio-v1 .bb-archive-card { flex: 0 0 168px; text-align: center; text-decoration: none; color: inherit; }
/* On narrow viewports two 168px cards no longer fit on a row (with gap);
   switch to a 2-up grid so cards don't waste vertical space. */
@media (max-width: 540px) { .thebamboostudio-v1 .bb-archive-card { flex: 0 0 calc(50% - .7rem); } }
.thebamboostudio-v1 .bb-archive-photo { width: 120px; height: 120px; margin-inline: auto; position: relative; }
.thebamboostudio-v1 .bb-archive-photo img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  filter: grayscale(.85) saturate(.6) drop-shadow(0 8px 14px rgba(74, 63, 45, 0.12)); opacity: .82;
}
.thebamboostudio-v1 .bb-archive-card:hover .bb-archive-photo img { filter: grayscale(.4) saturate(.85); opacity: 1; }
.thebamboostudio-v1 .bb-archive-card .bb-stamp { border-color: var(--color-text-muted); color: var(--color-text-muted); margin-top: .9rem; }
.thebamboostudio-v1 .bb-archive-card h3 { font-family: var(--font-display); font-size: .98rem; font-weight: 600; margin-top: .6rem; color: var(--color-heading); }
.thebamboostudio-v1 .bb-archive-card .bb-stars-row { color: var(--brand-warm); font-size: .85rem; margin-top: .3rem; letter-spacing: .06em; }

.thebamboostudio-v1 .bb-menu-empty { text-align: center; padding-block: clamp(3rem, 6vw, 5rem); color: var(--color-text-muted); }

/* pickup pill — sibling of .bb-countdown in the page head; static label, no countdown JS */
.thebamboostudio-v1 .bb-pickup-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-family: var(--font-eyebrow);
  font-weight: 700;
  font-size: .8rem;
}

.thebamboostudio-v1 .bb-sec-head-sub {
  color: var(--color-text-muted);
  font-weight: 400;
  white-space: nowrap;
}