/* ============================================================
   Elite Luxe Journeys — template-hero-section.css
   Hero Slideshow Template Styles
   ⚠️  All values reference main.css variables — no hardcoding.
   ⚠️  Used across multiple pages — no page-specific overrides here.
   ============================================================ */

/* ── Hero Slideshow Container ──────────────────────────────── */
.hero-slideshow {
  position: relative;
  color: var(--text-white);
  padding: var(--spacing-28) 0 var(--spacing-20);
  margin-bottom: var(--spacing-8);
  overflow: hidden;
  min-height: 60vh;
}

/* ── Background Crossfade Layers ───────────────────────────── */
.hero-bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  transition: opacity var(--transition-slow);
  z-index: var(--z-index-0);
}

.hero-bg-layer-0 {
  opacity: 1;
  z-index: var(--z-index-10);
}

.hero-bg-layer-1 {
  opacity: 0;
  z-index: var(--z-index-0);
}

/* ── Content Layer ─────────────────────────────────────────── */
.hero-slideshow .container {
  position: relative;
  z-index: var(--z-index-30);
}

/* ── Headings ──────────────────────────────────────────────── */
.hero-slideshow h1 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: clamp(var(--text-3xl), 5vw, var(--text-6xl));
  margin-bottom: var(--spacing-5);
  text-shadow: var(--text-shadow-strong);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--text-white);
  animation: fadeInUp 1s ease-out both;
  position: relative;
}

.hero-slideshow h1::after {
  content: "";
  position: absolute;
  bottom: calc(-1 * var(--spacing-3));
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: var(--gradient-gold);
  border-radius: var(--radius-full);
  animation: slideIn 1.5s ease-out;
}

/* ── Lead Paragraph ────────────────────────────────────────── */
.hero-slideshow p {
  font-family: var(--font-primary);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-normal);
  color: var(--color-white-90);
  margin-bottom: var(--spacing-8);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  text-shadow: var(--text-shadow-medium);
  line-height: var(--leading-relaxed);
  animation: fadeInUp 1s ease-out 0.3s both;
}

/* ── Bottom Glow Accent ────────────────────────────────────── */
.hero-glow {
  position: absolute;
  bottom: calc(-1 * var(--spacing-12));
  left: 0;
  width: 100%;
  height: 100px;
  background: radial-gradient(ellipse at center, var(--color-gold-glow) 0%, transparent 70%);
  pointer-events: none;
  z-index: var(--z-index-docked);
}

/* ── Hero Badges ───────────────────────────────────────────── */
.hero-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-3);
  margin-top: var(--spacing-5);
  animation: fadeInUp 1s ease-out 0.6s both;
}

.hero-badges .badge {
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--ls-wide);
  padding: var(--spacing-2) var(--spacing-5);
  border-radius: var(--radius-full);
  background: var(--color-white-20);
  border: 1px solid var(--color-white-30);
  color: var(--text-white);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md);
  transition: var(--transition-elegant);
}

.hero-badges .badge:hover {
  transform: translateY(-3px);
  background: var(--color-white-35);
  box-shadow: var(--shadow-lg);
}

/* ── Badge Color Variants ──────────────────────────────────── */
/* These map to the main.css badge system — use semantic names */
.badge-primary  { background: var(--color-navy)        !important; }
.badge-teal     { background: var(--color-navy-soft)   !important; }
.badge-success  { background: var(--color-success)     !important; }
.badge-info     { background: var(--color-info)        !important; }
.badge-secondary{ background: var(--color-gray-600)    !important; }
.badge-gold     { background: var(--gradient-gold)     !important; }

/* ── Responsive — Tablet ───────────────────────────────────── */
@media (max-width: 768px) {
  .hero-slideshow {
    padding: var(--spacing-20) 0 var(--spacing-16);
    min-height: 50vh;
  }

  .hero-bg-layer {
    background-attachment: scroll; /* Fix iOS parallax bug */
  }

  .hero-slideshow h1 {
    font-size: clamp(var(--text-2xl), 6vw, var(--text-4xl));
  }

  .hero-slideshow p {
    font-size: var(--text-base);
  }

  .hero-badges .badge {
    font-size: var(--text-xs);
    padding: var(--spacing-1-5) var(--spacing-4);
  }
}

/* ── Responsive — Mobile ───────────────────────────────────── */
@media (max-width: 576px) {
  .hero-slideshow {
    padding: var(--spacing-16) 0 var(--spacing-10);
    min-height: 40vh;
  }

  .hero-slideshow h1 {
    font-size: var(--text-3xl);
  }

  .hero-slideshow p {
    font-size: var(--mobile-text-base);
  }

  .hero-badges {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2);
  }

  .hero-badges .badge {
    font-size: var(--mobile-text-xs);
    padding: var(--spacing-1) var(--spacing-3);
  }
}

/* ── Reduced Motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-bg-layer {
    transition: none;
  }

  .hero-slideshow h1,
  .hero-slideshow p,
  .hero-badges {
    animation: none;
  }
}