/* ============================================================
   MENU CATEGORY PAGE · additions to pages.css
   Loaded by taxonomy-menu_categories.php only. pages.css styles the
   mockup markup unchanged; this file covers what the 29 September
   2026 menu data added and the mockup did not have:
     - calorie line + allergen pill (.dish-item__meta, .allergen-pill)
     - price disclaimer under the switcher (.menu-disclaimer)
     - set inclusions (.dish-item__includes)
     - a tile for a dish with no photo yet (.dish-item__img--empty)
     - a category with nothing published (.menu-empty)
   Tokens only.
   ============================================================ */

/* A subgroup heading that opens the list sits straight under the
   switcher: its own top margin (pages.css) would double the gap. */
.cat-switch + .subcat-head,
.menu-disclaimer + .subcat-head { margin-top: 0; }

/* --- Price disclaimer under the switcher ------------------- */
.menu-disclaimer {
  margin: 0;
  padding-block-end: var(--space-m);
  font-size: var(--text-s);
  font-weight: 600;
  color: var(--secondary);
}

/* --- Allergen pill: the words, not an icon ------------------- */
.allergen-pill {
  display: inline-flex;
  align-items: center;
  min-height: 2.2em;
  padding-block: 0;
  padding-inline: var(--space-xs);
  border: 1px solid var(--secondary-trans-20);
  border-radius: var(--radius-round);
  background: var(--accent-trans-10);
  color: var(--secondary-dark);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

/* --- Calorie line ------------------------------------------ */
.dish-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-dark-muted);
  font-variant-numeric: tabular-nums;
}

/* --- Set inclusions ---------------------------------------- */
.dish-item__includes {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex: 1;
  font-size: var(--text-s);
  color: var(--text-dark-muted);
}
.dish-item__includes-label {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--secondary);
}
.dish-item__includes-list {
  margin: 0;
  padding: 0;
  list-style: disc inside;
}
.dish-item__includes-list li::marker { color: var(--primary); }

/* A card with inclusions but no description: inclusions take the
   description's flex slot so the prices still sit at the foot. */
.dish-item__desc + .dish-item__includes { flex: none; }

/* --- No photo yet ------------------------------------------ */
.dish-item__img--empty {
  display: grid;
  place-items: center;
  background: var(--bg-semi-light);
}
.dish-item__img--empty img {
  width: 4.8rem;
  height: auto;
  opacity: 0.35;
}

/* --- Empty category ---------------------------------------- */
.menu-empty {
  padding-block: var(--space-xl);
  text-align: center;
  font-size: var(--text-m);
  color: var(--text-dark-muted);
}

/* --- List view --------------------------------------------- */
/* pages.css places name (row 1) and description (row 2) in the first
   column. Inclusions and the calorie line follow in the same column. */
.menu-view-list .dish-item__includes,
.menu-view-list .dish-item__meta { grid-column: 1; flex: none; }

/* List view: the badge leaves the thumbnail (it overflowed the narrow
   photo on phones) and sits above the name in the text column, so the
   name and description move down one row. */
.menu-view-list .dish-item__badge {
  position: static;
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}
.menu-view-list .dish-item__body:has(> .dish-item__badge) .dish-item__name { grid-row: 2; }
.menu-view-list .dish-item__body:has(> .dish-item__badge) .dish-item__desc { grid-row: 3; }

@media (max-width: 899px) {
  .menu-view-list .dish-item__badge,
  .menu-view-list .dish-item__body:has(> .dish-item__badge) .dish-item__name,
  .menu-view-list .dish-item__body:has(> .dish-item__badge) .dish-item__desc { grid-row: auto; }
}

/* pages.css lets the list thumbnail keep its natural height, which
   suited the mockup's landscape 500 x 350 stand-ins. The real dish
   photos are often portrait, and a portrait photo then sets the row
   height. Pin the thumbnail to the stand-ins' ratio so rows match the
   mockup; a taller text block still stretches it (align-self: stretch).
   The contain-intrinsic-size reset undoes core's 3000 x 1500 placeholder
   for `sizes="auto"` lazy images, which otherwise sizes the row. */
.menu-view-list .dish-item__img {
  aspect-ratio: 10 / 7;
  contain-intrinsic-size: none;
}

/* Long subgroup names ("Sinigang in Pineapple and Guava") ran off the
   right edge at phone width under pages.css's nowrap. */
@media (max-width: 575px) {
  .subcat-head h2 { white-space: normal; }
}