/* Shared missing-media fallbacks.
   Any component that reserves a photographic slot keeps that slot visible
   until real media is assigned. Uses the same neutral palette and type scale
   as the rest of the theme. */

@layer components {
  .room-tile:not(:has(.room-tile__img))::before,
  .hub-card__media--empty::before,
  .category-card__link:not(:has(.category-card__media))::before {
    content: "Image placeholder";
    display: grid;
    place-items: center;
    inline-size: 100%;
    aspect-ratio: 4 / 3;
    padding: var(--s-5);
    background-color: var(--bg-alt);
    color: var(--ink-500);
    font-size: var(--fs-micro);
    font-weight: var(--fw-ui);
    letter-spacing: var(--tracking-micro);
    line-height: var(--lh-small);
    text-align: center;
    text-transform: uppercase;
  }

  .hub-card__media--empty::before {
    block-size: 100%;
    aspect-ratio: auto;
  }

  /* Catalogue root cards historically became text-only when a category hero
     was missing. Keep the same 4:3 media footprint as a real hero instead, so
     assigning photography later never changes the card structure. */
  .category-card__link:not(:has(.category-card__media))::before {
    flex: none;
  }
}