/* ============================================
   RESPONSIVE.CSS — Ooi Solutions
   Global responsive overrides & layout shifts.
   Note: Component-specific media queries remain 
   in their respective files (header.css, etc.)
   ============================================ */

/* ── MOBILE FIRST OVERRIDES (< 767px) ── */
@media (max-width: 767px) {
    /* Ensure no horizontal bleed on mobile */
    body, .flow-main, .partners-section, .wheel-section {
        overflow-x: hidden;
    }

    /* Tighten vertical section padding on mobile */
    .search-section,
    .approach-section {
        padding-left: 5%;
        padding-right: 5%;
    }

    /* Fix mobile white gaps — reduce top/bottom padding */
    .search-section {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    /* Flow section: tighter padding */
    .flow-inner {
        padding: clamp(1.5rem, 6vw, 3rem) 5vw 3rem;
    }

    /* Reduce flow-section min-height to prevent extra gaps */
    .flow-section {
        min-height: auto;
        padding-top: 48px;
        padding-bottom: 48px;
    }

    /* Keep headings to 2 lines max */
    .flow-heading {
        font-size: clamp(2rem, 10vw, 3rem);
        line-height: 0.95;
    }

    .search-top h2 {
        font-size: clamp(2rem, 10vw, 3rem);
    }

    /* Partners header */
    .partners-header h2 {
        font-size: clamp(2rem, 10vw, 3.5rem);
    }

    /* Hero section — handled in hero.css mobile block */

    /* Approach section: tighter padding */
    .approach-section {
        padding-top: 60px;
        padding-bottom: 40px;
    }

    /* CTA section tighter on mobile */
    .cta-section {
        padding: 32px 12px;
    }
}

/* ── SMALL MOBILE TWEAKS (< 480px) ── */
@media (max-width: 480px) {
    /* Prevent text overflow on tiny screens */
    h1, h2, h3, .flow-heading, .search-list-item h3 {
        word-break: break-word;
    }

    /* Flow heading sizing for small screens */
    .flow-heading {
        font-size: clamp(1.8rem, 9vw, 2.6rem);
    }

    /* Reduce massive padding on tiny screens */
    .cta-card {
        border-radius: 24px;
    }
    .cta-card-content {
        padding: 24px;
    }

    .cta-card h2 {
        font-size: clamp(1.6rem, 8vw, 2.5rem);
    }
}

/* ── TABLET ADJUSTMENTS (768px - 1023px) ── */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Give content a bit more breathing room on tablets */
    .search-section {
        padding-left: 8%;
        padding-right: 8%;
    }

    .flow-heading {
        font-size: clamp(2.8rem, 7vw, 4.5rem);
    }
}

/* ── LARGE DESKTOP (> 1400px) ── */
@media (min-width: 1400px) {
    /* Approach inner max width */
    .approach-inner {
        max-width: 1400px;
    }
}