/* ============================================================
   МЕСТА ПОД КАРТИНКИ
   ------------------------------------------------------------
   Как это работает для Олега:

   На каждой странице стоит блок вида
       <figure class="pmedia"><img src="assets/pages/ai.jpg" ...></figure>

   Если файла assets/pages/ai.jpg ещё нет — браузер НЕ покажет
   сломанную картинку. Скрипт media.js поймает ошибку загрузки и
   включит класс .is-empty: вместо картинки будет аккуратная
   фирменная плашка с подписью, какой файл сюда положить.

   Чтобы поставить картинку: положить файл с нужным именем
   в папку assets/pages/ — и всё, страница подхватит сама.
   Ничего править в коде не надо.

   Рекомендуемый размер: 1600×900 (или 1600×1200 для вертикальных),
   формат .jpg или .webp, вес до 300 КБ.
   ============================================================ */

.pmedia{
  position:relative;
  margin:56px 0;
  border-radius:20px;
  overflow:hidden;
  background:#111;
  border:1px solid var(--line,rgba(255,255,255,.1));
}
.pmedia__frame{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
}
.pmedia img,
.pmedia video{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.pmedia figcaption{
  padding:14px 20px 16px;
  font-size:14px;
  line-height:1.5;
  color:var(--muted,rgba(255,255,255,.55));
  border-top:1px solid var(--line,rgba(255,255,255,.08));
}

/* ---- состояние «файла пока нет» ---- */
.pmedia.is-empty img{display:none;}
.pmedia.is-empty .pmedia__frame{
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(255,255,255,.07), transparent 60%),
    linear-gradient(135deg,#141414 0%,#0d0d0d 100%);
  display:flex;align-items:center;justify-content:center;
}
.pmedia.is-empty .pmedia__frame::before{
  content:"";position:absolute;inset:14px;
  border:1px dashed rgba(255,255,255,.14);
  border-radius:12px;pointer-events:none;
}
.pmedia.is-empty .pmedia__frame::after{
  content:"Место под изображение · " attr(data-file);
  position:relative;
  font-size:13px;letter-spacing:.02em;
  color:rgba(255,255,255,.34);
  text-align:center;padding:0 24px;
  font-family:inherit;
}

/* ---- пропорции ---- */
.pmedia--wide  .pmedia__frame{aspect-ratio:21/9;}
.pmedia--tall  .pmedia__frame{aspect-ratio:4/5;}
.pmedia--square .pmedia__frame{aspect-ratio:1/1;}

/* ---- внутри статьи: держим ширину колонки, но даём выйти чуть шире ---- */
.article .pmedia{
  margin-left:calc(-1 * clamp(0px,4vw,64px));
  margin-right:calc(-1 * clamp(0px,4vw,64px));
}
@media(max-width:900px){
  .article .pmedia{margin-left:0;margin-right:0;}
  .pmedia{margin:36px 0;border-radius:14px;}
}

/* ---- герой статьи: сразу под заголовком, без верхнего отступа ---- */
.pmedia--hero{margin-top:0;margin-bottom:44px;}

/* ---- видео-слот на страницах услуг ---- */
.pmedia--video video{background:#000;}