@import url('https://fonts.googleapis.com/css2?family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&display=swap');
/* =========================
   ÁGAPE — Site Control CSS
   (layout + seções + componentes do site)
   ========================= */

:root{
  --container-max: 1140px;
  --section-y: clamp(48px, 6vw, 96px);
  --hero-min: 60vh;

  /* Superfícies “áGape” (pra fugir do genérico) */
  --agape-dark-0: #061018;
  --agape-dark-1: #071827;
  --agape-glass: rgba(255,255,255,0.06);
  --agape-glass-border: rgba(255,255,255,0.12);
}

/* Base */
html, body { height: 100%; }
body{
  font-family: "Playfair", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: 0.1px;
}

/* Container mais “church-site”, sem ficar largo demais */
.container{
  max-width: var(--container-max);
}

/* Navbar premium (não briga com o logo) */
.navbar.nav-blur{
  background: rgba(6, 16, 24, 0.55);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Links do menu com detalhe de marca */
.navbar .nav-link{
  position: relative;
  opacity: .92;
}
.navbar .nav-link:hover{ opacity: 1; }
.navbar .nav-link::after{
  content: "";
  position: absolute;
  left: .5rem;
  right: .5rem;
  bottom: .35rem;
  height: 2px;
  background: linear-gradient(90deg, var(--agape-red), var(--agape-sky));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
  border-radius: 99px;
}
.navbar .nav-link:hover::after{ transform: scaleX(1); }

/* Seções */
.section{
  padding: var(--section-y) 0;
}
.section-title{
  font-weight: 700;
  letter-spacing: .2px;
}
.section-subtitle{
  font-size: 1.2rem;
  color: var(--bs-secondary-color);
}



/* Botão ghost padrão do site */
.btn-ghost{
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  background: transparent;
}
.btn-ghost:hover{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.55);
  color:#fff;
}

/* Marca: pequenos detalhes reutilizáveis */
.brand-line{
  height: 3px;
  width: 72px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--agape-red), var(--agape-sky));
}

/* Footer */
.site-footer{
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(6, 16, 24, 0.6);
}

/* =========================
   ÁGAPE — Layout base (migrado do layout.php)
   ========================= */

/* Base do site (mantém coerente com o tema e paleta) */
body{
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
}

/* Navbar blur (classe que você já usa no HTML) */
.nav-blur{
  background: rgba(6, 16, 24, 0.55);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
}

/* HERO genérico (para páginas que usam .hero) */
.hero{
  min-height: 78vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* imagem dinâmica via --hero-image (setada no layout.php) */
.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 600px at 85% 45%, rgba(95,169,221,0.18), transparent 60%),
    linear-gradient(90deg, rgba(6,16,24,0.86), rgba(6,16,24,0.35)),
    var(--hero-image) center/cover no-repeat;
  filter: saturate(1.05);
}

.hero > .container{
  position: relative;
  z-index: 1;
}

/* Botão ghost alinhado à marca */
.btn-ghost{
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  background: transparent;
}
.btn-ghost:hover{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.55);
  color: #fff;
}

/* Cards com “vidro” (identidade) */
.card-glass{
  background: var(--agape-glass);
  border: 1px solid var(--agape-glass-border);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--bs-box-shadow);
}

/* Card glass (marca) */
.card-glass{
  padding: 1.8rem 2rem;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: center;

  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.07),
    rgba(255,255,255,0.03)
  );

  border: 1px solid rgba(255,255,255,0.14);
  transition: transform .35s ease, box-shadow .35s ease;
}

.card-glass:hover{
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
}

.card-glass::after{
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--agape-navy),
    transparent
  );
  opacity: 0;
  transform: scaleX(0);
  transition: opacity .35s ease, transform .35s ease;
}

.card-glass:hover::after{
  opacity: .9;
  transform: scaleX(1);
} 

/* DIA */
.card-day{
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--agape-sky);
  opacity: .85;
}

/* NOME DO CULTO */
.card-title{
  font-family: 'Playfair Display', serif;
  font-size: 1.45rem;
  font-weight: 600;
  color: #fff;
}

/* HORÁRIO (muito importante) */
.card-time{
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--agape-navy);
}

/* TEXTO AUXILIAR */
.card-note{
  font-size: .85rem;
  color: rgba(234,240,255,.75);
}