/* =========================================================================
   BRODEUR'S BISTRO — Recipe-tile PHOTO pack
   Adds a plated-food photo band to the top of each recipe tile on the
   Menu Items pages, on both surfaces. Items we don't have a photo for
   fall back to a clean white "photo coming soon" card with the item name
   set top-left (never a broken image, never a dark box).

   This is a SEPARATE, self-contained addition — it layers on top of the
   ring-hero pack (bb-enhance.css) and can be committed or reverted on its
   own. Tapping a tile still opens the recipe card exactly as before; the
   clickable wrapper and its href are untouched.

   HOW TO USE
   ----------
   1. Copy the 10 JPEGs in  handoff/food/  to  bbistro/static/food/.
   2. Copy this file to      bbistro/static/css/bb-recipe-photos.css
      and also to            bbistro/static/mobile/bb-recipe-photos.css
      (identical file — targets both surfaces' class names).
   3. Link it AFTER app.css / mobile/app.css on each surface (and after
      bb-enhance.css if present).
   4. Add the photo element + class in the tile loops — see
      handoff/RECIPE-PHOTOS.md for the exact markup + the name→file map.

   Nothing here overrides an existing rule; it only adds new classes
   (.rxtile-photo / .rxphoto on desktop, .has-photo / .recipe-photo on
   mobile). Safe to remove any time.
   ========================================================================= */

/* ---- shared: the photo band --------------------------------------------- */
/* A 4:3 (desktop) / 16:9 (mobile) cover crop that bleeds to the tile edges.
   Dark #1a1a1a fill shows through while the JPEG decodes; photo-less items
   use an all-white placeholder card instead (see .rxphoto-empty below). */

/* ====================== DESKTOP  ( .rxtile / .rx-grid ) =================== */
/* .rxtile default padding is 14px 16px; drop the top pad so the photo sits
   flush, then cancel the 16px side pad with a negative margin to bleed. */
.rxtile.rxtile-photo {
  padding-top: 0;
  overflow: hidden;               /* clip the photo's top corners to the radius */
}
.rxtile.rxtile-photo .rxphoto {
  display: block;
  margin: 0 -16px 12px;
  aspect-ratio: 4 / 3;
  background: #1a1a1a center / cover no-repeat;
  border-bottom: 1px solid var(--bb-line);
}
/* photo-less item → clean white placeholder card with the name set top-left
   ("photo coming soon" poster), never a broken <img> or a dark box. */
.rxtile.rxtile-photo .rxphoto.rxphoto-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 7px;
  padding: 16px;
  background: var(--bb-paper);   /* all white, matches the tile body */
  color: var(--bb-ink);
  text-align: left;
}
.rxtile.rxtile-photo .rxphoto.rxphoto-empty .rxphoto-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bb-red);
}
.rxtile.rxtile-photo .rxphoto.rxphoto-empty .rxphoto-name {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--bb-ink);
  /* clamp long names so the placeholder never pushes taller than a photo */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ====================== MOBILE  ( .recipe-course / .mt-grid ) ============= */
/* .course default padding is 18px 20px (14px 16px ≤480px). Same technique. */
.recipe-course.has-photo {
  padding-top: 0;
  overflow: hidden;
}
.recipe-course.has-photo .recipe-photo {
  margin: 0 -20px;                /* gap:8px on .course handles the space below */
  aspect-ratio: 16 / 9;
  background: #1a1a1a center / cover no-repeat;
  border-bottom: 1px solid var(--bb-line);
}
/* Real <img> (not a CSS background) so mobile "Data Saver"/Lite modes and
   older browsers render it reliably. Fills the 16:9 band with a cover crop;
   the #1a1a1a band shows through while it decodes. */
.recipe-course.has-photo .recipe-photo .recipe-photo-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
@media (max-width: 480px) {
  .recipe-course.has-photo .recipe-photo { margin: 0 -16px; }
}
.recipe-course.has-photo .recipe-photo.recipe-photo-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
  padding: 16px 20px;
  background: var(--bb-paper);   /* all white, matches the card body */
  color: var(--bb-ink);
  text-align: left;
}
@media (max-width: 480px) {
  .recipe-course.has-photo .recipe-photo.recipe-photo-empty { padding: 14px 16px; }
}
.recipe-course.has-photo .recipe-photo.recipe-photo-empty .recipe-photo-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bb-red);
}
.recipe-course.has-photo .recipe-photo.recipe-photo-empty .recipe-photo-name {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--bb-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}