/**
 * Index Page Styles
 * Styles for the front page hero section
 *
 * @package EduPlatform
 */

/* ==========================================================================
   Hero Section Styles
   ========================================================================== */

/* Force all container elements to full width for hero section */
.site-content,
main.site-main,
main .relative[style*="min-height"] {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Remove gap between header and hero section */
main.site-main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

main .relative[style*="min-height"] {
    margin-top: 0 !important;
}

/* Force hero image height at different breakpoints - Override WordPress CSS */
@media (min-width: 640px) {
    .h-96.sm\:h-\[32rem\] {
        height: 32rem !important;
    }

    .py-32.sm\:py-48 {
        padding-top: 12rem !important;
        padding-bottom: 12rem !important;
    }
}

@media (min-width: 768px) {
    .md\:h-\[40rem\] {
        height: 40rem !important;
    }
}

/* Desktop layout - 1024px and above */
@media (min-width: 1024px) {

    /* Text container padding */
    .lg\:py-64 {
        padding-top: 12rem !important;
        padding-bottom: 12rem !important;
    }

    /* Hero image container - FORCE absolute positioning on the RIGHT */
    main .relative>div.h-96 {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        height: 100% !important;
        width: 50% !important;
        left: auto !important;
    }

    /* Backup selector for image container */
    .lg\:absolute.lg\:h-full {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        height: 100% !important;
    }

    /* Force image container to 50% width */
    .lg\:w-1\/2 {
        width: 50% !important;
    }

    /* Desktop-specific styles for hero section - Responsive padding and width */
    main#primary.site-main div.mx-auto.max-w-2xl.py-32 {
        padding-bottom: 8rem !important;
        margin-left: 0 !important;
        /* Responsive left padding: centers within left 50% with margins */
        padding-left: max(2rem, calc((100vw - 80rem) / 2 + 2rem)) !important;
        max-width: none !important;
    }

    main#primary.site-main div.lg\:pr-16 {
        /* Flexible max-width instead of fixed width - prevents overflow */
        max-width: 42rem !important;
        width: 100% !important;
        /* Add right padding to create space from image */
        padding-right: 4rem !important;
    }
}

/* Tablet and below - reset for mobile usability */
@media (max-width: 1023px) {

    /* Reset hero image to stack below text instead of side-by-side */
    main#primary.site-main .relative>div.h-96.w-full {
        position: relative !important;
        width: 100% !important;
        height: 300px !important;
    }

    /* Reset outer container to allow responsive padding */
    main#primary.site-main div.mx-auto.max-w-7xl {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    /* Reset text container from fixed positioning to responsive */
    main#primary.site-main div.mx-auto.max-w-2xl {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 100% !important;
    }

    /* Allow content to be responsive width */
    main#primary.site-main div.lg\:pr-16 {
        width: 100% !important;
        max-width: 100% !important;
        padding-right: 0 !important;
    }

    /* Fluid typography - scales smoothly between breakpoints */
    main#primary.site-main h1.text-4xl {
        font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem) !important;
    }

    main#primary.site-main p.text-xl {
        font-size: clamp(1rem, 0.875rem + 0.5vw, 1.25rem) !important;
    }

    /* Remove gray background decoration on mobile */
    div.absolute.hidden.h-full {
        display: none !important;
    }
}

/* Mobile phones - extra compact layout */
@media (max-width: 640px) {

    /* Reduce padding further for small screens */
    main#primary.site-main div.mx-auto.max-w-2xl {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Shorter hero image on mobile */
    main#primary.site-main .relative>div.h-96 {
        height: 250px !important;
    }

    /* Fixed typography sizes for very small screens */
    main#primary.site-main h1.text-4xl {
        font-size: 1.75rem !important;
        margin-bottom: 1rem !important;
    }

    main#primary.site-main p.text-xl {
        font-size: 1rem !important;
        margin-top: 1rem !important;
    }

    /* Reduce button margin */
    main#primary.site-main div.mt-6 {
        margin-top: 1.5rem !important;
    }
}

/* Landscape phones - optimize for limited vertical space */
@media (max-width: 767px) and (orientation: landscape) {

    /* Reduce vertical padding in landscape mode */
    main#primary.site-main div.mx-auto.max-w-2xl {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    /* Use viewport height for image to fit screen */
    main#primary.site-main .relative>div.h-96 {
        height: 40vh !important;
    }
}