/* =========================================================================
   Shri Jagannath Mandir — responsive breakpoints (mobile-first)
   ========================================================================= */

/* ---------- >= 600px ---------- */
@media (min-width: 600px) {
    .quick-info-grid { grid-template-columns: repeat(3, 1fr); }
    .event-cards { grid-template-columns: repeat(2, 1fr); }
    .value-row { grid-template-columns: repeat(4, 1fr); }
    .stat-row { grid-template-columns: repeat(4, 1fr); }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- >= 768px (tablet: matches mockup's stacked-but-wider layout) ---------- */
@media (min-width: 768px) {
    .nav-toggle { display: none; }
    .main-nav { display: flex !important; }

    .hero-inner { grid-template-columns: 1.05fr 0.95fr; }
    .hero-text h1 { font-size: 40px; }
    .hero-media img { height: 400px; }

    .about-preview-inner { grid-template-columns: 0.9fr 1.1fr; }
    .about-preview .about-img img { height: 340px; }

    .about-main-inner { grid-template-columns: 0.9fr 1.1fr; }
    .about-main .about-img img { height: 300px; }

    .contact-grid { grid-template-columns: 1fr 1.2fr; }

    .event-row { grid-template-columns: 70px 1fr; }
    .event-thumb-title { grid-template-columns: 110px 1fr auto; }
    .event-row .btn { justify-self: end; }
}

/* ---------- >= 900px ---------- */
@media (min-width: 900px) {
    .event-cards { grid-template-columns: repeat(4, 1fr); }
    .gallery-grid { grid-template-columns: repeat(3, 1fr); }
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- >= 992px ---------- */
@media (min-width: 992px) {
    .quick-info-grid { grid-template-columns: repeat(6, 1fr); }
}

/* ---------- Mobile nav (< 768px) ---------- */
@media (max-width: 767px) {
    .nav-toggle { display: flex; }
    .main-nav {
        display: none;
        position: absolute; top: 100%; left: 0; right: 0;
        background: var(--white);
        flex-direction: column; align-items: flex-start;
        padding: 16px 24px 20px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.08);
    }
    .main-nav.open { display: flex; }
    .main-nav a { width: 100%; padding: 10px 0; border-bottom: 1px solid var(--accent); }
    .main-nav a.btn-live { border-bottom: none; text-align: center; margin-top: 8px; }
    .topbar-left { display: none; }
    .topbar-inner { justify-content: center; }
}