/* ui-responsive-module.css */
/* This file contains responsive styles for UI elements: contact buttons, hero/CTA banners */
/*
 * CROSS-MODULE DEPENDENCIES:
 * - Extends: styles2.css base responsive patterns
 * - Coordinates with: layout-module.css for container widths
 * - Uses: Same max-width pattern as main content containers
 *
 * LOAD ORDER: Not in standard load order - included separately where needed
 * PURPOSE: Responsive adjustments for specific UI components
 */

/* ====================================================================== */
/* ====================================================================== */
/*                    GLOBAL OVERRIDES (ALL VIEWPORTS)                  */
/* ====================================================================== */

/* ✅ FIX: Tighten Team Quote Spacing Globally */
/* User Request: "Strip away space so speech marks are next to letters" */
.team-member .tm-quote::before {
    content: open-quote;
    position: relative !important;
    /* Reset any absolute positioning */
    left: auto !important;
    margin-right: 2px !important;
    /* Tight spacing (approx 0.1em) */
    display: inline-block;
}

.team-member .tm-quote::after {
    content: close-quote;
    position: relative !important;
    right: auto !important;
    margin-left: 2px !important;
    /* Tight spacing */
    display: inline-block;
}

/* ====================================================================== */
/*                    CONTACT BUTTON RESPONSIVE STYLES                  */
/* ====================================================================== */

/* Responsive adjustments for contact buttons */
@media (max-width: 768px) {
    .contact-btn {
        padding: 10px 20px;
        font-size: 0.9em;
        min-width: 100px;
    }
}

@media (max-width: 768px) {

    /* List sections with images - stack vertically on tablets */
    .zone-list-row {
        flex-direction: column !important;
        gap: 1.5rem !important;
    }

    .zone-list-row .tutor-box {
        text-align: center !important;
    }

    .zone-list-row div[style*="max-width: 400px"] {
        max-width: 100% !important;
        align-self: center;
    }

    /* ✅ REFACTORED: Dynamic section containers - centered with slightly reduced width */
    /* This approach centers dynamic sections to the same midpoint as static sections */
    /* while slightly narrowing both left and right edges for balanced visual alignment */
    .dynamic-section-container,
    [id^="dynamicSections"] {
        max-width: calc(100% - 2rem);
        /* Slightly narrower than 100% to create balanced margins on both sides */
        margin-inline: auto;
        /* Explicit horizontal centering */
        padding: 2rem 1rem;
        box-sizing: border-box;
        transform: none !important;
        /* Override any translateX transforms from animation-module */
    }

    /* Nested zone sections within dynamic containers - center content */
    .dynamic-section-container .tutor-zone-section,
    .dynamic-section-container .parents-zone-section,
    .dynamic-section-container .pupil-zone-section,
    .dynamic-section-container .strive-zone-section,
    .dynamic-section-container .newsletter-zone-section {
        max-width: 100%;
        /* Fill the centered container */
        margin-inline: auto;
        /* Center within container */
    }

    /* Remove container padding when zone sections are nested inside to prevent double padding */
    .dynamic-section-container:has(> .tutor-zone-section),
    .dynamic-section-container:has(> .parents-zone-section),
    .dynamic-section-container:has(> .pupil-zone-section),
    .dynamic-section-container:has(> .strive-zone-section),
    .dynamic-section-container:has(> .newsletter-zone-section) {
        padding: 0;
        /* Zone sections have their own padding */
    }


    /* Dynamic testimonial sections - stack quotes vertically on tablets */
    .testimonials-bg-section .testimonial-quote-card {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
        transform: translateX(77%) !important;
        margin: 1rem auto !important;
        display: block !important;
        max-width: 90% !important;
    }
}

/* Portrait orientation on restricted viewports - testimonials need special handling */
@media (orientation: portrait) and (max-width: 1200px) {

    /* Override existing testimonial positioning rules for restricted viewports */
    .testimonials-laced {
        min-height: auto !important;
        /* Override the 550px min-height */
        padding: 2rem 1rem !important;
        margin: 0 auto !important;
        text-align: center !important;
        /* This will center the absolutely positioned children */
    }

    .testimonials-bg-section .testimonial-quote-card,
    .testimonials-laced .testimonial-quote-card:nth-child(1),
    .testimonials-laced .testimonial-quote-card:nth-child(2),
    .testimonials-laced .testimonial-quote-card:nth-child(3),
    .testimonials-laced .card-1,
    .testimonials-laced .card-2,
    .testimonials-laced .card-3 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        /* Override styles2.css 900px rule */
        right: auto !important;
        /* Override styles2.css 900px rule */
        bottom: auto !important;
        transform: translateX(0) !important;
        /* Override the translateX(77%) from tablet rules */
        margin: 1.5rem auto !important;
        margin-left: auto !important;
        /* Ensure centering - override 900px rule */
        margin-right: auto !important;
        /* Ensure centering - override 900px rule */
        display: block !important;
        max-width: 85% !important;
        width: 85% !important;
        box-sizing: border-box !important;
        font-size: 1rem !important;
        /* Override smaller font sizes */
    }

    /* Ensure testimonial section expands to fit stacked content and is centered */
    .testimonials-bg-section {
        max-width: 1080px !important;
        /* THE KEY - match other sections' container pattern */
        padding: 2rem 1rem !important;
        min-height: auto !important;
        height: auto !important;
        /* Keep original display behavior - don't use flex for absolutely positioned children */
        display: block !important;
        /* Ensure proper centering in restricted viewports */
        width: 100% !important;
        position: relative !important;
        left: auto !important;
        margin: 0 auto !important;
        /* ADD THESE LINES FOR BETTER CENTERING: */
        text-align: center !important;
        transform: translateX(0) !important;
        /* Override any inherited transforms */
        /* Ensure background covers the expanded area */
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        box-sizing: border-box !important;
        /* THE CRUCIAL MISSING PIECE - prevents oversizing */
    }

    /* Fix STRIVE section positioning in restricted portrait viewports */
    .strive-bg-section {
        width: 100% !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        margin: 0 auto !important;
        transform: none !important;
        /* Override any transform rules */
        overflow-x: hidden !important;
        overflow-y: visible !important;
        min-height: auto !important;
        /* Ensure section is visible and properly sized */
        display: block !important;
        height: auto !important;
    }

    /* Ensure STRIVE overlay card is properly positioned */
    .strive-overlay-card {
        max-width: 92vw !important;
        margin: 0 auto !important;
        position: relative !important;
        /* Ensure it's not absolutely positioned */
        top: auto !important;
        right: auto !important;
        transform: none !important;
        /* Override any transforms */
    }

    /* Simplified team section for Samsung viewport fix */
    .team-section {
        max-width: 92vw !important;
        margin: 1rem auto !important;
        padding: 1.5rem 1rem !important;
        box-sizing: border-box !important;
    }

    /* Fix alignment issue for dynamic team sections in this specific viewport - REMOVED LEFT CROP */
    .dynamic-section-container .team-section {
        transform: none !important;
        /* FIXED: Removed translateX(-9%) to prevent left crop */
        width: 100% !important;
        /* MATCH PARENT: Fill the container naturally to align with other sections */
        margin: 1rem auto !important;
        /* FORCE CENTER: Fix "too far right" drift */
        left: 0 !important;
        right: 0 !important;
        position: relative !important;
        box-sizing: border-box !important;
    }

    /* ✅ FIX 1: Team Section Inner Alignment (Dynamic Pages) */
    /* Accessing the inner content of dynamic team sections to force centering */
    .dynamic-section-container .team-member {
        text-align: center !important;
        display: flex;
        flex-direction: column;
        align-items: center !important;
    }

    /* ✅ FIX 3: Dynamic Container Alignment (Portrait) */
    /* Force 90% width (narrower than viewport) and CENTER it to match standard section symmetry */
    /* User request: "symmetrical (as padded on the right as it is on the left) but not as wide as original" */
    /* ✅ FIX 3: Dynamic Container Alignment (Portrait) - SCOPED TO TEAM SECTIONS */
    /* PHASE 6: Neutralize transforms and fix asymmetry via Tech Team guidance */

    /* 1. Neutralize Container Transforms - CRITICAL FIX */
    .dynamic-section-container {
        transform: none !important;
        /* KILL THE DRIFT caused by legacy translateX */
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 auto !important;
    }

    /* 2. Target Team Section for Symmetry & Neutralize its Transforms */
    .dynamic-section-container .team-section {
        transform: none !important;
        /* KILL THE DRIFT */
        width: 90% !important;
        /* Narrower width for symmetry */
        margin: 1rem auto !important;
        /* Force center alignment */
        left: -5% !important;
        /* PHASE 7: Hybrid Fix - Manual left shift */
        right: auto !important;
        /* Reset positioning */
        position: relative !important;
        padding: 1.5rem 1rem !important;
        /* Consistent padding */
        box-sizing: border-box !important;
    }

    /* Fixed: Removed scoped quote rules to use global definition */
    /* See top of file for .team-member .tm-quote global overrides */

    /* ✅ FIX 2: Standard Section Alignment in Portrait Mode */
    /* Ensure standard sections stack vertically and center content in restricted viewports */
    .two-col-content {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    /* Ensure child divs take full width so they can be centered */
    .two-col-content>div {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    /* Explicitly center the image - HIGHER SPECIFICITY to override styles2.css defaults */
    .two-col-content img {
        margin-left: auto !important;
        margin-right: auto !important;
        align-self: center !important;
        display: block !important;
        transform: none !important;
        /* Reset any inherited transforms */

        /* Fix cropping/style issues to match static pages */
        width: 100% !important;
        max-width: 100% !important;
        /* Override the 450px limit */
        object-fit: cover !important;
        /* Override 'contain' to avoid shorn look */
        border-radius: 1rem !important;
        /* Add rounded corners */
        height: auto !important;
        margin-top: 1rem !important;
        /* Add spacing */
        margin-bottom: 1rem !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 480px) {
    .contact-btn {
        padding: 8px 16px;
        font-size: 0.85em;
        min-width: 90px;
        display: block;
        margin: 0 auto;
        max-width: 200px;
    }

    .tutor-contact {
        margin: 10px 0;
    }

    /* ✅ REFACTORED: Dynamic sections - tighter centering on mobile */
    /* Further reduce max-width on very narrow screens for better centering balance */
    .dynamic-section-container,
    [id^="dynamicSections"] {
        max-width: calc(100% - 1.5rem);
        /* Slightly tighter margins on mobile */
        margin-inline: auto;
        padding: 1.5rem 0.75rem;
        transform: none !important;
    }
}

/* ====================================================================== */
/*                    HERO & CTA BANNER RESPONSIVE STYLES              */
/* ====================================================================== */

/* Responsive tweaks for hero and CTA banners */
@media (max-width: 900px) {
    .hero-banner {
        min-height: 300px;
        padding: 2rem 1rem;
    }

    .hero-content {
        padding: 1.5rem;
    }

    .hero-content h1 {
        font-size: 2rem;
    }

    .hero-content p {
        font-size: 1rem;
    }

    .cta-banner {
        min-height: 180px;
        padding: 1.5rem 1rem;
    }
}

/* Portrait-specific adjustments for hero banner */
/* Specificity: 0,0,1,0 + media query - Overrides base hero-banner styles */
@media (max-width: 1200px) and (orientation: portrait) {
    .hero-banner {
        max-width: 1080px;
        /* Matches layout-module.css container pattern */
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-left: 1rem;
        padding-right: 1rem;
        box-sizing: border-box;
    }
}

/* Portrait-specific adjustments for CTA banner */
@media (max-width: 1200px) and (orientation: portrait) {
    .cta-banner {
        max-width: 1080px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-left: 1rem;
        padding-right: 1rem;
        box-sizing: border-box;
    }
}

/* Landscape-specific CTA banner adjustment */
@media (orientation: landscape) {
    .cta-banner {
        transform: translateX(-7px) !important;
    }
}

/* Landscape-specific fixes for restricted viewports */
@media (orientation: landscape) and (max-width: 1200px) {

    /* Prevent STRIVE section cropping in landscape restricted viewports */
    .strive-bg-section {
        width: 100% !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        margin: 0 auto !important;
        transform: none !important;
        /* Override the translateX(10px) that causes cropping */
        overflow-x: hidden !important;
        overflow-y: visible !important;
        min-height: 400px !important;
        /* Ensure minimum height for landscape */
        height: auto !important;
    }

    /* Ensure STRIVE overlay card fits in landscape */
    .strive-overlay-card {
        max-width: 85vw !important;
        /* Slightly smaller for landscape */
        margin: 0 auto !important;
        position: relative !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;
        padding: 1.5rem 1rem !important;
        /* Reduce padding for landscape */
    }

    /* Override any CTA banner transforms that might affect layout */
    .cta-banner {
        transform: none !important;
        /* Remove the translateX(-7px) if it's causing issues */
    }
}