/* ========================================
   PujaPhal — Responsive Overrides
   Covers: mobile (≤480px), tablet (≤768px), small desktop (≤1024px)
   ======================================== */

/* ── Navbar controls: hide non-essential on small screens ── */
.mobile-only { display: none; }

@media (max-width: 768px) {
    .mobile-only { display: block; }

    /* Smaller logo */
    .navbar-logo-icon { width: 32px !important; height: 32px !important; font-size: 1rem !important; }
    .navbar-logo-text { font-size: var(--fs-base) !important; }

    /* Hide lang text, globe icon only */
    .lang-btn .lang-btn-text,
    .lang-btn span:last-child { display: none; }
    .lang-btn { padding: 5px 8px; }

    /* Hide Book your Puja + city */
    .navbar-controls > a.btn { display: none; }
    .nav-city-btn { display: none; }

    /* Compact icons */
    .pp-nav-icon { width: 32px !important; height: 32px !important; }
    .pp-user-menu > button { width: 32px !important; height: 32px !important; }
    /* Tight gap, hamburger always visible */
    .navbar-controls { gap: 4px !important; }
    .navbar-toggle { display: flex !important; flex-shrink: 0; }
}

@media (max-width: 900px) {
    .nav-city-btn span:last-child { display: none; }
    .lang-btn .lang-btn-text { display: none; }
    .navbar-controls { gap: var(--space-1); }
}

/* ── Shop page filter bar ── */
@media (max-width: 768px) {
    /* Filter bar stacks vertically */
    .services-listing .container > div[style*="background:var(--color-white)"] {
        padding: var(--space-4) !important;
    }
    /* Filter tabs wrap */
    .filter-tabs { gap: var(--space-1); }
    .filter-tab { font-size: var(--fs-xs); padding: 4px 10px; }
    /* Services grid: 2 cols on tablet */
    .services-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 480px) {
    .services-grid { grid-template-columns: 1fr !important; }
}

/* ── Product detail page (single-product.php) ── */
@media (max-width: 1024px) {
    /* Hero two-col stacks */
    .puja-hero-header .container > div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    .puja-hero-header .container > div > div:last-child { order: -1; }
}

@media (max-width: 768px) {
    .puja-detail-grid { grid-template-columns: 1fr !important; }
    .booking-form-card { position: static !important; }
    /* Benefits grid: 1 col */
    .puja-info > div[style*="grid-template-columns:repeat(auto-fit"] {
        grid-template-columns: 1fr !important;
    }
    /* How it works steps: 2 col */
    .puja-info > div[style*="repeat(auto-fit,minmax(160px"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    /* Nitya plan toggle: stack */
    #nityaPlanToggle { grid-template-columns: 1fr !important; }
}

/* ── Cart page ── */
@media (max-width: 768px) {
    /* Cart grid stacks */
    .container > div[style*="grid-template-columns:1.5fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    /* Cart table: hide qty column header */
    .shop_table thead tr th:nth-child(3) { display: none; }
    /* Cart row: simplify grid */
    .woocommerce-cart-form__cart-item[style*="grid-template-columns:2fr 1fr 80px 1fr 40px"] {
        grid-template-columns: 1fr auto auto !important;
        gap: var(--space-2) !important;
    }
}

@media (max-width: 480px) {
    /* Cart table header hidden, show as labels */
    .shop_table thead { display: none; }
}

/* ── Checkout page ── */
@media (max-width: 768px) {
    .woocommerce-checkout .container > form > div[style*="grid-template-columns:1.4fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    .woocommerce-checkout .booking-form-card[style*="sticky"] {
        position: static !important;
    }
}

/* ── My Account page ── */
@media (max-width: 768px) {
    .container > div[style*="grid-template-columns:260px 1fr"] {
        grid-template-columns: 1fr !important;
    }
    .booking-form-card[style*="sticky"] { position: static !important; }
    /* Nav sidebar full width */
    .woocommerce-MyAccount-navigation { margin-bottom: var(--space-6); }
}

/* ── Temple archive page ── */
@media (max-width: 768px) {
    /* Temple cards grid */
    .container > div[style*="grid-template-columns:repeat(auto-fill,minmax(320px"] {
        grid-template-columns: 1fr !important;
    }
    /* City filter tabs wrap */
    .container > div[style*="display:flex;gap:var(--space-3);flex-wrap:wrap"] {
        gap: var(--space-2) !important;
    }
}

/* ── Single temple page ── */
@media (max-width: 1024px) {
    /* Temple detail grid stacks */
    .container > div[style*="grid-template-columns:1.4fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    .booking-form-card[style*="sticky"] { position: static !important; }
}

@media (max-width: 768px) {
    /* Pandits grid: 1 col */
    .container div[style*="grid-template-columns:repeat(auto-fill,minmax(180px"] {
        grid-template-columns: 1fr !important;
    }
    /* Pujas grid: 1 col */
    .puja-grid[style*="grid-template-columns:repeat(3,1fr)"] {
        grid-template-columns: 1fr !important;
    }
}

/* ── Home page ── */
@media (max-width: 1024px) {
    .puja-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .service-cats-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .steps-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .cities-grid { grid-template-columns: repeat(3, 1fr) !important; }
    .testimonials-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 768px) {
    .puja-grid { grid-template-columns: 1fr !important; }
    .testimonials-grid { grid-template-columns: 1fr !important; }
    /* Mission card stacks */
    .mission-summary-card { grid-template-columns: 1fr !important; }
    .mission-summary-image { display: none !important; }
    /* Hero stats row wraps */
    .hero-stats-row { flex-wrap: wrap; gap: var(--space-4) !important; }
}

@media (max-width: 480px) {
    .cities-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .service-cats-grid { grid-template-columns: 1fr !important; }
    .steps-grid { grid-template-columns: 1fr !important; }
    .hero-stats-row { flex-direction: column; align-items: center; }
}

/* ── Footer ── */
@media (max-width: 768px) {
    .footer-grid { grid-template-columns: 1fr 1fr !important; gap: var(--space-8) !important; }
}

@media (max-width: 480px) {
    .footer-grid { grid-template-columns: 1fr !important; }
    .footer-bottom { flex-direction: column; text-align: center; }
}

/* ── Sign in page ── */
@media (max-width: 600px) {
    /* Login/register two-col stacks */
    .container > div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    /* Reduce top padding so heading isn't buried under whitespace */
    .woocommerce-account section,
    section[style*="min-height:calc(100vh - 80px)"] {
        padding-top: calc(70px + var(--space-4)) !important;
        align-items: flex-start !important;
    }
}

/* ── Page header ── */
@media (max-width: 768px) {
    .page-header { padding: calc(80px + var(--space-8)) 0 var(--space-8) !important; }
    .page-header h1 { font-size: var(--fs-2xl) !important; }
    .page-header p { font-size: var(--fs-base) !important; }
}

/* ── General utility ── */
@media (max-width: 768px) {
    /* Reduce section padding */
    .section { padding: var(--space-8) 0 !important; }
    /* Booking form card full width */
    .booking-form-card { padding: var(--space-5) !important; }
    /* Container padding */
    .container { padding: 0 var(--space-4) !important; }
    /* Buttons full width on mobile */
    .hero-actions .btn { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
    .section { padding: var(--space-6) 0 !important; }
    /* Cards: reduce padding */
    .card-body { padding: var(--space-4) !important; }
    .card-footer { padding: var(--space-3) var(--space-4) !important; }
    /* Typography scale down */
    .section-header h2 { font-size: var(--fs-xl) !important; }
}

/* ── Prevent horizontal scroll ── */
html, body { overflow-x: hidden; max-width: 100vw; }
img, video, iframe { max-width: 100%; }