/* ============================================
   HINDU CALENDAR — साझा CSS v2 (hindu-calendar.css)
   पूरी तरह से home3.css जैसा visual language —
   कोई बड़ा बॉक्स-कंटेनर नहीं, individual month cards,
   कोई horizontal scroll नहीं, events ग्रिड में, नया पॉपअप।
   नोट: सभी hc-* क्लास नाम JS द्वारा dynamically इस्तेमाल होते हैं —
   नाम नहीं बदले गए हैं।
   ============================================ */

:root {
    --hc-maroon:       #8A1220;
    --hc-maroon-deep:  #4A0E17;
    --hc-twilight:     #2C1440;
    --hc-saffron:      #E9871E;
    --hc-marigold:     #F6B93B;
    --hc-brass:        #B8860B;
    --hc-violet:       #6B3FA0;
    --hc-mint:         #1E7A52;

    --hc-ink:          #2A1810;
    --hc-ink-soft:     #6B4A3A;
    --hc-ink-faint:    #9C8172;
    --hc-cream:        #FFF3E0;
    --hc-tint:         #FFFAF2;
    --hc-line:         #F0DFC6;
    --hc-white:        #FFFFFF;
    --hc-bg:           #FFFDF9;

    --hc-radius-sm: 12px;
    --hc-radius-md: 18px;
    --hc-radius-lg: 26px;

    --hc-shadow-sm: 0 2px 10px rgba(90, 30, 15, 0.06);
    --hc-shadow-md: 0 14px 32px rgba(90, 30, 15, 0.12);

    --hc-ease: cubic-bezier(0.22, 1, 0.36, 1);

    --hc-font-display: 'Noto Serif Devanagari', 'Tiro Devanagari Hindi', serif;
    --hc-font-body: 'Noto Sans Devanagari', 'Mukta', sans-serif;
    --hc-font-utility: 'Poppins', 'Noto Sans Devanagari', sans-serif;
}

* { box-sizing: border-box; }
body { background: var(--hc-bg); overflow-wrap: break-word; }

.container { max-width: 1320px; margin: 0 auto; padding: 0 24px; }

/* टाइटल कभी बॉक्स से बाहर नहीं जाएंगे */
h1, h2, h3, h4, p { overflow-wrap: break-word; word-break: break-word; }

/* ================================================
   सेक्शन हेड — साझा (home page जैसा)
================================================ */
.hc-section { padding: 60px 0; }

.hc-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 32px; flex-wrap: wrap; }
.hc-section-tag {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--hc-font-utility); font-size: 13px; font-weight: 600;
    color: var(--hc-saffron); background: var(--hc-cream);
    padding: 7px 16px; border-radius: 50px; margin-bottom: 12px;
}
.hc-section-head h2 { font-family: var(--hc-font-display); font-weight: 700; font-size: clamp(24px, 1.6vw + 18px, 32px); color: var(--hc-maroon); }
.hc-section-head p { font-family: var(--hc-font-body); font-size: 15px; color: var(--hc-ink-soft); margin-top: 6px; }
.hc-section-link {
    flex-shrink: 0; font-family: var(--hc-font-utility); font-weight: 600; font-size: 13.5px;
    color: var(--hc-saffron); text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: 3px;
    transition: all 0.25s var(--hc-ease);
}
.hc-section-link:hover { color: var(--hc-maroon); border-color: var(--hc-marigold); }

/* ================================================
   हीरो — इमेज-विजेट पैटर्न (home page के Vrat Katha सेक्शन जैसा)
================================================ */
.cal-hero { background: var(--hc-white); padding: 56px 0 20px; border-bottom: 1px solid var(--hc-line); }

.cal-hero-grid {
    display: grid;
    grid-template-columns: 0.6fr 0.4fr;
    gap: 44px;
    align-items: center;
}

.cal-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--hc-font-utility); font-size: 13px; font-weight: 600;
    letter-spacing: 0.06em; color: var(--hc-saffron); background: var(--hc-cream);
    padding: 7px 16px; border-radius: 50px; margin-bottom: 18px;
}

.cal-hero h1 {
    font-family: var(--hc-font-display);
    font-size: clamp(28px, 3.2vw + 12px, 44px);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 8px;
    color: var(--hc-maroon);
}
.cal-hero h1 .cal-hero-en { display: block; font-family: var(--hc-font-utility); font-size: 0.4em; font-weight: 600; color: var(--hc-ink-faint); margin-top: 6px; }

.cal-hero-subtitle { font-family: var(--hc-font-body); font-size: 16px; line-height: 1.8; color: var(--hc-ink-soft); max-width: 480px; margin: 18px 0 26px; }

.cal-hero-meta { display: flex; gap: 10px; flex-wrap: wrap; }

.cal-hero-year-switch {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 22px;
    background: var(--hc-maroon);
    color: var(--hc-white);
    font-family: var(--hc-font-utility);
    font-size: 14px; font-weight: 700;
    padding: 12px 22px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.25s var(--hc-ease);
}
.cal-hero-year-switch:hover { background: var(--hc-maroon-deep); transform: translateY(-2px); }
.cal-hero-meta .meta-item {
    font-family: var(--hc-font-utility); font-size: 13.5px; font-weight: 600;
    background: var(--hc-cream); color: var(--hc-maroon);
    padding: 8px 16px; border-radius: 50px;
}
.meta-separator { display: none; }

.cal-hero-media {
    position: relative;
    border-radius: var(--hc-radius-lg);
    overflow: hidden;
    background: var(--hc-cream);
    aspect-ratio: 4/5;
}
.cal-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: white;
}
.cal-hero-media-badge {
    position: absolute; bottom: 16px; left: 16px;
    background: rgba(255,255,255,0.92); backdrop-filter: blur(6px);
    padding: 8px 16px; border-radius: 50px; font-family: var(--hc-font-utility);
    font-size: 12.5px; font-weight: 600; color: var(--hc-maroon);
}

/* ================================================
   पंचांग हेडर स्ट्रिप (हल्का, कोई भारी बॉक्स नहीं)
================================================ */
.hc-strip {
    background: linear-gradient(135deg, var(--hc-maroon) 0%, var(--hc-maroon-deep) 100%);
    border-radius: var(--hc-radius-lg);
    padding: 30px 34px;
    color: var(--hc-white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
    margin-bottom: 34px;
}
.hc-strip::after { content: '🪔'; position: absolute; font-size: 150px; opacity: 0.07; top: -30px; right: -20px; }
.hc-strip-left { position: relative; z-index: 1; }
.hc-strip h2 { font-family: var(--hc-font-display); font-size: 22px; font-weight: 700; color: var(--hc-marigold); margin-bottom: 4px; }
.hc-strip p { font-family: var(--hc-font-body); font-size: 14px; opacity: 0.85; margin: 0; }
.hc-vikram {
    position: relative; z-index: 1;
    background: rgba(246,185,59,0.16); border: 1px solid var(--hc-marigold); color: var(--hc-marigold);
    border-radius: 50px; padding: 8px 20px; font-family: var(--hc-font-utility); font-size: 13.5px; font-weight: 700;
    flex-shrink: 0;
}

/* ================================================
   लेजेंड — इनलाइन चिप्स
================================================ */
.hc-legend {
    display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
    margin-bottom: 24px;
}
.hc-legend-title { font-family: var(--hc-font-utility); font-size: 13px; font-weight: 700; color: var(--hc-maroon); }
.hc-legend-item { display: flex; align-items: center; gap: 6px; font-family: var(--hc-font-body); font-size: 13px; color: var(--hc-ink-soft); font-weight: 600; }
.hc-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.hc-dot.festival  { background: var(--hc-maroon); }
.hc-dot.vrat      { background: var(--hc-violet); }
.hc-dot.muhurat   { background: var(--hc-mint); }
.hc-dot.ekadashi  { background: var(--hc-brass); }
.hc-dot.amavasya  { background: var(--hc-ink); }
.hc-dot.purnima   { background: var(--hc-marigold); }

/* ================================================
   महीना फ़िल्टर टैब्स — कोई scroll नहीं, wrap होगा
================================================ */
.hc-month-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px;
}
.hc-month-tab {
    padding: 9px 16px;
    border: 1.5px solid var(--hc-line);
    border-radius: 50px;
    background: var(--hc-white);
    font-family: var(--hc-font-utility);
    font-size: 13px;
    font-weight: 700;
    color: var(--hc-maroon);
    cursor: pointer;
    transition: all 0.2s var(--hc-ease);
    white-space: nowrap;
}
.hc-month-tab:hover { border-color: var(--hc-marigold); background: var(--hc-cream); }
.hc-month-tab.active { background: var(--hc-maroon); border-color: var(--hc-maroon); color: var(--hc-marigold); }

/* ================================================
   महीनों की ग्रिड — 2 प्रति row, एक साथ जुड़े हुए (अलग-अलग बॉक्स नहीं)
================================================ */
.hc-months-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    border: 1px solid var(--hc-line);
    border-radius: var(--hc-radius-lg);
    overflow: hidden;
}

.hc-month-block {
    background: var(--hc-white);
    border-right: 1px solid var(--hc-line);
    border-bottom: 1px solid var(--hc-line);
}
.hc-month-block:nth-child(2n) { border-right: none; }

.hc-month-title {
    background: linear-gradient(135deg, var(--hc-maroon) 0%, var(--hc-twilight) 100%);
    color: var(--hc-white);
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.hc-month-name-en { font-family: var(--hc-font-display); font-size: 18px; font-weight: 700; }
.hc-month-name-hi { font-family: var(--hc-font-body); font-size: 13.5px; opacity: 0.85; font-weight: 600; }
.hc-month-hindu { font-family: var(--hc-font-utility); font-size: 12px; background: rgba(246,185,59,0.22); color: var(--hc-marigold); padding: 4px 12px; border-radius: 50px; }
.hc-months-grid:has(> .hc-month-block:only-child) {
    grid-template-columns: 1fr !important;
}
/* ================================================
   सप्ताह के दिन हेडर
================================================ */
.hc-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--hc-cream); }
.hc-weekday { text-align: center; padding: 10px 2px; font-family: var(--hc-font-utility); font-size: 12px; font-weight: 800; color: var(--hc-maroon); }
.hc-weekday:first-child { color: var(--hc-saffron); }
.hc-weekday:last-child  { color: var(--hc-violet); }

/* ================================================
   दिनों की ग्रिड — बड़ा, साफ़ text
================================================ */
.hc-days-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; }

.hc-day {
    min-height: 84px;
    border-right: 1px solid var(--hc-line);
    border-bottom: 1px solid var(--hc-line);
    padding: 8px 6px 6px;
    cursor: pointer;
    transition: background 0.15s var(--hc-ease);
    position: relative;
    overflow: hidden;
}
.hc-day:nth-child(7n) { border-right: none; }
.hc-day:hover { background: var(--hc-tint); }
.hc-day.empty { background: #FBF8F2; cursor: default; }
.hc-day.sunday .hc-day-num { color: var(--hc-maroon); }
.hc-day.saturday .hc-day-num { color: var(--hc-violet); }
.hc-day.today { background: var(--hc-cream); }
.hc-day.today::after {
    content: ''; position: absolute; top: 5px; right: 5px;
    width: 8px; height: 8px; background: var(--hc-marigold); border-radius: 50%;
}
.hc-day.has-event { background: #FFFAF2; }

.hc-day-num { font-family: var(--hc-font-utility); font-size: 16px; font-weight: 800; color: var(--hc-ink); line-height: 1; }
.hc-tithi { font-family: var(--hc-font-body); font-size: 11px; color: var(--hc-violet); font-weight: 700; margin-top: 4px; line-height: 1.3; }
.hc-nakshatra { font-family: var(--hc-font-body); font-size: 10px; color: var(--hc-brass); font-weight: 600; margin-top: 2px; line-height: 1.25; }
.hc-event-dots { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 4px; }
.hc-event-dot {
    display: inline-block; padding: 2px 6px; border-radius: 5px;
    font-family: var(--hc-font-utility); font-size: 9.5px; font-weight: 700; line-height: 1.4;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hc-event-dot.festival { background: #FBE4E9; color: var(--hc-maroon); }
.hc-event-dot.vrat     { background: #EDE3F7; color: var(--hc-violet); }
.hc-event-dot.muhurat  { background: #E1F3EA; color: var(--hc-mint); }
.hc-event-dot.ekadashi { background: #FBEED7; color: var(--hc-brass); }
.hc-event-dot.amavasya { background: #EAE3DC; color: var(--hc-ink); }
.hc-event-dot.purnima  { background: #FDF0CB; color: #9A6E0C; }

/* ================================================
   दिन विवरण पॉपअप — पूरी तरह नया, home page कार्ड जैसा
================================================ */
.hc-detail-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(43, 13, 8, 0.5);
    backdrop-filter: blur(2px);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
.hc-detail-overlay.open { display: flex; }

.hc-detail-panel {
    background: var(--hc-white);
    border-radius: var(--hc-radius-lg);
    width: 100%;
    max-width: 460px;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: var(--hc-shadow-md);
    animation: hc-pop-in 0.25s var(--hc-ease);
}
@keyframes hc-pop-in {
    from { transform: scale(0.94) translateY(10px); opacity: 0; }
    to   { transform: scale(1) translateY(0); opacity: 1; }
}

.hc-dp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 24px 18px;
    border-bottom: 2px solid var(--hc-line);
}
.hc-dp-date { font-family: var(--hc-font-display); font-size: 30px; font-weight: 700; color: var(--hc-maroon); line-height: 1; }
.hc-dp-month { font-family: var(--hc-font-body); font-size: 13.5px; color: var(--hc-ink-faint); margin-top: 4px; }
.hc-dp-close {
    background: var(--hc-cream); border: none; color: var(--hc-maroon);
    width: 34px; height: 34px; border-radius: 50%; font-size: 16px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: all 0.2s var(--hc-ease); flex-shrink: 0;
}
.hc-dp-close:hover { background: var(--hc-maroon); color: #fff; }

.hc-dp-body { padding: 20px 24px 26px; }
.hc-dp-row {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 13px 0; border-bottom: 1px dashed var(--hc-line);
}
.hc-dp-row:last-child { border-bottom: none; }
.hc-dp-icon {
    font-size: 17px; flex-shrink: 0; width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    background: var(--hc-cream); border-radius: 11px;
}
.hc-dp-info-title { font-family: var(--hc-font-utility); font-size: 10.5px; font-weight: 800; color: var(--hc-saffron); text-transform: uppercase; letter-spacing: 0.06em; }
.hc-dp-info-val { font-family: var(--hc-font-display); font-size: 16px; font-weight: 700; color: var(--hc-ink); margin-top: 3px; }
.hc-dp-info-hi { font-family: var(--hc-font-body); font-size: 13px; color: var(--hc-ink-soft); margin-top: 2px; }
.hc-dp-events { display: flex; flex-direction: column; gap: 7px; margin-top: 6px; }
.hc-dp-event { padding: 9px 13px; border-radius: 11px; font-family: var(--hc-font-body); font-size: 13px; font-weight: 700; line-height: 1.5; }
.hc-dp-event small { font-weight: 500; opacity: 0.85; }
.hc-dp-event.festival { background: #FBE4E9; color: var(--hc-maroon); }
.hc-dp-event.vrat     { background: #EDE3F7; color: var(--hc-violet); }
.hc-dp-event.muhurat  { background: #E1F3EA; color: var(--hc-mint); }
.hc-dp-event.ekadashi { background: #FBEED7; color: var(--hc-brass); }
.hc-dp-event.amavasya { background: #EAE3DC; color: var(--hc-ink); }
.hc-dp-event.purnima  { background: #FDF0CB; color: #9A6E0C; }

/* ================================================
   आगामी त्योहार व व्रत — ग्रिड (लिस्ट नहीं)
================================================ */
.hc-sidebar-section { padding: 60px 0; background: var(--hc-tint); }

.hc-events-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.hc-event-item {
    display: flex; gap: 14px; align-items: center;
    background: var(--hc-white); border: 1px solid var(--hc-line); border-radius: var(--hc-radius-md);
    padding: 16px 18px;
    border-left: 4px solid var(--hc-maroon);
    transition: transform 0.2s var(--hc-ease), box-shadow 0.2s var(--hc-ease);
    cursor: pointer;
}
.hc-event-item:hover { transform: translateY(-4px); box-shadow: var(--hc-shadow-md); }
.hc-event-item.vrat     { border-left-color: var(--hc-violet); }
.hc-event-item.muhurat  { border-left-color: var(--hc-mint); }
.hc-event-item.ekadashi { border-left-color: var(--hc-brass); }
.hc-event-item.purnima  { border-left-color: var(--hc-marigold); }
.hc-event-item.amavasya { border-left-color: var(--hc-ink); }
.hc-event-date-box { min-width: 54px; text-align: center; background: var(--hc-cream); border-radius: var(--hc-radius-sm); padding: 8px 4px; flex-shrink: 0; }
.hc-event-day { font-family: var(--hc-font-display); font-size: 20px; font-weight: 700; color: var(--hc-maroon); line-height: 1; }
.hc-event-mon { font-family: var(--hc-font-utility); font-size: 11px; font-weight: 700; color: var(--hc-ink-faint); }
.hc-event-info-name { font-family: var(--hc-font-display); font-size: 15px; font-weight: 700; color: var(--hc-ink); }
.hc-event-info-hi   { font-family: var(--hc-font-body); font-size: 12.5px; color: var(--hc-violet); font-weight: 600; margin-top: 2px; }
.hc-event-info-type { font-family: var(--hc-font-body); font-size: 11.5px; color: var(--hc-ink-faint); margin-top: 2px; }

/* ================================================
   भक्ति संग्रह क्रॉस-लिंक कार्ड्स
================================================ */
.bhakti-links-section { padding: 60px 0; background: var(--hc-white); }
.bhakti-links-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bhakti-link-card {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
    background: var(--hc-white); border: 1px solid var(--hc-line); border-radius: var(--hc-radius-md); padding: 26px 16px;
    text-decoration: none; transition: all 0.25s var(--hc-ease);
}
.bhakti-link-card:hover { border-color: var(--hc-marigold); transform: translateY(-5px); box-shadow: var(--hc-shadow-md); }
.bhakti-link-icon { font-size: 30px; }
.bhakti-link-name { font-family: var(--hc-font-display); font-size: 15.5px; font-weight: 700; color: var(--hc-maroon); }
.bhakti-link-desc { font-family: var(--hc-font-body); font-size: 12.5px; color: var(--hc-ink-faint); }

/* ================================================
   SEO सामग्री
================================================ */
.seo-content { padding: 64px 0; background: var(--hc-tint); }
.content-article { max-width: 900px; margin: 0 auto; line-height: 1.9; }
.content-article h2 { font-family: var(--hc-font-display); font-size: clamp(22px, 1.4vw + 17px, 28px); font-weight: 700; margin: 40px 0 16px; color: var(--hc-maroon); }
.content-article h2:first-child { margin-top: 0; }
.content-article h3 { font-family: var(--hc-font-display); font-size: 19px; font-weight: 700; margin: 24px 0 10px; color: var(--hc-ink); }
.content-article p  { font-family: var(--hc-font-body); margin-bottom: 16px; color: var(--hc-ink-soft); font-size: 16px; }
.content-article strong { color: var(--hc-maroon); font-weight: 700; }
.content-article a { color: var(--hc-saffron); border-bottom: 1.5px solid rgba(233,135,30,0.4); font-weight: 700; text-decoration: none; }
.content-article a:hover { border-bottom-color: var(--hc-maroon); color: var(--hc-maroon); }

.faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 18px; }
.faq-item { background: var(--hc-white); border: 1px solid var(--hc-line); border-radius: var(--hc-radius-md); padding: 20px 22px; }
.faq-item h4 { font-family: var(--hc-font-display); font-size: 15.5px; color: var(--hc-maroon); margin-bottom: 8px; }
.faq-item p { font-family: var(--hc-font-body); font-size: 14px; color: var(--hc-ink-soft); margin: 0; }

a:focus-visible, button:focus-visible { outline: 3px solid var(--hc-saffron); outline-offset: 2px; }

/* ================================================
   RESPONSIVE — साइट-वाइड 5-tier
================================================ */
/* ================================================
   RESPONSIVE — साइट-वाइड 6-tier सिस्टम (home page के अपडेटेड
   as3-hero-grid पैटर्न जैसा — हीरो 580px तक साथ रहता है)
================================================ */
@media (min-width: 1280px) and (max-width: 1400px) {
    .container { max-width: 1180px; }
}

@media (max-width: 1280px) and (min-width: 1024px) {
    .bhakti-links-grid { grid-template-columns: repeat(4, 1fr); }
    .hc-events-list { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- टैबलेट (768px – 1024px) — हीरो हमेशा साथ रहेगा (स्टैक नहीं होगा) ---------- */
@media (max-width: 1023px) and (min-width: 768px) {
    .cal-hero-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
    .cal-hero-media { order: 0; aspect-ratio: 4/3; }

    .hc-months-grid { grid-template-columns: repeat(2, 1fr); }
    .hc-day { min-height: 70px; }
    .hc-events-list { grid-template-columns: repeat(2, 1fr); }
    .bhakti-links-grid { grid-template-columns: repeat(2, 1fr); }
    .faq-grid { grid-template-columns: 1fr; }
}

/* ---------- मोबाइल (<767px) — हीरो अभी भी साथ रहेगा, सिर्फ़ टेक्स्ट छोटा ---------- */
@media (max-width: 767px) {
    .container { padding: 0 16px; }
    .hc-section, .hc-sidebar-section, .bhakti-links-section, .seo-content { padding: 40px 0; }

    .cal-hero-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
    .cal-hero-media { order: 0; aspect-ratio: 4/3; }
    .cal-hero h1 { font-size: 22px; }
    .cal-hero-subtitle { font-size: 14.5px; }

    .hc-strip { padding: 22px 20px; flex-direction: column; align-items: flex-start; }
    .hc-strip h2 { font-size: 19px; }

    .hc-months-grid { grid-template-columns: 1fr; }
    .hc-month-block { border-right: none; }
    .hc-day { min-height: 60px; padding: 5px 4px 4px; }
    .hc-day-num { font-size: 14px; }
    .hc-tithi { font-size: 9.5px; }
    .hc-nakshatra { display: none; }

    .hc-dp-header { padding: 18px 18px 14px; }
    .hc-dp-date { font-size: 26px; }
    .hc-dp-body { padding: 16px 18px 20px; }

    .hc-events-list { grid-template-columns: 1fr 1fr; gap: 10px; }
    .hc-event-item { padding: 12px 14px; flex-direction: column; text-align: center; }
    .bhakti-links-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .faq-grid { grid-template-columns: 1fr; }
}

/* ---------- छोटा मोबाइल (<580px) — यहीं हीरो स्टैक होता है, इमेज ऊपर, full-bleed ---------- */
@media (max-width: 580px) {
    .cal-hero-grid { grid-template-columns: 1fr; gap: 22px; }
    .cal-hero-media {
        order: 0;
        aspect-ratio: 1/1;
        margin-left: -16px;
        margin-right: -16px;
        margin-top: -1px;
        border-radius: 0;
    }
    .cal-hero-media img { object-fit: cover; }
}

@media (max-width: 400px) {
    .hc-day { min-height: 54px; }
    .hc-event-dot { display: none; }
    .hc-detail-panel { max-width: 100%; }
}

/* ---------- बहुत छोटे फ़ोन (<280px) ---------- */
@media (max-width: 280px) {
    .hc-events-list, .bhakti-links-grid { grid-template-columns: 1fr; }
}