/* ============================================================
   СЕКЦИЯ: youtube
   ============================================================
   Сетка из шести карточек-видео. Приём тот же, что у projects
   в эталоне: единая сетка со швами толщиной в границу вместо
   теней — карточки «приподнимаются» сменой фона при наведении.
   ============================================================ */
.section-youtube {
  background-color: var(--color-surface-1);
  border-bottom: var(--border-width) solid var(--color-border);
}

.section-youtube__head {
  margin-bottom: var(--space-64);
}

.section-youtube__heading {
  font-family: var(--font-serif);
  font-size: var(--font-size-section-title);
  line-height: var(--line-height-110);
  color: var(--color-text);
}

.section-youtube__subheading {
  margin-top: var(--space-16);
  color: var(--color-text-muted);
  font-size: var(--font-size-15-5);
  line-height: var(--line-height-160);
}

/* ------------------------------------------------------------
   Сетка карточек: 1px швы цвета границы вместо теней/скруглений.
   ------------------------------------------------------------ */
.section-youtube__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--border-width);
  background-color: var(--color-border);
  border: var(--border-width) solid var(--color-border);
}

.video-card {
  background-color: var(--color-surface-1);
}

.video-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-24);
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.video-card__link:hover {
  background-color: var(--color-surface-2);
}

.video-card__link:hover .video-card__play {
  border-color: var(--color-accent);
}

.video-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--color-surface-3);
  margin-bottom: var(--space-16);
}

.video-card__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Если превью не загрузилось (onerror в разметке скрывает <img>),
   под ним остаётся ровный фон поверхности — ни дыры, ни битой иконки. */
.video-card__media.is-broken {
  background-color: var(--color-surface-3);
}

.video-card__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--size-play-button);
  height: var(--size-play-button);
  border-radius: 50%;
  border: var(--border-width) solid var(--color-border-strong);
  background-color: var(--color-bg-translucent);
  transition: border-color var(--duration-fast) var(--ease-standard);
}

.video-card__play::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: var(--space-10) 0 var(--space-10) var(--space-16);
  border-color: transparent transparent transparent var(--color-accent);
}

.video-card__title {
  font-size: var(--font-size-15);
  color: var(--color-text);
  line-height: var(--line-height-145);
}

.video-card__watch {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-top: var(--space-8);
  font-size: var(--font-size-12);
  color: var(--color-text-dim);
  transition: color var(--duration-fast) var(--ease-standard);
}

.video-card:hover .video-card__watch {
  color: var(--color-accent);
}

.section-youtube__cta {
  margin-top: var(--space-52);
  display: flex;
  justify-content: center;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 980px) {
  .section-youtube__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .section-youtube__grid {
    grid-template-columns: 1fr;
  }

  .video-card__link {
    padding: var(--space-20);
  }
}