@layer components {
  /* Полосатая заглушка вместо фото, которого пока нет (.ph). Helper: placeholder("подпись").
     Высоту задаёт обёртка (aspect-ratio) или модификатор. */
  .placeholder {
    display: flex;
    align-items: flex-end;
    width: 100%;
    height: 100%;
    min-height: 120px;
    padding: 12px;
    border-radius: var(--r-img);
    background: repeating-linear-gradient(135deg, var(--ph-a) 0 10px, var(--ph-b) 10px 20px);
    color: var(--ph-ink);
    font: 500 13px/1.35 var(--font-mono);
  }
  .placeholder--round { width: 44px; height: 44px; min-height: 0; padding: 0; border-radius: 50%; }

  /* Обёртка с пропорциями для фото и заглушек */
  .media { display: block; width: 100%; aspect-ratio: var(--ratio, 16 / 9); }
  .media > img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-img); }

  /* Фото человека: кадрируем по лицу */
  .portrait { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
}

@layer components {
  /* Карта (shared/_map): заглушка с кнопкой, по нажатию — iframe Яндекс Карт */
  .map { position: relative; min-height: var(--map-h, 420px); height: 100%; }
  .map__placeholder, .map__frame { position: absolute; inset: 0; border-radius: 18px; }
  .map__placeholder .placeholder { position: absolute; inset: 0; border-radius: 18px; }
  .map__actions {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    background: rgb(255 255 255 / 0.94);
    border-radius: var(--r-box);
    box-shadow: var(--shadow);
    text-align: center;
  }
  .map__frame { width: 100%; height: 100%; border: 0; }
}