/* ==========================================================
   Nazateen — página de um pilar (pilar.html?id=…):
   topo com a arte, tema, recado, aniversariantes, fotos
   e lightbox.
   ========================================================== */

/* ---------- topo ---------- */
.pilar-top{ position:relative; padding-top:28px; padding-bottom:20px; }
.pilar-top::before{
  content:''; position:absolute; inset:-40px 0 auto; height:520px; z-index:-1; pointer-events:none; filter:blur(60px);
  background:radial-gradient(ellipse 50% 60% at 25% 40%, rgba(212,255,61,.14), transparent 70%);
}
.voltar{
  display:inline-block; margin-bottom:26px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-faint); text-decoration:none;
}
.voltar:hover{ color:var(--accent-soft); }
.pilar-top-grid{ display:grid; grid-template-columns:minmax(0, 300px) minmax(0, 1fr); gap:48px; align-items:center; }
.pilar-arte{
  aspect-ratio:3/4; border-radius:14px; border:1px solid rgba(212,255,61,.5);
  background:var(--bg-elev) center / cover no-repeat;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.8), 0 0 60px rgba(212,255,61,.22);
  transform:perspective(900px) rotateY(8deg) rotateX(2deg);
  -webkit-box-reflect:below 8px linear-gradient(transparent, transparent 70%, rgba(0,0,0,.3));
}
.pilar-arte.is-tipografica{
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:96px; text-transform:uppercase; color:var(--accent);
  text-shadow:.02em .02em 0 #8fae1f, .04em .04em 0 #5f7813, .06em .06em 0 #2f4207;
  background:
    repeating-linear-gradient(135deg, rgba(212,255,61,.07) 0 2px, transparent 2px 12px),
    linear-gradient(160deg, rgba(212,255,61,.32), rgba(14,17,9,.94) 70%);
}
.pilar-nome{
  font-size:clamp(56px, 11vw, 132px); line-height:.88; color:var(--accent);
  text-shadow:
    .01em .01em 0 #a9cf2c, .02em .02em 0 #9dc228, .03em .03em 0 #8fae1f, .04em .04em 0 #7f9c1c,
    .05em .05em 0 #6f8a17, .06em .06em 0 #5f7813, .07em .07em 0 #4f660f, .08em .08em .2em rgba(0,0,0,.6);
}
.pilar-tag{
  display:inline-block; margin-top:18px; padding:4px 11px; border-radius:20px;
  border:1px solid var(--line-paper); background:rgba(9,11,6,.7);
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-soft);
}
.pilar-tag:empty{ display:none; }
.pilar-desc{ max-width:48ch; margin-top:16px; font-size:16px; }
.pilar-acoes{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }

/* aviso em faixa de ingresso */
.pilar-aviso{
  display:flex; align-items:center; gap:16px; margin-top:44px; padding:14px 20px;
  border:1px dashed rgba(212,255,61,.5); border-radius:12px; background:rgba(212,255,61,.06);
}
.pilar-aviso-kicker{
  flex:none; padding:4px 10px; border-radius:20px; background:var(--accent); color:var(--bg);
  font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
}
.pilar-aviso p{ color:var(--text); font-weight:600; font-size:15px; }

@media (max-width:720px){
  .pilar-top-grid{ grid-template-columns:1fr; gap:30px; }
  .pilar-arte{ width:min(230px, 70%); margin-inline:auto; transform:none; -webkit-box-reflect:unset; }
  .pilar-intro{ text-align:center; }
  .pilar-intro .eyebrow{ justify-content:center; }
  .pilar-desc{ margin-inline:auto; }
  .pilar-acoes{ justify-content:center; }
  .pilar-acoes .btn{ flex:1 1 100%; }
  .pilar-aviso{ flex-direction:column; align-items:flex-start; gap:10px; }
}

/* ---------- blocos de conteúdo ---------- */
.pilar-conteudo{ padding-top:40px; }
.pilar-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px; }
.pilar-card-info--wide{ grid-column:1 / -1; }
@media (max-width:720px){ .pilar-grid{ grid-template-columns:1fr; } }
.bloco-titulo{ margin-top:10px; font-size:clamp(28px, 4.4vw, 40px); color:var(--text); line-height:1; }
.bloco-meta{ margin-top:12px; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); }
.is-vazio{ color:var(--text-faint) !important; }
.bloco-titulo.is-vazio{ font-size:clamp(22px, 3.4vw, 28px); }

.bloco-vazio{ margin-top:12px; font-size:15px; color:var(--text-faint); }
.bloco-lead{ margin:10px 0 16px; font-size:14px; }
.bloco-nota{ margin-top:14px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); }
/* destaque (próximo encontro / próxima aula) */
.bloco-destaque{ border-color:rgba(212,255,61,.45); box-shadow:0 0 40px rgba(212,255,61,.08), 0 24px 60px -36px rgba(0,0,0,.8); }
.bloco-destaque .bloco-titulo{ color:var(--accent); }
/* listas de escolas (Connect) e casas (Open House) */
.lista-info{ margin:16px 0 0; padding:0; list-style:none; }
.lista-info li{
  display:grid; grid-template-columns:1fr auto; column-gap:12px; align-items:center;
  padding:12px 0; border-bottom:1px dashed var(--line-bright);
}
.lista-info li:last-child{ border-bottom:0; }
.lista-info b{ color:var(--text); font-size:15px; }
.lista-info span{ grid-column:1; font-size:13px; color:var(--text-dim); }
.lista-info .btn{ grid-column:2; grid-row:1 / span 2; }

.recado{ margin:12px 0 0; }
.recado p{ font-size:16px; color:var(--text); white-space:pre-line; }
.recado p::before{ content:'“'; display:block; height:.5em; margin-bottom:6px; font-family:var(--font-display); font-size:56px; line-height:1; color:var(--accent); }
.recado p.is-vazio::before{ content:none; }
.recado cite{ display:block; margin-top:14px; font-family:var(--font-marker); font-style:normal; font-size:20px; color:var(--accent-soft); }
.recado cite:empty{ display:none; }

/* aniversariantes */
.aniversarios{ display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 0; padding:0; list-style:none; }
.aniversarios li{
  display:inline-flex; align-items:center; gap:10px; padding:8px 14px 8px 8px;
  border:1px solid var(--line-bright); border-radius:999px; background:rgba(9,11,6,.6);
  font-weight:700; font-size:14px; color:var(--text);
}
.aniv-dia{
  display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:28px; padding:0 8px; border-radius:20px;
  background:var(--bg-elev-2); font-family:var(--font-mono); font-size:11px; color:var(--accent-soft);
}
.aniversarios li.is-hoje{ border-color:var(--accent); box-shadow:0 0 24px rgba(212,255,61,.25); }
.aniversarios li.is-hoje .aniv-dia{ background:var(--accent); color:var(--bg); }
.aniversarios li.is-passado{ opacity:.55; }
.aniversarios .is-vazio{ padding:0; border:0; background:none; font-weight:500; }

/* outros pilares: stories viram links */
.outros-pilares .story{ text-decoration:none; }

/* Open House: casas agrupadas por dia da semana (várias casas, dias e bairros) */
.casas-dias{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:4px 28px; margin-top:8px; }
.casas-dia{ padding-top:10px; }
.casas-dia-nome{
  padding-bottom:6px; border-bottom:1px solid var(--line-bright);
  font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
}
.casas-dia .lista-info{ margin-top:0; }

/* o que é o ministério */
.bloco-sobre .bloco-titulo{ color:var(--accent); font-size:clamp(26px, 3.6vw, 36px); line-height:1.05; }
.bloco-sobre p{ max-width:72ch; margin-top:12px; font-size:15.5px; }
.bloco-sobre p:last-child{ color:var(--text); font-weight:600; }

/* sem espaço vazio embaixo do botão enquanto não há mensagem */
.pilar-card-info .form-msg:empty{ min-height:0; margin:0; }

/* Connect: a lista de escolas acompanha a altura do formulário ao lado
   e rola por dentro (height 0 + min-height 100% = não "empurra" a linha) */
.bloco-rolagem{ display:flex; flex-direction:column; }
.bloco-rolagem .lista-info{ min-height:0; overflow-y:auto; padding-right:8px; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:var(--accent-dim) transparent; }
.bloco-rolagem .lista-info::-webkit-scrollbar{ width:6px; }
.bloco-rolagem .lista-info::-webkit-scrollbar-thumb{ background:var(--accent-dim); border-radius:6px; }
@media (min-width:721px){
  .bloco-rolagem:not(.pilar-card-info--wide){ height:0; min-height:100%; }
  .bloco-rolagem .lista-info{ flex:1; }
}
@media (max-width:720px){ .bloco-rolagem .lista-info{ max-height:340px; } }