/* ============================================================
   ManaHindu — home.css
   Homepage specific styles only
   Used by: index.html only
   ============================================================ */

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  background: linear-gradient(135deg, #3d0c0c 0%, #7c1c1c 50%, #4a0e0e 100%);
  min-height: 460px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: 'ॐ';
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18rem;
  color: rgba(245,158,11,0.07);
  pointer-events: none;
}
.hero-overlay  { position: absolute; inset: 0; background: rgba(0,0,0,0.1); }
.hero-content  { position: relative; z-index: 2; padding: 3rem 1.2rem; }
.hero-eyebrow  { color: var(--saffron); font-size: 1rem; margin-bottom: 0.8rem; letter-spacing: 0.05em; }
.hero-title    { font-family: 'Tiro Telugu', serif; font-size: clamp(1.8rem,4vw,2.8rem); color: #fff; line-height: 1.3; margin-bottom: 1rem; }
.hero-sub      { color: #f5e6cc; font-size: 1rem; max-width: 520px; margin-bottom: 1.8rem; }
.hero-btns     { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ── Hinduism Intro ──────────────────────────────────────── */
.hinduism-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}
.hinduism-intro-text h2 { font-family: 'Tiro Telugu', serif; font-size: 1.6rem; color: var(--maroon); margin-bottom: 0.5rem; }
.hinduism-intro-text .tagline { color: var(--gold); font-size: 0.88rem; font-weight: 600; margin-bottom: 1rem; }

/* ── Belief Mini Grid ────────────────────────────────────── */
.belief-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.belief-mini {
  background: var(--cream);
  border: 1px solid var(--border);
  border-left: 3px solid var(--saffron);
  border-radius: 8px;
  padding: 0.8rem;
}
.belief-mini h4 { font-family: 'Tiro Telugu', serif; font-size: 0.88rem; color: var(--maroon); margin-bottom: 0.2rem; }
.belief-mini p  { font-size: 0.75rem; color: var(--text-muted); line-height: 1.6; margin: 0; }

/* ── Vedas Strip ─────────────────────────────────────────── */
.vedas-strip { background: var(--maroon); padding: 1.5rem 0; }
.vedas-grid  { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }
.veda-mini {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(245,158,11,0.2);
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
}
.veda-mini-icon { font-size: 1.8rem; margin-bottom: 0.4rem; }
.veda-mini h4   { font-family: 'Tiro Telugu', serif; color: var(--saffron); font-size: 0.88rem; margin-bottom: 0.3rem; }
.veda-mini p    { font-size: 0.72rem; color: #f5ddb0; line-height: 1.5; margin: 0; }

/* ── Featured Card ───────────────────────────────────────── */
.featured-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.featured-card-img {
  background: linear-gradient(135deg, #fef3e2, #fde8c8);
  display: flex; align-items: center; justify-content: center;
  font-size: 7rem; min-height: 260px; position: relative;
}
.featured-card-img .fc-label {
  position: absolute; top: 1rem; left: 1rem;
  background: var(--maroon); color: var(--saffron);
  font-size: 0.72rem; font-weight: 700;
  padding: 0.3rem 0.8rem; border-radius: 20px;
}
.featured-card-body {
  padding: 1.8rem;
  display: flex; flex-direction: column; justify-content: center;
  background: var(--cream);
}
.featured-card-body h2       { font-family: 'Tiro Telugu', serif; font-size: 1.3rem; color: var(--maroon); margin-bottom: 0.4rem; }
.featured-card-body .subtitle { color: var(--gold); font-size: 0.82rem; font-weight: 600; margin-bottom: 0.8rem; }
.featured-card-body p        { color: var(--text-muted); font-size: 0.85rem; line-height: 1.8; margin-bottom: 1rem; }
.featured-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 0.6rem; margin-bottom: 1rem; }
.fstat         { background: var(--white); border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem; text-align: center; }
.fstat-num     { font-size: 0.95rem; font-weight: 700; color: var(--maroon); }
.fstat-label   { font-size: 0.62rem; color: var(--text-muted); }

/* ── TTD Strip ───────────────────────────────────────────── */
.ttd-strip { background: var(--maroon); padding: 1.2rem 0; }
.ttd-strip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px,1fr));
  gap: 1px;
  background: rgba(255,255,255,0.1);
  border-radius: var(--radius);
  overflow: hidden;
}
.ttd-strip-item { background: rgba(255,255,255,0.04); padding: 0.85rem; text-align: center; }
.ttd-strip-icon  { font-size: 1.2rem; margin-bottom: 0.2rem; }
.ttd-strip-label { font-size: 0.65rem; color: #f5c98e; margin-bottom: 0.15rem; }
.ttd-strip-val   { font-family: 'Tiro Telugu', serif; font-size: 0.82rem; color: #fff; font-weight: 600; }

/* ── Vlog Feature ────────────────────────────────────────── */
.vlog-feature { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.5rem; align-items: start; }
.vlog-main-card { background: var(--white); border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.vlog-main-thumb { background: #1a1a2e; aspect-ratio: 16/9; position: relative; }
.vlog-main-thumb iframe { width: 100%; height: 100%; position: absolute; inset: 0; border: none; }
.vlog-main-body { padding: 1rem; }
.vlog-main-body h3 { font-family: 'Tiro Telugu', serif; color: var(--maroon); font-size: 0.95rem; margin-bottom: 0.3rem; }
.vlog-main-body p  { font-size: 0.8rem; color: var(--text-muted); }
.vlog-side-list { display: flex; flex-direction: column; gap: 1rem; }
.vlog-side-item { display: flex; gap: 0.8rem; background: var(--white); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.vlog-side-thumb { width: 90px; min-height: 65px; background: #2a2a3e; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #fff; }
.vlog-side-body  { padding: 0.6rem 0.8rem 0.6rem 0; }
.vlog-side-body h4 { font-size: 0.78rem; color: var(--maroon); font-weight: 600; line-height: 1.4; margin-bottom: 0.2rem; }
.vlog-side-body span { font-size: 0.68rem; color: var(--text-muted); }

/* ── Coming Soon Grid ────────────────────────────────────── */
.coming-soon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 1rem; }

/* ── Panchangam Section ──────────────────────────────────── */
.panchangam-section { background: var(--maroon); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero::before          { font-size: 8rem; }
  .hinduism-intro-grid   { grid-template-columns: 1fr; }
  .vedas-grid            { grid-template-columns: repeat(2,1fr); }
  .featured-card         { grid-template-columns: 1fr; }
  .featured-card-img     { min-height: 150px; font-size: 5rem; }
  .vlog-feature          { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   HOMEPAGE RICH REFRESH
   ═══════════════════════════════════════════════════════════ */

/* Richer hero with layered glow + stat strip */
.hero {
  background:
    radial-gradient(ellipse 80% 60% at 50% 120%, rgba(245,158,11,0.32) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 85% 10%, rgba(217,119,6,0.18) 0%, transparent 60%),
    linear-gradient(135deg, #3d0c0c 0%, #7c1c1c 48%, #4a0e0e 100%) !important;
  min-height: 540px !important;
}
.hero::before {
  font-size: 22rem !important;
  color: rgba(245,158,11,0.06) !important;
}
.hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--grad-saffron);
  z-index: 3;
}
.hero-eyebrow {
  display: inline-block;
  background: rgba(245,158,11,0.14);
  border: 1px solid rgba(245,158,11,0.3);
  padding: 0.35rem 1rem;
  border-radius: 50px;
  color: var(--gold-light) !important;
  font-size: 0.82rem !important;
  margin-bottom: 1.2rem !important;
}
.hero-title {
  font-size: clamp(2rem, 5vw, 3.2rem) !important;
  text-shadow: 0 3px 20px rgba(0,0,0,0.4);
  letter-spacing: 0.5px;
}
.hero-title::after {
  content: '';
  display: block;
  width: 90px; height: 4px;
  margin-top: 1rem;
  border-radius: 4px;
  background: var(--grad-saffron);
  box-shadow: 0 0 16px rgba(245,158,11,0.6);
}
.hero-sub { font-size: 1.08rem !important; max-width: 560px; }
.hero-btns .btn-primary {
  background: var(--grad-saffron);
  border: none;
  box-shadow: 0 4px 18px rgba(245,158,11,0.35);
}
.hero-btns .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(245,158,11,0.45); }

/* Hero stat strip */
.hero-stats {
  display: flex;
  gap: 2.2rem;
  flex-wrap: wrap;
  margin-top: 2.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(245,221,176,0.18);
}
.hero-stat-num {
  font-family: 'Tiro Telugu', serif;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--gold-light);
  line-height: 1;
}
.hero-stat-label { color: #f5ddb0; font-size: 0.78rem; margin-top: 0.3rem; }

/* Quick category tiles */
.quick-tiles {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  margin: -3rem auto 0;
  position: relative;
  z-index: 5;
  max-width: 1100px;
  padding: 0 1.2rem;
}
.quick-tile {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.4rem 0.8rem;
  text-align: center;
  text-decoration: none;
  color: var(--maroon);
  box-shadow: 0 6px 22px rgba(124,28,28,0.08);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.quick-tile:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 32px rgba(124,28,28,0.16);
  border-color: var(--saffron);
}
.quick-tile-icon {
  font-size: 2.2rem;
  display: block;
  margin-bottom: 0.5rem;
}
.quick-tile-label {
  font-family: 'Tiro Telugu', serif;
  font-weight: 700;
  font-size: 0.95rem;
}
@media (max-width: 860px) {
  .quick-tiles { grid-template-columns: repeat(3, 1fr); margin-top: 1.5rem; }
}
@media (max-width: 480px) {
  .quick-tiles { grid-template-columns: repeat(2, 1fr); }
  .hero-stats { gap: 1.4rem; }
}

/* ═══════════════════════════════════════════════════════════
   DEVOTIONAL / TEMPLE-ART HOMEPAGE THEME (homepage only)
   Deeper sanctum colors, gold-leaf ornamentation, layered richness.
   Scoped to body.home-devotional so other pages are unaffected.
   ═══════════════════════════════════════════════════════════ */

body.home-devotional {
  --t-oxblood:   #3a0a0a;
  --t-maroon:    #5e1212;
  --t-vermilion: #a8201a;
  --t-goldleaf:  #c9962e;
  --t-goldbright:#e8b54d;
  --t-sandstone: #f3e8d0;
  --t-sanddeep:  #e7d5b0;
  background:
    radial-gradient(circle at 8% 4%, rgba(168,32,26,0.05) 0%, transparent 38%),
    radial-gradient(circle at 92% 96%, rgba(201,150,46,0.07) 0%, transparent 40%),
    var(--t-sandstone);
}

/* ── HERO as temple sanctum, with skyline silhouette ── */
body.home-devotional .hero {
  background:
    radial-gradient(ellipse 70% 55% at 50% 118%, rgba(232,181,77,0.30) 0%, transparent 62%),
    radial-gradient(circle at 50% 38%, rgba(168,32,26,0.30) 0%, transparent 55%),
    linear-gradient(160deg, rgba(44,7,7,0.55) 0%, rgba(94,18,18,0.45) 45%, rgba(44,7,7,0.72) 100%),
    url('../img/temple-skyline-hero.svg') !important;
  background-size: auto, auto, auto, cover !important;
  background-position: center, center, center, bottom center !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important;
  min-height: 600px !important;
  border-bottom: none !important;
  position: relative;
}
/* gold gopuram-style top & bottom rules */
body.home-devotional .hero::after {
  height: 6px !important;
  background: repeating-linear-gradient(90deg,
    var(--t-goldleaf) 0px, var(--t-goldbright) 14px, var(--t-goldleaf) 28px) !important;
}
body.home-devotional .hero::before {
  font-size: 26rem !important;
  color: rgba(232,181,77,0.07) !important;
}
body.home-devotional .hero-eyebrow {
  background: rgba(232,181,77,0.12) !important;
  border: 1px solid rgba(232,181,77,0.4) !important;
  color: var(--t-goldbright) !important;
  letter-spacing: 1px;
}
body.home-devotional .hero-title { color: #fff7e6 !important; }
body.home-devotional .hero-title::after {
  background: repeating-linear-gradient(90deg,
    var(--t-goldleaf) 0px, var(--t-goldbright) 10px, var(--t-goldleaf) 20px) !important;
  width: 120px !important; height: 5px !important;
  box-shadow: 0 0 18px rgba(232,181,77,0.7) !important;
}
body.home-devotional .hero-sub { color: #f0dcc0 !important; }
body.home-devotional .hero-btns .btn-primary {
  background: linear-gradient(135deg, var(--t-goldbright), var(--t-goldleaf)) !important;
  color: #3a0a0a !important;
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(201,150,46,0.45) !important;
}
body.home-devotional .hero-btns .btn-outline {
  border: 1.5px solid var(--t-goldbright) !important;
  color: var(--t-goldbright) !important;
}
body.home-devotional .hero-stat-num { color: var(--t-goldbright) !important; }
body.home-devotional .hero-stats { border-top-color: rgba(232,181,77,0.25) !important; }

/* ── Quick tiles: temple-niche style ── */
body.home-devotional .quick-tile {
  background: linear-gradient(165deg, #fffaf0 0%, var(--t-sandstone) 100%);
  border: 1px solid var(--t-sanddeep);
  border-top: 3px solid var(--t-goldleaf);
  color: var(--t-maroon);
}
body.home-devotional .quick-tile:hover {
  border-color: var(--t-vermilion);
  box-shadow: 0 14px 32px rgba(94,18,18,0.2);
}
body.home-devotional .quick-tile-label { color: var(--t-maroon); }

/* ── Section titles: gold-flanked, traditional ── */
body.home-devotional .homepage-section-title,
body.home-devotional .section-title {
  color: var(--t-maroon) !important;
  text-align: center;
  position: relative;
  padding-bottom: 0.7rem;
}
body.home-devotional .homepage-section-title::after,
body.home-devotional .section-title::after {
  content: '❁';
  display: block;
  color: var(--t-goldleaf);
  font-size: 1.1rem;
  margin: 0.5rem auto 0;
  text-align: center;
}
body.home-devotional .homepage-section-sub { text-align: center; }

/* ── Cards: richer sandstone with gold edge ── */
body.home-devotional .fest-card,
body.home-devotional .topic-card {
  background: linear-gradient(165deg, #fffaf0 0%, var(--t-sandstone) 100%);
  border: 1px solid var(--t-sanddeep);
}
body.home-devotional .fest-card::before,
body.home-devotional .topic-card::before {
  background: repeating-linear-gradient(90deg,
    var(--t-goldleaf) 0px, var(--t-goldbright) 12px, var(--t-goldleaf) 24px) !important;
}
body.home-devotional .fest-card-title,
body.home-devotional .topic-card-title { color: var(--t-maroon); }
body.home-devotional .fest-card-cta,
body.home-devotional .topic-card-cta { color: var(--t-vermilion); }
body.home-devotional .fest-intro-band {
  background: linear-gradient(135deg, #fbf0d8 0%, #f3e3c2 100%);
  border-left: 4px solid var(--t-vermilion);
}
body.home-devotional .fest-intro-band h2 { color: var(--t-maroon); }

/* ── Alternating section backgrounds for depth ── */
body.home-devotional section.section:nth-of-type(even) {
  background: #f7eeda !important;
}
body.home-devotional section.section:nth-of-type(odd) {
  background: var(--t-sandstone) !important;
}

/* ── Featured temple card: sanctum framing ── */
body.home-devotional .featured-card {
  border: 1px solid var(--t-sanddeep);
  box-shadow: 0 8px 30px rgba(94,18,18,0.14);
}
body.home-devotional .featured-card-img {
  background: linear-gradient(160deg, #5e1212 0%, #3a0a0a 100%) !important;
}

/* ── section-view-all link ── */
body.home-devotional .section-view-all { color: var(--t-vermilion); }

/* ═══ HINDUISM FULL-INFO SECTION (timeline, beliefs, vedas, texts) ═══ */

    /* TIMELINE */
    .timeline { position: relative; padding: 1rem 0; }
    .timeline::before {
      content: '';
      position: absolute;
      left: 110px;
      top: 0; bottom: 0;
      width: 3px;
      background: linear-gradient(to bottom, var(--saffron), var(--maroon));
    }
    .tl-item {
      display: grid;
      grid-template-columns: 100px 40px 1fr;
      gap: 0 1rem;
      margin-bottom: 2rem;
      align-items: start;
    }
    .tl-year {
      text-align: right;
      font-weight: 700;
      color: var(--maroon);
      font-size: 0.82rem;
      padding-top: 0.3rem;
      line-height: 1.3;
    }
    .tl-dot {
      width: 20px;
      height: 20px;
      background: var(--saffron);
      border: 3px solid var(--maroon);
      border-radius: 50%;
      margin: 0.2rem auto 0;
      flex-shrink: 0;
      position: relative;
      z-index: 1;
    }
    .tl-dot.major { background: var(--maroon); border-color: var(--saffron); width: 24px; height: 24px; }
    .tl-content {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 1rem 1.2rem;
    }
    .tl-content h3 {
      font-family: 'Tiro Telugu', serif;
      color: var(--maroon);
      font-size: 1rem;
      margin-bottom: 0.4rem;
    }
    .tl-content p { font-size: 0.83rem; color: var(--text-muted); line-height: 1.8; margin: 0; }

    /* BELIEF CARDS */
    .belief-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 1.2rem;
      margin: 1.5rem 0;
    }
    .belief-card {
      background: var(--white);
      border: 1.5px solid var(--border);
      border-top: 4px solid var(--saffron);
      border-radius: 10px;
      padding: 1.2rem;
    }
    .belief-card .b-icon { font-size: 2rem; margin-bottom: 0.6rem; }
    .belief-card h3 {
      font-family: 'Tiro Telugu', serif;
      color: var(--maroon);
      font-size: 0.95rem;
      margin-bottom: 0.4rem;
    }
    .belief-card p { font-size: 0.8rem; color: var(--text-muted); line-height: 1.7; }

    /* VEDAS */
    .veda-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 1rem;
      margin: 1.5rem 0;
    }
    .veda-card {
      border-radius: 10px;
      padding: 1.2rem;
      border: 1px solid var(--border);
    }
    .veda-card h3 { font-family: 'Tiro Telugu', serif; font-size: 0.95rem; margin-bottom: 0.5rem; }
    .veda-card p { font-size: 0.8rem; color: var(--text-muted); line-height: 1.7; }
    .v1 { background: #fef9e2; } .v1 h3 { color: #92400e; }
    .v2 { background: #fce8e8; } .v2 h3 { color: var(--maroon); }
    .v3 { background: #ede9fe; } .v3 h3 { color: #5b21b6; }
    .v4 { background: #e8f4fe; } .v4 h3 { color: #1e40af; }

    /* SECTION DIVIDER */
    .art-section { padding: 2.5rem 0; border-top: 2px solid var(--cream-dark); }
    .art-section:first-child { border-top: none; }
    .art-section h2 {
      font-family: 'Tiro Telugu', serif;
      font-size: 1.4rem;
      color: var(--maroon);
      margin-bottom: 0.5rem;
    }
    .art-section .lead {
      color: var(--text-muted);
      font-size: 0.9rem;
      line-height: 1.9;
      margin-bottom: 1.2rem;
    }

    /* STAT STRIP */
    .stat-strip {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 1px;
      background: var(--border);
      border-radius: 10px;
      overflow: hidden;
      margin: 1.5rem 0;
    }
    .stat-item {
      background: var(--white);
      padding: 1.2rem;
      text-align: center;
    }
    .stat-num { font-size: 1.6rem; font-weight: 700; color: var(--maroon); }
    .stat-label { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.2rem; }

    /* SOURCE NOTE */
    .source-note {
      background: var(--cream);
      border: 1px solid var(--border);
      border-left: 4px solid var(--saffron);
      border-radius: 8px;
      padding: 1rem 1.2rem;
      font-size: 0.78rem;
      color: var(--text-muted);
      margin-top: 2rem;
    }

    @media (max-width: 600px) {
      .timeline::before { left: 80px; }
      .tl-item { grid-template-columns: 70px 30px 1fr; }
      .tl-year { font-size: 0.72rem; }
    }