/* ============================================================================
   HERO CONTAINER DEFINITIVE FIX
   Forces vertical stacking of hero-main and hero-dynamics
   ============================================================================ */

/* Reset hero container to simple vertical layout */
.hero-container {
    display: block !important; /* Remove grid completely */
    width: 100% !important;
    max-width: none !important;
    padding: 2rem clamp(1rem, 5vw, 6rem) !important;
    margin: 0 !important;
    grid-template-columns: unset !important; /* Remove any grid columns */
}

/* Alternative: If block doesn't work, use single column grid */
.hero-container {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
    padding: 2rem clamp(1rem, 5vw, 6rem) !important;
    margin: 0 !important;
    gap: 2rem !important;
}

/* Ensure children stack vertically */
.hero-main {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    grid-column: unset !important; /* Remove any grid placement */
    grid-row: unset !important;
}

.hero-dynamics {
    width: 100% !important;
    padding: 0 !important;
    margin-top: 2rem !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem !important;
    grid-column: unset !important; /* Remove any grid placement */
    grid-row: unset !important;
}

/* Remove any grid child selectors */
.hero-container > * {
    width: 100% !important;
    grid-column: unset !important;
    grid-row: unset !important;
}

/* Stats and trust indicators centered */
.hero-stats-bar {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    gap: 4rem !important;
    flex-wrap: wrap !important;
    margin-bottom: 2rem !important;
}

.trust-indicators-compact {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    gap: 3rem !important;
    margin-top: 2rem !important;
    flex-wrap: wrap !important;
}

/* ============================================================================
   RESPONSIVE OVERRIDES
   ============================================================================ */

/* Remove ALL grid-template-columns from hero-container at all breakpoints */
@media (min-width: 768px) and (max-width: 1024px) {
    .hero-container {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: unset !important;
    }
}

@media (min-width: 1025px) and (max-width: 1440px) {
    .hero-container {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: unset !important;
    }

    .hero-dynamics {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (min-width: 1441px) and (max-width: 1920px) {
    .hero-container {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: unset !important;
    }

    .hero-dynamics {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2rem !important;
    }
}

@media (min-width: 1921px) {
    .hero-container {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: unset !important;
    }

    .hero-dynamics {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2.5rem !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .hero-container {
        display: flex !important;
        flex-direction: column !important;
        padding: 1rem !important;
    }

    .hero-dynamics {
        display: block !important;
        margin-top: 1.5rem !important;
    }

    .hero-panel {
        margin-bottom: 1.5rem !important;
    }

    .hero-stats-bar {
        gap: 1rem !important;
    }

    .trust-indicators-compact {
        gap: 1rem !important;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1200px) {
    .hero-dynamics {
        grid-template-columns: 1fr !important;
    }

    .hero-panel {
        max-width: 700px !important;
        margin: 0 auto 1.5rem !important;
    }
}

/* Remove any complex grid area names */
.hero-container[class*="grid-template-areas"],
.hero-container[style*="grid-template-areas"] {
    grid-template-areas: unset !important;
}

/* Force override any inline styles */
.hero-container[style*="grid-template-columns"] {
    grid-template-columns: unset !important;
}

/* ============================================================================
   END HERO CONTAINER DEFINITIVE FIX
   ============================================================================ */