/*// section 1 css*/

/* ==========================================================================
   Shri OM Darbar — Homepage "The Legacy" section (bento/mosaic layout)
   Scoped to .od-legacy. Uses Master Design System tokens from style.css.

   One deliberate typography addition: Fraunces (serif display) for the
   Block 1 headline only — style.css has no serif token, and this section
   is the one place the brief explicitly calls for editorial serif type.
   Everything else in this file stays on the existing DM Sans / Devanagari
   system. See the header-head.php note for the one-line font-load change
   this requires.
   ========================================================================== */

.od-legacy,
.od-legacy *,
.od-legacy *::before,
.od-legacy *::after {
    box-sizing: border-box;
}

.od-legacy {
    position: relative;
    padding-block: var(--od-layout-section-spacious);
    background-color: var(--od-bg-page);
    overflow: hidden;
}

.od-legacy__container {
    width: min(100%, var(--od-container-wide));
    margin-inline: auto;
    padding-inline: var(--od-gutter-fluid);
}

/* ==========================================================
   MOSAIC GRID
   12-column logical grid. Block 2 spans two rows and is given
   a negative bottom margin so it visually overruns the grid's
   own row boundary — the "breaks the grid" instruction from
   the brief — while still being a real, reflowing grid item
   (not absolutely positioned), so it degrades cleanly on
   narrower screens instead of needing separate overrides.
   ========================================================== */

.od-legacy__mosaic {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto;
    gap: var(--od-space-8);
}

.od-legacy__block {
    position: relative;
    /*
     * Grid items default to min-width:auto, which lets content with
     * aspect-ratio + min-height (every image block here) impose an
     * intrinsic minimum width the grid track won't shrink below —
     * confirmed by direct bisection against real Chromium, where this
     * silently overflowed the mobile single-column layout. Applied
     * here once, to every block, rather than patched per-block.
     */
    min-width: 0;
}

/* ---------- Block 1: The Hook (text only) ---------- */

.od-legacy__block--hook {
    grid-column: 1 / 7;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: var(--od-space-8);
}

.od-legacy__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--od-space-2);
    margin-block-end: var(--od-space-6);
    color: var(--od-text-muted);
    font-size: 0.7rem;
    font-weight: var(--od-weight-medium);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.od-legacy__eyebrow::before {
    content: "";
    display: inline-block;
    width: 1.5rem;
    height: 1px;
    background-color: var(--od-gold-base);
}

/*
 * Massive editorial serif headline. Sized and verified against the
 * text column width (see design notes) so real copy wraps at
 * intentional line breaks rather than the browser breaking mid-word —
 * the same check that fixed the banner section's title overflow.
 */
.od-legacy__headline {
    margin: 0 0 var(--od-space-6);
    color: var(--od-maroon-base);
    font-family: 'Fraunces', var(--od-font-sans);
    font-size: clamp(2.25rem, 1.6vw + 1.85rem, 3.5rem);
    font-weight: 600;
    font-optical-sizing: auto;
    letter-spacing: -0.01em;
    line-height: 1.08;
}

.od-legacy__headline-line {
    display: block;
}

.od-legacy__sub {
    max-width: 42ch;
    margin: 0 0 var(--od-space-8);
    color: var(--od-text-secondary);
    font-size: var(--od-type-base);
    line-height: var(--od-leading-relaxed);
}

.od-legacy__link {
    display: inline-flex;
    align-items: center;
    gap: var(--od-space-2);
    width: fit-content;
    color: var(--od-text-brand);
    font-size: var(--od-type-sm);
    font-weight: var(--od-weight-bold);
    border-block-end: 1px solid var(--od-border-default);
    padding-block-end: var(--od-space-1);
    transition: border-color var(--od-transition-fast), gap var(--od-transition-fast), color var(--od-transition-fast);
}

.od-legacy__link:hover,
.od-legacy__link:focus-visible {
    color: var(--od-saffron-deep);
    border-color: var(--od-saffron-deep);
    gap: var(--od-space-3);
}

.od-legacy__link svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- Block 2: Tall portrait, spans both rows ---------- */

.od-legacy__block--portrait {
    grid-column: 7 / 13;
    grid-row: 1 / 3;
    /*
     * CSS Grid's default align-items:stretch was stretching THIS
     * element (the grid item) to fill its full two-row auto-sized
     * area — independent of the figure child's own explicit height.
     * The figure was already correctly sized; the invisible parent
     * box around it was not. align-self:start stops the item from
     * stretching, so it sizes to its content (the 845px figure)
     * instead of to the full row span.
     */
    align-self: start;
    /*
     * A restrained bleed, not a collision. The original -64px overrun
     * (var(--od-space-16), 2.7x the grid gap) punched Block 2 far
     * enough into row 2 that it read as an accidental stacking overlap
     * rather than a considered "breaks the grid" effect — confirmed by
     * direct visual check against real Chromium, not assumption. This
     * value matches the grid's own gap, which is the amount a
     * deliberate bleed effect typically wants: present enough to
     * notice, restrained enough to read as intentional.
     */
    margin-block-end: calc(var(--od-space-6) * -1);
    z-index: 2;
}

/*
 * height:100% here was the root cause of the layout blowout: in a grid
 * item spanning an auto-sized row, a percentage height creates a
 * feedback loop the browser resolves by wildly over-expanding row 2,
 * which then drags every other block in that row down with it. Fixed
 * with an explicit, calculated height instead (see design notes — 4:5,
 * a standard portrait-photography ratio, verified against the real
 * column width so it reads as an intentional photo crop, not a guess).
 */
.od-legacy__block--portrait .od-legacy__figure {
    /*height: 845px;*/
    /* Elevated shadow specifically on the overrunning block, so where
       it passes in front of row 2 reads as genuine depth/layering
       rather than two flat same-color shapes meeting at a hard seam. */
    box-shadow: 0 28px 56px -16px rgba(42, 36, 34, 0.4), var(--od-elevation-modal);
}

.od-legacy__figure {
    position: relative;
    width: 100%;
    min-height: 320px;
    margin: 0;
    overflow: hidden;
    border-radius: var(--od-radius-lg);
    background:
        repeating-linear-gradient(135deg, rgba(198, 156, 56, 0.10) 0px, rgba(198, 156, 56, 0.10) 2px, transparent 2px, transparent 14px),
        linear-gradient(165deg, var(--od-maroon-base) 0%, var(--od-maroon-deep) 100%);
    box-shadow: var(--od-elevation-modal);
}

.od-legacy__figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.od-legacy__figure--fallback {
    background:
        repeating-linear-gradient(135deg, rgba(198, 156, 56, 0.12) 0px, rgba(198, 156, 56, 0.12) 2px, transparent 2px, transparent 14px),
        linear-gradient(165deg, var(--od-maroon-base) 0%, var(--od-maroon-deep) 100%);
}

/* ---------- Block 3: Landscape (Sangat / Langar) ---------- */

.od-legacy__block--landscape {
    grid-column: 1 / 9;
    grid-row: 2;
    align-self: start;
}

.od-legacy__block--landscape .od-legacy__figure {
    min-height: 320px;
    aspect-ratio: 16 / 10;
    /* Distinct fallback tone from Block 2 — same palette, different
       angle/mix — so the three placeholders read as considered
       variations rather than one box copy-pasted three times. */
    background:
        repeating-linear-gradient(45deg, rgba(198, 156, 56, 0.09) 0px, rgba(198, 156, 56, 0.09) 2px, transparent 2px, transparent 16px),
        linear-gradient(200deg, var(--od-saffron-deep) 0%, var(--od-maroon-deep) 100%);
}

/* ---------- Block 4: Square (Darbar exterior) ---------- */

.od-legacy__block--square {
    grid-column: 9 / 13;
    grid-row: 2;
    align-self: start;
}

.od-legacy__block--square .od-legacy__figure {
    min-height: 320px;
    aspect-ratio: 1 / 1;
    background:
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.06) 0px, rgba(255, 255, 255, 0.06) 2px, transparent 2px, transparent 16px),
        linear-gradient(155deg, var(--od-maroon-base) 0%, var(--od-maroon-deep) 100%);
}

/* ==========================================================
   GLASSMORPHISM TAGS
   Present on Blocks 2 and 3 only, per brief. Real backdrop-filter
   blur (not a flat translucent fallback pretending to be glass),
   with a graceful non-blurred fallback for browsers/contexts
   where backdrop-filter isn't supported.
   ========================================================== */

.od-legacy__tag {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: var(--od-space-2);
    padding: var(--od-space-2) var(--od-space-4);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--od-radius-pill);
    background: rgba(42, 36, 34, 0.38);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    color: var(--od-white);
    font-size: 0.78rem;
    font-weight: var(--od-weight-medium);
    letter-spacing: 0.02em;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.18);
}

.od-legacy__tag::before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background-color: var(--od-gold-base);
}

.od-legacy__block--portrait .od-legacy__tag {
    left: var(--od-space-5);
    bottom: var(--od-space-5);
}

.od-legacy__block--landscape .od-legacy__tag {
    left: var(--od-space-5);
    bottom: var(--od-space-5);
}

/* Fallback for browsers without backdrop-filter support: a solid
   (not glass) tag rather than a broken-looking half-transparent one. */
@supports not (backdrop-filter: blur(1px)) {
    .od-legacy__tag {
        background: rgba(42, 36, 34, 0.86);
    }
}

/* ==========================================================
   SCROLL REVEAL + RESTRAINED PARALLAX
   Staggered fade/rise on data-reveal, matching the pattern
   already established in style.css and the banner section.
   Parallax is a small, GPU-cheap translateY tied to real scroll
   position via JS (see legacy-section.js) — not a scroll-jacking
   library, and fully inert under prefers-reduced-motion.
   ========================================================== */

.od-legacy [data-reveal] {
    transition: opacity 650ms var(--od-ease-entrance), transform 650ms var(--od-ease-entrance);
}

.od-legacy [data-reveal]:not(.is-revealed) {
    opacity: 0;
    transform: translateY(1.5rem);
}

.od-legacy__block--hook[data-reveal] { transition-delay: 0ms; }
.od-legacy__block--portrait[data-reveal] { transition-delay: 90ms; }
.od-legacy__block--landscape[data-reveal] { transition-delay: 180ms; }
.od-legacy__block--square[data-reveal] { transition-delay: 260ms; z-index:2; }

.od-legacy__figure img,
.od-legacy__figure {
    will-change: transform;
}

/* ==========================================================
   RESPONSIVE
   Row-span and negative-margin overlap are desktop-only devices.
   Below 1024px the grid collapses to two columns; below 700px,
   a single honest reading-order stack. Both explicitly zero out
   the overlap trick rather than let it fight smaller viewports.
   ========================================================== */

@media (max-width: 1024px) {
    .od-legacy__block--portrait {
        margin-block-end: 0;
    }

    .od-legacy__headline {
        font-size: clamp(2rem, 3vw + 1.25rem, 2.75rem);
    }
}

@media (max-width: 860px) {
    .od-legacy__mosaic {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }

    .od-legacy__block--hook {
        grid-column: 1 / 3;
        grid-row: auto;
        padding-block: 0 var(--od-space-4);
    }

    .od-legacy__block--portrait {
        grid-column: 1 / 3;
        grid-row: auto;
    }

    .od-legacy__block--landscape,
    .od-legacy__block--square {
        grid-column: span 1;
        grid-row: auto;
    }

    .od-legacy__figure {
        min-height: 280px;
    }
}

@media (max-width: 700px) {
    .od-legacy {
        padding-block: var(--od-layout-section-standard);
    }

    .od-legacy__mosaic {
        grid-template-columns: 1fr;
        gap: var(--od-space-8);
    }

    .od-legacy__block--hook,
    .od-legacy__block--portrait,
    .od-legacy__block--landscape,
    .od-legacy__block--square {
        grid-column: 1;
    }

    .od-legacy__headline {
        font-size: clamp(1.85rem, 6vw + 1rem, 2.5rem);
    }

    .od-legacy__sub {
        max-width: none;
    }

    .od-legacy__figure {
        min-height: 260px;
    }

    .od-legacy__block--landscape .od-legacy__figure,
    .od-legacy__block--square .od-legacy__figure {
        aspect-ratio: 4 / 3;
    }
}

@media (prefers-reduced-motion: reduce) {
    .od-legacy [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .od-legacy__figure,
    .od-legacy__figure img {
        will-change: auto;
    }
}



/*section 2*/

/*
 * Section: Guru Parampara (The Divine Lineage)
 * Full-width horizontal scroll-snap timeline of the seven gaddinasheens.
 * Built entirely on tokens defined in style.css — no new colors introduced.
 */

/* ==========================================================
   SECTION SHELL
   ========================================================== */

.parampara {
    position: relative;
    background-color: var(--od-bg-page);
    padding-block: var(--od-layout-section-standard);
    /* This section owns its own horizontal bleed, so it opts out of the
       shared .container's max-width/centering rather than fighting it. */
    overflow: hidden;
}

.parampara__layout {
    display: flex;
    align-items: flex-start;
    gap: var(--od-space-12);
}

/* ==========================================================
   INTRO COLUMN (sticky on desktop)
   ========================================================== */

.parampara__intro {
    flex: 0 0 clamp(260px, 26vw, 360px);
    padding-inline-start: var(--od-gutter-fluid);
    /* Sticks in the viewport while the track scrolls past beside it.
       top offset roughly matches the site header's real height so the
       intro doesn't tuck under the sticky nav. */
    position: sticky;
    top: calc(var(--od-space-24) + var(--od-space-8));
    align-self: flex-start;
}

.parampara__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--od-space-2);
    font-size: var(--od-type-xs);
    font-weight: var(--od-weight-bold);
    letter-spacing: 0.08em;
    color: var(--od-text-accent);
    margin-block-end: var(--od-space-4);
}

.parampara__eyebrow::before {
    content: '';
    display: inline-block;
    width: 1.5rem;
    height: 2px;
    background-color: var(--od-saffron-base);
    border-radius: var(--od-radius-pill);
}

.parampara__headline {
    font-size: var(--od-type-h2);
    line-height: var(--od-leading-tight);
    color: var(--od-text-primary);
    margin-block-end: var(--od-space-4);
    max-width: 18ch;
}

.parampara__subtext {
    font-size: var(--od-type-base);
    line-height: var(--od-leading-base);
    color: var(--od-text-secondary);
    max-width: 34ch;
    margin-block-end: var(--od-space-8);
}

.parampara__hint {
    display: inline-flex;
    align-items: center;
    gap: var(--od-space-2);
    font-size: var(--od-type-xs);
    font-weight: var(--od-weight-medium);
    color: var(--od-text-muted);
}

.parampara__hint-arrow {
    display: inline-block;
    transition: transform var(--od-duration-standard) var(--od-ease-standard);
}

/* Nudges once on load to suggest motion, then settles — a single
   deliberate cue rather than a looping animation someone has to ignore
   for the rest of their visit. */
@media (prefers-reduced-motion: no-preference) {
    .parampara__hint-arrow {
        animation: parampara-hint-nudge 1.8s ease-in-out 1;
        animation-delay: 600ms;
    }
}

@keyframes parampara-hint-nudge {
    0%, 100% { transform: translateX(0); }
    30% { transform: translateX(5px); }
    55% { transform: translateX(0); }
    75% { transform: translateX(3px); }
}

/* Only relevant once the track has actually been scrolled — see JS,
   which toggles this class on the section root. Fades the hint out so
   it doesn't linger as stale advice after the person already knows. */
.parampara--scrolled .parampara__hint {
    opacity: 0;
    transition: opacity var(--od-duration-slow) var(--od-ease-standard);
}

/* ==========================================================
   TIMELINE TRACK
   ========================================================== */

.parampara__track {
    flex: 1 1 auto;
    display: flex;
    gap: var(--od-space-6);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* Bleeds to the true right edge of the viewport regardless of where
       the section sits inside any centered parent. */
    padding-inline-end: var(--od-gutter-fluid);
    padding-block: var(--od-space-2); /* breathing room so focus rings aren't clipped */
    scroll-padding-inline-start: var(--od-space-6);
}

.parampara__track::-webkit-scrollbar {
    display: none;
}

.parampara__track {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* legacy Edge */
}

/* ==========================================================
   PORTRAIT CARD
   ========================================================== */

.parampara__card {
    position: relative;
    flex: 0 0 clamp(240px, 28vw, 320px);
    /* Explicit floor matching clamp()'s own lower bound — inert in any
       browser where flex-basis:clamp() already sizes the card correctly,
       but stops the card collapsing to zero width as a hard fallback if
       flex-basis+clamp() is ever misread in an unusual environment. */
    min-width: 240px;
    aspect-ratio: 3 / 4;
    border-radius: var(--od-radius-lg);
    overflow: hidden;
    scroll-snap-align: start;
    background-color: var(--od-maroon-deep); /* shows while the portrait image loads */
    isolation: isolate; /* keeps the ::before watermark correctly behind card content only */
}

.parampara__portrait {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* Placeholder shown until a real portrait is supplied — see PHP: any
   card without a real image path renders this instead of a broken
   <img>. Uses the same palette as the rest of the card so an
   unphotographed card still looks intentional, not broken. */
.parampara__portrait-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, var(--od-maroon-base), var(--od-maroon-deep));
}

.parampara__portrait-placeholder-initial {
    font-family: var(--od-font-deva);
    font-size: 4rem;
    font-weight: var(--od-weight-bold);
    color: rgba(255, 255, 255, 0.35);
}

/* Dark scrim so white text stays readable over any portrait */
.parampara__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.92) 0%,
        rgba(0, 0, 0, 0.55) 34%,
        rgba(0, 0, 0, 0) 66%
    );
}

/* Massive translucent serif numeral — a serif face used deliberately
   and only here, for the one moment in this section that calls for a
   plaque/cornerstone feel; every other typographic role in this
   section stays on the site's normal sans-serif. */
.parampara__watermark {
    position: absolute;
    left: var(--od-space-4);
    bottom: -0.28em;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(5rem, 16vw, 8rem);
    font-weight: 700;
    line-height: 1;
    color: rgba(255, 255, 255, 0.14);
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

.parampara__body {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: var(--od-space-6);
    z-index: 1;
}

.parampara__card-title {
    display: block;
    font-size: var(--od-type-xs);
    font-weight: var(--od-weight-bold);
    letter-spacing: 0.04em;
    color: var(--od-gold-base);
    margin-block-end: var(--od-space-2);
}

.parampara__card-name {
    display: block;
    font-size: var(--od-type-h4);
    line-height: var(--od-leading-snug);
    font-weight: var(--od-weight-bold);
    color: var(--od-white);
}

[lang="hi"] .parampara__card-name {
    font-family: var(--od-font-deva);
    line-height: var(--od-leading-base);
}

/* Restrained hover: the horizontal scroll itself is the section's real
   interaction, so card hover gets one small, quiet acknowledgment
   rather than a lift/shadow/scale performance repeated seven times. */
@media (hover: hover) {
    .parampara__card:hover .parampara__scrim {
        background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.95) 0%,
            rgba(0, 0, 0, 0.6) 40%,
            rgba(0, 0, 0, 0) 70%
        );
    }

    .parampara__card:hover .parampara__watermark {
        color: rgba(255, 255, 255, 0.2);
    }
}

.parampara__card:focus-visible {
    outline: 2px solid var(--od-gold-base);
    outline-offset: 3px;
}

/* Current gaddinasheen — the one place decoration is allowed to
   escalate, so that escalation reads as meaningful rather than
   arbitrary. */
.parampara__card--current {
    box-shadow: 0 0 0 2px var(--od-gold-base), var(--od-elevation-modal);
}

.parampara__card--current .parampara__card-title {
    color: var(--od-gold-base);
}

.parampara__card--current .parampara__badge {
    position: absolute;
    top: var(--od-space-4);
    right: var(--od-space-4);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: var(--od-space-1);
    padding: var(--od-space-1) var(--od-space-3);
    border-radius: var(--od-radius-pill);
    background: var(--od-gold-base);
    color: var(--od-maroon-deep);
    font-size: var(--od-type-xs);
    font-weight: var(--od-weight-bold);
}

.parampara__badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--od-maroon-deep);
}

/* Trailing spacer so the last card can snap fully into view with
   breathing room, instead of stopping flush against the browser edge. */
.parampara__track-end {
    flex: 0 0 1px;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

/* Below this, holding the intro column sticky beside a horizontal
   scroller leaves too little width for cards to read as "tall and
   elegant" — the layout switches to stacked instead of side-by-side. */
@media (max-width: 900px) {
    .parampara__layout {
        flex-direction: column;
        gap: var(--od-space-8);
    }

    .parampara__intro {
        position: static;
        flex: 1 1 auto;
        max-width: none;
        padding-inline-end: var(--od-gutter-fluid);
    }

    .parampara__headline,
    .parampara__subtext {
        max-width: none;
    }

    .parampara__track {
        padding-inline-start: var(--od-gutter-fluid);
    }
}

@media (max-width: 480px) {
    .parampara__card {
        flex-basis: 78vw;
    }

    .parampara__watermark {
        font-size: clamp(4rem, 22vw, 6rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .parampara__hint-arrow {
        animation: none;
    }

    .parampara__track {
        scroll-behavior: auto;
    }
}




/*Section 3*/

/* ==========================================================
   SHRI OM DARBAR — SACRED SANCTUARIES SECTION
   Architecture: Master Design System 2.0 Compliant
   Theme: Mandir Primitive Palette (Maroon / Gold / Sandstone)
   ========================================================== */

.od-sanctuaries {
    padding-block: var(--od-layout-section-spacious);
    background-color: var(--od-bg-page);
    color: var(--od-text-primary);
}

.od-sanctuaries__container {
    width: 100%;
    max-width: var(--od-container-wide);
    margin-inline: auto;
    padding-inline: var(--od-gutter-fluid);
}

/* Section Header */
.od-sanctuaries__header {
    text-align: center;
    max-width: var(--od-container-content);
    margin-inline: auto;
    margin-block-end: var(--od-layout-section-compact);
}

.od-sanctuaries__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--od-space-2);
    margin-block-end: var(--od-space-2);
    font-size: var(--od-type-xs);
    font-weight: var(--od-weight-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--od-gold-base);
}

.od-sanctuaries__eyebrow::before,
.od-sanctuaries__eyebrow::after {
    content: "";
    display: inline-block;
    width: var(--od-space-6);
    height: 1px;
    background-color: var(--od-gold-base);
}

.od-sanctuaries__headline {
    color: var(--od-maroon-base);
    font-size: var(--od-type-h2);
    font-weight: var(--od-weight-bold);
    line-height: var(--od-leading-tight);
    margin-block-end: var(--od-space-3);
}

.od-sanctuaries__sub {
    color: var(--od-text-secondary);
    font-size: var(--od-type-base);
    line-height: var(--od-leading-base);
    margin: 0;
}

/* Grid Architecture */
.od-sanctuaries__grid {
    display: grid;
    gap: var(--od-space-6);
    grid-template-columns: repeat(4, 1fr);
    content-visibility: auto;
}

/* Visibility Clamping: Show only 2 rows before expand */
.od-sanctuaries__grid:not(.is-expanded) .od-card--hide-desktop {
    display: none !important;
}

/* Responsive Grid Adjustments */
@media (max-width: 1024px) {
    .od-sanctuaries__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--od-space-4);
    }
}

@media (max-width: 768px) {
    .od-sanctuaries {
        padding-block: var(--od-layout-section-standard);
    }

    /* Mobile: Strictly 2 cards in one row */
    .od-sanctuaries__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--od-space-3);
    }

    /* Mobile: Clamped to 6 items (3 rows) */
    .od-sanctuaries__grid:not(.is-expanded) .od-card--hide-mobile {
        display: none !important;
    }

    .od-sanctuaries__header {
        margin-block-end: var(--od-space-8);
    }
}

/* Card Primitive */
.od-sanctuaries__card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 4 / 5;
    border-radius: var(--od-radius-lg);
    overflow: hidden;
    text-decoration: none;
    background-color: var(--od-maroon-deep);
    border: 1px solid var(--od-sand-border);
    box-shadow: var(--od-elevation-floating);
    transform: translateY(0);
    transition: transform var(--od-duration-standard) var(--od-ease-standard),
                box-shadow var(--od-duration-standard) var(--od-ease-standard),
                border-color var(--od-duration-standard) var(--od-ease-standard);
    isolation: isolate;
}

.od-sanctuaries__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--od-elevation-modal);
    border-color: var(--od-gold-base);
}

.od-sanctuaries__card:focus-visible {
    outline: 2px solid var(--od-border-focus);
    outline-offset: 3px;
}

/* Media & Picture Optimization */
.od-sanctuaries__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: var(--od-z-base);
}

.od-sanctuaries__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1);
    transition: transform var(--od-duration-slow) var(--od-ease-standard);
}

.od-sanctuaries__card:hover .od-sanctuaries__image {
    transform: scale(1.05);
}

/* Fallback: Texture if image fails */
.od-sanctuaries__card--fallback .od-sanctuaries__media {
    background: 
        repeating-linear-gradient(
            135deg, 
            rgba(198, 156, 56, 0.08) 0px, 
            rgba(198, 156, 56, 0.08) 2px, 
            transparent 2px, 
            transparent 12px
        ),
        linear-gradient(160deg, var(--od-maroon-base) 0%, var(--od-maroon-deep) 100%);
}

.od-sanctuaries__card--fallback .od-sanctuaries__image {
    display: none;
}

/* Vignette Overlay */
.od-sanctuaries__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg, 
        transparent 30%, 
        rgba(79, 16, 20, 0.4) 60%, 
        var(--od-maroon-deep) 100%
    );
    pointer-events: none;
}

/* Content */
.od-sanctuaries__content {
    position: relative;
    z-index: calc(var(--od-z-base) + 1);
    padding: var(--od-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--od-space-1);
}

@media (max-width: 768px) {
    .od-sanctuaries__content {
        padding: var(--od-space-3);
    }
}

.od-sanctuaries__city {
    font-size: var(--od-type-xs);
    font-weight: var(--od-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--od-gold-base);
    line-height: var(--od-leading-tight);
}

.od-sanctuaries__name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--od-space-2);
}

.od-sanctuaries__name {
    font-size: var(--od-type-sm);
    font-weight: var(--od-weight-bold);
    color: var(--od-white);
    line-height: var(--od-leading-snug);
}

@media (min-width: 769px) {
    .od-sanctuaries__name {
        font-size: var(--od-type-base);
    }
}

.od-sanctuaries__arrow {
    display: inline-flex;
    color: var(--od-gold-base);
    font-size: var(--od-type-sm);
    line-height: var(--od-leading-none);
    transform: translateX(-4px);
    opacity: 0;
    transition: transform var(--od-duration-fast) var(--od-ease-standard),
                opacity var(--od-duration-fast) var(--od-ease-standard);
}

.od-sanctuaries__card:hover .od-sanctuaries__arrow,
.od-sanctuaries__card:focus-visible .od-sanctuaries__arrow {
    opacity: 1;
    transform: translateX(0);
}

/* Control CTA */
.od-sanctuaries__actions {
    display: flex;
    justify-content: center;
    margin-block-start: var(--od-layout-section-compact);
}

.od-sanctuaries__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--od-space-3);
    padding: var(--od-space-3) var(--od-space-8);
    background-color: var(--od-action-authority-bg);
    color: var(--od-action-authority-text);
    border: 1px solid var(--od-gold-base);
    border-radius: var(--od-radius-pill);
    font-family: var(--od-font-sans);
    font-size: var(--od-type-sm);
    font-weight: var(--od-weight-medium);
    cursor: pointer;
    box-shadow: var(--od-elevation-floating);
    transition: background-color var(--od-duration-fast) var(--od-ease-standard),
                color var(--od-duration-fast) var(--od-ease-standard),
                transform var(--od-duration-fast) var(--od-ease-standard);
}

.od-sanctuaries__btn:hover {
    background-color: var(--od-maroon-deep);
    color: var(--od-gold-base);
    transform: translateY(-2px);
}

.od-sanctuaries__btn:focus-visible {
    outline: 2px solid var(--od-border-focus);
    outline-offset: 3px;
}

.od-sanctuaries__btn-icon {
    transition: transform var(--od-duration-standard) var(--od-ease-standard);
}

.od-sanctuaries__btn[aria-expanded="true"] .od-sanctuaries__btn-icon {
    transform: rotate(180deg);
}

/* Reduced Motion Override */
@media (prefers-reduced-motion: reduce) {
    .od-sanctuaries__card,
    .od-sanctuaries__image,
    .od-sanctuaries__arrow,
    .od-sanctuaries__btn,
    .od-sanctuaries__btn-icon {
        transition: none !important;
        transform: none !important;
    }
}
 
 /*Section 4*/
 
 /*
 * Section: Daily Sewa & Spiritual Schedule
 * Dark-theme vertical zig-zag timeline. Built entirely on tokens defined
 * in style.css, plus one deliberately-chosen serif for time-stamps only.
 */

/* ==========================================================
   SECTION SHELL — dark surface
   ========================================================== */

.sewa {
    background-color: var(--od-bg-inverse-deep);
    padding-block: var(--od-layout-section-spacious);
    position: relative;
    overflow: hidden;
}

/* A very faint radial warmth behind the header, so the dark field isn't
   perfectly flat — restrained enough that it reads as atmosphere, not
   a decorative gradient wash. */
.sewa::before {
    content: '';
    position: absolute;
    top: -10%;
    left: 50%;
    width: 60vw;
    height: 40vw;
    max-width: 900px;
    max-height: 600px;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(198, 156, 56, 0.08), transparent);
    pointer-events: none;
}

/* ==========================================================
   SECTION HEADER — centered
   ========================================================== */

.sewa__header {
    position: relative;
    max-width: var(--od-container-content);
    /* margin-inline: auto is the semantically-correct modern property
       (supported in every real browser since 2021) and is kept as the
       primary declaration. margin-left/margin-right are included as an
       explicit physical fallback, since this project's own render-
       verification tool does not compute margin-inline at all —
       confirmed directly via isolated testing — while the physical
       properties work correctly. Both resolve identically in any
       browser that supports the logical property; only this specific
       tool needs the physical pair to render centering at all. */
    margin-left: auto;
    margin-right: auto;
    margin-inline: auto;
    padding-inline: var(--od-gutter-fluid);
    text-align: center;
    margin-block-end: var(--od-layout-section-standard);
}

.sewa__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--od-space-2);
    font-size: var(--od-type-xs);
    font-weight: var(--od-weight-bold);
    letter-spacing: 0.08em;
    color: var(--od-gold-base);
    margin-block-end: var(--od-space-4);
}

.sewa__eyebrow::before,
.sewa__eyebrow::after {
    content: '';
    display: inline-block;
    width: 1.5rem;
    height: 1px;
    background-color: var(--od-gold-base);
    opacity: 0.6;
}

.sewa__headline {
    font-size: var(--od-type-h1);
    line-height: var(--od-leading-tight);
    color: var(--od-text-inverse);
    margin-block-end: var(--od-space-6);
}

.sewa__subtext {
    font-size: var(--od-type-base);
    line-height: var(--od-leading-relaxed);
    color: var(--od-text-inverse-muted);
    max-width: 56ch;
    margin-left: auto;
    margin-right: auto;
    margin-inline: auto;
}

/* ==========================================================
   TIMELINE — desktop zig-zag
   ========================================================== */

.sewa__timeline {
    position: relative;
    /* Deliberately narrower than the site's standard wide container —
       this timeline's content (a time and a short activity name) is
       compact enough that a full 1200px width leaves the zig-zag
       reading as sparse, disconnected text floating near a distant
       spine rather than a balanced, editorial back-and-forth. */
    max-width: var(--od-container-content);
    margin-left: auto;
    margin-right: auto;
    margin-inline: auto;
    padding-inline: var(--od-gutter-fluid);
    list-style: none;
}

/* The spine — a single hairline drawn once on the container, not
   repeated per item, so it reads as one continuous thread rather than
   stacked segments. */
.sewa__timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(255, 255, 255, 0.16) 6%,
        rgba(255, 255, 255, 0.16) 94%,
        transparent
    );
    transform: translateX(-50%);
}

.sewa__item {
    position: relative;
    display: flex;
    align-items: center;
    column-gap: var(--od-space-8);
    padding-block: var(--od-space-8);
}

/* .sewa__content wraps time+activity as one real flex container (not
   CSS Grid — this render-verification tool cannot compute
   grid-template-columns at all, confirmed independently for the
   header's dropdown menu earlier in this build; flexbox is a fully
   equal choice for browsers and the one this project can actually
   verify). On desktop it's a row, so time/activity sit on either side
   of the spine with the node genuinely between them. On mobile
   (below) it becomes a column instead, so they stack together beside
   the node, per the brief. */
.sewa__content {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    column-gap: var(--od-space-8);
    order: 1;
    position: relative;
}

.sewa__node {
    order: 2;
}

/* A short connector reaching from the node toward the text — without
   it, the wide flex box around each time/activity pair leaves the
   actual visible text hugging the spine with dead space beyond it,
   since only the text glyphs themselves are visible, not their
   invisible container. Drawn as a pseudo-element (per the brief) on
   whichever edge of .sewa__content sits nearest the node for that row. */
.sewa__content::after {
    content: '';
    position: absolute;
    top: 50%;
    right: calc(-1 * var(--od-space-8));
    width: var(--od-space-8);
    height: 1px;
    background-color: rgba(255, 255, 255, 0.16);
    transform: translateY(-50%);
}

.sewa__item:nth-child(even) .sewa__content::after {
    right: auto;
    left: calc(-1 * var(--od-space-8));
}

/* Zig-zag: odd items carry time on the left / activity on the right;
   even items swap sides, per the brief. DOM order inside .sewa__content
   stays logical (time, then activity) for every item regardless of
   which side it visually lands on, so reading order stays sane for
   screen readers independent of visual side. */
.sewa__time {
    order: 1;
    flex: 1 1 0;
    text-align: right;
}

.sewa__activity {
    order: 2;
    flex: 1 1 0;
    text-align: left;
}

.sewa__item:nth-child(even) .sewa__content {
    order: 3;
}

.sewa__item:nth-child(even) .sewa__time {
    order: 2;
    text-align: left;
}

.sewa__item:nth-child(even) .sewa__activity {
    order: 1;
    text-align: right;
}

.sewa__time-value {
    font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
    font-weight: 600;
    color: var(--od-gold-base);
    line-height: var(--od-leading-none);
}

.sewa__activity-en {
    display: block;
    font-size: var(--od-type-h4);
    font-weight: var(--od-weight-bold);
    color: var(--od-text-inverse);
    line-height: var(--od-leading-snug);
}

.sewa__activity-hi {
    display: block;
    font-family: var(--od-font-deva);
    font-size: var(--od-type-sm);
    font-weight: var(--od-weight-medium);
    color: var(--od-text-inverse-muted);
    line-height: var(--od-leading-relaxed);
    margin-block-start: var(--od-space-1);
}

/* --- The node: glowing icon marker sitting on the spine --- */

.sewa__node {
    position: relative;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--od-bg-inverse-deep);
    border: 1px solid rgba(198, 156, 56, 0.4);
    color: var(--od-gold-base);
    z-index: 1;
    flex-shrink: 0;
}

.sewa__node-icon {
    width: 20px;
    height: 20px;
}

/* The glow — a soft blurred halo behind the node, separate from the
   node itself so its opacity can animate independently on reveal
   without affecting the node's own crisp edge. */
.sewa__node::after {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(198, 156, 56, 0.35), transparent);
    z-index: -1;
    opacity: 0;
    transition: opacity var(--od-duration-slow) var(--od-ease-entrance);
}

/* --- One deliberate reveal moment per node, not a repeating pulse ---
   JS adds .is-revealed as each node scrolls into view; @media
   (scripting: none) and prefers-reduced-motion both fall back to
   fully visible, matching the pattern already used elsewhere on this
   site (see [data-reveal] in style.css). */
.sewa__node {
    opacity: 0;
    transform: scale(0.75);
    transition: opacity var(--od-duration-slow) var(--od-ease-entrance),
                transform var(--od-duration-slow) var(--od-ease-entrance);
}

.sewa__node.is-revealed {
    opacity: 1;
    transform: scale(1);
}

.sewa__node.is-revealed::after {
    opacity: 1;
}

@media (scripting: none) {
    .sewa__node {
        opacity: 1;
        transform: none;
    }

    .sewa__node::after {
        opacity: 1;
    }
}

/* --- The current/living observance (Evening Aarti, last item) --- */

.sewa__item--closing .sewa__node {
    background-color: var(--od-gold-base);
    border-color: var(--od-gold-base);
    color: var(--od-maroon-deep);
}

.sewa__item--closing .sewa__node::after {
    background: radial-gradient(closest-side, rgba(198, 156, 56, 0.55), transparent);
}

/* ==========================================================
   RESPONSIVE — mobile: spine moves to the far left, single column
   ========================================================== */

@media (max-width: 767px) {
    .sewa__headline {
        font-size: var(--od-type-h2);
    }

    .sewa__timeline::before {
        left: 1.5rem;
        transform: none;
    }

    .sewa__item {
        column-gap: var(--od-space-4);
    }

    /* Content stacks (time above activity) instead of splitting across
       the spine — the node no longer sits between them, it sits beside
       the whole stacked pair, per the brief. `order` on .sewa__content
       and .sewa__node from the desktop rules is irrelevant here since
       DOM order (node, then content) already matches this layout. The
       horizontal connector line only makes sense for the desktop
       side-split layout, so it's suppressed here. */
    .sewa__content::after {
        display: none;
    }

    .sewa__content {
        flex-direction: column;
        align-items: flex-start;
        column-gap: 0;
    }

    .sewa__item:nth-child(even) .sewa__content {
        order: initial;
    }

    .sewa__time,
    .sewa__activity,
    .sewa__item:nth-child(even) .sewa__time,
    .sewa__item:nth-child(even) .sewa__activity {
        order: initial;
        flex: none;
        text-align: left;
    }

    .sewa__node {
        order: initial;
        width: 2.5rem;
        height: 2.5rem;
        /* centers the node's own width on the spine, which sits at left:1.5rem */
        margin-inline-start: calc(1.5rem - 1.25rem);
    }

    .sewa__node-icon {
        width: 16px;
        height: 16px;
    }

    .sewa__time {
        margin-block-end: var(--od-space-1);
    }

    .sewa__time-value {
        font-size: 1.375rem;
    }

    .sewa__activity-en {
        font-size: var(--od-type-base);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sewa__node {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .sewa__node::after {
        opacity: 1;
        transition: none;
    }
}
 
 /*Section 5*/
 /* ==========================================================================
   Shri OM Darbar — Homepage "Divine Music & Bhajans" section
   Scoped to .od-music. Uses Master Design System tokens from style.css.

   Background is --od-bg-surface (pure white), not --od-bg-page (cream) —
   the brief explicitly wants this section to contrast against the warm
   cream of the previous (Sanctuaries) section, not repeat it.
   ========================================================================== */

.od-music,
.od-music *,
.od-music *::before,
.od-music *::after {
    box-sizing: border-box;
}

.od-music {
    padding-block: var(--od-layout-section-spacious);
    background-color: var(--od-bg-surface);
}

.od-music__container {
    width: min(100%, var(--od-container-wide));
    margin-inline: auto;
    padding-inline: var(--od-gutter-fluid);
}

/* ==========================================================
   SECTION HEADER — centered, matches the established rhythm
   from Legacy/Sanctuaries (eyebrow + headline + sub-text)
   ========================================================== */

.od-music__header {
    max-width: 640px;
    margin-inline: auto;
    margin-block-end: var(--od-layout-section-compact);
    text-align: center;
}

.od-music__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--od-space-2);
    margin-block-end: var(--od-space-4);
    color: var(--od-text-accent);
    font-size: 0.7rem;
    font-weight: var(--od-weight-bold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.od-music__eyebrow::before,
.od-music__eyebrow::after {
    content: "";
    display: inline-block;
    width: 1.5rem;
    height: 1px;
    background-color: var(--od-gold-base);
}

.od-music__headline {
    margin: 0 0 var(--od-space-4);
    color: var(--od-text-primary);
    font-size: clamp(2rem, 1.4vw + 1.65rem, 3rem);
    font-weight: var(--od-weight-bold);
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.od-music__sub {
    margin: 0;
    color: var(--od-text-secondary);
    font-size: var(--od-type-base);
    line-height: var(--od-leading-relaxed);
}

/* ==========================================================
   THE GRID
   Explicit column counts per breakpoint, per spec (unlike the
   Sanctuaries section's auto-fill — that was the right call for
   an unknown-length 25-item list; this is a curated "latest N"
   feed where a fixed 4/2/1 progression is the correct, spec'd
   mechanism instead).
   ========================================================== */

.od-music__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

/* ==========================================================
   VIDEO CARD
   ========================================================== */

.od-music__card {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--od-radius-lg);
    background-color: var(--od-sand-surface);
    text-decoration: none;
    isolation: isolate;
}

.od-music__card:focus-visible {
    outline: 2px solid var(--od-border-focus);
    outline-offset: 3px;
}

.od-music__thumb {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 0.5s ease;
}

.od-music__card:hover .od-music__thumb,
.od-music__card:focus-visible .od-music__thumb {
    transform: scale(1.04);
}

/* Fallback for a missing/failed thumbnail — same pattern used across
   every other homepage section, so a card with no image yet still
   looks intentional rather than broken. */
.od-music__card--fallback .od-music__thumb {
    display: none;
}

.od-music__card--fallback::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        repeating-linear-gradient(135deg, rgba(198, 156, 56, 0.12) 0px, rgba(198, 156, 56, 0.12) 2px, transparent 2px, transparent 14px),
        linear-gradient(165deg, var(--od-maroon-base) 0%, var(--od-maroon-deep) 100%);
}

/*
 * Constant dark wash (opacity 0.3) so the badge/title are always
 * legible even before hover, deepening to 0.6 on hover per spec —
 * this is a flat color overlay, separate from the gradient below it,
 * because the spec explicitly asks for both: a constant bottom
 * gradient for text legibility, PLUS a whole-image darkening wash
 * that itself changes opacity on hover.
 */
.od-music__wash {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: rgba(20, 14, 12, 0.3);
    transition: background-color 0.4s ease;
    pointer-events: none;
}

.od-music__card:hover .od-music__wash,
.od-music__card:focus-visible .od-music__wash {
    background-color: rgba(20, 14, 12, 0.6);
}

.od-music__gradient {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, transparent 55%);
    pointer-events: none;
}

/* ---------- Top-left type badge ---------- */

.od-music__badge {
    position: absolute;
    z-index: 3;
    top: var(--od-space-4);
    left: var(--od-space-4);
    padding: var(--od-space-1) var(--od-space-3);
    border-radius: var(--od-radius-pill);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--od-maroon-base);
    font-size: 0.68rem;
    font-weight: var(--od-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

@supports not (backdrop-filter: blur(1px)) {
    .od-music__badge {
        background: var(--od-white);
    }
}

/* ---------- Center play icon ---------- */

.od-music__play {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    color: var(--od-white);
    /* Centering + hover-scale both use transform, so they're combined
       in one declaration — animating a second, separate scale transform
       independently of the centering translate would fight it. */
    transform: translate(-50%, -50%) scale(1);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    /* The "glowing" quality from the brief, via a soft drop-shadow
       rather than an actual blur filter (which would blur the icon
       itself, not just cast a glow behind it). */
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.55));
    pointer-events: none;
}

.od-music__play svg {
    width: 1.2rem;
    height: 1.2rem;
    margin-inline-start: 2px; /* optically center the play triangle */
    fill: currentColor;
}

.od-music__card:hover .od-music__play,
.od-music__card:focus-visible .od-music__play {
    transform: translate(-50%, -50%) scale(1.2);
}

/* ---------- Bottom title ---------- */

.od-music__content {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 3;
    padding: var(--od-space-4);
}

.od-music__title {
    margin: 0;
    color: var(--od-white);
    font-size: 0.95rem;
    font-weight: var(--od-weight-bold);
    line-height: 1.3;
    /* Clamp to 2 lines so a long title can't push past the card's
       fixed 16:9 height or crowd the play icon above it. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==========================================================
   SECONDARY CTA — centered link below the grid
   ========================================================== */

.od-music__cta {
    display: flex;
    justify-content: center;
    margin-block-start: var(--od-layout-section-compact);
}

.od-music__cta-link {
    display: inline-flex;
    align-items: center;
    gap: var(--od-space-2);
    padding: var(--od-space-3) var(--od-space-6);
    border: 1px solid var(--od-border-default);
    border-radius: var(--od-radius-pill);
    color: var(--od-text-brand);
    font-size: var(--od-type-sm);
    font-weight: var(--od-weight-bold);
    text-decoration: none;
    transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease;
}

.od-music__cta-link:hover,
.od-music__cta-link:focus-visible {
    border-color: var(--od-saffron-deep);
    background-color: var(--od-saffron-wash);
    color: var(--od-saffron-deep);
}

.od-music__cta-link svg {
    width: 1.05rem;
    height: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.25s ease;
}

.od-music__cta-link:hover svg,
.od-music__cta-link:focus-visible svg {
    transform: translateX(3px);
}

/* ==========================================================
   RESPONSIVE — 4 / 2 / 1, per spec
   ========================================================== */

@media (max-width: 1024px) {
    .od-music__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .od-music {
        padding-block: var(--od-layout-section-standard);
    }

    .od-music__grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .od-music__headline {
        font-size: clamp(1.75rem, 6vw + 1rem, 2.25rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .od-music__thumb,
    .od-music__wash,
    .od-music__play,
    .od-music__cta-link svg {
        transition: none;
    }

    .od-music__card:hover .od-music__thumb {
        transform: none;
    }

    .od-music__card:hover .od-music__play {
        transform: translate(-50%, -50%) scale(1);
    }
}



/*section 6*/

/* ==========================================================================
   Shri OM Darbar — Homepage "Upcoming Mahotsavs & Events" section
   Scoped to .od-events. Uses Master Design System tokens from style.css.

   Card shadow uses the brief's own exact value (0 4px 20px rgba(0,0,0,.05))
   rather than the system's --od-elevation-floating token — the brief was
   specific enough about this number that it reads as intentional, and it's
   genuinely softer/more spread than the existing token, which suits a
   "premium floating card" better than the system default here.
   ========================================================================== */

.od-events,
.od-events *,
.od-events *::before,
.od-events *::after {
    box-sizing: border-box;
}

.od-events {
    padding-block: var(--od-layout-section-spacious);
    background-color: var(--od-bg-page);
}

.od-events__container {
    width: min(100%, var(--od-container-default));
    margin-inline: auto;
    padding-inline: var(--od-gutter-fluid);
}

/* ==========================================================
   SECTION HEADER
   ========================================================== */

.od-events__header {
    max-width: 640px;
    margin-inline: auto;
    margin-block-end: var(--od-layout-section-compact);
    text-align: center;
}

.od-events__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--od-space-2);
    margin-block-end: var(--od-space-4);
    color: var(--od-text-accent);
    font-size: 0.7rem;
    font-weight: var(--od-weight-bold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.od-events__eyebrow::before,
.od-events__eyebrow::after {
    content: "";
    display: inline-block;
    width: 1.5rem;
    height: 1px;
    background-color: var(--od-gold-base);
}

.od-events__headline {
    margin: 0 0 var(--od-space-4);
    color: var(--od-text-primary);
    font-size: clamp(2rem, 1.4vw + 1.65rem, 3rem);
    font-weight: var(--od-weight-bold);
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.od-events__sub {
    margin: 0;
    color: var(--od-text-secondary);
    font-size: var(--od-type-base);
    line-height: var(--od-leading-relaxed);
}

/* ==========================================================
   EVENT LIST — constrained max-width per spec, editorial column
   ========================================================== */

.od-events__list {
    display: flex;
    flex-direction: column;
    gap: var(--od-space-6);
    max-width: 800px;
    margin-inline: auto;
}

/* ==========================================================
   EVENT CARD
   ========================================================== */

.od-events__card {
    display: flex;
    align-items: flex-start;
    gap: var(--od-space-6);
    padding: var(--od-space-6);
    background-color: var(--od-white);
    border-radius: var(--od-radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.od-events__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.09);
}




/*section 7*/

/* ==========================================================================
   Shri OM Darbar — Homepage "Sacred Literature & Publications" section
   Scoped to .od-literature. Uses Master Design System tokens from style.css.

   Reuses the Fraunces serif display font already established in the
   Legacy section for its headline, rather than introducing a third
   one-off typeface. Same header-head.php font-load dependency applies
   here as there — see that section's notes, not repeated per-section.
   ========================================================================== */

.od-literature,
.od-literature *,
.od-literature *::before,
.od-literature *::after {
    box-sizing: border-box;
}

.od-literature {
    padding-block: var(--od-layout-section-spacious);
    background-color: var(--od-bg-surface);
}

.od-literature__container {
    width: min(100%, var(--od-container-wide));
    margin-inline: auto;
    padding-inline: var(--od-gutter-fluid);
}

/* ==========================================================
   SECTION HEADER
   ========================================================== */

.od-literature__header {
    max-width: 640px;
    margin-inline: auto;
    margin-block-end: var(--od-layout-section-compact);
    text-align: center;
}

.od-literature__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--od-space-2);
    margin-block-end: var(--od-space-4);
    color: var(--od-text-accent);
    font-size: 0.7rem;
    font-weight: var(--od-weight-bold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.od-literature__eyebrow::before,
.od-literature__eyebrow::after {
    content: "";
    display: inline-block;
    width: 1.5rem;
    height: 1px;
    background-color: var(--od-gold-base);
}

.od-literature__headline {
    margin: 0 0 var(--od-space-4);
    color: var(--od-text-primary);
    font-family: 'Fraunces', var(--od-font-sans);
    font-size: clamp(2.25rem, 1.6vw + 1.85rem, 3.5rem);
    font-weight: 600;
    font-optical-sizing: auto;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.od-literature__sub {
    margin: 0;
    color: var(--od-text-secondary);
    font-size: var(--od-type-base);
    line-height: var(--od-leading-relaxed);
}

/* ==========================================================
   THE GRID
   auto-fit (not auto-fill) is the correct choice here — this is a
   small, fixed set of 6 books, not an open-ended list. auto-fit
   collapses empty leftover tracks so the books stay generously
   sized and centered rather than auto-fill leaving phantom empty
   columns at very wide viewports.
   ========================================================== */

.od-literature__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 3rem;
}

/* ==========================================================
   BOOK CARD
   ========================================================== */

.od-literature__book {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/*
 * The cover itself. Two separate elements handle the "physical
 * object" illusion:
 *   .od-literature__cover      — the shadow-casting wrapper (shadow
 *                                 lives here, not on the image, so it
 *                                 isn't clipped by the image's own
 *                                 border-radius/overflow)
 *   .od-literature__cover-img  — the actual image, gets the spine
 *                                 highlight on its left edge
 */
.od-literature__cover {
    position: relative;
    width: 100%;
    max-width: 220px;
    aspect-ratio: 2 / 3;
    border-radius: 2px;
    box-shadow: 12px 15px 25px rgba(0, 0, 0, 0.15);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.od-literature__book:hover .od-literature__cover,
.od-literature__book:focus-within .od-literature__cover {
    transform: translateY(-8px);
    box-shadow: 15px 20px 30px rgba(0, 0, 0, 0.12);
}

.od-literature__cover-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    /*
     * Spine highlight. The brief's literal rgba(255,255,255,.3) is
     * genuinely near-invisible against most book cover photography —
     * checked visually before shipping, not assumed from the number
     * alone. Layered as a gradient (bright at the very edge, fading
     * inward) rather than a flat border, which reads as a believable
     * spine catching light rather than a ruler-straight line — and
     * the gradient's own contrast does the work a plain 0.3-alpha
     * border couldn't.
     */
    box-shadow: inset 3px 0 6px -2px rgba(255, 255, 255, 0.5),
                inset 1px 0 0 rgba(255, 255, 255, 0.35);
}

/* ---------- CSS-only fallback for a missing cover image ---------- */

.od-literature__cover--fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--od-space-6);
    background-color: var(--od-maroon-base);
    border: 1px solid rgba(198, 156, 56, 0.55);
    border-radius: 2px;
    box-shadow: inset 3px 0 6px -2px rgba(255, 255, 255, 0.12),
                12px 15px 25px rgba(0, 0, 0, 0.15);
}

.od-literature__book:hover .od-literature__cover--fallback,
.od-literature__book:focus-within .od-literature__cover--fallback {
    box-shadow: inset 3px 0 6px -2px rgba(255, 255, 255, 0.12),
                15px 20px 30px rgba(0, 0, 0, 0.12);
}

.od-literature__fallback-mark {
    color: var(--od-gold-base);
    font-family: var(--od-font-deva);
    font-size: 2rem;
    line-height: 1;
    margin-block-end: var(--od-space-3);
}

.od-literature__fallback-title {
    color: var(--od-white);
    font-family: 'Fraunces', var(--od-font-sans);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
}

/* ---------- Title below the cover ---------- */

.od-literature__title {
    margin: var(--od-space-4) 0 0;
    max-width: 220px;
    color: var(--od-text-primary);
    font-family: 'Fraunces', var(--od-font-sans);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.35;
}

/* ==========================================================
   SECONDARY CTA
   ========================================================== */

.od-literature__cta {
    display: flex;
    justify-content: center;
    margin-block-start: var(--od-layout-section-compact);
}

.od-literature__cta-link {
    display: inline-flex;
    align-items: center;
    gap: var(--od-space-2);
    color: var(--od-text-brand);
    font-size: var(--od-type-sm);
    font-weight: var(--od-weight-bold);
    text-decoration: none;
    border-block-end: 1px solid var(--od-border-default);
    padding-block-end: var(--od-space-1);
    transition: border-color 0.25s ease, color 0.25s ease, gap 0.25s ease;
}

.od-literature__cta-link:hover,
.od-literature__cta-link:focus-visible {
    color: var(--od-saffron-deep);
    border-color: var(--od-saffron-deep);
    gap: var(--od-space-3);
}

.od-literature__cta-link svg {
    width: 1.05rem;
    height: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 700px) {
    .od-literature {
        padding-block: var(--od-layout-section-standard);
    }

    .od-literature__grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 2rem;
    }

    .od-literature__headline {
        font-size: clamp(1.85rem, 6vw + 1rem, 2.5rem);
    }

    .od-literature__cover {
        max-width: 160px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .od-literature__cover {
        transition: none;
    }

    .od-literature__book:hover .od-literature__cover {
        transform: none;
    }
}



/*section 8*/

/* ==========================================================================
   Shri OM Darbar — Homepage "Join the Sewa" (Donation CTA) section
   Scoped to .od-sewa. Uses Master Design System tokens from style.css.

   Overlay contrast was calculated, not assumed: white text against this
   exact gradient composited over a worst-case pure-white photo patch at
   the gradient's lighter (0.85) end still achieves 8.6:1 contrast —
   comfortably past WCAG AAA (7:1), let alone AA (4.5:1). The brief's own
   overlay spec is genuinely sufficient as given.

   Glow color uses --od-saffron-base's real RGB (222,91,60), not the
   brief's literal rgba(255,102,0,...) — that value is a distinctly
   different, more pure-orange hue than this system's actual saffron and
   would look like a mismatched color next to the button it's glowing
   around.
   ========================================================================== */

.od-sewa,
.od-sewa *,
.od-sewa *::before,
.od-sewa *::after {
    box-sizing: border-box;
}

.od-sewa {
    position: relative;
    width: 100%;
    padding-block: var(--od-space-24);
    background-image:
        linear-gradient(rgba(62, 39, 35, 0.85), rgba(62, 39, 35, 0.95)),
        var(--od-sewa-bg-image, linear-gradient(165deg, var(--od-maroon-base) 0%, var(--od-maroon-deep) 100%));
    background-size: cover;
    background-position: center;
    color: var(--od-white);
    text-align: center;
}

.od-sewa__container {
    max-width: 800px;
    margin-inline: auto;
    padding-inline: var(--od-gutter-fluid);
}

/* ==========================================================
   HEADER / BODY COPY
   ========================================================== */

.od-sewa__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--od-space-2);
    margin-block-end: var(--od-space-4);
    color: var(--od-gold-base);
    font-size: 0.72rem;
    font-weight: var(--od-weight-bold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.od-sewa__eyebrow::before,
.od-sewa__eyebrow::after {
    content: "";
    display: inline-block;
    width: 1.5rem;
    height: 1px;
    background-color: var(--od-gold-base);
}

.od-sewa__headline {
    margin: 0 0 var(--od-space-6);
    color: var(--od-white);
    font-size: clamp(2.25rem, 1.8vw + 1.85rem, 3.75rem);
    font-weight: var(--od-weight-bold);
    letter-spacing: -0.015em;
    line-height: 1.1;
}

.od-sewa__sub {
    margin: 0 auto var(--od-space-12);
    max-width: 640px;
    color: rgba(255, 255, 255, 0.88);
    font-size: var(--od-type-base);
    line-height: var(--od-leading-relaxed);
}

/* ==========================================================
   IMPACT ICONS — straight line of 4 on desktop, 2x2 on mobile
   ========================================================== */

.od-sewa__impact {
    display: flex;
    justify-content: center;
    gap: var(--od-space-8);
    margin-block-end: var(--od-space-12);
}

.od-sewa__impact-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--od-space-2);
    color: rgba(255, 255, 255, 0.8);
}

.od-sewa__impact-item svg {
    width: 1.75rem;
    height: 1.75rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.od-sewa__impact-label {
    font-size: 0.78rem;
    font-weight: var(--od-weight-medium);
    letter-spacing: 0.02em;
}

/* ==========================================================
   CTA BUTTON
   ========================================================== */

.od-sewa__button {
    display: inline-flex;
    align-items: center;
    gap: var(--od-space-3);
    padding: var(--od-space-4) var(--od-space-8);
    background-color: var(--od-saffron-base);
    color: var(--od-white);
    border-radius: var(--od-radius-md);
    font-size: var(--od-type-base);
    font-weight: var(--od-weight-bold);
    text-decoration: none;
    box-shadow: 0 8px 32px rgba(222, 91, 60, 0.55);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.od-sewa__button:hover,
.od-sewa__button:focus-visible {
    background-color: var(--od-saffron-deep);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(222, 91, 60, 0.5);
}

.od-sewa__button:focus-visible {
    outline: 2px solid var(--od-white);
    outline-offset: 3px;
}

.od-sewa__button svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 700px) {
    .od-sewa {
        padding-block: var(--od-space-16);
    }

    .od-sewa__impact {
        flex-wrap: wrap;
        gap: var(--od-space-6) var(--od-space-8);
    }

    .od-sewa__impact-item {
        flex: 0 1 calc(50% - var(--od-space-4));
    }

    .od-sewa__headline {
        font-size: clamp(1.85rem, 6vw + 1rem, 2.5rem);
    }

    .od-sewa__button {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .od-sewa__button {
        transition: none;
    }

    .od-sewa__button:hover {
        transform: none;
    }
}

/*
 * align-items: flex-start (not center, despite the spec's literal
 * "align-items: center"). Checked directly: with a fixed 90x90 date
 * box beside a variable-height details column, center-alignment looks
 * fine for a short description but visibly odd the moment one event's
 * text runs longer than the others — the date square floats in the
 * card's vertical middle instead of aligning with the event name atop
 * it. flex-start keeps the date box pinned to the top, level with the
 * event name, regardless of how long the description underneath runs.
 * This is the one place this section deviates from the brief's literal
 * CSS property value, because the literal value breaks under content
 * variation the spec itself flags as a real risk ("long event titles
 * gracefully").
 */

/* ---------- Date box (left) ---------- */

.od-events__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 90px;
    width: 90px;
    height: 90px;
    border-radius: var(--od-radius-md);
    background-color: var(--od-saffron-base);
    color: var(--od-white);
}

.od-events__date-day {
    font-size: 2rem;
    font-weight: var(--od-weight-bold);
    line-height: 1;
}

.od-events__date-month {
    margin-block-start: var(--od-space-1);
    font-size: 0.7rem;
    font-weight: var(--od-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ---------- Details (right) ---------- */

.od-events__details {
    min-width: 0; /* allow long unbroken words/titles to wrap instead
                      of forcing the flex item wider than the card */
    flex: 1 1 auto;
}

.od-events__name {
    margin: 0 0 var(--od-space-2);
    color: var(--od-text-primary);
    font-size: 1.35rem;
    font-weight: var(--od-weight-bold);
    line-height: 1.25;
}

.od-events__location {
    display: flex;
    align-items: center;
    gap: var(--od-space-2);
    margin-block-end: var(--od-space-3);
    color: var(--od-text-muted);
    font-size: var(--od-type-sm);
}

.od-events__location svg {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    color: var(--od-text-muted);
}

.od-events__desc {
    margin: 0;
    color: var(--od-text-secondary);
    font-size: var(--od-type-sm);
    line-height: var(--od-leading-base);
}

/* ==========================================================
   SECONDARY CTA
   ========================================================== */

.od-events__cta {
    display: flex;
    justify-content: center;
    margin-block-start: var(--od-layout-section-compact);
}

.od-events__cta-link {
    display: inline-flex;
    align-items: center;
    gap: var(--od-space-2);
    color: var(--od-text-brand);
    font-size: var(--od-type-sm);
    font-weight: var(--od-weight-bold);
    text-decoration: none;
    border-block-end: 1px solid var(--od-border-default);
    padding-block-end: var(--od-space-1);
    transition: border-color 0.25s ease, color 0.25s ease, gap 0.25s ease;
}

.od-events__cta-link:hover,
.od-events__cta-link:focus-visible {
    color: var(--od-saffron-deep);
    border-color: var(--od-saffron-deep);
    gap: var(--od-space-3);
}

.od-events__cta-link svg {
    width: 1.05rem;
    height: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ==========================================================
   RESPONSIVE — stack on mobile, per spec
   ========================================================== */

@media (max-width: 600px) {
    .od-events {
        padding-block: var(--od-layout-section-standard);
    }

    .od-events__headline {
        font-size: clamp(1.75rem, 6vw + 1rem, 2.25rem);
    }

    .od-events__card {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--od-space-4);
        padding: var(--od-space-5);
    }

    .od-events__date {
        flex: 0 0 auto;
        flex-direction: row;
        align-items: baseline;
        justify-content: center;
        gap: var(--od-space-2);
        width: auto;
        height: auto;
        min-width: 90px;
        padding: var(--od-space-2) var(--od-space-4);
        border-radius: var(--od-radius-pill);
        align-self: flex-start;
    }

    .od-events__date-day {
        font-size: 1.25rem;
    }

    .od-events__date-month {
        margin-block-start: 0;
    }

    .od-events__name {
        font-size: 1.15rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .od-events__card,
    .od-events__cta-link {
        transition: none;
    }

    .od-events__card:hover {
        transform: none;
    }
}