/* Páginas internas: Sobre, Radicais Kids e Oferta online. */
@layer pages {
  /* Sobre: texto longo com medida confortável e a citação bíblica em destaque. */
  .prose > * + * { margin-top: var(--space-4); }
  .prose p { max-width: 64ch; }
  .verse { padding: var(--space-4) 0 var(--space-4) var(--space-5); border-left: 3px solid var(--c-2); font: var(--weight-subheading) 1.0625rem/1.6 var(--font-subheading); }
  .verse cite { display: block; margin-top: var(--space-2); font: 600 .875rem/1.4 var(--font-body); font-style: normal; color: var(--c-muted); }
  .vision-band { background: var(--surface-2-mix); }
  .vision-band blockquote { margin-top: var(--space-4); max-width: 34ch; font: var(--weight-subheading) clamp(1.1875rem, 1.02rem + .8vw, 1.625rem)/1.5 var(--font-subheading); }

  /* Equipe pastoral: retratos uniformes; o do meio desce um pouco no desktop. */
  .team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); list-style: none; }
  .team-member .media-slot, .team-member img { --ratio: 4 / 5; }
  .team-member h3 { margin-top: var(--space-3); font-size: 1.125rem; }
  .team-member p { font-size: var(--text-small); color: var(--c-muted); }
  @media (min-width: 768px) { .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); } .team-grid > :nth-child(3n + 2) { transform: translateY(14px); } }

  .info-list { display: grid; gap: 0; margin-top: var(--space-5); }
  .info-list > div { display: grid; gap: var(--space-1); padding-block: var(--space-4); border-top: 1px solid var(--border-subtle); }
  .info-list dt { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--c-muted); }
  .info-list dd { margin: 0; font-weight: 600; }
  @media (min-width: 640px) { .info-list > div { grid-template-columns: 11rem minmax(0, 1fr); gap: var(--space-5); align-items: baseline; } }

  /* Convite final: faixa escura com a ação principal. */
  .invite { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); padding: var(--space-6) var(--space-5); border-radius: var(--radius); }
  .invite p { margin-top: var(--space-3); max-width: 44ch; }
  .invite .ornament { right: -8px; bottom: -18px; width: 104px; --turn: -12deg; opacity: .9; }
  @media (min-width: 768px) { .invite { flex-direction: row; align-items: center; justify-content: space-between; padding: var(--space-7); } .invite .actions { flex: none; } }

  /* Radicais Kids: estrutura em três cards da tríade. */
  .kids-structure { display: grid; gap: var(--space-4); list-style: none; }
  .kids-structure .card h3 { color: var(--c-ink); }
  @media (min-width: 900px) { .kids-structure { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } .kids-structure > :nth-child(2) { transform: translateY(24px); } }

  /* Processo espiritual: três etapas ligadas por uma linha na cor de cada etapa. */
  .process { display: grid; gap: var(--space-5); list-style: none; counter-reset: step; }
  .process li { position: relative; padding-left: 62px; min-height: 58px; --step-color: var(--c-1); }
  .process li:nth-child(2) { --step-color: var(--c-2); }
  .process li:nth-child(3) { --step-color: var(--c-3); }
  .process-number { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--step-color); border-radius: 50%; background: var(--surface-page); font-size: .875rem; font-weight: 600; }
  .process li:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 50px; bottom: calc(-1 * var(--space-5) + 6px); width: 2px; background: linear-gradient(180deg, var(--step-color), color-mix(in srgb, var(--c-ink) 12%, transparent)); }
  .process h3 { padding-top: 6px; }
  .process p { margin-top: var(--space-2); color: var(--c-muted); }
  @media (min-width: 900px) {
    .process { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); text-align: center; }
    .process li { padding-left: 0; }
    .process-number { position: static; margin: 0 auto var(--space-3); }
    .process li:not(:last-child)::after { top: 21px; bottom: auto; left: calc(50% + 32px); right: calc(-50% + 0px); width: auto; height: 2px; background: linear-gradient(90deg, var(--step-color), color-mix(in srgb, var(--c-ink) 12%, transparent)); }
    .process p { margin-inline: auto; max-width: 30ch; }
  }

  .projects { display: grid; gap: var(--space-4); list-style: none; }
  .projects h3 { font-size: 1.25rem; }
  .projects p { color: var(--c-muted); }
  @media (min-width: 768px) { .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); } }

  /* Oferta: escolha do modo de ofertar; sem JS, os três aparecem em sequência. */
  .giving-tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-5); padding: 4px; border: 1px solid var(--line-ink); border-radius: calc(var(--radius) + 4px); background: var(--surface-card); }
  .giving-tabs button { flex: 1; min-height: 48px; padding: 8px 12px; border: 2px solid transparent; border-radius: var(--radius); background: transparent; font-weight: 600; cursor: pointer; }
  .giving-tabs button[aria-selected="true"] { background: linear-gradient(var(--c-ink), var(--c-ink)) padding-box, var(--brand-gradient) border-box; color: var(--c-base); }
  .giving-panel + .giving-panel { margin-top: var(--space-6); }
  .js .giving-panel + .giving-panel { margin-top: 0; }
  .giving-panel { padding: var(--space-5); background: var(--surface-card); border: 1px solid var(--line-ink); border-radius: 4px 4px 32px 4px; }
  .giving-panel h2 { font: var(--weight-subheading) var(--text-h3)/1.35 var(--font-subheading); }
  .giving-panel > p { margin-top: var(--space-3); color: var(--c-muted); }
  .pix-layout { display: grid; gap: var(--space-5); margin-top: var(--space-5); }
  .pix-layout .media-slot { --ratio: 1; width: min(220px, 100%); }
  .copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-3); }
  .copy-status { font-size: var(--text-small); color: var(--c-1); min-height: 1.5em; }
  @media (min-width: 640px) { .pix-layout { grid-template-columns: 220px minmax(0, 1fr); align-items: center; } }
  @media (min-width: 768px) { .giving-panel { padding: var(--space-6); } }

  .other-ways { display: grid; gap: var(--space-4); list-style: none; }
  .other-ways li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
  .other-ways svg { width: 24px; height: 24px; margin: 10px; color: var(--accent); }
  .other-ways strong { display: block; font-family: var(--font-subheading); font-weight: var(--weight-subheading); font-size: 1.125rem; }
  @media (min-width: 900px) { .other-ways { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } }
}

@layer pages {
  /* Radicais Kids: o logo do ministério ocupa o lugar do título na capa. */
  .kids-palette .page-hero h1 { max-width: none; }
  .kids-palette .page-hero .kids-logo { width: clamp(150px, 42vw, 230px); height: auto; filter: drop-shadow(0 10px 24px rgb(0 0 0 / .25)); }
  .kids-palette .invite { background: var(--kids-purple); }
  .kids-palette .invite .ornament-art { width: 96px; right: -6px; bottom: -14px; --turn: 12deg; opacity: 1; }
}

@layer pages {
  /* Pastores: retrato do casal ao lado do nome e da função. */
  .pastors { align-items: center; }
  .pastors-role { font: var(--weight-subheading) .8125rem/1.4 var(--font-subheading); letter-spacing: .14em; text-transform: uppercase; color: var(--c-1); }
  .pastors h3 { margin-top: var(--space-2); font-size: var(--text-section-title); }
  .pastors .pending { min-width: 14rem; }
}

@layer pages {
  /* Faixas etárias do Domingo Kids: arcos na cor de cada turma, com a idade em destaque. */
  .age-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); list-style: none; }
  .age-groups li { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
  .age-range { display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 1.05; border-radius: 50% 50% var(--radius) var(--radius); background: color-mix(in srgb, var(--accent-soft) 70%, var(--c-base)); color: var(--c-ink); font: var(--weight-display) clamp(1.375rem, 1rem + 2.4vw, 2.75rem)/1 var(--font-display); }
  .age-groups h3 { margin-top: var(--space-3); font-size: 1.0625rem; }
  .age-groups p { font-size: var(--text-small); color: var(--c-muted); }
  .kids-palette .age-groups > :nth-child(3) .age-range { background: var(--kids-yellow); }
  @media (min-width: 768px) { .age-groups { gap: var(--space-5); max-width: 560px; } }
  .process-verse { font: var(--weight-subheading) .9375rem/1.55 var(--font-subheading); color: var(--c-ink); }
  .process p + p { margin-top: var(--space-3); }
}

@layer pages {
  /* Mapa da igreja com a mesma moldura em degradê das fotos. */
  .map-embed { margin: 0; border: 2px solid transparent; border-radius: var(--radius); background: var(--brand-gradient) border-box; overflow: hidden; }
  .map-embed iframe { display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; }
}