/* ==========================================================
   decoracoes.css — Carrossel de Temas + Galeria em Modal
   Isa Criativa | Seção "Decorações que já criamos"

   Usa exclusivamente os tokens definidos em base.css e reaproveita
   a estrutura genérica de .modal / .modal.is-open / .close-modal
   já definida em css/pages/index.css. Este arquivo cobre apenas
   o que é específico do carrossel de temas e do conteúdo interno
   do modal de galeria.
   ========================================================== */

/* 1. CARROSSEL DE TEMAS — wrapper e viewport
   ========================================================== */
.themes-carousel-wrapper {
  position: relative;
  margin-block: var(--space-10);
}

.themes-carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.themes-carousel::-webkit-scrollbar {
  display: none;
}

.themes-track {
  display: flex;
  gap: var(--space-6);
}

/* 2. CARDS DE TEMA
   ========================================================== */
.theme-card {
  /* Mobile: primeiro card completo, o seguinte aparece pela
       metade ("peek"), replicando a referência do ML.
       Fórmula: largura + gap + 0,5×largura ≈ 100% do container
       → largura ≈ 67%. Ajuste fino aqui se quiser mais/menos peek. */
  flex: 0 0 68%;
  scroll-snap-align: start;
}

.theme-card-btn {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.theme-card-btn:focus-visible {
  outline: 2px solid var(--primary-dark);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

.theme-card-image-wrapper {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-md);
  aspect-ratio: 1 / 1; /* imagens-mestre são 1080×1080 */
  box-shadow: 0 4px 12px var(--shadow-dark-sm);
}

.theme-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow) ease;
}

.theme-card-btn:hover .theme-card-img,
.theme-card-btn:focus-visible .theme-card-img {
  transform: scale(1.1);
}

.theme-card-title {
  margin-top: var(--space-4);
  font-weight: 700;
  color: var(--text-dark);
  font-size: var(--fs-md);
}

/* 3. SETAS DO CARROSSEL DE TEMAS (apenas desktop)
   ========================================================== */
.theme-carousel-arrow {
  display: none;
}

.theme-carousel-arrow[hidden] {
  display: none;
}

@media (min-width: 768px) {
  .theme-card {
    /* Desktop: 4 cards completos por vez, sem peek — a
           navegação passa a ser feita pela seta. */
    flex: 0 0 calc((100% - 3 * var(--space-6)) / 4);
  }

  .theme-carousel-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 40%;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    border: none;
    background-color: var(--color-white-85);
    color: var(--text-dark);
    box-shadow: 0 2px 8px var(--shadow-dark-md);
    cursor: pointer;
    transition:
      background-color var(--transition-fast),
      transform var(--transition-fast);
    z-index: var(--z-raised);
  }

  .theme-carousel-arrow:hover {
    background-color: var(--color-white);
    transform: scale(1.06);
  }

  .theme-carousel-arrow:focus-visible {
    outline: 2px solid var(--primary-dark);
    outline-offset: 2px;
  }

  .theme-carousel-arrow-prev {
    left: var(--space-4);
  }
  .theme-carousel-arrow-next {
    right: var(--space-4);
  }
}

/* 4. MODAL DE GALERIA — conteúdo interno
   ========================================================== */
.theme-modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 720px;
}

.theme-modal-title {
  color: var(--color-white);
  font-size: var(--fs-xl);
  font-weight: 700;
  margin-bottom: var(--space-6);
  text-align: center;
}

/* 5. CARROSSEL DE FOTOS (dentro do modal)
   ========================================================== */
.theme-modal-carousel {
  position: relative;
  width: 100%;
}

.theme-modal-track {
  width: 100%;
}

.theme-modal-slide {
  display: none;
  justify-content: center;
}

.theme-modal-slide.is-active {
  display: flex;
}

.theme-modal-slide img {
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  display: block;
}

/* 6. SETAS DO MODAL
   ========================================================== */
.theme-modal-arrow {
  display: none;
}

#theme-modal-dots {
  text-align: center;
}

@media (min-width: 768px) {
  .theme-modal-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    border: none;
    background-color: var(--color-white-85);
    color: var(--text-dark);
    box-shadow: 0 2px 8px var(--shadow-dark-md);
    cursor: pointer;
    transition: background-color var(--transition-fast);
    z-index: var(--z-raised);
  }

  .theme-modal-arrow:hover {
    background-color: var(--color-white);
  }

  .theme-modal-arrow:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 2px;
  }

  .theme-modal-arrow-prev {
    left: var(--space-6);
  }
  .theme-modal-arrow-next {
    right: var(--space-6);
  }
}

@media (min-width: 768px) {
  .theme-modal-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    border: none;
    background-color: var(--color-white-85);
    color: var(--text-dark);
    box-shadow: 0 2px 8px var(--shadow-dark-md);
    cursor: pointer;
    transition: background-color var(--transition-fast);
    z-index: var(--z-raised);
  }

  .theme-modal-arrow:hover {
    background-color: var(--color-white);
  }

  .theme-modal-arrow:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 2px;
  }

  .theme-modal-arrow-prev {
    left: var(--space-6);
  }
  .theme-modal-arrow-next {
    right: var(--space-6);
  }
}

.theme-modal-counter {
  margin-top: var(--space-5);
  color: var(--color-white);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: center;
}

/* 7. ACESSIBILIDADE — MOVIMENTO REDUZIDO
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  .theme-card-img,
  .theme-carousel-arrow,
  .theme-modal-arrow,
  .theme-modal-content {
    transition: none;
    animation: none;
  }

  .themes-carousel,
  .theme-modal-track {
    scroll-behavior: auto;
  }
}