/* Home: destaques da capa (igreja e Radicais Kids), próximos passos, visão, cultos e ofertas. */
@layer pages {
  /* Capa em destaques: a igreja primeiro, depois o Radicais Kids. Sem JS, os dois aparecem em sequência. */
  .hero { position: relative; isolation: isolate; overflow: clip; background: linear-gradient(to top, var(--surface-page) 4px, transparent 4px), radial-gradient(110% 80% at 90% 15%, var(--hero-glow) 0, var(--c-ink) 62%); color: var(--c-base); --focus-ring: var(--c-base); }
  /* A faixa clara na base do fundo evita a linha escura quando a altura termina em fração de pixel. */
  .slides { display: grid; }
  .slide { position: relative; isolation: isolate; display: flex; align-items: center; min-height: clamp(440px, 58svh, 540px); }
  /* Capa mais baixa: ao abrir, aparecem os destaques, os botões e o começo da visão. */
  @media (min-width: 768px) { .slide { min-height: clamp(420px, 58vh, 560px); } }
  .js .slide { grid-area: 1 / 1; opacity: 0; pointer-events: none; }
  .js .slide.is-active { opacity: 1; pointer-events: auto; }
  .slide > .hero-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; filter: brightness(.9); }
  .slide-kids > .hero-photo { object-position: center 30%; }

  /* Boas-vindas como na referência: foto em tons da marca, símbolo em círculo e o lema da igreja. */
  .slide-church > .hero-photo { filter: grayscale(1) contrast(1.05) brightness(.95); }
  .hero .slide-church::after { background: linear-gradient(180deg, #1b2134b3 0, transparent 160px), linear-gradient(120deg, color-mix(in srgb, var(--c-1) 78%, transparent) 0, color-mix(in srgb, var(--c-2) 80%, transparent) 55%, color-mix(in srgb, var(--c-3) 78%, transparent) 100%); }
  .church-welcome { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); text-align: center; }
  .welcome-mark { position: relative; display: block; width: clamp(80px, 21vw, 140px); aspect-ratio: 1; flex: none; border: 3px solid #fff; border-radius: 50%; }
  .welcome-mark::before { content: ""; position: absolute; inset: 16%; background: #fff; -webkit-mask: url('../img/marca/videira-simbolo.png') center / contain no-repeat; mask: url('../img/marca/videira-simbolo.png') center / contain no-repeat; }
  .hero .church-welcome h1 { max-width: 14ch; margin: 0 auto; text-shadow: 0 2px 18px rgb(0 0 0 / .18); }
  .welcome-motto { margin-top: var(--space-3); font: var(--weight-subheading) var(--text-lead)/1.4 var(--font-subheading); }
  @media (min-width: 768px) {
    /* No desktop o símbolo fica à esquerda e o texto à direita, o lema alinhado ao fim do título. */
    .church-welcome { flex-direction: row; justify-content: center; gap: clamp(24px, 3vw, 40px); text-align: left; }
    .hero .church-welcome h1 { max-width: none; margin: 0; }
    .welcome-motto { text-align: right; }
  }

  /* No celular o texto ocupa a largura toda: o véu desce de cima e fica mais leve na base. */
  .slide::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #1b2134f0 0, #1b2134c7 45%, #1b213480 75%, #1b213433 100%); }
  .slide-kids::after { background: linear-gradient(180deg, color-mix(in srgb, var(--kids-purple) 92%, #000) 0, color-mix(in srgb, var(--kids-purple) 78%, transparent) 50%, color-mix(in srgb, var(--kids-purple) 35%, transparent) 100%); }
  @media (min-width: 900px) {
    /* No desktop o véu fica só na faixa do texto e do menu; a foto continua sendo o foco. */
    .slide::after { background: linear-gradient(180deg, #1b2134dd 0, #1b213488 120px, transparent 260px), linear-gradient(90deg, #1b2134e6 0, #1b2134b3 38%, #1b213426 72%, transparent 100%); }
    .slide-kids::after { background: linear-gradient(180deg, #1b2134cc 0, transparent 220px), linear-gradient(90deg, color-mix(in srgb, var(--kids-purple) 95%, #000) 0, color-mix(in srgb, var(--kids-purple) 80%, transparent) 40%, transparent 78%); }
    .slide-kids > .hero-photo { object-position: 80% 30%; }
  }

  .hero-content { padding-block: 96px 104px; }
  .hero-welcome { color: var(--c-1-soft); font: var(--weight-subheading) 1.0625rem/1.3 var(--font-subheading); }
  .hero h1 { margin-top: var(--space-3); font-size: var(--text-hero); max-width: 12ch; }
  .hero .lead { margin-top: var(--space-4); max-width: 34ch; color: var(--on-dark-muted); }
  .hero .actions { margin-top: var(--space-6); }
  .kids-title img { width: min(250px, 70%); height: auto; filter: drop-shadow(0 8px 18px rgb(0 0 0 / .3)); }
  .slide-kids .lead { max-width: 38ch; }
  .hero .wave { position: absolute; bottom: -1px; left: 0; z-index: 3; height: clamp(48px, 8vw, 120px); fill: var(--surface-page); }
  .hero .ornament { z-index: 4; right: 16px; bottom: 26px; width: clamp(60px, 13vw, 150px); }
  @media (min-width: 768px) { .hero-content { padding-block: 108px 104px; } .hero .ornament { right: var(--gutter); } }

  /* Barras discretas de progresso sobre a foto, acima da curva. */
  .slider-controls { position: absolute; z-index: 4; left: 50%; transform: translateX(-50%); bottom: clamp(44px, 6vw, 88px); --focus-ring: var(--c-base); }
  .slide-choices { display: flex; width: clamp(150px, 22vw, 240px); gap: 10px; }
  .slide-choices button { position: relative; flex: 1; min-height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
  .slide-choices button::before, .slide-progress { position: absolute; bottom: 20px; left: 0; width: 100%; height: 3px; border-radius: 3px; }
  .slide-choices button::before { content: ""; background: color-mix(in srgb, var(--c-base) 40%, transparent); }
  .slide-choices button:hover::before { background: color-mix(in srgb, var(--c-base) 66%, transparent); }
  .slide-progress { background: var(--c-base); transform: scaleX(0); transform-origin: left; }


  /* Botões principais em destaque logo abaixo da capa, sobre o fundo neutro da página. */
  .quick-actions { padding-block: var(--space-3) var(--space-5); }
  .quick-actions-inner { display: flex; flex-direction: column; gap: var(--space-3); max-width: 420px; }
  /* Ícones próprios (casa da célula, cruz com luz do Encontro) um pouco maiores para serem lidos. */
  .quick-actions .button svg { width: 24px; height: 24px; }
  .quick-actions .button { min-height: 56px; font-size: 1.0625rem; box-shadow: 0 6px 18px color-mix(in srgb, var(--c-ink) 22%, transparent); }
  @media (min-width: 768px) {
    .quick-actions { padding-block: var(--space-4) var(--space-6); }
    .quick-actions-inner { flex-direction: row; justify-content: center; max-width: var(--container); gap: var(--space-6); }
    .quick-actions .button { min-width: 260px; }
  }

  /* Visão: frase da igreja em destaque, com espaço para a foto. */
  .vision { background: var(--surface-2-mix); padding-top: var(--space-5); }
  @media (min-width: 768px) { .vision { padding-top: var(--space-6); } }
  .vision blockquote { margin-top: var(--space-4); font: var(--weight-subheading) clamp(1.1875rem, 1.02rem + .8vw, 1.625rem)/1.5 var(--font-subheading); max-width: 32ch; }
  .vision .text-link { margin-top: var(--space-5); }

  /* Cultos e endereço: informação prática, legível sem abrir nada. */
  .visit-list { display: grid; gap: var(--space-4); margin-top: var(--space-5); list-style: none; }
  .visit-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
  .visit-list svg { width: 24px; height: 24px; margin: 10px; color: var(--c-1); }
  .visit-list strong { display: block; font-family: var(--font-subheading); font-weight: var(--weight-subheading); font-size: 1.125rem; }
  .visit .actions { margin-top: var(--space-6); }

  /* Ofertas: bloco escuro com a cor percorrendo o contorno. */
  .giving { 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); }
  .giving p { margin-top: var(--space-3); max-width: 44ch; }
  @media (min-width: 768px) { .giving { flex-direction: row; align-items: center; justify-content: space-between; padding: var(--space-7); } .giving .button { flex: none; } }
}

@layer motion {
  .js .slide { transition: opacity 1200ms ease-in-out; }
  @property --border-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
  .giving { border: 4px solid transparent; background: linear-gradient(var(--c-ink), var(--c-ink)) padding-box, conic-gradient(from var(--border-angle), var(--c-1), var(--c-1-soft), var(--c-2), var(--c-3), var(--c-3-soft), var(--c-1)) border-box; animation: border-flow 8s linear infinite; }
  @keyframes border-flow { to { --border-angle: 360deg; } }
}

@layer pages {
  /* Par de fotos: a principal à direita e uma menor sobreposta na base, com sombra suave. */
  .photo-pair { position: relative; padding-bottom: 16%; }
  .photo-pair-main { width: 88%; margin-left: auto; --ratio: 4 / 3; }
  .photo-pair-inset { position: absolute; left: 0; bottom: 0; width: 46%; aspect-ratio: 4 / 3; object-fit: cover; border: 2px solid transparent; border-radius: var(--radius); background: var(--brand-gradient) border-box; box-shadow: 0 9px 22px color-mix(in srgb, var(--c-ink) 18%, transparent); }
}