/* ============================================================
   CCEV — Comunidade Casa Esperança e Vida
   Estilos próprios da unidade. Carrega DEPOIS de /site.css.
   Base: terracota do design compartilhado (--accent) +
   acento "vida" (verde), usado com parcimônia.
   Funciona nos temas claro e escuro (segue o /site.css).
   ============================================================ */

/* ---------- Acento "vida" (verde da CCEV) ---------- */
:root{
  --vida:#2f6b47; --vida-ink:#245538; --vida-soft:#e4efe7; --on-vida:#ffffff;
}
@media (prefers-color-scheme: dark){
  :root{ --vida:#6cc48d; --vida-ink:#8fd6aa; --vida-soft:#18231d; --on-vida:#0e1a12; }
}
:root[data-theme="light"]{
  --vida:#2f6b47; --vida-ink:#245538; --vida-soft:#e4efe7; --on-vida:#ffffff;
}
:root[data-theme="dark"]{
  --vida:#6cc48d; --vida-ink:#8fd6aa; --vida-soft:#18231d; --on-vida:#0e1a12;
}

/* ---------- Fio verde no topo (assinatura da CCEV) ---------- */
.topo-site{border-top:3px solid var(--vida)}
.topo-site .brand img{height:30px}
/* Nome completo da unidade no cabeçalho — pode quebrar em telas estreitas sem estourar a barra */
.topo-site .brand{white-space:normal;line-height:1.14}
@media(max-width:560px){ .topo-site .brand{font-size:.95rem} }

/* Botão "Doar" verde no cabeçalho e como CTA */
.cta.vida{background:var(--vida);color:var(--on-vida)}
.cta.vida:hover{filter:brightness(1.06)}
.topo-site nav a.btn-doar{background:var(--vida);color:var(--on-vida);font-weight:600}
.topo-site nav a.btn-doar:hover{background:var(--vida-ink);color:var(--on-vida)}
@media (prefers-color-scheme: dark){ .topo-site nav a.btn-doar:hover{filter:brightness(1.06)} }

/* ---------- Herói da home ---------- */
.ccev-hero{padding:clamp(2.4rem,7vw,4rem) 0 clamp(1.8rem,5vw,3rem);border-bottom:1px solid var(--line)}
.ccev-hero .hero-grid{display:grid;grid-template-columns:1fr;gap:1.6rem;align-items:center;text-align:center}
.ccev-hero .hero-marca{display:flex;align-items:center;justify-content:center;gap:.7rem;margin:.2rem 0 .1rem}
.ccev-hero .hero-marca img{height:clamp(56px,12vw,82px);width:auto;flex:none}
.ccev-hero h1{margin:.3rem 0 .2rem}
.ccev-hero .lema{font-family:Georgia,serif;font-style:italic;font-size:clamp(1.15rem,3.4vw,1.55rem);
  line-height:1.35;color:var(--vida-ink);margin:.1rem auto .7rem;max-width:24ch}
.ccev-hero .mission{margin-left:auto;margin-right:auto}
.ccev-hero .hero-acao{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:1.1rem}
.ccev-hero .retrato{margin:0 auto;max-width:min(360px,78vw)}
.ccev-hero .retrato img{width:100%;height:auto;border-radius:16px;border:1px solid var(--line);
  box-shadow:0 10px 34px #00000022;display:block}
.ccev-hero .retrato figcaption{text-align:center;margin-top:.5rem}
@media(min-width:820px){
  .ccev-hero .hero-grid{grid-template-columns:1.12fr .88fr;text-align:left}
  .ccev-hero .hero-marca{justify-content:flex-start}
  .ccev-hero .lema{margin-left:0;margin-right:0}
  .ccev-hero .mission{margin-left:0;margin-right:0}
  .ccev-hero .hero-acao{justify-content:flex-start}
  .ccev-hero .retrato{margin:0}
}

/* ---------- Cabeçalho de página com foto (imersivo) ---------- */
.cab-foto{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  padding:clamp(2.6rem,8vw,4.4rem) 0 clamp(1.8rem,5vw,2.6rem)}
.cab-foto .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.cab-foto .veu{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,#20100799 0%,#1a0d06cc 100%)}
.cab-foto .wrap,.cab-foto .wrap-largo{position:relative;z-index:2}
.cab-foto .kicker{color:#ffd9c6}
.cab-foto h1{color:#fff;text-shadow:0 1px 12px #00000040}
.cab-foto .sub{color:#f3e7df;max-width:56ch}

/* ---------- Faixa/seção com acento vida ---------- */
section.vida{background:var(--vida-soft);border-block:1px solid var(--line)}
.faixa-grid{display:grid;grid-template-columns:1fr;gap:1.6rem;align-items:center;margin-top:.4rem}
.faixa-grid figure{margin:0}
.faixa-grid img{width:100%;height:auto;border-radius:14px;border:1px solid var(--line);
  box-shadow:0 6px 20px #00000018;display:block}
@media(min-width:780px){ .faixa-grid{grid-template-columns:1fr 1fr;gap:2rem} }

/* ---------- Valores (lista de princípios) ---------- */
.valores{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1.4rem}
@media(min-width:680px){.valores{grid-template-columns:1fr 1fr}}
.valor{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--vida);
  border-radius:12px;padding:1rem 1.2rem;box-shadow:0 1px 2px #0000000a,0 6px 16px #0000000d}
.valor h3{margin:.1rem 0 .3rem;font-family:Georgia,serif;font-size:1.15rem;color:var(--vida-ink)}
.valor p{margin:0;color:var(--muted)}

/* ---------- Bloco do Intensivão ---------- */
.intensivao{background:var(--vida-soft);border:1px solid var(--line);border-left:5px solid var(--vida);
  border-radius:16px;padding:clamp(1.2rem,4vw,1.8rem);margin-top:1.4rem}
.intensivao .kicker{color:var(--vida-ink)}
.intensivao h2{color:var(--vida-ink)}
.intensivao ul{margin:.6rem 0 0}

/* ---------- Agenda: cartões de evento ao vivo (widget) ---------- */
#eventos-lista .card{border-left:4px solid var(--vida)}
#eventos-lista .kicker{color:var(--vida-ink)}

/* Eventos já no calendário (estáticos) */
.eventos-cal{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1.4rem}
@media(min-width:680px){.eventos-cal{grid-template-columns:1fr 1fr}}
.evento-cal{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--vida);
  border-radius:14px;padding:1.1rem 1.2rem;box-shadow:0 1px 2px #0000000a,0 6px 16px #0000000d}
.evento-cal .quando{display:inline-block;font-family:system-ui,sans-serif;font-weight:700;
  font-size:.82rem;letter-spacing:.02em;color:var(--on-vida);background:var(--vida);
  border-radius:999px;padding:.22rem .75rem;margin-bottom:.55rem}
.evento-cal h3{margin:.1rem 0 .35rem;font-family:Georgia,serif;font-size:1.2rem}
.evento-cal p{margin:.3rem 0;color:var(--muted)}

/* ---------- Como ajudar / Doação ---------- */
.tag-breve{display:inline-block;font-family:system-ui,sans-serif;font-size:.78rem;font-weight:700;
  color:var(--gold-text);background:var(--accent-soft);border-radius:999px;
  padding:.14rem .6rem;margin-left:.5rem;vertical-align:middle}
.doar-card{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:clamp(1.2rem,4vw,1.7rem);box-shadow:0 1px 2px #0000000a,0 6px 16px #0000000d}
.doar-card.pix{border-left:5px solid var(--vida)}
.doar-card h3{margin:.1rem 0 .4rem;font-family:Georgia,serif;font-size:1.3rem}
.doar-lista{display:grid;grid-template-columns:1fr;gap:1.1rem;margin-top:1.4rem}
@media(min-width:720px){.doar-lista{grid-template-columns:1fr 1fr}}

/* ---------- Contato ---------- */
.contato-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1rem;margin-top:1.4rem}
.info-linha{display:flex;gap:.55rem;align-items:flex-start;font-family:system-ui,sans-serif;margin:.55rem 0}
.info-linha .ic{flex:none;font-size:1.1rem;line-height:1.5}
.info-linha a{word-break:break-word}
.como-chegar{margin-top:1.2rem}
.como-chegar li{margin:.4rem 0}

/* ---------- Rodapé: chips que ligam os sites irmãos ---------- */
.rodape-marca{display:flex;gap:.7rem;align-items:center}
.rodape-marca img{height:46px;width:auto;flex:none}
.rodape-parceiros{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;
  padding:1.1rem 0 .2rem;border-top:1px solid var(--line);margin-top:.2rem}
.rodape-parceiros .rp-label{width:100%;font-family:system-ui,sans-serif;font-size:.76rem;
  text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:0}
.rp-chip{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:.45rem .8rem;
  transition:border-color .15s}
.rp-chip img{height:32px;width:auto;display:block;border-radius:6px}
.rp-chip .rp-txt{font-family:Georgia,serif;font-size:.9rem;line-height:1.15;color:var(--ink)}
.rp-chip .rp-txt small{display:block;font-family:system-ui,sans-serif;font-size:.72rem;color:var(--muted);font-weight:400}
.rp-chip:hover{border-color:var(--vida)}
.rp-chip:hover .rp-txt{color:var(--vida-ink)}

/* ---------- Revisão de celular ---------- */
@media(max-width:560px){
  .ccev-hero .hero-marca{flex-wrap:wrap;gap:.45rem .6rem}
  .ccev-hero .hero-marca img{height:56px}
  .ccev-hero h1{font-size:clamp(1.9rem,9vw,2.5rem);line-height:1.12}
  .ccev-hero .hero-acao{flex-direction:column;align-items:stretch}
  .ccev-hero .hero-acao .cta{width:100%;justify-content:center}
}