/*
 * Media slot for a card or a ficha: a real photo or the generative placeholder of the business's
 * category family, always in the same box, so a listing without a photo looks intentional.
 *
 *   <div class="c-media">
 *     <img class="c-media__img" src="/uploads/..." alt="Fachada de Barbería El Zurdo" width="800" height="600" loading="lazy" decoding="async">
 *   </div>
 *   <div class="c-media c-media--placeholder">
 *     <img class="c-media__img" src="/assets/img/placeholders/belleza-y-cuidado-personal.svg" alt="" width="800" height="600" loading="lazy">
 *   </div>
 *
 * Ratio: 4:3 everywhere (the placeholders' viewBox). Modifiers: --wide (16:9 from 48em, for the ficha
 * header), --square. object-fit: cover keeps a photo of any ratio inside the box. A placeholder is
 * decorative (alt=""), because the business name is next to it.
 *
 * The family slugs are the ten of API_CONTRACT_V2 section 6. Where an <img> is not possible, the same
 * art is available as a background: <div class="c-placeholder c-placeholder--mascotas">.
 */
.c-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--md-color-surface-alt);
  border-radius: var(--md-radius-lg);
}

.c-media--square {
  aspect-ratio: 1;
}

@media (min-width: 48em) {
  .c-media--wide {
    aspect-ratio: 16 / 9;
  }
}

.c-media__img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Placeholders keep their composition anchored; a photo is centered. */
.c-media--placeholder .c-media__img {
  object-position: center;
}

/* Background form of the same ten files. */
.c-placeholder {
  aspect-ratio: 4 / 3;
  background: var(--md-color-surface-alt) center / cover no-repeat;
  border-radius: var(--md-radius-lg);
}

.c-placeholder--alimentos-y-bebidas {
  background-image: url('../../img/placeholders/alimentos-y-bebidas.svg');
}
.c-placeholder--belleza-y-cuidado-personal {
  background-image: url('../../img/placeholders/belleza-y-cuidado-personal.svg');
}
.c-placeholder--mascotas {
  background-image: url('../../img/placeholders/mascotas.svg');
}
.c-placeholder--hogar-y-construccion {
  background-image: url('../../img/placeholders/hogar-y-construccion.svg');
}
.c-placeholder--moda-y-confeccion {
  background-image: url('../../img/placeholders/moda-y-confeccion.svg');
}
.c-placeholder--tecnologia {
  background-image: url('../../img/placeholders/tecnologia.svg');
}
.c-placeholder--automotriz {
  background-image: url('../../img/placeholders/automotriz.svg');
}
.c-placeholder--salud {
  background-image: url('../../img/placeholders/salud.svg');
}
.c-placeholder--servicios-y-educacion {
  background-image: url('../../img/placeholders/servicios-y-educacion.svg');
}
.c-placeholder--otros {
  background-image: url('../../img/placeholders/otros.svg');
}