/**
 * Sitewide Responsive Upgrade for Old Enough Studio
 * Ensures 100% fluid, modern, touch-friendly layouts on Mobile, Tablet & Desktop
 */

/* 1. Global Viewport & Container Hygiene */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: clip;
}

img, video, iframe, svg {
    max-width: 100%;
}

/* 2. Hero Section Mobile Optimization */
@media (max-width: 900px) {
    .oes-hero {
        height: auto !important;
        min-height: 520px !important;
    }
    .oes-hero-slider {
        height: 460px !important;
    }
    .oes-hero-title {
        font-size: clamp(2.2rem, 7vw, 3.8rem) !important;
        padding: 0 1.25rem !important;
        line-height: 1.15 !important;
    }
    .oes-hero-button {
        bottom: 1.5rem !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        padding: 0.9rem 2rem !important;
        font-size: 1rem !important;
        width: auto !important;
        white-space: nowrap !important;
        text-align: center !important;
    }
    .oes-hero-nav {
        width: 42px !important;
        height: 42px !important;
        font-size: 1.1rem !important;
        opacity: 0.8 !important;
    }
    .oes-hero-prev { left: 10px !important; }
    .oes-hero-next { right: 10px !important; }
    
    .oes-hero-footer {
        height: 48px !important;
        font-size: 0.95rem !important;
    }
    .tagline-item {
        padding: 0 1.8rem !important;
    }
}

@media (max-width: 600px) {
    .oes-hero-slider {
        height: 420px !important;
    }
    .oes-hero-title {
        font-size: clamp(1.85rem, 8vw, 2.8rem) !important;
    }
    .oes-hero-button {
        width: calc(100% - 3rem) !important;
        max-width: 280px !important;
    }
}

/* 3. "Get to Know Us" Section (index.php) Mobile & Tablet Transformation */
@media (max-width: 992px) {
    .about-section {
        padding: 3.5rem 2rem !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1.5rem !important;
    }
    .about-content-wrapper {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        padding: 1.5rem 0 !important;
    }
    .about-title {
        font-size: clamp(2rem, 5vw, 3rem) !important;
    }
    .about-text {
        font-size: 1.15rem !important;
        line-height: 1.7 !important;
    }
}

@media (max-width: 600px) {
    .about-section {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 2.5rem 1.25rem !important;
        gap: 1.5rem !important;
        text-align: center !important;
    }
    .about-content-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        order: 1 !important;
    }
    .about-title {
        font-size: 2.1rem !important;
        margin-bottom: 1rem !important;
    }
    .about-text {
        font-size: 1rem !important;
        line-height: 1.65 !important;
    }
    .about-decor {
        max-height: 65px !important;
        width: auto !important;
    }
    /* Hide excessive decor on small screens so layout stays airy and focused */
    .about-section > img:nth-of-type(n+5) {
        display: none !important;
    }
    .decor-tr-btn {
        order: 2 !important;
        display: inline-block !important;
        width: auto !important;
        padding: 0.85rem 2rem !important;
        font-size: 0.95rem !important;
        margin-top: 0.5rem !important;
    }
}

/* 4. Standalone Section Banners (Spaces That Spark, Curiosity Curated, Every Corner) */
@media (max-width: 900px) {
    .standalone-header-banner {
        padding: 2.5rem 2rem !important;
        gap: 1.5rem !important;
    }
    .standalone-title {
        font-size: clamp(2rem, 5vw, 3rem) !important;
    }
    .standalone-btn {
        padding: 1rem 1.6rem !important;
        font-size: 0.95rem !important;
    }
    .standalone-link {
        font-size: 0.95rem !important;
        width: auto !important;
    }
}

@media (max-width: 680px) {
    .standalone-header-banner {
        flex-direction: column !important;
        text-align: center !important;
        padding: 2rem 1.25rem !important;
        gap: 1.2rem !important;
    }
    .standalone-title {
        font-size: clamp(1.8rem, 7vw, 2.4rem) !important;
        order: 1 !important;
    }
    .standalone-btn {
        order: 2 !important;
        display: inline-block !important;
        width: fit-content !important;
        margin: 0 auto !important;
        padding: 0.85rem 1.75rem !important;
    }
    .standalone-link {
        order: 3 !important;
        text-align: center !important;
        margin: 0 auto !important;
    }
}

/* 5. Projects & Curiosity Curated Grids */
@media (max-width: 900px) {
    .projects-grid, .curated-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .project-img, .curated-img {
        height: 50vh !important;
        min-height: 320px !important;
    }
    .project-caption, .curated-caption {
        padding: 1.5rem 1.75rem !important;
        gap: 1.25rem !important;
        font-size: 1.35rem !important;
    }
    .project-caption img, .curated-caption img {
        height: 55px !important;
        transform: none !important;
    }
}

@media (max-width: 600px) {
    .projects-grid, .curated-grid {
        grid-template-columns: 1fr !important;
    }
    .projects-section {
        padding-bottom: 3.5rem !important;
    }
    .project-img, .curated-img {
        height: 42vh !important;
        min-height: 260px !important;
    }
    .project-caption, .curated-caption {
        padding: 1.2rem 1.25rem !important;
        font-size: 1.15rem !important;
        gap: 1rem !important;
    }
    .project-caption img, .curated-caption img {
        height: 45px !important;
        max-width: 60px !important;
        transform: none !important;
    }
    .curated-info h4 {
        font-size: 0.95rem !important;
    }
    .curated-info p {
        font-size: 0.88rem !important;
    }
}

/* 6. Every Corner Continuous Scroller */
@media (max-width: 900px) {
    .corner-card {
        flex: 0 0 45vw !important;
    }
    .corner-img {
        height: 48vh !important;
        min-height: 300px !important;
    }
    .corner-overlay {
        padding: 2.5rem 1.5rem 1.5rem !important;
    }
    .corner-overlay h3 {
        font-size: 1.25rem !important;
    }
}

@media (max-width: 600px) {
    .corner-card {
        flex: 0 0 82vw !important; /* Prominent card with preview of next card */
    }
    .corner-img {
        height: 44vh !important;
        min-height: 270px !important;
    }
    .corner-overlay {
        padding: 2rem 1.25rem 1.25rem !important;
    }
    .corner-overlay h3 {
        font-size: 1.15rem !important;
    }
    .corner-overlay p {
        font-size: 0.88rem !important;
    }
}

/* 7. Icon Marquee Section */
@media (max-width: 900px) {
    .icon-marquee-container {
        padding: 2.5rem 1.5rem !important;
    }
    .icon-marquee-track img {
        height: 75px !important;
    }
}

@media (max-width: 600px) {
    .icon-marquee-container {
        padding: 2rem 1rem !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    .icon-marquee-container::-webkit-scrollbar {
        display: none !important;
    }
    .icon-marquee-track {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 2rem !important;
        width: max-content !important;
        justify-content: flex-start !important;
    }
    .icon-marquee-track img {
        height: 50px !important;
        flex-shrink: 0 !important;
    }
}

/* 8. Gallery Page (gallery.php) Responsive Filter Bar & Cards */
@media (max-width: 900px) {
    .gallery-filter-bar {
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: stretch !important;
        padding: 1.5rem !important;
    }
    .gallery-filter-groups {
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
    }
}

@media (max-width: 600px) {
    .gallery-search-wrap input {
        width: 100% !important;
    }
    .pagination {
        gap: 0.5rem !important;
    }
    .ajax-page {
        padding: 0.6rem 0.9rem !important;
        font-size: 0.9rem !important;
    }
}

/* 9. About Page (about.php) Responsive Enhancements */
@media (max-width: 900px) {
    .about-split {
        padding: 4rem 0 !important;
    }
    .container {
        padding: 0 1.5rem !important;
    }
    .philosophy-mvv {
        padding: 4rem 0 !important;
    }
    .cta {
        padding: 4rem 0 !important;
    }
    .dreamade-hero-section#pageHero .hero-main-title {
        font-size: clamp(2.5rem, 7vw, 4rem) !important;
    }
}

@media (max-width: 600px) {
    .about-split {
        padding: 3rem 0 !important;
    }
    .container {
        padding: 0 1.25rem !important;
    }
    .philosophy-mvv {
        padding: 3rem 0 !important;
    }
    .philosophy-header {
        margin-bottom: 2rem !important;
    }
    .philosophy-card {
        padding: 2.5rem 1.25rem !important;
    }
    .cta {
        padding: 3rem 0 !important;
    }
    .cta-content p {
        font-size: 1.05rem !important;
    }
    .cta-btn {
        padding: 1rem 2rem !important;
        font-size: 1rem !important;
    }
}

/* 10. Design Detail Page (design-detail.php) Responsive Enhancements */
@media (max-width: 900px) {
    .design-main {
        padding: 2.5rem 1.5rem !important;
    }
    .design-sidebar {
        padding: 2.5rem 1.5rem !important;
    }
    .sect-title {
        font-size: 2rem !important;
    }
}

@media (max-width: 600px) {
    .oes-hero-title {
        font-size: clamp(2rem, 8vw, 3rem) !important;
    }
    .hero-breadcrumbs {
        font-size: 0.8rem !important;
        gap: 0.5rem !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    .hero-badges span {
        margin: 0.25rem !important;
        font-size: 0.8rem !important;
        padding: 0.4rem 1rem !important;
    }
    .design-main {
        padding: 2rem 1rem !important;
    }
    .design-sidebar {
        padding: 2rem 1rem !important;
    }
    .sect-title {
        font-size: 1.7rem !important;
    }
    .image-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }
    .image-grid a {
        grid-column: span 1 !important;
        aspect-ratio: 4/3 !important;
    }
}