/* =================================================================
   HERO IMAGE RESPONSIVE OVERRIDES
   Goal: Consistent heights within each breakpoint (no carousel jumping)
   Desktop: Full viewport height, menu overlays (transparent)
   Mobile: Fixed heights, menu above (black), show entire image
   Handles iOS/Safari viewport height quirks with dvh units
   ================================================================= */

/* DESKTOP DEFAULTS (> 1366px): Full viewport, overlay menu, full bleed */
.hero-image-wrapper {
    position: relative;
    width: 100%;
}

.landingPageHeroImage {
    width: 100% !important;
    /* Desktop: FULL VIEWPORT HEIGHT for immersive experience */
    height: 100vh !important;
    height: 100dvh !important;
    /* Use cover for FULL BLEED - fills entire viewport, no gaps */
    object-fit: cover !important;
    object-position: center center !important;
    display: block;
}

/* Desktop: Carousel control - flush right, vertically centered with margin */
.carousel-control-next {
    position: absolute !important;
    right: 0 !important; /* Flush with right edge */
    top: 50% !important;
    transform: translateY(-50%) scale(1.122, 1.02) !important; /* Width 10% wider */
    transform-origin: center right !important; /* Anchor to the right edge */
    width: auto !important;
    max-width: 160px !important; /* Increased max width by 10% */
    height: auto !important;
    max-height: 240px !important; /* Increased max height by 20% */
    margin-bottom: 20px !important;
    padding: 0 !important; /* Remove all padding */
    margin-right: 0 !important; /* Ensure no margin */
    border: none !important;
    box-shadow: none !important;
}

/* Target the span inside the button to ensure no padding and larger font size */
.carousel-control-next span {
    padding: 0 !important;
    margin: 0 !important;
    font-size: 2.2rem !important; /* Increased by 10% for better readability */
    line-height: 1.2 !important;
    display: block !important;
}

.carousel-control-next::before,
.carousel-control-next::after {
    padding: 0 !important;
    margin: 0 !important;
    right: 0 !important;
}

/* =================================================================
   MOBILE PORTRAIT: Phones (up to 576px)
   Target: iPhone 13/14/15, Galaxy S series, etc.
   Fixed height for consistency, below header
   ================================================================= */
@media screen and (max-width: 576px) and (orientation: portrait) {
    /* Mobile header - black background, not transparent */
    #main-header {
        background: black !important;
    }
    
    .page-type-landing-page #pre-content {
        margin-top: 0 !important;
    }
    
    .hero-image-wrapper {
        /* Position below the mobile header (typical mobile header ~60-80px) */
        margin-top: 60px;
    }
    
    .landingPageHeroImage {
        /* FIXED HEIGHT: 32vh for small phones - scaled down to show more of image */
        height: 32vh !important;
        height: 32dvh !important; /* iOS Safari fix for dynamic viewport */
        /* Use cover for FULL BLEED - fills width, no side gaps */
        object-fit: cover !important;
        object-position: center center !important;
        width: 100% !important;
    }
    
    .carousel-control-next {
        /* Position moved up an additional 5% */
        top: calc(60px + 11.1vh) !important; /* Moved up 5% from 11.7vh */
        top: calc(60px + 11.1dvh) !important;
        right: 0 !important; /* Flush with right edge */
        transform: translateY(-50%) scale(0.836, 0.8) !important; /* Width reduced 5% */
        max-width: none !important; /* Remove desktop max-width constraint */
        max-height: 24vh !important;
        margin-bottom: 15px !important;
        padding-right: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Increased font size by 10% */
    .carousel-control-next span {
        font-size: 2.2rem !important; /* Increased 10% from 2.0rem */
    }
}

/* =================================================================
   MOBILE LANDSCAPE: Phones in landscape (up to 991px)
   Fixed height for consistency, can overflow viewport
   ================================================================= */
@media screen and (max-width: 991px) and (orientation: landscape) {
    /* Mobile header - black background */
    #main-header {
        background: black !important;
    }
    
    .page-type-landing-page #pre-content {
        margin-top: 0 !important;
    }
    
    .hero-image-wrapper {
        /* Position below the mobile header */
        margin-top: 60px;
        overflow: hidden; /* Contain the image */
        width: 100vw !important;
        width: 100dvw !important;
    }
    
    .landingPageHeroImage {
        /* FIXED HEIGHT: 90vh for landscape - much taller to show more image, allows scrolling */
        height: 90vh !important;
        height: 90dvh !important; /* iOS Safari fix */
        /* Use cover for FULL BLEED - fills entire width, no gaps */
        object-fit: cover !important;
        object-position: center top !important; /* Top aligned since menu is above */
        width: 100vw !important; /* Full viewport width */
        width: 100dvw !important;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
    }
    
    .carousel-control-next {
        /* Position moved up an additional 5% */
        top: calc(60px + 30.4vh) !important; /* Moved up 5% from 32vh */
        top: calc(60px + 30.4dvh) !important;
        right: 0 !important; /* Flush with right edge */
        transform: translateY(-50%) scale(0.57, 0.6) !important; /* Width reduced 5% */
        /* Ensure button fits within landscape image height */
        max-height: 80vh !important;
        max-height: 80dvh !important;
        margin-bottom: 15px !important;
        padding-right: 0 !important;
        margin-right: 0 !important;
    }
}

/* =================================================================
   SMALL TABLETS & LARGE PHONES: Portrait (577px to 768px)
   Target: iPhone Pro Max, small tablets
   Fixed height for consistency
   ================================================================= */
@media screen and (min-width: 577px) and (max-width: 768px) and (orientation: portrait) {
    #main-header {
        background: black !important;
    }
    
    .page-type-landing-page #pre-content {
        margin-top: 0 !important;
    }
    
    .hero-image-wrapper {
        margin-top: 60px;
    }
    
    .landingPageHeroImage {
        /* FIXED HEIGHT: 38vh for larger phones - scaled down to show more of image */
        height: 38vh !important;
        height: 38dvh !important;
        /* Use cover to fill container completely, no gaps */
        object-fit: cover !important;
        object-position: center center !important;
        width: 100% !important;
    }
    
    .carousel-control-next {
        /* Position moved up an additional 5% */
        top: calc(60px + 13.68vh) !important; /* Moved up 5% from 14.4vh */
        top: calc(60px + 13.68dvh) !important;
        right: 0 !important; /* Flush with right edge */
        transform: translateY(-50%) scale(0.9215, 0.88) !important; /* Width reduced 5% */
        max-width: none !important; /* Remove desktop max-width constraint */
        max-height: 32vh !important;
        margin-bottom: 15px !important;
        padding-right: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Increased font size by 10% */
    .carousel-control-next span {
        font-size: 2.3rem !important; /* Increased 10% from 2.1rem */
    }
}

/* =================================================================
   TABLETS: Portrait (769px to 990px)
   Target: iPad, iPad Air, Android tablets
   Fixed height for consistency
   ================================================================= */
@media screen and (min-width: 769px) and (max-width: 990px) and (orientation: portrait) {
    #main-header {
        background: black !important;
    }
    
    .page-type-landing-page #pre-content {
        margin-top: 0 !important;
    }
    
    .hero-image-wrapper {
        margin-top: 60px;
    }
    
    .landingPageHeroImage {
        /* FIXED HEIGHT: 50vh for tablets portrait - consistent across all carousel slides */
        height: 50vh !important;
        height: 50dvh !important;
        /* Use cover to fill container completely, no gaps */
        object-fit: cover !important;
        object-position: center center !important;
        width: 100% !important;
    }
    
    .carousel-control-next {
        /* Position moved up 10% for better visibility */
        top: calc(60px + 19.8vh) !important; /* Moved up 10% from 22vh */
        top: calc(60px + 19.8dvh) !important;
        right: 0 !important; /* Flush with right edge */
        transform: translateY(-50%) scale(0.66, 0.6) !important; /* Width 10% wider for tablets */
        /* Ensure button fits within image height */
        max-height: 40vh !important;
        max-height: 40dvh !important;
        margin-bottom: 15px !important;
        padding-right: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Increased font size by 20% for tablets */
    .carousel-control-next span {
        font-size: 2.4rem !important; /* Increased 20% from 2.0rem */
    }
}

/* =================================================================
   TABLETS: Landscape (577px to 990px, landscape orientation)
   Fixed height for consistency, can overflow viewport
   ================================================================= */
@media screen and (min-width: 577px) and (max-width: 990px) and (orientation: landscape) {
    #main-header {
        background: black !important;
    }
    
    .page-type-landing-page #pre-content {
        margin-top: 0 !important;
    }
    
    .hero-image-wrapper {
        margin-top: 60px;
        overflow: hidden;
        width: 100vw !important;
        width: 100dvw !important;
    }
    
    .landingPageHeroImage {
        /* FIXED HEIGHT: 100vh for tablet landscape - very tall to show full image, allows scrolling */
        height: 100vh !important;
        height: 100dvh !important;
        /* Use cover for FULL BLEED - fills entire width, no gaps */
        object-fit: cover !important;
        object-position: center top !important;
        width: 100vw !important;
        width: 100dvw !important;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
    }
    
    .carousel-control-next {
        /* Position moved up 20% for full visibility in tablet landscape */
        top: calc(60px + 36vh) !important; /* Moved up from 45vh */
        top: calc(60px + 36dvh) !important;
        right: 0 !important; /* Flush with right edge */
        transform: translateY(-50%) scale(0.65) !important;
        /* Ensure button fits within image height */
        max-height: 90vh !important;
        max-height: 90dvh !important;
        margin-bottom: 15px !important;
        padding-right: 0 !important;
        margin-right: 0 !important;
    }
}

/* =================================================================
   TABLET PORTRAIT: iPad Pro & Similar (768px to 1024px)
   Fixed height for consistency
   ================================================================= */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    #main-header {
        background: black !important;
    }
    
    .page-type-landing-page #pre-content {
        margin-top: 0 !important;
    }
    
    .hero-image-wrapper {
        margin-top: 60px;
    }
    
    .landingPageHeroImage {
        /* FIXED HEIGHT: 50vh for iPad Pro portrait - consistent across all carousel slides */
        height: 50vh !important;
        height: 50dvh !important;
        /* Use cover to fill container completely, no gaps */
        object-fit: cover !important;
        object-position: center center !important;
        width: 100% !important;
    }
    
    .carousel-control-next {
        /* Position moved up 10% for better visibility */
        top: calc(60px + 19.8vh) !important; /* Moved up 10% from 22vh */
        top: calc(60px + 19.8dvh) !important;
        right: 0 !important; /* Flush with right edge */
        transform: translateY(-50%) scale(0.66, 0.6) !important; /* Width 10% wider for tablets */
        /* Ensure button fits within image height */
        max-height: 40vh !important;
        max-height: 40dvh !important;
        margin-bottom: 15px !important;
        padding-right: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Increased font size by 20% for tablets */
    .carousel-control-next span {
        font-size: 2.4rem !important; /* Increased 20% from 2.0rem */
    }
}

/* =================================================================
   LARGE TABLETS & SMALL LAPTOPS: Portrait (1024px to 1366px)
   Reasonable height for portrait orientation
   ================================================================= */
@media screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: portrait) {
    #main-header {
        background: black !important;
    }
    
    .page-type-landing-page #pre-content {
        margin-top: 0 !important;
    }
    
    .hero-image-wrapper {
        margin-top: 60px;
    }
    
    .landingPageHeroImage {
        /* FIXED HEIGHT: 55vh for large tablets portrait - reasonable size */
        height: 55vh !important;
        height: 55dvh !important;
        /* Use cover to fill container completely */
        object-fit: cover !important;
        object-position: center center !important;
        width: 100% !important;
    }
    
    .carousel-control-next {
        /* Position moved up 10% for better visibility */
        top: calc(60px + 22.5vh) !important; /* Moved up 10% from 25vh */
        top: calc(60px + 22.5dvh) !important;
        right: 0 !important; /* Flush with right edge */
        transform: translateY(-50%) scale(0.715, 0.65) !important; /* Width 10% wider for tablets */
        /* Ensure button fits within image height */
        max-height: 45vh !important;
        max-height: 45dvh !important;
        margin-bottom: 15px !important;
        padding-right: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Increased font size by 20% for tablets */
    .carousel-control-next span {
        font-size: 2.4rem !important; /* Increased 20% from 2.0rem */
    }
}

/* =================================================================
   LARGE TABLETS & SMALL LAPTOPS: Landscape (1024px to 1366px)
   Taller for landscape, allows scrolling
   ================================================================= */
@media screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
    #main-header {
        background: black !important;
    }
    
    .page-type-landing-page #pre-content {
        margin-top: 0 !important;
    }
    
    .hero-image-wrapper {
        margin-top: 60px;
        overflow: hidden;
        width: 100vw !important;
        width: 100dvw !important;
    }
    
    .landingPageHeroImage {
        /* FIXED HEIGHT: 100vh for landscape - very tall to show full image, allows scrolling */
        height: 100vh !important;
        height: 100dvh !important;
        /* Use cover for FULL BLEED - fills entire width, no gaps */
        object-fit: cover !important;
        object-position: center top !important;
        width: 100vw !important;
        width: 100dvw !important;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
    }
    
    .carousel-control-next {
        /* Position moved up 20% for full visibility in large tablet landscape */
        top: calc(60px + 36vh) !important; /* Moved up from 45vh */
        top: calc(60px + 36dvh) !important;
        right: 0 !important; /* Flush with right edge */
        transform: translateY(-50%) scale(0.65) !important;
        /* Ensure button fits within image height */
        max-height: 90vh !important;
        max-height: 90dvh !important;
        margin-bottom: 15px !important;
        padding-right: 0 !important;
        margin-right: 0 !important;
    }
}