/* Materiais — Carrosséis de amostra (v1) */
/* Notas de tamanho (mobile-first):
   - Use imagens otimizadas em WebP.
   - Retrato (capas e páginas): 3:4 (ex.: 900x1200 px para telas 2x), peso < 150 KB.
   - Largura recomendada mobile: 360–430 CSS px => arquivos ~720–900 px (2x DPR).
   - Desktop pode usar 1200–1600 px (srcset responsivo depois, se desejar).
*/

.materials-gallery{
  --m-color: var(--primary-color, #9B6B9E);
  --m-text: var(--text-color, #2D2D2D);
  --m-muted:#6a5f70;
  --m-bg: #fbf8ff;
  --m-shadow: 0 10px 30px rgba(120,60,120,.08);

  padding:3.5rem 0;
  background:linear-gradient(180deg,#fff 0%, var(--m-bg) 100%);
}
.materials-gallery .section-header{ text-align:center; margin:0 0 1.5rem; }
.materials-gallery .title{ font-size:2rem; font-weight:800; color:var(--m-color); margin:0; }
/* Novo subtítulo e prova social abaixo do título */
.materials-gallery .materials-sub{ color:#555; font-size:1.02rem; max-width:820px; margin:.6rem auto 0; }
.materials-gallery .materials-proof{ color:var(--m-color); font-weight:800; margin:.4rem 0 0; }
.materials-gallery .section-header .cta-button{ margin-top:.8rem; }
/* Rodapé da seção: prova + CTA no final */
.materials-gallery .section-footer{ text-align:center; margin-top:1rem; }
.materials-gallery .section-footer .cta-button{ display:inline-flex; align-items:center; justify-content:center; margin-top:.6rem; }

/* Lista de carrosséis empilhados */
.materials-gallery .gallery-list{ display:flex; flex-direction:column; gap:1.2rem; }

.materials-gallery .carousel{ position:relative; background:#fff; border-radius:14px; box-shadow:var(--m-shadow); padding:1rem; }
.materials-gallery .carousel-viewport{ overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; scroll-padding-inline:12px; display:block; }
.materials-gallery .carousel-track{ display:flex; gap:0; padding:0; margin:0; list-style:none; }
.materials-gallery .slide{ scroll-snap-align:start; flex:0 0 100%; max-width:100%; }

/* Mídia */
.materials-gallery .slide figure{ margin:0; max-width:none; }
.materials-gallery .media-placeholder,
.materials-gallery .media-image{ width:100%; border-radius:12px; background:linear-gradient(180deg,#fff,#fbf9ff); border:1px solid rgba(155,107,158,.18); box-shadow:0 8px 22px rgba(30,20,60,.06); }
.materials-gallery .media-placeholder{ aspect-ratio:3/4; display:flex; align-items:center; justify-content:center; color:var(--m-color); font-weight:600; font-size:1rem; }
.materials-gallery .media-image{ height:auto; display:block; object-fit:contain; }
.materials-gallery .slide-caption{
  margin: .75rem auto 0;
  color: var(--m-color);
  font-size: .98rem;
  line-height: 1.35;
  font-weight: 700;
  text-align: center;
  max-width: 92%;
}

/* Controles */
.materials-gallery .carousel-btn{ position:absolute; top:50%; transform:translateY(-50%); background:#fff; border:1px solid rgba(155,107,158,.25); color:var(--m-color); width:38px; height:38px; border-radius:50%; display:grid; place-items:center; box-shadow:0 8px 22px rgba(30,20,60,.06); cursor:pointer; }
.materials-gallery .carousel-btn.prev{ left:8px; }
.materials-gallery .carousel-btn.next{ right:8px; }
.materials-gallery .carousel-btn:focus{ outline:2px solid var(--m-color); outline-offset:2px; }

/* Dots (opcional, apenas decorativo por ora) */
.materials-gallery .carousel-dots{ display:none; justify-content:center; gap:.4rem; margin-top:.6rem; }
.materials-gallery .carousel-dot{ width:7px; height:7px; border-radius:50%; background:rgba(155,107,158,.34); }
.materials-gallery .carousel-dot.is-active{ background:var(--m-color); }

/* Responsivo */
@media (min-width:880px){ .materials-gallery .carousel{ padding:1.1rem; } }