/*
 * SYNALE · Experimento visual reversível
 * Fundo quadriculado e ícones geométricos discretos nas páginas do site.
 * Para reverter: remover o link de synale-geometry.css nas páginas.
 * O restante da identidade visual (incluindo cards e rodapé) não é alterado.
 */
:root {
  --synale-geometric-pattern: url("/assets/synale-geometric-pattern.svg");
}

/* Início: preserva os efeitos existentes, unificando os grids das seções claras. */
.home-page :is(.about-section,.sinais-section,.founder-section,.courses-section)::before {
  background-image: var(--synale-geometric-pattern);
  background-size: 840px 840px;
  background-repeat: repeat;
  opacity: .75;
}
/* O bloco de parcerias ainda não tinha uma trama externa global. */
.home-page .partnership-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--synale-geometric-pattern);
  background-repeat: repeat;
  background-size: 840px 840px;
  opacity: .60;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 29%, transparent 74%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0%, transparent 29%, transparent 74%, #000 100%);
}
.home-page .partnership-section > .container {
  position: relative;
  z-index: 1;
}

/* Internas: o grid permanece atrás dos conteúdos e das fotos,
   em vez de sobrepor links, imagens, cards ou textos. */
body.catalog-page,
body.course-page,
body.privacy-page {
  background-color: #fdfbff;
  background-image:
    var(--synale-geometric-pattern),
    linear-gradient(180deg,#fdfbff 0%,#fff 45%,#fcf9ff 100%);
  background-repeat: repeat, no-repeat;
  background-size: 840px 840px, 100% 100%;
  background-position: top left, center top;
}

/* Cabeçalhos internos já tinham um grid; acrescenta-se a geometria no
   mesmo lugar, sem criar outra camada por cima dos textos. */
.catalog-page .catalog-hero::before,
.privacy-page .privacy-hero::before {
  background-image: var(--synale-geometric-pattern);
  background-repeat: repeat;
  background-size: 840px 840px;
  opacity: .80;
}

/* Área de destaque das formações: trama sutil, por baixo do conteúdo.
   Os painéis brancos continuam sólidos e legíveis. */
.course-page .course-hero {
  position: relative;
  isolation: isolate;
}
.course-page .course-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--synale-geometric-pattern);
  background-size: 840px 840px;
  opacity: .50;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 39%, transparent 67%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0%, transparent 39%, transparent 67%, #000 100%);
}

/* Em telas pequenas, reduz-se proporcionalmente a trama e os símbolos. */
@media (max-width:700px) {
  .home-page :is(.about-section,.sinais-section,.founder-section,.courses-section)::before,
  .home-page .partnership-section::before,
  .catalog-page .catalog-hero::before,
  .privacy-page .privacy-hero::before,
  .course-page .course-hero::before {
    background-size: 630px 630px;
    opacity: .55;
  }
  body.catalog-page,
  body.course-page,
  body.privacy-page {
    background-size: 630px 630px, 100% 100%;
  }
}