/* ========================================
   RESPONSIVE OPTIMIZATION - COMPREHENSIVE FIX
   Unified responsive system for text, images, and layout
   Consolidates and optimizes all responsive fixes
   ======================================== */

/* ========================================
   1. RESPONSIVE TYPOGRAPHY OPTIMIZATION
   Smooth, fluid text scaling across all breakpoints
   ======================================== */

/* Base HTML Elements - Fluid Typography */
html {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
    -ms-text-size-adjust: 100% !important;
}

/* H1 - Hero & Page Titles */
h1, .h1,
.modern-hero-heading,
.hero-title,
.page-title {
    font-size: clamp(1.75rem, 5vw + 0.5rem, 3rem) !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: clamp(1rem, 3vw, 1.5rem) !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
}

/* H2 - Section Headings */
h2, .h2,
.section-title,
.products-section-heading,
.why-moneypex-heading,
.features-carousel-heading,
.fbr-heading {
    font-size: clamp(1.5rem, 4vw + 0.25rem, 2.5rem) !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    margin-bottom: clamp(0.75rem, 2.5vw, 1.25rem) !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* H3 - Subsection Headings */
h3, .h3,
.why-card-title,
.product-title,
.benefit-title,
.industry-card-title {
    font-size: clamp(1.125rem, 3vw + 0.15rem, 1.875rem) !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    margin-bottom: clamp(0.5rem, 2vw, 1rem) !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* H4 - Card Titles */
h4, .h4,
.mp-products-card__title {
    font-size: clamp(1rem, 2.5vw + 0.1rem, 1.5rem) !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    margin-bottom: clamp(0.5rem, 1.5vw, 0.875rem) !important;
}

/* H5 & H6 - Small Headings */
h5, .h5 {
    font-size: clamp(0.9375rem, 2vw, 1.25rem) !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
}

h6, .h6 {
    font-size: clamp(0.875rem, 1.8vw, 1.125rem) !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
}

/* Body Text & Paragraphs */
p, .text-body,
.modern-hero-text,
.hero-text,
.why-moneypex-description,
.products-section-subtitle,
.benefit-description,
.industry-card-description {
    font-size: clamp(0.9375rem, 1.5vw + 0.1rem, 1.125rem) !important;
    line-height: 1.7 !important;
    font-weight: 400 !important;
    margin-bottom: clamp(0.75rem, 2vw, 1rem) !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* Small Text */
small, .small,
.text-small,
.fbr-feature-description {
    font-size: clamp(0.8125rem, 1.3vw, 0.9375rem) !important;
    line-height: 1.6 !important;
}

/* ========================================
   2. IMAGE OPTIMIZATION - RESPONSIVE & PERFORMANCE
   ======================================== */

/* Base Image Optimization */
img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
}

/* Fluid Images - Full Width */
.img-fluid,
.responsive-img,
.hero-main-image,
.home-hero-image {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
}

/* Hero Section Images */
.hero-form-wrapper img,
.hero-image-wrapper img,
.hero-right-wrapper img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 1rem !important;
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
}

/* Ensure all hero visuals stay flat on both regions */
.hero-main-image,
.home-hero-image,
.hero-dashboard-image,
.hero-form-wrapper,
.hero-image-wrapper,
.hero-right-wrapper {
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
}

/* Product Icons - Responsive Sizing */
.product-icon img,
.why-card-icon img,
.benefit-icon-img,
.industry-icon-img,
.dropdown-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
}

/* Logo Images - Trusted By Section */
.trusted-by-section img,
.company-logo-wrapper img {
    max-width: 100% !important;
    height: auto !important;
    max-height: 60px !important;
    object-fit: contain !important;
    filter: grayscale(1) opacity(0.6) !important;
    transition: all 0.3s ease !important;
}

.trusted-by-section img:hover,
.company-logo-wrapper img:hover {
    filter: grayscale(0) opacity(1) !important;
}

/* FBR Section Images */
.fbr-image img,
.fbr-image-wrapper img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 1rem !important;
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
}

/* Testimonial Images */
.testimonial-card-growth img {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    margin-bottom: 1rem !important;
}

/* ========================================
   3. MOBILE RESPONSIVE OPTIMIZATIONS (< 768px)
   ======================================== */

@media (max-width: 767px) {
    /* Container Spacing */
    .container,
    .container-fluid,
    .container-md {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Section Spacing */
    section,
    .modern-section {
        padding: 3rem 1rem !important;
    }
    
    .modern-hero-section,
    .home-hero-section {
        padding: 2rem 1rem 3rem !important;
        min-height: 70vh !important;
    }
    
    /* Hero Content Alignment */
    .hero-content-wrapper {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin-bottom: 2rem !important;
    }
    
    .modern-hero-heading {
        font-size: 1.75rem !important;
        text-align: center !important;
        margin-bottom: 1rem !important;
    }
    
    .modern-hero-text,
    .hero-text {
        font-size: 0.9375rem !important;
        text-align: center !important;
        margin: 0 auto 1.5rem !important;
        max-width: 100% !important;
    }
    
    /* Hero Image Optimization - Mobile */
    .hero-form-wrapper,
    .hero-image-wrapper {
        padding: 0 !important;
        margin-top: 1.5rem !important;
    }
    
    .hero-form-wrapper img,
    .hero-image-wrapper img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        border-radius: 0.75rem !important;
    }
    
    /* Why Moneypex Cards - 2 Columns Mobile */
    .why-moneypex-cards {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
        padding: 0 0.5rem !important;
    }
    
    .why-card {
        padding: 1.25rem 0.875rem !important;
        min-height: auto !important;
    }
    
    .why-card-icon {
        width: 3rem !important;
        height: 3rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .why-card-icon img {
        width: 2rem !important;
        height: 2rem !important;
    }
    
    .why-card-title {
        font-size: 0.9375rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0 !important;
    }
    
    /* Products Section - Mobile */
    .mp-products-section {
        padding: 2rem 1rem !important;
    }
    
    .mp-products-list {
        margin-bottom: 1.5rem !important;
    }
    
    .product-item {
        padding: 0.75rem 1rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .product-title {
        font-size: 0.9375rem !important;
    }
    
    .product-icon {
        width: 36px !important;
        height: 36px !important;
    }
    
    /* FBR Section - Mobile Stack */
    .fbr-compliance-section {
        padding: 3rem 1rem !important;
    }
    
    .fbr-compliance-section .row {
        flex-direction: column !important;
    }
    
    .fbr-content,
    .fbr-image {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 2rem !important;
    }
    
    .fbr-heading {
        font-size: 1.5rem !important;
        text-align: center !important;
    }
    
    .fbr-description {
        font-size: 0.9375rem !important;
        text-align: center !important;
    }
    
    .fbr-feature-item {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    .fbr-feature-title {
        font-size: 1rem !important;
    }
    
    .fbr-feature-description {
        font-size: 0.875rem !important;
    }
    
    /* Benefits Section - Mobile Stack */
    .benefits-wrapper-modern {
        padding: 3rem 1rem !important;
    }
    
    .benefits-wrapper-modern .row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    .benefit-card-modern {
        padding: 1.5rem !important;
    }
    
    .benefit-icon-img {
        width: 3rem !important;
        height: 3rem !important;
        margin-bottom: 1rem !important;
    }
    
    .benefit-title {
        font-size: 1.125rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .benefit-description {
        font-size: 0.9375rem !important;
    }
    
    /* Industries Carousel - Mobile 1 Column */
    .features-carousel-section {
        padding: 3rem 1rem !important;
    }
    
    .products-carousel-track .product-card {
        flex: 0 0 100% !important;
        padding: 0 0.5rem !important;
    }
    
    .industry-card-inner {
        padding: 1.5rem !important;
    }
    
    .industry-card-title {
        font-size: 1.125rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .industry-card-description {
        font-size: 0.875rem !important;
        line-height: 1.6 !important;
    }
    
    /* Testimonials - Mobile */
    .testimonials-grid-modern {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    .testimonial-card-growth {
        padding: 1.5rem !important;
    }
    
    /* Buttons - Mobile */
    .btn-premium {
        font-size: 0.9375rem !important;
        padding: 0.875rem 1.5rem !important;
        width: 100% !important;
        max-width: 320px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .hero-button-animate {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }
    
    /* FAQ Section - Mobile */
    .faq-growth-section {
        padding: 3rem 1rem !important;
    }
    
    .accordion-button {
        font-size: 0.9375rem !important;
        padding: 1rem 0.75rem !important;
    }
    
    .accordion-body {
        font-size: 0.875rem !important;
        padding: 1rem 0.75rem !important;
    }
}

/* ========================================
   4. EXTRA SMALL MOBILE (< 480px)
   ======================================== */

@media (max-width: 479px) {
    /* Ultra-compact spacing */
    .container,
    .container-fluid {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    section {
        padding: 2.5rem 0.75rem !important;
    }
    
    .modern-hero-section {
        padding: 1.5rem 0.75rem 2.5rem !important;
    }
    
    /* Typography - Extra Small */
    .modern-hero-heading {
        font-size: 1.5rem !important;
        line-height: 1.2 !important;
    }
    
    h2, .h2 {
        font-size: 1.375rem !important;
    }
    
    h3, .h3 {
        font-size: 1.125rem !important;
    }
    
    p {
        font-size: 0.875rem !important;
    }
    
    /* Cards - Extra Compact */
    .why-moneypex-cards {
        gap: 0.75rem !important;
        padding: 0 0.25rem !important;
    }
    
    .why-card {
        padding: 1rem 0.625rem !important;
    }
    
    .why-card-icon {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
    
    .why-card-icon img {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }
    
    .why-card-title {
        font-size: 0.875rem !important;
    }
    
    /* Buttons */
    .btn-premium {
        font-size: 0.875rem !important;
        padding: 0.75rem 1.25rem !important;
    }
}

/* ========================================
   5. TABLET RESPONSIVE (768px - 991px)
   ======================================== */

@media (min-width: 768px) and (max-width: 991px) {
    /* Container Spacing */
    .container,
    .container-fluid {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    
    /* Section Spacing */
    section {
        padding: 4rem 1.5rem !important;
    }
    
    .modern-hero-section {
        padding: 3rem 1.5rem 4rem !important;
    }
    
    /* Typography - Tablet */
    .modern-hero-heading {
        font-size: 2.25rem !important;
    }
    
    h2, .h2 {
        font-size: 1.875rem !important;
    }
    
    /* Why Moneypex - 2 Columns */
    .why-moneypex-cards {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
    }
    
    .why-card {
        padding: 2rem 1.5rem !important;
    }
    
    /* Products Section */
    .mp-products-section .row {
        flex-direction: column !important;
    }
    
    .mp-products-list {
        margin-bottom: 2rem !important;
    }
    
    /* Industries Carousel - 2 Columns */
    .products-carousel-track .product-card {
        flex: 0 0 50% !important;
    }
    
    /* Benefits - 2 Columns */
    .benefits-wrapper-modern .row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2rem !important;
    }
}

/* ========================================
   6. DESKTOP OPTIMIZATION (992px+)
   ======================================== */

@media (min-width: 992px) {
    /* Container Max Width */
    .container-md {
        max-width: 1200px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Hero Section - Side by Side */
    .hero-row-wrapper {
        align-items: center !important;
    }
    
    .hero-content-wrapper {
        text-align: left !important;
    }
    
    .modern-hero-heading {
        text-align: left !important;
    }
    
    .modern-hero-text {
        text-align: left !important;
    }
    
    /* Why Moneypex - 4 Columns */
    .why-moneypex-cards {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 2rem !important;
    }
    
    /* Products Section - Side by Side */
    .mp-products-section .row {
        flex-direction: row !important;
    }
    
    /* Industries Carousel - 4 Columns */
    .products-carousel-track .product-card {
        flex: 0 0 25% !important;
    }
    
    /* Benefits - 3 Columns */
    .benefits-wrapper-modern .row {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 2.5rem !important;
    }
    
    /* FBR Section
       IMPORTANT: Do NOT force widths/padding here.
       PK uses a CSS Grid layout for `.fbr-compliance-section .row` (see `pk-home-design-fix.css`).
       Setting `width: 50%` inside a grid column shrinks content and breaks the section. */
}

/* FBR Section: prevent awkward word splitting in feature titles */
.fbr-feature-title,
.fbr-heading {
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: manual !important;
    -webkit-hyphens: manual !important;
    -moz-hyphens: manual !important;
}

/* ========================================
   7. LARGE DESKTOP (1200px+)
   ======================================== */

@media (min-width: 1200px) {
    .container-md {
        max-width: 1400px !important;
    }
    
    /* Optimal Typography for Large Screens */
    .modern-hero-heading {
        font-size: 3rem !important;
    }
    
    h2, .h2 {
        font-size: 2.5rem !important;
    }
    
    /* Benefits - 3 Columns on Large Screens */
    .benefits-wrapper-modern .row {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 3rem !important;
        max-width: 1200px !important;
        margin: 0 auto !important;
    }
}

/* ========================================
   8. PREVENT LAYOUT SHIFT & PERFORMANCE
   ======================================== */

/* Prevent Cumulative Layout Shift (CLS) */
img[width][height] {
    height: auto !important;
}

/* Aspect Ratio Boxes for Images */
.hero-form-wrapper,
.hero-image-wrapper {
    position: relative !important;
    width: 100% !important;
}

/* GPU Acceleration for Smooth Animations */
.hero-card-animate,
.fade-in-up,
.hero-heading-animate,
.hero-text-animate,
.hero-button-animate {
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    will-change: transform, opacity !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}

/* Image Loading Performance */
img[loading="lazy"] {
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

img[loading="lazy"].loaded {
    opacity: 1 !important;
}

/* ========================================
   9. TEXT OVERFLOW & WORD WRAP
   ======================================== */

/* Ensure text never overflows */
h1, h2, h3, h4, h5, h6,
p, span, div,
.why-card-title,
.product-title,
.benefit-title,
.industry-card-title {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    -moz-hyphens: auto !important;
}

/* Prevent text from breaking incorrectly */
.btn-premium span,
.nav-link-modern,
.dropdown-item-modern {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ========================================
   11. MOBILE HEADING UNDERLINE - MATCH WORD WIDTH
   Premium underline should be exactly the word width on small screens
   ======================================== */

@media (max-width: 767.98px) {
    .premium-underline {
        /* Remove side padding that makes underline longer than the word */
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .premium-underline::after {
        left: 0 !important;
        width: 100% !important;
        background-size: 100% 100% !important;
        background-position: center bottom !important;
    }
}

/* ========================================
   10. TRUSTED BY SECTION - LOGO OPTIMIZATION
   ======================================== */

.trusted-by-section {
    padding: 3rem 1rem !important;
}

.company-logo-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem !important;
    height: 100px !important;
}

.company-logo-wrapper img {
    max-width: 120px !important;
    max-height: 60px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

@media (max-width: 767px) {
    .trusted-by-section {
        padding: 2rem 0.75rem !important;
    }
    
    .company-logo-wrapper {
        height: 80px !important;
        padding: 0.75rem !important;
    }
    
    .company-logo-wrapper img {
        max-width: 90px !important;
        max-height: 45px !important;
    }
}

/* ========================================
   12. WHY MONEYPEX HEADING RESPONSIVE TUNING
   ======================================== */
.why-moneypex-heading {
    font-size: clamp(1.5rem, 2.8vw + 0.25rem, 2.35rem) !important;
    line-height: 1.25 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    text-wrap: balance;
}

.why-moneypex-heading .premium-underline {
    display: inline-flex !important;
    align-items: flex-end !important;
    padding: 0 0.05em !important;
}

.why-moneypex-heading .premium-underline::after {
    bottom: clamp(-6px, -0.9vw, -10px) !important;
    height: clamp(10px, 1vw, 14px) !important;
}

@media (max-width: 767.98px) {
    .why-moneypex-heading {
        font-size: clamp(1.35rem, 5vw + 0.1rem, 1.9rem) !important;
        margin-bottom: 0.75rem !important;
    }

    .why-moneypex-heading .premium-underline::after {
        height: clamp(8px, 1vw, 12px) !important;
        bottom: clamp(-5px, -0.8vw, -8px) !important;
    }
}

@media (max-width: 479.98px) {
    .why-moneypex-heading {
        font-size: clamp(1.25rem, 6vw + 0.1rem, 1.65rem) !important;
        line-height: 1.22 !important;
    }
}

/* ========================================
   END OF RESPONSIVE OPTIMIZATION
   ======================================== */