/* =====================================================================
   Лаб. 7 — медіаблоки лендингу (відео-фон Hero, YouTube, карта).
   Компонування — утиліти Tailwind з префіксом tw- (preflight вимкнено, щоб не
   ламати основний style.css). Тут лише спільні значення — CSS-змінні (DRY).
   ===================================================================== */
:root {
  /* Медіа (YouTube, карта): одна ширина й радіус для всіх iframe */
  --media-max-w: 960px;
  --media-radius: var(--radius-m);
}

/* Обгортка iframe: ширина обмежена змінною, на 320 px не виходить за екран */
.media-frame {
  width: 100%;
  max-width: var(--media-max-w);
  margin: 0;
}

.media-frame iframe {
  display: block;
  border: 0; /* радіус дає контейнер: overflow-hidden + tw-rounded-[var(--media-radius)] */
}

/* Нативне відео — перший «слайд» Hero (поводиться як фото: на весь кадр) */
.hero__slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.media-frame--map {
  max-width: none;
}

/* Лаб. 12: YouTube-«фасад» — обкладинка з кнопкою; iframe з'являється після натискання */
.yt-facade {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
  cursor: pointer;
}
.yt-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* hqdefault 4:3 з чорними смугами — у кадрі 16:9 смуги обрізаються */
}
.yt-facade__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.yt-facade__play svg {
  transition: transform 0.2s var(--ease-out);
}
.yt-facade:hover .yt-facade__play svg,
.yt-facade:focus-visible .yt-facade__play svg {
  transform: scale(1.12);
}
.yt-facade:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}