/* =========================================
   BIBLE SEARCH SECTION  BibleSearchSections.css
   Clean, elegant, and user-friendly design for Bible search functionality
========================================= */

/* =========================================
   HERO INTRO SECTION
========================================= */

.hero-intro-section {
  position: relative;
  overflow: hidden;

  max-width: 1200px;
  margin: 80px auto;

  padding: 85px 55px;

  border-radius: 40px;

  background:
    radial-gradient(
      circle at top,
      rgba(255,255,255,0.65),
      transparent 42%
    ),

    linear-gradient(
      180deg,
      #ffffff 0%,
      #f8f4ed 100%
    );

  border: 1px solid rgba(0,0,0,0.06);

  box-shadow:
    0 30px 80px rgba(0,0,0,0.08);

  text-align: center;

  isolation: isolate;
}

/* Decorative glow */

.hero-intro-overlay {
  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at center,
      rgba(255,255,255,0.55),
      transparent 65%
    );

  z-index: 0;
  pointer-events: none;
}

/* Content */

.hero-intro-content {
  position: relative;
  z-index: 2;
}

/* =========================================
   BADGE
========================================= */

.hero-intro-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 11px 24px;
  margin-bottom: 26px;

  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #f5ede2
    );

  border: 1px solid rgba(184,155,112,0.18);

  color: #9a7440;

  font-size: 0.80rem;
  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;

  box-shadow:
    0 10px 24px rgba(0,0,0,0.04);
}

/* =========================================
   TITLE
========================================= */

.hero-intro-section h2 {
  max-width: 920px;

  margin: 0 auto 24px;

  font-family: 'Cinzel', serif;

  font-size: clamp(2.6rem, 5vw, 5rem);

  line-height: 1.08;

  color: #1f2d45;

  letter-spacing: -0.02em;

  text-shadow:
    0 2px 10px rgba(255,255,255,0.4);
}

/* =========================================
   TEXT
========================================= */

.hero-intro-text {
  max-width: 820px;

  margin: 0 auto 52px;

  color: #5f6f86;

  font-size: 1.12rem;

  line-height: 2;

  font-weight: 400;
}

/* =========================================
   VERSE BOX
========================================= */

.hero-intro-verse {
  position: relative;

  max-width: 760px;

  margin: 0 auto 62px;

  padding: 36px 34px;

  border-radius: 30px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.98),
      rgba(255,255,255,0.88)
    );

  border: 1px solid rgba(184,155,112,0.16);

  box-shadow:
    0 20px 50px rgba(0,0,0,0.06);
}

/* Verse glow */

.hero-intro-verse::before {
  content: "";

  position: absolute;
  inset: -2px;

  border-radius: inherit;

  background:
    linear-gradient(
      135deg,
      rgba(184,155,112,0.15),
      transparent 45%
    );

  z-index: -1;
}

.hero-intro-verse p {
  margin: 0 0 18px;

  color: #1f2937;

  font-size: 1.34rem;

  line-height: 1.9;

  font-style: italic;

  font-family: 'Libre Baskerville', serif;

  font-weight: 600;
}

.hero-intro-verse span {
  color: #9a7440;

  font-size: 0.96rem;

  font-weight: 900;

  letter-spacing: 0.05em;
}

/* =========================================
   GRID
========================================= */

.hero-intro-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 28px;
}

/* =========================================
   CARDS
========================================= */

.intro-card {
  position: relative;

  padding: 38px 30px;

  border-radius: 32px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.98),
      rgba(255,255,255,0.90)
    );

  border: 1px solid rgba(15,23,42,0.05);

  box-shadow:
    0 16px 38px rgba(15,23,42,0.05);

  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease;
}

.intro-card:hover {
  transform: translateY(-8px);

  border-color: rgba(184,155,112,0.24);

  box-shadow:
    0 24px 60px rgba(15,23,42,0.10);
}

/* =========================================
   ICON
========================================= */

.intro-icon {
  width: 82px;
  height: 82px;

  margin: 0 auto 24px;

  border-radius: 26px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 2rem;

  background:
    linear-gradient(
      135deg,
      rgba(184,155,112,0.18),
      rgba(255,255,255,0.95)
    );

  color: #8f6d3f;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8);
}

/* =========================================
   CARD TITLE
========================================= */

.intro-card h3 {
  margin-bottom: 16px;

  color: #1f2d45;

  font-family: Georgia, serif;

  font-size: 1.45rem;

  font-weight: 800;
}

/* =========================================
   CARD TEXT
========================================= */

.intro-card p {
  color: #5f6f86;

  line-height: 1.95;

  font-size: 1rem;
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 900px) {

  .hero-intro-grid {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 640px) {

  .hero-intro-section {
    margin: 40px 14px;

    padding: 55px 24px;

    border-radius: 28px;
  }

  .hero-intro-section h2 {
    font-size: 2.5rem;
  }

  .hero-intro-text {
    font-size: 1rem;
  }

  .hero-intro-verse {
    padding: 28px 24px;
  }

  .hero-intro-verse p {
    font-size: 1.08rem;
  }

  .intro-card {
    padding: 30px 24px;
  }

}