/* YouTube Vídeos — grade de vídeos (componente e módulo)
   Ajuste as variáveis abaixo no CSS do seu template para mudar o visual. */
.ytv-grid {
  --ytv-gap: 20px;
  --ytv-card-bg: #fff;
  --ytv-card-border: #dfe3e8;
  --ytv-card-radius: 4px;
  --ytv-title-color: #333;
  --ytv-title-hover: #0d47a1;
  --ytv-title-size: 1.05rem;
  --ytv-meta-color: #6c757d;
  --ytv-live-bg: #d62828;

  display: grid;
  grid-template-columns: repeat(var(--ytv-cols, 4), minmax(0, 1fr));
  gap: var(--ytv-gap);
  margin: 0 0 1.5rem;
}

@media (max-width: 991.98px) {
  .ytv-grid { grid-template-columns: repeat(var(--ytv-cols-md, 2), minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
  .ytv-grid { grid-template-columns: repeat(var(--ytv-cols-sm, 1), minmax(0, 1fr)); }
}

.ytv-card {
  background: var(--ytv-card-bg);
  border: 1px solid var(--ytv-card-border);
  border-radius: var(--ytv-card-radius);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}

.ytv-card:hover,
.ytv-card:focus-within {
  box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
  transform: translateY(-2px);
}

.ytv-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.ytv-card__link:hover,
.ytv-card__link:focus { text-decoration: none; }

.ytv-card__link:focus-visible {
  outline: 3px solid var(--ytv-title-hover);
  outline-offset: -3px;
}

.ytv-card__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: #111;
  overflow: hidden;
}

.ytv-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.ytv-card:hover .ytv-card__thumb img { transform: scale(1.04); }

.ytv-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  transform: translate(-50%, -50%);
  opacity: .9;
  transition: transform .2s ease, opacity .2s ease;
  pointer-events: none;
}

.ytv-card__play svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .4)); }

.ytv-card:hover .ytv-card__play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.12);
}

.ytv-card__duration,
.ytv-card__badge {
  position: absolute;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
}

.ytv-card__duration { right: 6px; bottom: 6px; background: rgba(0, 0, 0, .8); }
.ytv-card__badge { left: 6px; top: 6px; text-transform: uppercase; letter-spacing: .03em; }
.ytv-card__badge--live { background: var(--ytv-live-bg); }
.ytv-card__badge--upcoming { background: #495057; }

.ytv-card__body {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 14px 16px 16px;
}

.ytv-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--ytv-title-lines, 2);
  line-clamp: var(--ytv-title-lines, 2);
  overflow: hidden;
  font-size: var(--ytv-title-size);
  line-height: 1.35;
  color: var(--ytv-title-color);
  transition: color .2s ease;
}

.ytv-card:hover .ytv-card__title { color: var(--ytv-title-hover); }

.ytv-card__date,
.ytv-card__desc {
  font-size: .85rem;
  color: var(--ytv-meta-color);
}

.ytv-pagination { margin-top: .5rem; }

.mod-ytvideos__more { text-align: center; margin-top: .25rem; }

@media (prefers-reduced-motion: reduce) {
  .ytv-card, .ytv-card__thumb img, .ytv-card__play { transition: none; }
  .ytv-card:hover, .ytv-card:hover .ytv-card__thumb img { transform: none; }
}