/* Global responsive overrides (loaded after page-specific CSS) */

/* Unified page hero spacing across subpages */
.page-hero {
    padding: 120px var(--space-lg) 70px !important;
}

@media (max-width: 768px) {
    .page-hero {
        padding: 104px var(--space-lg) 56px !important;
        min-height: 60vh;
    }
}

@media (max-width: 480px) {
    .page-hero {
        padding: 100px var(--space-lg) 56px !important;
    }
}

/* Safety: keep key hero headers consistent */
.article-header { padding: 120px 0 50px !important; }
.project-hero { padding: 120px 0 70px !important; }

@media (max-width: 768px) {
    .project-hero { padding: 104px 0 56px !important; }
}

@media (max-width: 480px) {
    .article-header { padding: 100px 0 32px !important; }
    .project-hero { padding: 92px 0 40px !important; }
}

/* Contact page: reduce very large gaps/paddings a bit */
.contact-grid { gap: 44px !important; }

@media (max-width: 768px) {
    .contact-section,
    .map-section,
    .faq-section {
        padding: 60px 0 !important;
    }
    
    .contact-grid {
        gap: 2rem !important;
    }
}

@media (max-width: 480px) {
    .contact-grid {
        gap: 1.5rem !important;
    }
}

/* Global responsive fixes for common layout issues */
@media (max-width: 768px) {
    /* Ensure containers don't overflow */
    .container {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }
    
    /* Fix tables on mobile */
    table {
        font-size: 0.9rem;
    }
    
    table th,
    table td {
        padding: 0.5rem;
    }
    
    /* Ensure images are responsive */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Fix buttons that might be too wide */
    .btn-hover,
    button {
        min-width: auto;
        width: auto;
    }
}

@media (max-width: 480px) {
    /* Smaller text on very small screens */
    body {
        font-size: 0.9rem;
    }
    
    h1 {
        font-size: clamp(1.5rem, 8vw, 2.5rem);
    }
    
    h2 {
        font-size: clamp(1.25rem, 7vw, 2rem);
    }
    
    h3 {
        font-size: clamp(1.1rem, 6vw, 1.5rem);
    }
    
    /* Tighter spacing on mobile */
    .section {
        padding: var(--space-2xl) 0;
    }
    
    /* Stack flex containers */
    .container > * {
        flex-direction: column;
    }
    
    /* Smaller gaps in grids */
    [class*="grid"] {
        gap: 1rem;
    }
}