/* =========================================
   MOBILE HERO OVERRIDES (MOBILE-FIRST)
   ========================================= */

/* 1. Base Mobile Styles (Screens up to 639px) */

.hero-slide-info {
    display: none; /* Hidden by default on mobile. No !important needed! */
}

.hero-content {
    padding: 1.5rem 0;
}

.hero-title {
    /* Note: If you use the clamp() method from the previous CSS block, 
       you can delete this entirely. If not, 2rem is your mobile baseline. */
    font-size: 2rem; 
}

/* 2. Micro Devices (Screens 374px and below) */
@media (max-width: 374px) {
    .hero .badge {
        display: none;
    }
}

/* 3. Tablets (640px and up) */
@media (min-width: 640px) {
    .hero-content {
        padding: 2rem 0;
    }
}

/* 4. Desktop (1024px and up) */
@media (min-width: 1024px) {
    .hero-slide-info {
        display: block;
        position: absolute; /* Added this to ensure bottom/right values actually work */
        top: auto;
        bottom: 6rem;
        right: 3rem;
    }
    
    .hero-content {
        padding-top: 4rem; /* Aligns with your main desktop hero CSS */
        padding-bottom: 0;
    }
}