/* ==========================================================
   ESCOLA BATISTA VIDA PLENA — Estilos das Páginas de Programa
   ========================================================== */

/* ── Program Hero ────────────────────────────────────────── */
.program-hero {
  min-height: 70vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
}

.program-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.35);
  transform: scale(1.05) translateZ(0);
  transition: transform 8s ease;
  will-change: transform;
}

.program-hero:hover .program-hero-bg {
  transform: scale(1.08);
}

.program-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(8,45,94,0.85) 0%, rgba(76,33,159,0.6) 100%);
}

/* ── English Stars Hero Custom BG ────────────────────────── */
.program-hero-english-stars .program-hero-bg {
  filter: none;
  opacity: 1;
}

.program-hero-english-stars .program-hero-overlay {
  background: linear-gradient(90deg, rgba(35, 8, 48, 0.45) 0%, rgba(35, 8, 48, 0.15) 55%, transparent 100%);
}

.program-hero-content {
  position: relative;
  z-index: 2;
  padding-block: var(--space-24);
  animation: heroIn 0.8s ease both;
}

.program-hero-heading {
  margin: 0 0 var(--space-6) 0;
  display: block;
}

.program-hero-logo {
  height: clamp(75px, 10vw, 105px);
  width: auto;
  max-width: min(420px, 85vw);
  object-fit: contain;
  margin-bottom: 0;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.35));
  display: block;
}

.program-hero-desc {
  font-size: clamp(1.05rem, 1.8vw, 1.15rem);
  color: rgba(255,255,255,0.92);
  line-height: var(--lh-relaxed);
  max-width: 620px;
  margin-bottom: var(--space-8);
  font-weight: var(--fw-medium);
}

.program-hero-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* ── Program Intro ───────────────────────────────────────── */
.program-intro {
  padding-block: var(--space-24);
}

.program-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.program-intro-text h2 {
  font-size: var(--fs-3xl);
  color: var(--color-primary);
  margin-bottom: var(--space-5);
  line-height: var(--lh-tight);
}

.program-intro-text p {
  font-size: var(--fs-md);
  color: var(--color-text-light);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-4);
  font-weight: var(--fw-medium);
}

.program-intro-image {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--color-white);
  border: 1px solid var(--color-gray-light);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-10);
  aspect-ratio: 4/3;
}

.program-intro-image img {
  width: 100%;
  max-width: 380px;
  height: auto;
  max-height: 220px;
  object-fit: contain;
  transition: transform var(--transition-slow);
}

.program-intro-image:hover img {
  transform: scale(1.04);
}

/* ── Benefits ────────────────────────────────────────────── */
.program-benefits {
  padding-block: var(--space-24);
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-4);
}

.benefit-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-gray-light);
  text-align: center;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.benefit-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.benefit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-xl);
  background: rgba(12, 62, 128, 0.07);
  color: var(--color-primary);
  margin-inline: auto;
  margin-bottom: var(--space-4);
  transition: transform var(--transition-normal), background var(--transition-normal), color var(--transition-normal);
}

.benefit-card:hover .benefit-icon {
  background: var(--color-primary);
  color: var(--color-accent);
  transform: translateY(-2px) scale(1.06);
}

.benefit-icon svg {
  width: 32px;
  height: 32px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.benefit-card h3 {
  font-size: var(--fs-lg);
  color: var(--color-primary);
  margin-bottom: var(--space-3);
  font-weight: var(--fw-bold);
}

.benefit-card p {
  font-size: var(--fs-sm);
  color: var(--color-text-light);
  line-height: var(--lh-relaxed);
  font-weight: var(--fw-medium);
}

/* ── Program Destaques (Referência Oficial) ───────────────── */
.program-destaques {
  padding-block: var(--space-20);
  background: var(--color-white);
}

.destaques-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.5vw, 2.5rem);
  font-weight: 800;
  color: #1a2936;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-12);
}

.destaques-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-10);
  max-width: 1100px;
  margin-inline: auto;
  align-items: start;
}

.destaque-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.destaque-img {
  width: 100%;
  max-width: 250px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: var(--space-6);
  transition: transform var(--transition-normal), opacity var(--transition-normal);
}

.destaque-img:hover {
  transform: translateY(-5px);
  opacity: 0.85;
}

.destaque-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #4a5568;
  max-width: 320px;
  margin: 0 auto;
}

.destaque-desc em,
.destaque-desc .fst-italic {
  font-style: italic;
}

@media (max-width: 860px) {
  .destaques-grid {
    gap: var(--space-6);
  }
  .destaque-img {
    max-width: 200px;
  }
}

@media (max-width: 680px) {
  .destaques-grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
  .destaque-img {
    max-width: 220px;
  }
}

/* ── Program CTA ─────────────────────────────────────────── */
.program-cta {
  padding-block: var(--space-20);
  background: var(--gradient-primary);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.program-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../assets/detalhe background.svg') center/cover;
  opacity: 0.05;
  pointer-events: none;
  transform: translateZ(0);
}

.program-cta-content {
  position: relative;
  z-index: 1;
}

.program-cta h2 {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  color: var(--color-white);
  margin-bottom: var(--space-4);
  font-weight: 400;
}

.program-cta p {
  font-size: var(--fs-md);
  color: rgba(255,255,255,0.85);
  margin-bottom: var(--space-8);
  font-weight: var(--fw-medium);
  max-width: 560px;
  margin-inline: auto;
}

.program-cta-actions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Program Breadcrumb ──────────────────────────────────── */
.breadcrumb {
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-gray-light);
  background: var(--color-white);
}

.breadcrumb-inner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-gray);
  font-weight: var(--fw-medium);
}

.breadcrumb-inner a {
  color: var(--color-primary);
  transition: color var(--transition-fast);
}
.breadcrumb-inner a:hover { color: var(--color-primary-dark); }

.breadcrumb-sep {
  color: var(--color-gray-light);
}

/* ── Responsive Program ──────────────────────────────────── */
@media (max-width: 768px) {
  .program-hero-logo {
    height: clamp(55px, 14vw, 75px);
  }

  .program-intro-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .benefits-grid {
    grid-template-columns: 1fr;
  }

  .program-cta h2 {
    font-size: var(--fs-2xl);
  }
}

@media (max-width: 480px) {
  .program-hero-logo {
    height: clamp(50px, 16vw, 65px);
  }
}