/* Sanatan Yatra temple detail page (/temple/:id). Loaded after the other layer files.
   Same rule pattern as clean.css: #root + !important to win over the build and component styles.
   Refinement only: one reading column for the facts and the story, one wider column for deity and related
   temples, even section spacing, readable text sizes. Colours, fonts and section order are unchanged. */
#root .hero, #root .meta-band, #root .tdesc-sec, #root .deity-sec, #root .related-sec {
  --t-read: 680px;
  --t-wide: 1120px;
}

/* ---------- Hero: title wraps in even lines, never one word per line ---------- */
#root .hero-body { padding-left: var(--c-side) !important; padding-right: var(--c-side) !important; }
#root .hero-body .h1-wrap { max-width: min(100%, 1000px) !important; text-align: center !important; text-wrap: balance; overflow-wrap: break-word; }
#root .hero-body .h1-word { display: inline-block !important; }
#root .hero-body .hero-loc { max-width: 100%; text-align: center; }

/* ---------- Facts row: sits in the same column as the story below ---------- */
#root .meta-band { padding: var(--c-section) 0 0 !important; }
#root .meta-inner {
  max-width: calc(var(--t-read) + 2 * var(--c-side)) !important; margin: 0 auto !important; padding: 0 var(--c-side) !important;
  box-sizing: border-box !important; display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; gap: 16px clamp(16px, 4vw, 40px) !important;
}
#root .meta-cell, #root .meta-cell:nth-child(3) {
  grid-column: auto !important; padding: 0 !important; border: 0 !important; min-width: 0;
}
#root .meta-cell + .meta-cell { border-left: 1px solid var(--c-line) !important; padding-left: clamp(16px, 4vw, 40px) !important; }
#root .meta-lbl { font-size: 14px !important; margin: 0 0 4px !important; }
#root .meta-val { font-size: 17px !important; overflow-wrap: anywhere; }

/* ---------- Story: one comfortable reading column ---------- */
#root .tdesc-sec { padding-top: clamp(32px, 4vw, 48px) !important; padding-bottom: var(--c-section) !important; }
#root .tdesc-inner { max-width: calc(var(--t-read) + 2 * var(--c-side)) !important; margin: 0 auto !important; padding: 0 var(--c-side) !important; box-sizing: border-box !important; }
#root .tdesc-sec .sec-title, #root .related-sec .sec-title, #root .deity-name {
  font-size: clamp(24px, 1.6vw + 16px, 36px) !important; line-height: 1.2 !important; margin: 0 0 var(--c-gap) !important;
}
#root .tdesc-body p { margin: 0 0 18px !important; overflow-wrap: break-word; }
#root .tdesc-body p:last-child { margin-bottom: 0 !important; }

/* ---------- Deity: photo and text side by side from tablet up ---------- */
#root .deity-sec { padding-top: var(--c-section) !important; padding-bottom: var(--c-section) !important; }
#root .deity-inner {
  max-width: calc(var(--t-wide) + 2 * var(--c-side)) !important; margin: 0 auto !important; padding: 0 var(--c-side) !important; box-sizing: border-box !important;
  display: grid !important; grid-template-columns: minmax(240px, 380px) minmax(0, 1fr) !important; gap: clamp(28px, 5vw, 64px) !important; align-items: center !important;
}
#root .deity-main { aspect-ratio: 3 / 4 !important; }
#root .deity-txt, #root .deity-txt-card { min-width: 0; max-width: var(--t-read); }
#root .deity-alts-pills { gap: 8px !important; flex-wrap: wrap !important; }
#root .deity-alt-pill { padding: 6px 12px !important; }
#root .deity-orn { margin: 16px 0 !important; }
#root .deity-about-lbl { margin: 0 0 6px !important; }
@media (min-width: 600px) and (max-width: 860px) {
  #root .deity-inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) !important; }
}
@media (max-width: 599px) {
  #root .deity-inner { grid-template-columns: minmax(0, 1fr) !important; gap: 20px !important; }
  #root .deity-main { aspect-ratio: 4 / 5 !important; }
}

/* ---------- Related temples: same width as the deity block, even gaps ---------- */
#root .related-sec { padding-top: var(--c-section) !important; padding-bottom: var(--c-section) !important; }
#root .related-sec .sec-hdr { max-width: calc(var(--t-wide) + 2 * var(--c-side)) !important; margin: 0 auto !important; padding: 0 var(--c-side) !important; box-sizing: border-box !important; }
#root .related-grid {
  max-width: calc(var(--t-wide) + 2 * var(--c-side)) !important; margin: 0 auto !important; padding: 0 var(--c-side) !important; box-sizing: border-box !important;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)) !important; gap: 28px var(--c-gap) !important;
}
#root .rel-body { padding: 12px 0 0 !important; }
#root .rel-name { font-size: 16px !important; line-height: 1.3 !important; margin: 0 0 4px !important; }
#root .rel-foot { display: none !important; }

/* ---------- Closing line: wraps on small phones instead of running off the screen ---------- */
#root .site-footer { padding-left: var(--c-side) !important; padding-right: var(--c-side) !important; }
#root .site-footer .footer-inner { gap: 16px !important; min-width: 0; }
#root .site-footer .footer-txt { white-space: normal !important; text-align: center !important; min-width: 0; flex: 0 1 auto !important; }
#root .site-footer .footer-line { flex: 1 1 24px !important; min-width: 16px; }

/* ---------- Top bar on phones: the title is hidden there, so keep the language switch at the right, clear of "All Temples" ---------- */
@media (max-width: 767px) {
  #root .tn-langs { grid-column: 3 !important; justify-self: end !important; }
  #root .tn-back { max-width: none !important; }
}