/* ============================================================================
   Menu-all.com — Brand Page only styles.
   Loaded after main.css. Plain CSS using the --ma-* tokens from main.css so it
   needs no Tailwind build step. Keep shared patterns in main.css.
   ========================================================================== */

/* Hero backdrop — warm wash behind the brand intro. */
.ma-hero {
  position: relative;
  background:
    radial-gradient(120% 120% at 100% 0%, var(--ma-embertint) 0%, transparent 45%),
    radial-gradient(120% 120% at 0% 100%, var(--ma-pinetint) 0%, transparent 45%);
}

/* Hero cover image — fixed ratio prevents layout shift (CLS). */
.ma-hero__cover {
  aspect-ratio: 16 / 10;
  border-radius: 1.25rem;
  overflow: hidden;
  background: var(--ma-line);
}
.ma-hero__cover img { width: 100%; height: 100%; object-fit: cover; }

/* Availability summary card sits on the hero on large screens. */
@media (min-width: 1024px) {
  .ma-availcard { position: sticky; top: calc(var(--ma-header-h) + 1.5rem); }
}

/* Photo gallery — responsive mosaic (1 lead tile + grid). */
.ma-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}
.ma-gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: 0.85rem;
  background: var(--ma-line);
  aspect-ratio: 1 / 1;
}
.ma-gallery__item:first-child { grid-column: span 2; aspect-ratio: 16 / 10; }
.ma-gallery__item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.35s ease;
}
.ma-gallery__item:hover img { transform: scale(1.05); }
.ma-gallery__more {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(33, 27, 21, 0.55);
  color: #fff; font-weight: 600;
}
@media (min-width: 640px) {
  .ma-gallery { grid-template-columns: repeat(4, 1fr); }
  .ma-gallery__item:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: 1 / 1; }
}

/* Rating distribution bars. Width comes from data-pct via brand.js → --ma-pct. */
.ma-bar { height: 8px; border-radius: 999px; background: var(--ma-line); overflow: hidden; }
.ma-bar__fill {
  height: 100%; border-radius: inherit; width: var(--ma-pct, 0%);
  background: var(--ma-honey); transition: width 0.7s ease;
}
@media (prefers-reduced-motion: reduce) { .ma-bar__fill { transition: none; } }

/* Weekly opening-hours table. */
.ma-hours { width: 100%; border-collapse: collapse; }
.ma-hours th, .ma-hours td { padding: 0.6rem 0; text-align: left; font-size: 0.95rem; }
.ma-hours tr + tr { border-top: 1px solid var(--ma-line); }
.ma-hours td:last-child { text-align: right; color: var(--ma-ink); font-variant-numeric: tabular-nums; }
.ma-hours tr.is-today { font-weight: 600; }
.ma-hours tr.is-today th { color: var(--ma-pine); }

/* Map placeholder frame. */
.ma-map {
  position: relative; overflow: hidden; border-radius: 1rem;
  aspect-ratio: 16 / 9; background: var(--ma-line);
}
.ma-map iframe, .ma-map img { width: 100%; height: 100%; border: 0; display: block; }

/* Menu-preview category pills (no icons — name + count). */
.ma-catpill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid var(--ma-line); border-radius: 999px;
  background: var(--ma-paper); color: var(--ma-ink);
  padding: 0.5rem 0.55rem 0.5rem 1rem; font-weight: 600; font-size: 0.95rem;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.ma-catpill:hover { border-color: var(--ma-ember); color: var(--ma-ember); }
.ma-catpill__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.5rem; height: 1.5rem; padding: 0 0.4rem; border-radius: 999px;
  background: var(--ma-embertint); color: var(--ma-ember);
  font-size: 0.78rem; font-weight: 700;
}

/* Print: keep the essentials, drop the chrome. */
@media print {
  .ma-header, .ma-drawer, .ma-totop, .ma-pdf, .ma-claim, .ma-lightbox { display: none !important; }
  body { background: #fff; }
}