/* 
 * Responsive Styles for Labouganville Child Theme
 * Define screen sizes and component responsiveness below.
 */

/* =========================================
   LARGE DEVICES (Desktops, laptops - max-width: 1199px)
   ========================================= */
@media (max-width: 1199px) {

    /* --- HERO BANNER RESPONSIVE --- */
    .custom-hero-banner .hero-title {
        font-size: 3.5rem;
    }
}

/* =========================================
   MEDIUM DEVICES (Tablets - max-width: 991px)
   ========================================= */
@media (max-width: 991px) {

    /* --- HERO BANNER RESPONSIVE --- */
    .custom-hero-banner .hero-title {
        font-size: 3rem;
    }

    /* --- SERVICES SECTION RESPONSIVE --- */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .services-title {
        font-size: 36px;
    }
}

/* =========================================
   SMALL DEVICES (Landscape phones - max-width: 767px)
   ========================================= */
@media (max-width: 767px) {

    /* --- HERO BANNER RESPONSIVE --- */
    .custom-hero-banner .hero-title {
        font-size: 2.5rem;
    }

    .custom-hero-banner .hero-subtitle {
        font-size: 11px;
        letter-spacing: 2px;
    }

    .custom-hero-banner .hero-buttons {
        flex-direction: column;
        gap: 15px;
    }

    /* --- SERVICES SECTION RESPONSIVE --- */
    .services-grid {
        grid-template-columns: 1fr;
    }

    .services-cards-section {
        padding: 50px 15px;
    }

    .services-header {
        margin-bottom: 40px;
    }

    .services-title {
        font-size: 32px;
    }

    /* --- STUDIATA CTA RESPONSIVE --- */
    .studiata-cta-section {
        padding: 50px 15px;
    }

    .studiata-container {
        padding: 40px 20px;
    }

    .studiata-title {
        font-size: 28px;
    }

    /* --- SPLIT INFO SECTION RESPONSIVE --- */
    .split-info-section {
        padding: 50px 15px;
    }

    .split-info-container {
        grid-template-columns: 1fr;
        grid-template-areas:
            "subtitle"
            "title"
            "image"
            "desc"
            "btn";
        column-gap: 0;
        row-gap: 20px;
    }

    .split-title {
        font-size: 32px;
        margin: 0 0 30px;
    }

    /* --- NEWSLETTER SECTION RESPONSIVE --- */
    .newsletter-section {
        padding: 50px 15px;
    }

    .newsletter-title {
        font-size: 32px;
    }

    .newsletter-header {
        margin-bottom: 30px;
    }
}

/* =========================================
   EXTRA SMALL DEVICES (Portrait phones - max-width: 575px)
   ========================================= */
@media (max-width: 575px) {

    /* --- HERO BANNER RESPONSIVE --- */
    .custom-hero-banner .hero-title {
        font-size: 2.2rem;
    }

    .custom-hero-banner .hero-subtitle {
        font-size: 10px;
    }
}