/* docs/DESIGN.md #7 — emplacement de photo, visible en recette uniquement. */
@layer components {
  .photo-placeholder {
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--forest-deep);
    color: var(--cream);
    min-height: 16rem;
  }

  .photo-placeholder--bowl {
    border-top-right-radius: var(--radius-bowl);
  }

  .photo-placeholder__slats {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1.5rem;
    color: var(--cream);
    opacity: .5;
  }

  .photo-placeholder__text {
    position: relative;
    padding: var(--space-5);
  }

  .photo-placeholder__label {
    display: block;
    font-size: .9375rem;
    color: var(--cream);
  }

  /* docs/DESIGN.md #7 — la photo réelle qui remplace un <twig:PhotoPlaceholder>
     une fois qu'un Photo existe pour ce créneau. Pas de filtre, pas de voile,
     pas de dégradé ; ratio fixe déclaré en plus de width/height. */
  .place-photo {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-top-right-radius: var(--radius-bowl);
  }

  .place-photo--landscape {
    aspect-ratio: 3 / 2;
  }

  .place-photo--portrait {
    aspect-ratio: 4 / 5;
  }
}