/*
 * YouTube Carousel - Hygienize Child (HYG-011)
 *
 * Carrossel horizontal com scroll nativo (scroll-snap), sem biblioteca de
 * carrossel. Os botoes de navegacao apenas chamam scrollBy() no track
 * (ver assets/js/main.js, modulo youtubeCarousel) — em telas de toque o
 * usuario tambem pode arrastar direto, sem nenhum JS extra para isso.
 *
 * Breakpoints alinhados com o resto do tema (ver services-grid.css):
 * tablet <= 999px, mobile <= 689px.
 */

/* Faixa em largura total com a cor primaria do tema — mesmo padrao ja
   usado na barra de CTA (cta.css: fundo --hyg-color-primary, texto
   --hyg-color-on-primary, botao --hyg-btn--secondary-invert). Espacamento
   vertical um pouco menor que o padrao (.hyg-section = 64px) para a secao
   nao ficar distante do resto da pagina. */
.hyg-yt-carousel {
  background-color: var(--hyg-color-primary);
  padding-block: var(--hyg-space-6);

  /* Full-bleed garantido por conta propria (nao depende do CSS do
     Stackable/Blocksy para a classe alignfull) — a secao vive dentro do
     conteudo Gutenberg da pagina Sobre (.entry-content.is-layout-constrained),
     que limita a largura dos blocos filhos por padrao. */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.hyg-yt-carousel .hyg-section-title h2 {
  color: var(--hyg-color-on-primary);
}

.hyg-yt-carousel .hyg-section-title__subtitle {
  color: var(--hyg-color-on-primary);
  opacity: 0.85;
}

.hyg-yt-carousel__wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--hyg-space-3);
}

.hyg-yt-carousel__track {
  display: flex;
  gap: var(--hyg-space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  list-style: none;
  margin: 0;
  padding: var(--hyg-space-2) 0 var(--hyg-space-4);
  flex: 1;

  /* Esconde a barra de rolagem nativa — a navegacao visivel e pelos
     botoes de seta ou por arrastar/deslizar. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.hyg-yt-carousel__track::-webkit-scrollbar {
  display: none;
}

.hyg-yt-carousel__item {
  /* 5 cards visiveis no desktop (o carrossel pode ter mais itens que isso
     — ver limite em inc/dynamic-content.php — os demais ficam disponiveis
     rolando/pelas setas). */
  flex: 0 0 calc(20% - var(--hyg-space-5) * 4 / 5);
  scroll-snap-align: start;
}

.hyg-yt-carousel__nav {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--hyg-radius-full);
  border: 1px solid var(--hyg-color-border);
  background-color: var(--hyg-color-background);
  color: var(--hyg-color-text);
  cursor: pointer;
  transition: background-color var(--hyg-transition-base), color var(--hyg-transition-base);
}

.hyg-yt-carousel__nav:hover {
  background-color: var(--hyg-color-primary);
  color: var(--hyg-color-on-primary);
  border-color: var(--hyg-color-primary);
}

/* A secao agora tem fundo --hyg-color-primary (ver acima) — o hover
   padrao do botao (fundo --hyg-color-primary tambem) ficaria invisivel
   contra ele, entao aqui o hover inverte: fica branco com icone azul. */
.hyg-yt-carousel .hyg-yt-carousel__nav {
  border-color: rgba(255, 255, 255, 0.4);
}

.hyg-yt-carousel .hyg-yt-carousel__nav:hover {
  background-color: var(--hyg-color-on-primary);
  color: var(--hyg-color-primary);
  border-color: var(--hyg-color-on-primary);
}

.hyg-yt-carousel__nav:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.hyg-yt-carousel__footer {
  display: flex;
  justify-content: center;
  margin-top: var(--hyg-space-5);
}

/* ---- Card ---- */
.hyg-yt-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  border: 1px solid var(--hyg-color-border);
  border-radius: var(--hyg-radius-lg);
  background-color: var(--hyg-color-background);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  box-shadow: var(--hyg-shadow-sm);
  transition: box-shadow var(--hyg-transition-base), transform var(--hyg-transition-base);
}

.hyg-yt-card:hover,
.hyg-yt-card:focus-visible {
  box-shadow: var(--hyg-shadow-lg);
  transform: translateY(-4px);
}

.hyg-yt-card__media {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  background-color: var(--hyg-color-surface);
}

.hyg-yt-card__thumb {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.hyg-yt-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hyg-yt-card__play svg {
  filter: drop-shadow(0 2px 6px rgba(17, 24, 39, 0.35));
}

.hyg-yt-card__body {
  padding: var(--hyg-space-3) var(--hyg-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--hyg-space-1);
}

.hyg-yt-card__title {
  font-family: var(--hyg-font-family-base);
  font-size: var(--hyg-font-size-small);
  font-weight: var(--hyg-font-weight-semibold);
  color: var(--hyg-color-text);
  line-height: var(--hyg-line-height-body);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hyg-yt-card__date {
  font-family: var(--hyg-font-family-base);
  font-size: 0.75rem;
  color: var(--hyg-color-text-muted);
}

/* ---- Modal ---- */
.hyg-yt-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--hyg-space-4);
}

.hyg-yt-modal[hidden] {
  display: none;
}

/* Aplicada ao <body> via classList (JS) enquanto o modal esta aberto —
   trava o scroll da pagina por baixo do modal, sem style inline. */
body.hyg-yt-modal-open {
  overflow: hidden;
}

.hyg-yt-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(17, 24, 39, 0.85);
}

.hyg-yt-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 420px;
  z-index: 1;
}

.hyg-yt-modal__close {
  position: absolute;
  top: calc(-1 * var(--hyg-space-6));
  right: 0;
  border: none;
  background: transparent;
  color: var(--hyg-color-on-primary);
  cursor: pointer;
  padding: var(--hyg-space-1);
}

.hyg-yt-modal__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  background-color: #000;
  border-radius: var(--hyg-radius-md);
  overflow: hidden;
}

.hyg-yt-modal__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---- Tablet ---- */
@media screen and (max-width: 999px) {
  .hyg-yt-carousel__item {
    flex-basis: calc(50% - var(--hyg-space-5) / 2);
  }

  .hyg-yt-carousel__nav {
    width: 36px;
    height: 36px;
  }
}

/* ---- Mobile ---- */
@media screen and (max-width: 689px) {
  .hyg-yt-carousel__item {
    flex-basis: 85%;
  }

  .hyg-yt-carousel__wrapper {
    gap: var(--hyg-space-2);
  }
}