/* ==========================================================================
   components/hero.css — Hero card + media stack (CLEANED / DEDUPED)
   Landing/Home hero only (NO Topics page banner rules)
   ========================================================================== */

.hero{
  padding-top: 24px;
  padding-bottom: 72px; /* ensures Media begins fully below the Featured+Discover card */
}

.hero-card{
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 8px);
  background: linear-gradient(180deg, rgba(17,21,27,.96), rgba(15,19,25,.96));
  box-shadow: var(--shadow);
}

/* Keep internal glow INSIDE the card */
.hero-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background:
    radial-gradient(800px 320px at 14% 12%, rgba(215,188,161,.22), transparent 62%),
    radial-gradient(640px 260px at 86% 18%, rgba(161,187,215,.18), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0));
  mix-blend-mode: screen;
  opacity: .75;
}

.hero-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 14px 14px;
  opacity:.05;
}

/* HERO CARD — Image inside card */
.hero-card.hero-card--image{
  padding: 0; /* (position/overflow already handled by .hero-card) */
}

/* HERO MEDIA STACK */
.hero-media{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  min-height: 300px;
  max-height: 520px;
  overflow: hidden;
  border-radius: calc(var(--radius) + 6px);
}

/* Background hero image */
.hero-media .hero-bg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  position: relative;
  z-index: 1;
}

/* Gradient overlay */
.hero-media-overlay{
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* Centered title image */
.hero-title-img{
  position: absolute;
  left: 50%;
  top: 15%;
  transform: translate(-50%, -50%);
  width: min(780px, 62%);
  max-width: 780px;
  height: auto;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,.55));
}

/* Tagline overlay sits above everything */
.hero-inner.hero-inner--overlay{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 60px;
  padding: clamp(14px, 2.4vw, 22px);
  text-align: center;
  z-index: 4;
}

/* Stronger “book light” bloom rising into the scene */
.hero-inner.hero-inner--overlay::before{
  content:"";
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -12px;
  width: min(820px, 94vw);
  height: 220px;
  pointer-events:none;
  background:
    radial-gradient(50% 100% at 50% 100%,
      rgba(215,188,161,.34),
      rgba(215,188,161,.14) 38%,
      rgba(80,200,180,.10) 62%,
      rgba(0,0,0,0) 78%);
  filter: blur(18px);
  opacity: .85;
  mix-blend-mode: screen;
}

/* ==========================================================================
   Fancy tagline (depth + smoke ribbon + lacquer + motes + shimmer)
   ========================================================================== */

.hero-tagline--fancy{
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 6px 10px;
  max-width: min(78ch, 92%);
  border-radius: 18px;

  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 18%),
    linear-gradient(180deg, rgba(0,0,0,.88), rgba(0,0,0,.64));

  border: 1px solid rgba(215,188,161,.22);

  box-shadow:
    0 22px 60px rgba(0,0,0,.70),
    0 10px 24px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -10px 18px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(0,0,0,.55);

  color: rgba(248,250,252,.96);
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  font-size: clamp(15px, 1.6vw, 19px);
  font-weight: 500;
  letter-spacing: .015em;
  line-height: 1.42;

  text-shadow:
    0 3px 14px rgba(0,0,0,.92),
    0 0 1px rgba(0,0,0,.75);

  backdrop-filter: blur(10px) saturate(125%);
  -webkit-backdrop-filter: blur(10px) saturate(125%);

  transform: translateZ(0);
  isolation: isolate;

  filter:
    drop-shadow(0 18px 46px rgba(0,0,0,.65))
    drop-shadow(0 0 44px rgba(80,200,180,.14))
    drop-shadow(0 0 34px rgba(161,187,215,.12))
    drop-shadow(0 0 24px rgba(215,188,161,.10));
}

.hero-tagline--fancy::before{
  content:"";
  position:absolute;
  inset: -34px -46px -28px -46px;
  border-radius: 999px;
  pointer-events:none;
  z-index: -1;
  background:
    radial-gradient(55% 120% at 20% 55%, rgba(80,200,180,.24), rgba(0,0,0,0) 62%),
    radial-gradient(55% 120% at 80% 55%, rgba(70,160,220,.20), rgba(0,0,0,0) 64%),
    radial-gradient(70% 120% at 50% 60%, rgba(215,188,161,.16), rgba(0,0,0,0) 70%);
  filter: blur(22px);
  opacity: .95;
  mix-blend-mode: screen;
}

.hero-tagline--fancy::after{
  content:"";
  position:absolute;
  inset: 2px;
  border-radius: inherit;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0) 0%,
      rgba(150,220,255,.00) 35%,
      rgba(200,255,255,.35) 48%,
      rgba(255,255,255,.55) 52%,
      rgba(200,255,255,.35) 56%,
      rgba(150,220,255,.00) 68%,
      rgba(255,255,255,0) 100%),
    radial-gradient(circle at 12% 58%, rgba(255,255,255,.45) 0 1.5px, transparent 3px),
    radial-gradient(circle at 26% 40%, rgba(215,188,161,.55) 0 1.5px, transparent 3px),
    radial-gradient(circle at 38% 65%, rgba(80,200,180,.55) 0 1.5px, transparent 3px),
    radial-gradient(circle at 54% 44%, rgba(255,255,255,.45) 0 1.5px, transparent 3px),
    radial-gradient(circle at 68% 60%, rgba(161,187,215,.55) 0 1.5px, transparent 3px),
    radial-gradient(circle at 82% 42%, rgba(215,188,161,.55) 0 1.5px, transparent 3px);
  background-size:
    260% 100%,
    auto,auto,auto,auto,auto,auto;
  background-position:
    -200% 0,
    0 0,0 0,0 0,0 0,0 0,0 0;
  opacity: .9;
  mix-blend-mode: screen;
  filter: blur(.45px);
  animation: escort-sweep 14s linear infinite reverse;
}

.hero-tagline--fancy strong{
  background: linear-gradient(180deg, #ffe2a6, #caa35d);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  text-shadow:
    0 0 14px rgba(215,188,161,.22),
    0 2px 10px rgba(0,0,0,.85);
}

/* Funnel (3 lines) */
.hero-tagline--funnel-3{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.hero-tagline--funnel-3 .line{
  display:block;
  text-align:center;
  margin: 0 auto;
  white-space: nowrap;
}

.hero-tagline--funnel-3 .line-1{
  font-size: clamp(18px, 2vw, 24px);
  letter-spacing: .01em;
  color: rgba(248,250,252,.96);
}

.hero-tagline--funnel-3 .line-2{
  margin-top: 4px;
  font-size: clamp(16px, 1.7vw, 20px);
  letter-spacing: .015em;
  color: rgba(248,250,252,.96);
  transform: scaleX(.92);
}

.hero-tagline--funnel-3 .line-3{
  margin-top: 6px;
  font-size: clamp(14px, 1.5vw, 18px);
  letter-spacing: .06em;
  text-transform: none;
  color: #FFB13A; /* (  rgba(215,188,161,.95);color) */
  transform: scaleX(.82);
}



@keyframes escort-sweep{
  from{
    background-position:
      -200% 0,
      0 0,0 0,0 0,0 0,0 0,0 0;
    opacity: .4;
  }
  40%{ opacity: .95; }
  to{
    background-position:
      140% 0,
      0 0,0 0,0 0,0 0,0 0,0 0;
    opacity: .4;
  }
}

/* Base tagline (if you ever use .hero-tagline without fancy) */
.hero-tagline{
  font-size: clamp(16px, 1.8vw, 20px);
  max-width: 80ch;
  margin: 0 auto;
}

/* Responsive behavior */
@media (max-width: 760px){
  .hero-inner.hero-inner--overlay{
    bottom: 32px;
    padding: clamp(12px, 2.2vw, 18px);
  }
}

@media (max-width: 640px){
  .hero-media{
    aspect-ratio: 16 / 9;
    min-height: 200px;
  }

  .hero-inner.hero-inner--overlay{
    bottom: 18px;
    padding: 12px 14px;
  }
}

@media (max-width: 430px){
  .hero-inner.hero-inner--overlay{
    bottom: 12px;
    padding: 10px 12px;
  }
}

/* Large screens */
@media (min-width: 1100px){
  .hero-media{
    aspect-ratio: 21 / 9;
    max-height: 540px;
  }
}