/* ==========================================================================
   Homepage Dedicated Stylesheet
   Contains hero slider, curve overlap, and logo ticker styling for the home page.
   ========================================================================== */

/* 1. Slide pre-heading styling */
.front-page-layout-wrapper .section-first .section-header .slide__pre-heading {
    font-family: "neue-haas-unica", "Helvetica Neue", Helvetica, sans-serif;
    font-size: 24px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #323232;
    margin-bottom: 12px;
    display: block;
    line-height: normal;
}

/* 2. Fluid heading alignment (perfectly aligned with logo at all scales above 580px) */
.front-page-layout-wrapper .view-slideshow .slide__content .section-header {
    position: absolute !important;
    top: 0px !important;
    margin-top: 80px !important; /* Shifted up slightly for more vertical clearance */
    left: 0 !important;
    margin-left: max(44px, calc((100% - 1200px)/2)) !important;
    width: clamp(550px, 60%, 800px) !important; /* Prevent 3-line wrap clipping on desktop/tablet */
}

/* 3. Fluid heading typography */
.front-page-layout-wrapper .section-first .section-header h1 {
    max-width: 800px !important; /* Ensure the h1 has plenty of space */
    font-size: clamp(22px, 3vw + 10px, 43px) !important; /* Fluid heading font-size scales gradually */
    line-height: 1.2 !important;
}

/* 4. Fluid container height (made slightly taller to prevent button/dot collisions) */
.front-page-layout-wrapper .view-slideshow .slide__content {
    height: clamp(480px, 8vw + 420px, 540px) !important; 
}

/* 5. Fluid overlap margin scales gradually */
.lp-advance-your-climate-goals-total-climate-accountingtm article.node {
    margin-top: clamp(-190px, -12vw - 50px, -145px) !important; 
}

/* 6. Slick dot slider controls (bottom-relative and perfectly aligned horizontally) */
.front-page-layout-wrapper .view-slideshow .slick-dots {
    z-index: 99999 !important;
    position: absolute !important;
    top: auto !important;
    bottom: clamp(155px, 12vw + 60px, 200px) !important; /* Always sits exactly 10px above the curve */
    transform: none !important;
    left: 0 !important;
    margin-left: max(44px, calc((100% - 1200px)/2)) !important;
    transition: top 0.3s ease-in-out !important; /* Smooth glide when slide changes */
}

/* 7. As Featured In logo carousel spacing and scaling (robust selectors for pre/post-initialization) */
.view-media-logos .slick-slide,
.view-media-logos .slick__slide,
.view-media-logos .slide {
    padding: 0 24px !important;
    box-sizing: border-box !important;
}

.view-media-logos .slide__description a {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}

.view-media-logos .slick-slide img,
.view-media-logos .slick__slide img,
.view-media-logos .slide img {
    max-width: 100% !important;
    max-height: 60px !important; /* Clean proportions on desktop */
    height: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
}

@media only screen and (max-width: 1195px) {
    .front-page-layout-wrapper .section-first .section-header h1 {
        max-width: 100% !important; /* Full width on tablet/mobile screens */
    }
}

@media only screen and (max-width: 885px) {
    /* Tablet margins and top spacing */
    .front-page-layout-wrapper .view-slideshow .slide__content .section-header {
        left: 0 !important;
        margin-left: 44px !important;
        width: calc(100% - 88px) !important;
        margin-top: 55px !important; /* Move content up on tablets */
    }
    
    .front-page-layout-wrapper .section-first .section-header .slide__pre-heading {
        font-size: 18px; /* Responsive size for mobile screens */
        margin-bottom: 8px;
    }
}

@media only screen and (max-width: 580px) {
    /* Mobile margins and top spacing */
    .front-page-layout-wrapper .view-slideshow .slide__content .section-header {
        left: 0 !important;
        margin-left: 30px !important; /* Matches mobile site container margin exactly */
        margin-right: 30px !important;
        width: calc(100% - 60px) !important;
        margin-top: 45px !important; /* Move content up further on mobile */
    }
    
    .front-page-layout-wrapper .section-first .section-header .slide__pre-heading {
        font-size: 14px !important;
        margin-bottom: 6px !important;
    }
    
    .front-page-layout-wrapper .view-slideshow .slick-dots {
        left: 0 !important;
        margin-left: 30px !important; /* Matches mobile site container margin exactly */
        margin-right: 30px !important;
    }
    
    /* Logo ticker mobile proportions - optimized for 2 slides showing on phone screens */
    .view-media-logos .slick-slide,
    .view-media-logos .slick__slide,
    .view-media-logos .slide {
        padding: 0 12px !important; /* Spaced nicely for 2 logos */
    }
    
    .view-media-logos .slick-slide img,
    .view-media-logos .slick__slide img,
    .view-media-logos .slide img {
        max-height: 55px !important; /* Clean proportions on mobile */
    }
}