/* lib/styles/components/sections/hero_section.css */

.hero-section {
  position: relative;
  background-color: var(--color-trust-navy, #0F294A);
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: calc(var(--spacing-xxl, 80px) + var(--spacing-xl, 48px));
  padding-bottom: var(--spacing-xxl, 80px);
}

/* Dignified, subtle radial glow with parallax settling effect */
.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(42, 75, 124, 0.4) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(0, 86, 210, 0.15) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-section::before {
    animation: heroGlowParallax var(--motion-duration-slow, 1.2s) var(--motion-ease-in-out, cubic-bezier(0.4, 0, 0.2, 1)) forwards;
  }
}

@keyframes heroGlowParallax {
  0% {
    transform: scale(1.1);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* --- Layout Container --- */
.hero-section__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-inline: auto;
  /* Ensure container is centered */
  padding-inline: var(--spacing-md, 24px);
  max-width: 1200px;
  /* Allow enough width for the side-by-side layout */

  /* Mobile Default: Stacked & Centered */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-xxl, 80px);
}

@media (min-width: 1024px) {
  .hero-section__inner {
    /* Desktop: Single Row, Side-by-Side */
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    text-align: left;
    /* Left align text block to balance the image on the right */
    gap: var(--spacing-xl, 48px);
  }

  .hero-section__visual-image {
    max-width: 100%;
    min-height: 480px;
    aspect-ratio: 4 / 3;
  }
}

/* --- Content Block --- */
.hero-section__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md, 24px);
  max-width: 680px;
  width: 100%;
  margin-inline: auto;
  /* Center on mobile */
  align-items: center;
  /* Center children on mobile */
}

@media (min-width: 1024px) {
  .hero-section__content {
    margin-inline: 0;
    /* Reset for desktop grid */
    align-items: flex-start;
    /* Align children to left on desktop */
  }
}

/* --- Typography & Badges --- */

.hero-section__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--color-surface, #FFFFFF);
  font-family: var(--font-heading, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--radius-full, 9999px);
  width: fit-content;
}

.hero-section__headline {
  font-family: var(--font-heading, 'Inter', sans-serif);
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 800;
  color: var(--color-surface, #FFFFFF);
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.02em;
}

.hero-section__headline em {
  font-family: var(--font-serif, 'Merriweather', serif);
  font-style: normal;
  font-weight: 400;
  color: var(--color-slate-blue-light, #E8EDF5);
}

.hero-section__subheadline {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 18px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  max-width: 580px;
  margin-inline: auto;
  /* Center on mobile */
}

@media (min-width: 1024px) {
  .hero-section__subheadline {
    margin-inline: 0;
  }
}

/* --- Actions --- */

.hero-section__actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm, 16px);
  margin-top: var(--spacing-sm, 16px);
  width: 100%;
  align-items: center;
  justify-content: center;
}

@media (min-width: 640px) {
  .hero-section__actions {
    flex-direction: row;
  }
}

@media (min-width: 1024px) {
  .hero-section__actions {
    justify-content: flex-start;
    /* Align left on desktop */
  }
}

.hero-section__primary-btn-wrapper button {
  background-color: var(--color-surface, #FFFFFF) !important;
  color: var(--color-trust-navy, #0F294A) !important;
  border-color: var(--color-surface, #FFFFFF) !important;
}

.hero-section__primary-btn-wrapper button:hover {
  background-color: var(--color-slate-blue-light, #E8EDF5) !important;
  border-color: var(--color-slate-blue-light, #E8EDF5) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
}

.hero-section__secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  font-family: var(--font-heading, 'Inter', sans-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-surface, #FFFFFF);
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  transition: all var(--motion-duration-fast, 0.2s) var(--motion-ease-out, ease-out);
}

.hero-section__secondary-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--color-surface, #FFFFFF);
}

/* --- Trust Signals --- */

.hero-section__trust-signals {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  /* Center on mobile */
  width: 100%;
  gap: var(--spacing-lg, 32px);
  margin-top: var(--spacing-md, 24px);
  padding-top: var(--spacing-md, 24px);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

@media (min-width: 1024px) {
  .hero-section__trust-signals {
    justify-content: flex-start;
    /* Align left on desktop */
  }
}

.hero-section__trust-signal {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.hero-section__trust-signal span {
  color: var(--color-slate-blue-light, #E8EDF5);
  font-size: 18px;
}

/* --- Optional Scripture Slot --- */

.hero-section__scripture-slot {
  margin-top: var(--spacing-lg, 32px);
  padding: var(--spacing-md, 24px);
  background-color: rgba(255, 255, 255, 0.05);
  border-left: 4px solid var(--color-slate-blue-light, #E8EDF5);
  border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
  width: 100%;
}

.hero-section__scripture-slot .scripture-callout {
  padding: 0;
  text-align: center;
}

@media (min-width: 1024px) {
  .hero-section__scripture-slot .scripture-callout {
    text-align: left;
    /* Align text left on desktop */
  }
}

.hero-section__scripture-slot .scripture-callout::before {
  display: none;
}

.hero-section__scripture-slot .scripture-callout__text {
  color: var(--color-surface, #FFFFFF);
  font-size: 18px;
  margin-bottom: var(--spacing-sm, 12px);
}

.hero-section__scripture-slot .scripture-callout__citation {
  color: var(--color-slate-blue-light, #E8EDF5);
  font-size: 14px;
}

/* --- Visual Abstract --- */

.hero-section__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 320px;
}

.hero-section__visual-image {
  width: 100%;
  height: auto;
  max-width: 640px;
  border-radius: var(--radius-lg, 16px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  object-fit: cover;
}

.abstract-pillar {
  width: 48px;
  height: 160px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  position: relative;
  z-index: 2;
}

.abstract-pillar--tall {
  height: 240px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
  border-color: rgba(255, 255, 255, 0.3);
}

.abstract-base {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 24px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  z-index: 3;
}

/* =========================================================================
   Choreographed Load Sequence (ScrollReveal Integration)
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {

  .hero-section__badge,
  .hero-section__headline,
  .hero-section__subheadline,
  .hero-section__actions,
  .hero-section__trust-signals,
  .hero-section__scripture-slot,
  .hero-section__visual-image {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--motion-duration-slow, 600ms) var(--motion-ease-out, ease-out),
      transform var(--motion-duration-slow, 600ms) var(--motion-ease-out, ease-out);
  }

  .is-visible .hero-section__badge {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
  }

  .is-visible .hero-section__headline {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.25s;
  }

  .is-visible .hero-section__subheadline {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
  }

  .is-visible .hero-section__actions {
    opacity: 1;
    transform: translateY(0);
    transition-timing-function: var(--motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
    transition-delay: 0.55s;
  }

  .is-visible .hero-section__trust-signals,
  .is-visible .hero-section__scripture-slot {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.7s;
  }

  .is-visible .hero-section__visual-image {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.85s;
  }
}