/* assets/css/immersive.css – premium immersive theme */

/* 1️⃣ Design tokens */
:root {
  --font-primary: 'Inter', sans-serif;
  --font-secondary: 'Outfit', serif;
  --clr-coral: #FF5A5F;   /* vibrant coral */
  --clr-gold:  #C8A97E;   /* warm gold */
  --clr-cyan:  #00D4FF;   /* fresh cyan */
  --clr-slate: #2C2D33;   /* dark slate for text */
  --gradient-primary: linear-gradient(135deg, var(--clr-coral), var(--clr-gold));
}

/* 2️⃣ Global styles */
body {
  font-family: var(--font-primary);
  background: #FAFAFD;
  color: var(--clr-slate);
}

/* 3️⃣ Hero / intro */
.immersive-section .theme-intro {
  max-width: 900px;
  margin: 0 auto 120px;
  text-align: center;
}
.theme-kicker {
  color: var(--clr-gold);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 25px;
  display: block;
}

/* 4️⃣ Story grid – glass‑morphism cards */
.story-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,0.15);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
.story-image img {
  transition: transform 0.8s cubic-bezier(.2,.8,.2,1);
}
.story-image:hover img {
  transform: scale(1.06);
}

/* 5️⃣ Typography */
h2 { font-family: var(--font-secondary); font-weight: 400; }
.story-content h2 { font-size: 32px; margin-bottom: .8rem; }
.story-content p { font-size: 17px; line-height: 1.7; color: #555; }

/* 6️⃣ Buttons */
.theme-btn {
  background: var(--gradient-primary);
  color: #fff;
  border-radius: 30px;
  padding: .8rem 2rem;
  transition: background .3s;
}
.theme-btn:hover { opacity: .9; }

/* 7️⃣ Responsive tweaks */
@media (max-width: 767px) {
  .story-image-large .story-image,
  .story-image-small .story-image,
  .story-image-wide .story-image,
  .story-image-medium .story-image {
    height: 320px;
  }
}