/* ═══════════════════════════════════════════════════════════════════════
   pathshala.css — a tight, dense layout pass for the Jain Pathshala
   section only. Reuses the site's own tokens.css colours (lac-red, gold,
   marble) — this is a SPACING override, not a new colour theme — modeled
   directly on the approved mockup's own "compact layer" (jain-pathshala
   reference HTML), which cuts section padding from ~44px to ~14px, card
   padding from ~22px to ~12-14px, and the whole type scale down a notch.
   Scope: every element is either `.jp-tight` itself or a descendant of it
   — add that class to the hero section and the <main> wrapper on each
   Pathshala template. Nothing here touches any other page on the site.
   ═══════════════════════════════════════════════════════════════════════ */

.jp-tight { font-size: 0.9375rem; line-height: 1.5; }
.jp-tight p { margin-bottom: 0.6em; }

/* Hero: the sitewide jr-tk-hero is a tall, generously padded band —
   here it drops to a slim strip, matching the mockup's section.s{padding:14px 0}. */
section.jr-tk-hero.jp-tight { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.jp-tight .jr-hero-title { margin-bottom: 0.35rem !important; font-size: clamp(1.5rem, 4vw, 2.1rem); }
.jp-tight .jr-eyebrow { margin-bottom: 0.25rem !important; }
.jp-tight .lead { font-size: 1rem; margin-bottom: 0.75rem !important; }
.jp-tight .jr-shloka-box { padding: 0.75rem 1rem; margin-bottom: 1rem !important; font-size: 0.9rem; }

/* Section rhythm: mb-5 (3rem) throughout the original markup reads as the
   mockup's roomy base layer, not its compact one — these cut it down. */
.jp-tight > section,
.jp-tight section.mb-5 { margin-bottom: 1.5rem !important; }
.jp-tight h2.jr-h4 { margin-bottom: 0.75rem !important; font-size: 1.25rem; }
.jp-tight h3.jr-h5 { font-size: 1rem; }

/* Cards: jr-event-card / jr-connect-card default padding is generous;
   the mockup's .card{padding:12px 14px} is the target. */
.jp-tight .jr-event-card,
.jp-tight .jr-connect-card { padding: 0.85rem 1rem !important; border-radius: 14px; }
.jp-tight .jr-connect-card p,
.jp-tight .jr-event-card p { margin-bottom: 0.35rem; }
.jp-tight .row.g-3 { --bs-gutter-y: 0.6rem; --bs-gutter-x: 0.6rem; }

/* Forms: tighter field rhythm — mockup's form{gap:10px}, input padding 9-12px. */
.jp-tight .form-label { margin-bottom: 0.2rem; font-size: 0.875rem; font-weight: 600; }
.jp-tight .form-control,
.jp-tight .form-select { padding: 0.5rem 0.75rem; }
.jp-tight .mb-3 { margin-bottom: 0.75rem !important; }
.jp-tight .jain-sect-note { padding: 0.6rem 0.85rem; font-size: 0.85rem; }

/* Chips / badges — mockup's .chip{font-size:.75rem;padding:2px 8px}. */
.jp-tight .badge.rounded-pill { font-size: 0.75rem; padding: 0.25rem 0.65rem; }
.jp-tight .form-check-inline { margin-right: 0.5rem; margin-bottom: 0.35rem; }

/* Accordion (FAQ) — mockup's details{padding:9px 0}. */
.jp-tight .accordion-button { padding: 0.65rem 1rem; font-size: 0.95rem; }
.jp-tight .accordion-body { padding: 0.5rem 1rem 0.85rem; font-size: 0.875rem; }

/* Buttons — mockup's .btn{padding:10px 18px}. */
.jp-tight .btn { padding: 0.45rem 1rem; font-size: 0.9rem; }
.jp-tight .btn-sm { padding: 0.3rem 0.75rem; font-size: 0.82rem; }

/* Breadcrumb / top chrome stays sitewide-standard; only the content body
   tightens, so the page still feels native to the rest of the site. */
@media (max-width: 576px) {
    .jp-tight .jr-hero-title { font-size: 1.5rem; }
    section.jr-tk-hero.jp-tight { padding-top: 0.85rem !important; padding-bottom: 0.85rem !important; }
}