/* lang-overrides.css - layout fixes for Indic-script mirror pages.
   Longer unbreakable words in Tamil/Telugu/Kannada/Malayalam/Hindi force
   1fr grid columns past their container (min-width:auto). minmax(0,1fr)
   lets columns shrink; buttons/pills inside cards wrap instead of pushing. */
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1000px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } }
.homam-card, .grid-4 > *, .grid-3 > *, .grid-2 > * { min-width: 0; }
.homam-card .btn, .homam-card .badge-pill { white-space: normal; text-align: center; }

/* Homam-card badge pills: the base style uppercases + spreads letters
   (letter-spacing 0.12em), which mangles Indic conjuncts and forces the top
   pill to wrap awkwardly beside the icon. Reset for native scripts and let it
   wrap tidily; keep the icon top-aligned with a little breathing gap. */
.badge-pill { text-transform: none; letter-spacing: 0; line-height: 1.3; }
.homam-card .top { align-items: flex-start; gap: 12px; }
.homam-card .badge-pill { max-width: 62%; }

/* Homam-card CTA row: the two buttons sit side-by-side at 50% each, so a long
   native "Book Now" label ("ఇప్పుడే బుక్ చేయండి" / "இப்போதே முன்பதிவு") is
   crushed into a 3-line wrap next to a 1-line "Details". Stack them full-width
   so each label reads cleanly on its own line. */
.homam-card .cta-row { flex-direction: column; align-items: stretch; gap: 10px; }
.homam-card .cta-row .btn { flex: none; width: 100%; font-size: 0.92rem; padding: 12px 16px; }

/* Temple calendar section (#events) is English-only content — the section head
   AND the JS-rendered widget (ritual names, dates "14 JUL", "Tue 14 Jul 2026 · …",
   pill labels). On mirror sites the :lang() native-script fonts leak onto that
   Latin text, so we (a) mark <section id="events" lang="en"> to kill :lang() matches
   and (b) hard-lock the exact per-element font stack the ENGLISH site uses. Match
   English precisely: Cinzel ONLY on the section h2, the widget h3, the card h4, and
   the badge day-number (.d); everything else — including the badge month (.m), the
   "date · year · dot" when-line, the tithi line, pills, sub, and foot — is Inter. */
#events, #events *,
#panchang-calendar, #panchang-calendar * { font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important; }
#events h2, #events h3, #events .pcal-body h4, #events .pcal-badge .d,
#panchang-calendar .pcal-head h3, #panchang-calendar .pcal-body h4,
#panchang-calendar .pcal-badge .d { font-family: var(--font-heading, 'Cinzel', Georgia, serif) !important; }
/* The `*` locks above would clobber the Font Awesome glyph font on the tithi-line
   icons (<i class="fa-solid">) — they'd render as boxes/□ "symbols" beside the
   Amavasya text. Re-assert the icon font (weight 900 comes from FA's own .fa-solid). */
#events i[class*="fa-"], #events .fa, #events .fas, #events .fa-solid,
#panchang-calendar i[class*="fa-"], #panchang-calendar .fa, #panchang-calendar .fas,
#panchang-calendar .fa-solid { font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Brands' !important; }

/* --- Telugu hero H1: the two-span (gold + script-em) mix inflates the line box
   far past the 1.4 heading leading on the wrapped desktop title. Pin the h1
   leading and stop the inline spans from growing the line box. Scoped to te
   only — ta/kn/ml/hi hero titles render fine. --- */
:lang(te) .hero h1, [lang="te"] .hero h1 { line-height: 1.35 !important; }
:lang(te) .hero h1 span, [lang="te"] .hero h1 span { line-height: 1 !important; }

/* --- Kannada hero H1: same tall-glyph line-box inflation as Telugu. Abhi asked for
   a 40% reduction on the heading leading (base 1.4 -> 0.84, then +2% -> 0.857); spans pinned to 1 so
   the inline gold/em mix cannot re-inflate the line box. Scoped to kn only. --- */
:lang(kn) .hero h1, [lang="kn"] .hero h1 { line-height: 0.857 !important; }
:lang(kn) .hero h1 span, [lang="kn"] .hero h1 span { line-height: 1 !important; }

/* --- Kannada hero on phones: 0.857 was tuned for the DESKTOP single line. At
   375px the clamp floor (2.23rem ~ 35.7px) applies and the 25-character title
   wraps to two lines, giving a 30.6px line box for ~36px of glyph — the tall
   marks in ಶ್ರೀ and ಮುಖಿ then collide. Restore comfortable leading only where
   it actually wraps; desktop keeps Abhi's 0.857. --- */
@media (max-width: 700px) {
  :lang(kn) .hero h1, [lang="kn"] .hero h1 { line-height: 1.15 !important; }
}

/* --- Tamil hero H1: Abhi asked for a 25% reduction on the heading leading
   (base 1.4 -> 1.05, then +5% -> 1.103); spans pinned to 1 so the inline gold/em mix cannot
   re-inflate the line box. Scoped to ta only. --- */
:lang(ta) .hero h1, [lang="ta"] .hero h1 { line-height: 1.103 !important; }
:lang(ta) .hero h1 span, [lang="ta"] .hero h1 span { line-height: 1 !important; }