/* ====================== HADITHI YA JOHN - Storytelling Timeline ====================== */

.hadithi-hero {
  background: radial-gradient(ellipse at top, #2a1f14 0%, var(--dark-earth) 55%, #0d0806 100%);
  padding: 100px 0 80px;
  text-align: center;
  color: var(--warm-cream);
  position: relative;
  overflow: hidden;
}

.hadithi-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(201,138,44,0.08) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.6;
}

.hadithi-hero .eyebrow {
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--amber-gold);
  font-weight: 700;
}

.hadithi-hero h1 {
  font-family: "Georgia", "Playfair Display", serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  margin: 14px 0 18px;
}

.hadithi-hero p {
  max-width: 620px;
  margin: 0 auto;
  color: rgba(250, 246, 240, 0.75);
  font-size: 1.05rem;
}

/* ---------------- Timeline Wrapper ---------------- */
.hadithi-timeline {
  background: var(--dark-earth);
  position: relative;
  padding: 40px 0 100px;
}

.hadithi-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, rgba(201,138,44,0.05) 0%, rgba(201,138,44,0.55) 50%, var(--amber-gold) 100%);
  transform: translateX(-50%);
}

@media (max-width: 991px) {
  .hadithi-line { left: 28px; }
}

.hadithi-stage {
  position: relative;
  display: flex;
  margin-bottom: 90px;
}

.hadithi-stage:last-child { margin-bottom: 0; }

.hadithi-stage .hadithi-dot {
  position: absolute;
  left: 50%;
  top: 30px;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--amber-gold);
  box-shadow: 0 0 0 6px rgba(201,138,44,0.15), 0 0 25px rgba(201,138,44,0.6);
  z-index: 3;
}

@media (max-width: 991px) {
  .hadithi-stage .hadithi-dot { left: 28px; }
}

/* Alternate left/right on desktop */
.hadithi-stage .hadithi-card-col {
  width: 46%;
}

.hadithi-stage.side-left .hadithi-card-col { margin-right: auto; }
.hadithi-stage.side-right .hadithi-card-col { margin-left: auto; }

@media (max-width: 991px) {
  .hadithi-stage .hadithi-card-col {
    width: 100%;
    padding-left: 64px;
  }
  .hadithi-stage.side-left .hadithi-card-col,
  .hadithi-stage.side-right .hadithi-card-col {
    margin: 0;
  }
}

/* ---------------- Glass Card ---------------- */
.hadithi-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(201, 138, 44, 0.18);
  border-radius: 22px;
  overflow: hidden;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 45px rgba(0,0,0,0.45);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.hadithi-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px rgba(0,0,0,0.55);
}

.hadithi-card .hadithi-img-wrap {
  position: relative;
  height: 260px;
  overflow: hidden;
}

.hadithi-card .hadithi-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease, filter 0.6s ease;
}

.hadithi-card:hover .hadithi-img-wrap img {
  transform: scale(1.06);
}

.hadithi-card .hadithi-img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28,17,10,0) 40%, rgba(28,17,10,0.85) 100%);
}

.hadithi-num-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  font-family: "Georgia", serif;
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--amber-gold);
  background: rgba(28, 17, 10, 0.55);
  border: 1px solid rgba(201,138,44,0.4);
  border-radius: 12px;
  padding: 2px 14px;
  backdrop-filter: blur(6px);
}

.hadithi-icon-badge {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--amber-gold);
  color: var(--dark-earth);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  box-shadow: 0 6px 16px rgba(201,138,44,0.5);
}

.hadithi-card-body {
  padding: 24px 26px 28px;
  color: var(--warm-cream);
}

.hadithi-card-body .eyebrow {
  color: var(--amber-gold);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
}

.hadithi-card-body h3 {
  font-family: "Georgia", serif;
  font-weight: 700;
  font-size: 1.4rem;
  margin: 6px 0 12px;
}

.hadithi-card-body p {
  color: rgba(250, 246, 240, 0.78);
  font-size: 0.98rem;
  margin-bottom: 0;
  line-height: 1.6;
}

/* Progressive mood: darker/desaturated -> brighter/vivid across the journey */
.hadithi-stage[data-mood="dim"] .hadithi-img-wrap img { filter: grayscale(55%) brightness(0.65) contrast(1.05); }
.hadithi-stage[data-mood="low"] .hadithi-img-wrap img { filter: grayscale(40%) brightness(0.75) contrast(1.05); }
.hadithi-stage[data-mood="mid"] .hadithi-img-wrap img { filter: grayscale(22%) brightness(0.85); }
.hadithi-stage[data-mood="rising"] .hadithi-img-wrap img { filter: grayscale(10%) brightness(0.95); }
.hadithi-stage[data-mood="bright"] .hadithi-img-wrap img { filter: grayscale(0%) brightness(1.05) saturate(1.08); }
.hadithi-stage[data-mood="radiant"] .hadithi-img-wrap img { filter: grayscale(0%) brightness(1.12) saturate(1.15); }

/* ---------------- Final CTA Section (Stage 11) ---------------- */
.hadithi-final {
  position: relative;
  padding: 100px 20px;
  text-align: center;
  color: var(--warm-cream);
  background-size: cover;
  background-position: center;
  isolation: isolate;
}

.hadithi-final::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28,17,10,0.92) 0%, rgba(44,62,46,0.88) 100%);
  z-index: -1;
}

.hadithi-final .eyebrow {
  color: var(--amber-gold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.85rem;
}

.hadithi-final h2 {
  font-family: "Georgia", serif;
  font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 4rem);
  margin: 10px 0 20px;
  color: var(--amber-gold);
}

.hadithi-final p {
  max-width: 560px;
  margin: 0 auto 30px;
  font-size: 1.05rem;
  color: rgba(250,246,240,0.85);
}

/* ---------------- Products Picker Section ---------------- */
.hadithi-bidhaa-section {
  background: var(--warm-cream);
  padding: 90px 0;
}