/* ============================================================
   sections/hero.css  —  HOME HERO (finalized)
   Self-contained styling for the home hero. Safe to hand-tune;
   it won't be regenerated as other sections are built.
   ============================================================ */

.hero {
  background: linear-gradient(180deg,
    #0a0705 0%, #1a0f0a 32%, #3a1d12 68%, #5a3018 100%);
  align-items: stretch;          /* let the content layer fill height */
  --mark-bottom: 25px;           /* emblem distance from hero bottom (desktop) */
}
.hero .container { height: 100%; }

.hero__content { position: relative; height: 100%; }

/* Two-column cluster: slogan (left) | logo + sub-slogan (right) */
.hero__cluster {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: 1.5rem;
  padding-top: calc(var(--header-h) + clamp(1.5rem, 16vh, 10rem));
}

.hero__col--left { text-align: left; }
.hero__col--left .hero__slogan { max-width: none; }

.hero__col--right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}

/* 198 x 140 placeholder for the Bible imagery from the logo.
   Replace the <div> with:
   <img class="hero__logobible" src="/assets/logo-bible.png"
        width="198" height="140" alt=""> */
.hero__logobible {
  width: 198px; height: 140px;
  max-width: 100%;
  display: grid; place-items: center;
  /*border: 1px dashed var(--orange-red-soft);*/
  border-radius: var(--radius);
  color: var(--on-dark-soft);
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  background: rgba(20, 14, 10, 0.35);
}

.hero__subslogan {
  font-family: var(--font-body);
  font-size: clamp(0.85rem, 1.4vw, 1rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--orange-red-soft);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}

/* Series emblem: lower-right, raised off the bottom */
.hero__series {
  position: absolute;
  right: 90px;
  bottom: var(--mark-bottom);
}

/* Mobile: stack, center, let the hero grow */
@media (max-width: 1024px) {
  .hero {
    height: auto;
    min-height: clamp(560px, 90vh, 760px);
    align-items: center;
    padding-block: calc(var(--header-h) + 1.5rem) 2.5rem;
  }
  .hero__content { height: auto; }
  .hero__cluster {
    grid-template-columns: 1fr;
    justify-items: center;
    padding-top: 0;
    row-gap: 1.75rem;
  }
  .hero__col--left { text-align: center; }
  .hero__slogan { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .hero__series {
    position: static;
    margin-top: 2rem;
    display: flex;
    justify-content: center;
  }
}
@media (min-width:601px) and (max-width: 2560px) {
    .hero {
        aspect-ratio: 2560/1278;
        height: auto;
        width: 100%;
        display: block;
    }
}
@media (max-width: 600px) {
    .hero {
        aspect-ratio: 1086/1218;
        height: auto;
        width:100%;
        display:block;
    }
}