/* Videos section moved from impact.css */
.videos-section {
  padding: 60px 10vw;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.02));
}
.videos-section h2 {
  margin: 0 0 1rem 0;
}
.videos-intro {
  margin: 0 0 1.5rem 0;
  color: #94ff7a;
}

.videos-grid {
  display: grid;
  /* 2 columns x 3 rows layout for six videos */
  grid-template-columns: repeat(2, 1fr);
  /* ensure consistent row sizing; cards will wrap into 3 rows naturally */
  grid-auto-rows: minmax(140px, auto);
  gap: 1rem;
}

.video-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  min-height: 160px;
  display: flex;
  align-items: flex-end;
}
.video-thumb {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.6);
  transition: transform 0.35s ease;
}
.video-card:hover .video-thumb {
  transform: scale(1.03);
}
.video-meta {
  position: relative;
  z-index: 2;
  padding: 1rem;
  color: white;
}
.video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 68px;
  height: 68px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  border: 2px solid #39ff14;
  z-index: 3;
}
.video-play::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #39ff14;
}

/* When a card is playing, ensure thumbnail/overlays don't cover the iframe */
.video-card.playing .video-thumb,
.video-card.playing .video-meta,
.video-card.playing .video-play {
  display: none;
}

/* Responsive: collapse to 1 column on small screens */
@media (max-width: 520px) {
  .videos-grid {
    grid-template-columns: 1fr;
  }
  .video-play {
    width: 56px;
    height: 56px;
  }
}

/* Aspect-ratio helper for embedded iframe when loaded */
.video-embed-wrap {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  /* Ensure the wrapper fills the flex item width so percentage padding yields height */
  width: 100%;
  display: block;
  flex: 0 0 100%;
}
.video-embed-wrap iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 5;
}