/* =================================================================
   Carolina Vaz Falcon — grupos.css
   Estilos da página "Grupos e Projetos". Herda TODOS os tokens de
   style.css (:root) e reaproveita componentes do site (glass, badges
   dourados, hairlines, sombras, acordeão, faixa CTA). Mobile-first.
   Nenhuma cor hardcoded — só variáveis do :root.
   ================================================================= */

/* Casca da página: compensa o header flutuante + fundo suave (sem hero full-bleed) */
.page-shell {
  padding-top: calc(var(--header-h) + clamp(1rem, .6rem + 1.5vw, 2rem));
  padding-bottom: clamp(2.5rem, 2rem + 3vw, 4rem);
  background:
    radial-gradient(120% 70% at 88% 0%, rgba(227, 199, 126, .16), transparent 60%),
    radial-gradient(80% 50% at 0% 100%, rgba(126, 140, 106, .08), transparent 60%),
    var(--bg);
}

/* ============================== HERO DA PÁGINA ============================== */
.page-hero { position: relative; overflow: hidden; text-align: center; }
.page-hero__deco {
  position: absolute; z-index: 0; pointer-events: none; opacity: .42;
  width: clamp(120px, 18vw, 220px);
}
.page-hero__deco--left  { left: -14px;  top: -10px; transform: scaleX(-1); }
.page-hero__deco--right { right: -14px; bottom: -18px; }
.page-hero__inner { position: relative; z-index: 1; max-width: 780px; margin-inline: auto; }
.page-hero__title {
  font-size: clamp(1.95rem, 1.3rem + 2.5vw, 3rem);
  line-height: 1.12; letter-spacing: -.01em; margin-bottom: 1.2rem;
}
.page-hero__title em { color: var(--gold-dark); font-style: italic; }
.page-hero__lead {
  color: var(--body); font-size: var(--fs-lead); line-height: 1.75;
  max-width: 64ch; margin-inline: auto;
}
.page-hero__lead + .page-hero__lead { margin-top: 1rem; }
.page-hero__actions { margin-top: 1.7rem; }

/* ============================== BLOCO DE TEXTO EDITORIAL ============================== */
.measure { max-width: 760px; margin-inline: auto; }
.measure p { color: var(--body); font-size: var(--fs-lead); line-height: 1.78; }
.measure p + p { margin-top: 1rem; }

/* Observação discreta abaixo de um grupo de cards */
.note {
  margin-top: clamp(1.2rem, .9rem + 1vw, 1.8rem); text-align: center;
  font-size: .88rem; color: var(--muted); font-style: italic; max-width: 60ch;
  margin-inline: auto;
}

/* ============================== GRID DE CARDS GENÉRICO ============================== */
.card-grid { display: grid; grid-template-columns: 1fr; gap: 1.2rem; margin-top: clamp(1.4rem, 1rem + 1.5vw, 2.2rem); }

/* Card de informação (grupos terapêuticos / instituições).
   O <li> (.info-card) é o alvo do reveal do GSAP — recebe transform/transition INLINE,
   por isso a superfície e o hover ficam no .info-card__inner, que o GSAP não toca.
   Assim a transição do hover roda suave (o mesmo padrão dos cards do blog). */
.info-card { display: flex; }
.info-card__inner {
  display: flex; flex-direction: column; gap: .6rem; width: 100%;
  padding: 1.3rem 1.3rem 1.45rem; border-radius: var(--radius);
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform .55s var(--ease-out), box-shadow .55s var(--ease-out), border-color .55s var(--ease-out);
  will-change: transform;
}
.info-card__inner:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .7);
  border-color: rgba(196, 154, 72, .45);
}
.info-card__icon {
  display: grid; place-items: center; flex: none;
  width: 52px; height: 52px; padding: 13px; border-radius: 50%;
  background: var(--white); border: var(--hairline); box-shadow: var(--shadow-sm);
  transition: transform .55s var(--ease-out), border-color .55s var(--ease-out), box-shadow .55s var(--ease-out);
}
.info-card__inner:hover .info-card__icon {
  transform: translateY(-4px) scale(1.08);
  border-color: var(--gold); box-shadow: var(--shadow-gold);
}
.info-card__title {
  font-family: var(--font-display); font-size: var(--fs-h3);
  color: var(--ink); line-height: 1.2;
}
.info-card__text { font-size: .92rem; color: var(--body); line-height: 1.6; }

/* ============================== ACORDEÃO DE CATEGORIAS (PALESTRAS) ============================== */
/* Reaproveita .accordion / .acc-item / .acc-item__chev (style.css) + animação do main.js */
.cat-accordion { max-width: 880px; margin-inline: auto; }
.cat-q { gap: .8rem; }                 /* .acc-item__q já é flex space-between */
.cat-q__head { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.cat-q__icon {
  display: grid; place-items: center; flex: none;
  width: 42px; height: 42px; padding: 10px; border-radius: 50%;
  background: var(--white); border: var(--hairline); box-shadow: var(--shadow-sm);
}
.cat-q__title { line-height: 1.25; }
.cat-desc { color: var(--body); font-size: .95rem; line-height: 1.6; margin-bottom: 1rem; }
.tema-list { display: grid; gap: .55rem; }
.tema-list li {
  position: relative; padding-left: 1.3rem;
  font-size: .92rem; color: var(--body); line-height: 1.5;
}
.tema-list li::before {
  content: ""; position: absolute; left: .25rem; top: .6em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
}

/* ============================== COMO FUNCIONA (passos numerados) ============================== */
.passos { display: grid; grid-template-columns: 1fr; gap: 1.1rem; margin-top: clamp(1.4rem, 1rem + 1.5vw, 2.2rem); }
/* Mesmo padrão dos info-cards: reveal no <li> (.passo), superfície/hover no .passo__inner */
.passo { display: flex; }
.passo__inner {
  position: relative; display: flex; flex-direction: column; gap: .55rem; width: 100%;
  padding: 1.4rem 1.3rem 1.5rem; border-radius: var(--radius);
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform .55s var(--ease-out), box-shadow .55s var(--ease-out);
  will-change: transform;
}
.passo__inner:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.passo__num {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  font-family: var(--font-display); font-weight: 600; font-size: 1.35rem;
  color: var(--white); background: var(--btn);
  box-shadow: 0 12px 26px -12px rgba(181, 130, 60, .6);
}
.passo__title { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--ink); line-height: 1.2; }
.passo__text { font-size: .9rem; color: var(--body); line-height: 1.6; }

/* ============================== REGISTROS, PRIVACIDADE E ÉTICA ============================== */
.etica-card {
  display: flex; gap: 1.1rem; align-items: flex-start;
  max-width: 860px; margin-inline: auto;
  padding: 1.5rem 1.6rem; border-radius: var(--radius);
}
.etica-card__icon {
  display: grid; place-items: center; flex: none;
  width: 50px; height: 50px; padding: 12px; border-radius: 50%;
  background: var(--white); border: var(--hairline); box-shadow: var(--shadow-sm);
}
.etica-card__body p { color: var(--body); font-size: .96rem; line-height: 1.7; }
.etica-card__body p + p { margin-top: .7rem; }

/* ============================== CTA INTERMEDIÁRIO ============================== */
.cta-inline { text-align: center; margin-top: clamp(1.5rem, 1.1rem + 2vw, 2.6rem); }
.cta-inline__text { color: var(--muted); font-size: .98rem; margin-bottom: 1rem; max-width: 52ch; margin-inline: auto; }

/* ============================== BREAKPOINTS ============================== */
@media (min-width: 600px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .tema-list { grid-template-columns: 1fr 1fr; gap: .55rem 1.8rem; }
  .passos { grid-template-columns: repeat(2, 1fr); gap: 1.3rem; }
  .etica-card { padding: 1.7rem 2rem; }
}

@media (min-width: 1024px) {
  .card-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .passos { grid-template-columns: repeat(4, 1fr); }
}