/* =====================================================
   छत्रपती शिवाजी महाराज चषक - Mobile-First Hero
   Simple & Reliable Responsive Design
   ===================================================== */

/* Base Hero - Mobile First Approach */
.hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: url('../images/csmc-bg-1.png') no-repeat;
    background-size: cover;
    background-position: 75% center;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible !important;
    color: #ffffff !important;
}

/* Register Button Container - Bottom Center of Hero Only */
.hero-cta-bottom {
    position: absolute !important;
    bottom: 60px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 10 !important;
    display: block !important;
    visibility: visible !important;
}

/* Ensure button is visible */
.btn-register {
    display: inline-flex !important;
    align-items: center !important;
    gap: 1.2rem !important;
    padding: 0.9rem 3rem !important;
    min-width: 450px !important;
    width: 450px !important;
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%) !important;
    border: 3px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 50px !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 10px 40px rgba(234, 88, 12, 0.6), 0 0 60px rgba(251, 146, 60, 0.4) !important;
    transition: all 0.4s ease !important;
    justify-content: space-between !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.btn-register:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 15px 50px rgba(234, 88, 12, 0.8) !important;
}

/* Scroll Indicator */
.hero-scroll {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

/* ========================================
   MOBILE DEVICES (< 768px)
   ======================================== */
@media (max-width: 767px) {
    .hero {
        min-height: 100vh;
        background-position: 80% 20%;
        /* LOWER % = show TOP of image (face) */
        background-attachment: scroll;
    }

    .hero-cta-bottom {
        bottom: 80px !important;
        padding: 0 15px;
    }

    .btn-register {
        min-width: auto !important;
        width: 95% !important;
        max-width: 380px !important;
        padding: 0.8rem 1.5rem !important;
        gap: 0.9rem !important;
    }

    .btn-register-icon {
        font-size: 1.2rem !important;
    }

    .btn-register-main {
        font-size: 0.95rem !important;
    }

    .btn-register-sub {
        font-size: 0.7rem !important;
    }

    .btn-register-arrow {
        font-size: 1rem !important;
    }

    .hero-scroll {
        display: none;
    }
}

/* Small Mobile (< 480px) */
@media (max-width: 479px) {
    .hero {
        background-position: 85% 15%;
        /* Even LOWER % = more of TOP visible */
    }

    .hero-cta-bottom {
        bottom: 70px !important;
    }

    .btn-register {
        width: 96% !important;
        max-width: 350px !important;
        padding: 0.75rem 1.3rem !important;
        gap: 0.8rem !important;
    }

    .btn-register-icon {
        font-size: 1.1rem !important;
    }

    .btn-register-main {
        font-size: 0.9rem !important;
    }

    .btn-register-sub {
        font-size: 0.65rem !important;
    }

    .btn-register-arrow {
        font-size: 0.95rem !important;
    }
}

/* Extra Small Mobile (< 375px) */
@media (max-width: 374px) {
    .hero {
        background-position: 88% 12%;
        /* LOWEST % = show face/head clearly */
    }

    .hero-cta-bottom {
        bottom: 65px !important;
    }

    .btn-register {
        width: 98% !important;
        max-width: 330px !important;
        padding: 0.7rem 1.1rem !important;
        gap: 0.7rem !important;
    }

    .btn-register-icon {
        font-size: 1.05rem !important;
    }

    .btn-register-main {
        font-size: 0.85rem !important;
    }

    .btn-register-sub {
        font-size: 0.62rem !important;
    }

    .btn-register-arrow {
        font-size: 0.9rem !important;
    }
}

/* ========================================
   TABLET (768px - 1023px)
   ======================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    .hero {
        min-height: 80vh;
        background-position: 70% center;
    }

    .hero-cta-bottom {
        bottom: 70px !important;
    }

    .btn-register {
        min-width: 400px !important;
        width: 400px !important;
    }
}

/* ========================================
   DESKTOP (1024px+)
   ======================================== */
@media (min-width: 1024px) {
    .hero {
        min-height: 90vh;
        background-position: center center;
        background-attachment: fixed;
    }

    .hero-cta-bottom {
        bottom: 100px !important;
    }

    .btn-register {
        min-width: 450px !important;
        width: 450px !important;
    }
}

/* Large Desktop (1400px+) */
@media (min-width: 1400px) {
    .hero {
        min-height: 85vh;
        max-height: 900px;
    }

    .hero-cta-bottom {
        bottom: 120px !important;
    }
}

/* ========================================
   LANDSCAPE ORIENTATION
   ======================================== */
@media (max-height: 600px) and (orientation: landscape) {
    .hero {
        min-height: 100vh;
        background-position: center center;
    }

    .hero-cta-bottom {
        bottom: 50px !important;
    }

    .btn-register {
        padding: 0.6rem 1.5rem;
    }
}

/* ========================================
   RETINA DISPLAYS
   ======================================== */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .hero {
        background-image: url('../images/csmc-bg-1.png');
    }
}

/* ========================================
   TOUCH DEVICES
   ======================================== */
@media (hover: none) and (pointer: coarse) {
    .btn-register {
        min-height: 56px;
        padding: 0.9rem 2rem;
    }
}