/* 
 * THE MAMA AGENCY - Responsive Stylesheet
 */

/* ==========================================================================
   Desktop (1440px and below)
   ========================================================================== */
@media (max-width: 1440px) {
    .display-huge { font-size: clamp(3rem, 7vw, 6rem); }
}

/* ==========================================================================
   Laptop (1200px and below)
   ========================================================================== */
@media (max-width: 1200px) {
    .hero-visual { width: 50%; }
    .display-large { font-size: clamp(2.5rem, 5vw, 4.5rem); }
    .about-split .large-number { font-size: 10rem; }
}

/* ==========================================================================
   Tablet Landscape (992px and below)
   ========================================================================== */
@media (max-width: 992px) {
    .section-padding { padding: 6rem 0; }
    
    .hero-section { flex-direction: column; justify-content: center; text-align: center; }
    .hero-visual { width: 100%; height: 50%; top: 0; mask-image: linear-gradient(to bottom, transparent, black 40%); -webkit-mask-image: linear-gradient(to bottom, transparent, black 40%); opacity: 0.3; }
    .hero-content { margin-top: 15vh; }
    
    .floating-labels { display: none; }
    
    .about-split .large-number { top: -5%; left: 50%; transform: translateX(-50%); font-size: 8rem; }
    
    .site-header { padding: 1rem 0; background-color: rgba(17, 17, 17, 0.95) !important; backdrop-filter: blur(10px); }
    .navbar-collapse {
        background-color: var(--color-black);
        padding: 2rem;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        border-bottom: 1px solid var(--color-border);
    }
    .nav-link { color: var(--color-ivory) !important; padding: 1rem 0 !important; border-bottom: 1px solid rgba(255,255,255,0.05); }
    .header-cta-group { margin-top: 2rem !important; display: flex; flex-direction: column; gap: 1rem; }
    .header-cta-group .btn { width: 100%; margin: 0 !important; }
    
    .mobile-sticky-cta { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 999; }
    body { padding-bottom: 60px; /* space for sticky cta */ }
}

/* ==========================================================================
   Tablet Portrait (768px and below)
   ========================================================================== */
@media (max-width: 768px) {
    .section-padding { padding: 4rem 0; }
    
    .display-huge { font-size: clamp(2.5rem, 8vw, 4rem); }
    .display-large { font-size: clamp(2rem, 7vw, 3.5rem); }
    
    .process-title { font-size: 1.8rem; }
    
    .footer-links { margin-bottom: 2rem; }
    .services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    
    .ps-option { display: block; width: 100%; text-align: center; margin: 0.5rem 0; }
}

/* ==========================================================================
   Mobile (576px and below)
   ========================================================================== */
@media (max-width: 576px) {
    .hero-content { margin-top: 5vh; }
    
    .display-huge { font-size: 2.5rem; }
    .display-large { font-size: 2rem; }
    
    .about-split .large-number { font-size: 6rem; }
    
    .services-grid { grid-template-columns: 1fr; }
    
    .filter-btn { width: 100%; margin-bottom: 0.5rem; }
    
    .cookie-banner .cookie-buttons { display: flex; flex-direction: column; gap: 0.5rem; }
    .cookie-banner .btn { width: 100%; margin: 0 !important; }
}

/* ==========================================================================
   Small Mobile (480px and 360px)
   ========================================================================== */
@media (max-width: 480px) {
    .section-padding { padding: 3rem 0; }
    .btn { padding: 0.8rem 1rem; font-size: 0.8rem; }
}