/* Homepage hero: temple sketch as background, programmes along the base */
.hero-temple { position: relative; isolation: isolate; overflow: hidden; background: #fbf5e8; min-height: clamp(640px, 90vh, 920px); display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: clamp(40px, 6vw, 80px) var(--gutter) clamp(20px, 3vw, 36px); text-align: center; }
.hero-temple::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--sketch) no-repeat center bottom 70px / min(1600px, 135%) auto; animation: htRise 1.6s ease-out both; }
.hero-temple::after { content: ""; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(55% 38% at 50% 26%, rgba(251, 245, 232, 0.96) 0%, rgba(251, 245, 232, 0.82) 45%, rgba(251, 245, 232, 0) 100%),
  linear-gradient(180deg, rgba(251, 245, 232, 0.9) 0%, rgba(251, 245, 232, 0.35) 38%, rgba(251, 245, 232, 0) 62%, rgba(251, 245, 232, 0.5) 88%, #fbf5e8 100%); }
.ht-text { max-width: 860px; margin: 0 auto; }
.ht-eyebrow { display: inline-block; font-size: 0.85rem; letter-spacing: 0.16em; text-transform: uppercase; color: #9a6a0c; font-weight: 600; margin-bottom: 12px; }
.hero-temple h1 { color: var(--kumkum); font-size: clamp(2.2rem, 4.6vw, 3.8rem); line-height: 1.1; margin: 0 auto 16px; max-width: 20ch; text-shadow: 0 2px 18px #fbf5e8; }
html[lang="ta"] .hero-temple h1 { font-size: clamp(1.8rem, 3.6vw, 2.9rem); line-height: 1.35; max-width: 24ch; }
.hero-temple .ht-lede { color: var(--ink); font-size: clamp(1.05rem, 1.5vw, 1.18rem); margin: 0 auto; max-width: 60ch; text-shadow: 0 1px 10px #fbf5e8; }
.hero-temple .actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 22px; }
.hero-temple .btn-ghost { color: var(--kumkum); background: rgba(251, 245, 232, 0.8); }
.ht-progs { list-style: none; margin: 0 auto; padding: 0; width: 100%; max-width: 1280px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; text-align: left; }
.ht-progs a { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; height: 100%; padding: 10px 12px 10px 10px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(142, 27, 27, 0.14); border-bottom: 3px solid var(--turmeric); border-radius: var(--radius-md); text-decoration: none; color: var(--ink); box-shadow: 0 12px 28px rgba(74, 20, 16, 0.12); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; animation: htUp 0.8s ease-out both; }
.ht-progs li:nth-child(2) a { animation-delay: 0.1s; } .ht-progs li:nth-child(3) a { animation-delay: 0.2s; } .ht-progs li:nth-child(4) a { animation-delay: 0.3s; } .ht-progs li:nth-child(5) a { animation-delay: 0.4s; }
.ht-progs a:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(74, 20, 16, 0.18); border-bottom-color: var(--kumkum); }
.ht-progs img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; object-position: center 45%; }
.ht-progs .body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ht-progs strong { font-family: var(--font-display); font-weight: 400; font-size: 1.08rem; color: var(--kumkum); line-height: 1.2; }
.ht-progs span { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.35; }
@keyframes htRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes htUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-temple::before, .ht-progs a { animation: none; } }
@media (max-width: 1100px) { .ht-progs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .hero-temple { min-height: 0; gap: 18px; }
  .hero-temple::before { background-size: 190% auto; background-position: center 330px; }
  .hero-temple::after { background: linear-gradient(180deg, rgba(251, 245, 232, 0.92) 0%, rgba(251, 245, 232, 0.6) 45%, rgba(251, 245, 232, 0.15) 70%, rgba(251, 245, 232, 0.6) 100%); }
  .ht-text { padding-bottom: 210px; }
  .ht-progs { grid-template-columns: 1fr; gap: 8px; }
  .ht-progs a { grid-template-columns: 56px minmax(0, 1fr); }
  .ht-progs img { width: 56px; height: 56px; }
}