/* Responsive Styles for Hero Coastal Section */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .hero-coastal-title {
        font-size: 60px;
    }
    
    .hero-coastal-subtitle {
        font-size: 28px;
    }
    
    .hero-coastal-content {
        gap: 40px;
    }
}

/* Mobile Landscape (481px - 767px) */
@media (max-width: 767px) {
    .hero-coastal {
        min-height: 600px;
    }
    
    .hero-coastal-title {
        font-size: 42px;
        line-height: 1.3em;
    }
    
    .hero-coastal-subtitle {
        font-size: 20px;
        line-height: 1.6em;
    }
    
    .hero-coastal-subtitle br {
        display: none;
    }
    
    .hero-coastal-content {
        gap: 30px;
        padding: 0 16px;
    }
    
    .btn-hero-primary {
        padding: 18px 24px;
        font-size: 16px;
    }
}

/* Mobile Portrait (320px - 480px) */
@media (max-width: 480px) {
    .hero-coastal {
        min-height: 500px;
        /* Fix stretched image - use cover to maintain aspect ratio */
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }
    
    .hero-coastal-title {
        font-size: 32px;
        line-height: 1.3em;
    }
    
    .hero-coastal-subtitle {
        font-size: 16px;
        line-height: 1.6em;
    }
    
    .hero-coastal-content {
        gap: 24px;
    }
    
    .btn-hero-primary {
        padding: 16px 20px;
        font-size: 14px;
        width: 100%;
        max-width: 280px;
        margin: 0 auto; /* Center the button */
        display: block; /* Ensure it's block level for centering */
    }
}