/* ========================================
   TABLET RESPONSIVE STYLES (768px - 1023px)
   ======================================== */

@media screen and (min-width: 768px) and (max-width: 1023px) {

    /* Adjust margins from 90px to 30px */
    .quick-access {
        margin: 48px 30px 48px 30px;
    }

    .quick-access-two {
        margin: 0 30px;
    }

    /* 2-column swipeable card layout */
    .quick-cards {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        gap: 20px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE/Edge */
        padding-bottom: 10px;
    }

    /* Hide scrollbar for Chrome/Safari */
    .quick-cards::-webkit-scrollbar {
        display: none;
    }

    /* Each card maintains desktop size */
    .quick-cards .temple-card {
        flex: 0 0 calc(50% - 10px);
        /* 2 cards visible at a time */
        scroll-snap-align: start;
        min-width: calc(50% - 10px);
    }

    /* Ensure cards don't shrink */
    .temple-card {
        min-height: 380px;
    }

    .temple-image-container {
        height: 220px;
    }

    /* ========================================
       FOOTER RESPONSIVE FOR TABLET
       ======================================== */

    /* Footer: Two-row layout */
    .site-footer .footer-content {
        flex-direction: column;
        gap: 30px;
        align-items: center;
    }

    /* Row 1: Logo and Copyright (horizontal, centered) */
    .footer-section.footer-brand {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 100%;
        gap: 16px;
    }

    .footer-logo {
        margin-bottom: 0;
    }

    .footer-copyright {
        text-align: center;
    }

    /* Row 2: Links and Email (horizontal) */
    .footer-section.footer-links,
    .footer-section.footer-contact {
        width: auto;
    }

    .footer-section.footer-links ul {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .footer-section.footer-links li {
        margin: 0;
    }

    .footer-contact {
        display: flex;
        align-items: center;
    }
}

/* ========================================
   MOBILE RESPONSIVE STYLES (320px - 767px)
   ======================================== */

@media screen and (max-width: 767px) {

    /* Compact banner layout - Hotstar style */
    .promo-slide,
    .promo-slide img,
    .promo-image {
        height: 200px !important;
        /* Reduced from 400px */
        max-height: 200px !important;
    }

    .promo-slider-wrapper {
        height: 200px;
        margin-bottom: 10px;
        /* Reduced from 20px */
    }

    /* Remove background from navigation buttons */
    .promo-nav-btn {
        width: 32px;
        height: 32px;
        font-size: 18px;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }

    /* Indicators positioning - closer to banner */
    .promo-indicators {
        position: relative;
        margin-top: -30px;
        /* Pull indicators up closer to banner */
        margin-bottom: 10px;
        z-index: 10;
    }

    /* Smaller indicators */
    .promo-indicators .indicator {
        width: 8px;
        height: 8px;
    }

    /* Adjust quick access margins */
    .quick-access {
        margin: 30px 20px;
    }

    .quick-access-two {
        margin: 0 20px;
    }
}