/* ============================================================
   ManaHindu — hinduism.css
   Hinduism page: timeline, belief cards, vedas grid
   Used by: pages/hinduism/index.html
   ============================================================ */

.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; 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-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; margin: 0; }

.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; margin: 0; }
.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; }

.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; }

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