/* =============================================================================
   Home Page Specific Styles
   Only styles specific to home-page template elements
   ============================================================================= */



/* =============================================================================
   Homepage Header Tiles Section
   Animated tiles in the homepage hero
   ============================================================================= */



/* CSS Grid Layout for cleaner structure, though positioning is absolute within relative container */
.page-type-home-page .homepage-header-tiles {
    position: relative;
    display: grid;
    grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
    gap: 40px 0;
    padding-top: 20px;
}

/* Base Tile Wrapper Styling */
.page-type-home-page .tile-wrapper {
    --left: 125px;
    position: absolute;
    /* Animation delay is now set inline via PHP style attribute */
}

/* Dynamic Positioning using data attributes */
.page-type-home-page .tile-wrapper[data-tile-index="0"] {
    top: 10%;
}

.page-type-home-page .tile-wrapper[data-tile-index="1"] {
    top: 22%;
}

.page-type-home-page .tile-wrapper[data-tile-index="2"] {
    top: 34%;
}

.page-type-home-page .tile-wrapper[data-tile-index="3"] {
    top: 46%;
}

.page-type-home-page .tile-wrapper[data-tile-index="4"] {
    top: 58%;
}

.page-type-home-page .tile-wrapper[data-tile-index="5"] {
    top: 70%;
}

.page-type-home-page .card,
.page-type-home-page .shadow {
    --width: 240px;
    --height: 240px;
}

.page-type-home-page .card-details {
    --logo-bottom: -80%;
}

.page-type-home-page .card-details img {
    height: auto;
    max-height: 50px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
}

/* Animation now uses the inline variable set by PHP */
.page-type-home-page .tile-wrapper .card {
    animation: float 7s ease-in-out infinite;
    animation-delay: var(--anim-delay, 0s);
}

#bottom-tile-text {
    --bottom-tile-padding: 15px 40px;
}

/* =============================================================================
   Homepage Header - 1250px to 1440px Range (Larger tiles, slight adjustments)
   ============================================================================= */

@media (min-width: 1250px) and (max-width: 1440px) {

    /* Ensure tiles can overflow their container */
    .page-type-home-page .homepage-header-tiles {
        overflow: visible;
    }

    /* Slightly smaller tiles */
    .page-type-home-page .card,
    .page-type-home-page .shadow {
        --width: 230px;
        --height: 230px;
    }

    /* Moderate left adjustment */
    .page-type-home-page .tile-wrapper {
        --left: 80px;
    }

    .page-type-home-page .card-details img {
        max-height: 40px;
        max-width: 160px;
    }
}

/* =============================================================================
   Homepage Header - 1080px to 1249px Range (Smaller tiles, tighter layout)
   ============================================================================= */

@media (min-width: 1081px) and (max-width: 1249px) {

    /* Ensure tiles can overflow their container */
    .page-type-home-page .homepage-header-tiles {
        overflow: visible;
    }

    /* Reduce tile size more aggressively - UPDATED: Increased slightly per user feedback */
    .page-type-home-page .card,
    .page-type-home-page .shadow {
        --width: 220px;
        --height: 220px;
    }

    /* Move tiles further left - ADJUSTED to 100px to center better */
    .page-type-home-page .tile-wrapper {
        --left: 100px;
    }

    /* Condense vertical spacing */
    .page-type-home-page .tile-wrapper[data-tile-index="0"] {
        top: 5%;
    }

    .page-type-home-page .tile-wrapper[data-tile-index="1"] {
        top: 17%;
    }

    .page-type-home-page .tile-wrapper[data-tile-index="2"] {
        top: 29%;
    }

    .page-type-home-page .tile-wrapper[data-tile-index="3"] {
        top: 41%;
    }

    .page-type-home-page .tile-wrapper[data-tile-index="4"] {
        top: 53%;
    }

    .page-type-home-page .tile-wrapper[data-tile-index="5"] {
        top: 65%;
    }

    .page-type-home-page .card-details img {
        max-height: 35px;
        max-width: 130px;
    }
}

/* =============================================================================
   Homepage Header Mobile - Stack tiles below content
   ============================================================================= */



@media (max-width: 1080px) {

    /* Hide CTA button on mobile */
    .page-type-home-page .homepage-header-cta {
        display: none;
    }

    /* Stack tiles section below content on mobile */
    .page-type-home-page .homepage-header-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .page-type-home-page .homepage-header-tiles {
        display: block;
        position: relative;
        flex: none;
        width: 100%;
        min-height: 450px;
        margin-top: 15px;
    }

    /* Center tile positioning for mobile - calc centers the 250px tile */
    .page-type-home-page .tile-wrapper {
        --left: calc(50% - 125px);
    }

    .page-type-home-page .tile-wrapper[data-tile-index="0"] {
        --top: -30px;
    }

    .page-type-home-page .tile-wrapper[data-tile-index="1"] {
        --top: 10px;
    }

    .page-type-home-page .tile-wrapper[data-tile-index="2"] {
        --top: 50px;
    }

    .page-type-home-page .tile-wrapper[data-tile-index="3"] {
        --top: 90px;
    }

    .page-type-home-page .tile-wrapper[data-tile-index="4"] {
        --top: 130px;
    }

    .page-type-home-page .tile-wrapper[data-tile-index="5"] {
        --top: 170px;
    }

    .page-type-home-page .card,
    .page-type-home-page .shadow {
        --width: 250px;
        --height: 250px;
    }
}

/* =============================================================================
   Section Text Colors on Home Page
   Some sections have white text when on blue backgrounds
   ============================================================================= */

/* Homepage header text is white (on blue background) */
.page-type-home-page .homepage-header-section h1,
.page-type-home-page .homepage-header-section p {
    color: #FFFFFF;
}

/* Feature grid on home page has white text (on blue background) */
.page-type-home-page .feature-grid-section .feature-grid-section-header h2 {
    color: #FFFFFF;
}

.page-type-home-page .feature-grid-section .feature-grid-item-header {
    color: #FFFFFF;
}

.page-type-home-page .feature-grid-section .feature-grid-item-subheader,
.page-type-home-page .feature-grid-section .feature-grid-item-body li {
    color: rgba(255, 255, 255, 0.9);
}

.page-type-home-page .feature-grid-section .feature-grid-item-body li:before {
    color: #00E5FF;
}

/* =============================================================================
   Homepage Desktop Height Compression (Fit first 3 sections in 750px)
   ============================================================================= */

@media (min-width: 769px) {
    /* Proportional scale with upward shift */
    .page-type-home-page .homepage-header-tiles {
        transform: scale(0.85) translateY(-40px);
        transform-origin: center right;
        margin-top: -30px;
        margin-bottom: -70px;
    }
    
    .page-type-home-page .homepage-header-content {
        max-width: 850px !important;
    }
    
    .page-type-home-page .homepage-header-heading {
        font-size: var(--font-h1-size);
        line-height: var(--font-h1-height);
    }
    
    .page-type-home-page .homepage-header-subheading {
        font-size: var(--font-lead-size);
        line-height: var(--font-lead-height);
    }
    
    .page-type-home-page .homepage-header-body {
        font-size: var(--font-body-size);
        line-height: 24px;
    }
}

/* =============================================================================
   Homepage Mobile Responsive Overrides
   ============================================================================= */

@media (max-width: 768px) {

    /* Ensure proper padding on mobile */
    .page-type-home-page .section-container {
        width: 100%;
    }

    .page-type-home-page .feature-grid-section .feature-grid-section-header h2 {
        font-size: var(--font-h3-size);
        line-height: var(--font-h3-height);
    }
}

@media (max-width: 480px) {

    /* Helper to remove box-shadow from Header when using Transparent helper next */
    .bg-no-shadow {
        box-shadow: none !important;
        overflow: visible !important;
    }
}

/* =============================================================================
   Three Column on Homepage - White Text for Blue Background Behind
   ============================================================================= */

.page-type-home-page .bg-opt-transparent .three-column-header,
.page-type-home-page .bg-opt-transparent .three-column-item-header {
    color: #FFFFFF;
}

.page-type-home-page .bg-opt-transparent .three-column-item-body {
    color: rgba(255, 255, 255, 0.85);
}

.page-type-home-page .bg-opt-transparent .three-column-divider {
    border-color: rgba(255, 255, 255, 0.3);
}

/* =============================================================================
   Specific Slope Support - Blue Extends Behind Next Section
   
   Z-Index Stack (within #wrapper):
   - Section backgrounds:  auto (normal flow)
   - ::after blue extend:  1
   - Isometric grid:       6
   - Content wrappers:     50
   ============================================================================= */

/* NO z-index here — section must NOT create a stacking context above the grid */
.bg-slope-bottom-right {
    position: relative;
    overflow: visible !important;
}

/* Extend the blue background down behind the next (transparent) section */
.bg-slope-bottom-right::after {
    content: '';
    position: absolute;
    bottom: -300px;
    left: 0;
    width: 100%;
    height: 350px;
    background-color: #006997;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
    z-index: 1;
    /* Above section bg (auto) but BELOW grid (6) */
}

/* Homepage three-column: remove stacking context so grid shows through */
.page-type-home-page .bg-opt-transparent.three-column-section {
    z-index: auto;
}

/* Three-column sits flush under the homepage hero — no top gap */
.page-type-home-page .three-column-wrapper {
    padding-top: 0;
}

.three-column-item-link-wrapper {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.2s ease, background-color 0.2s ease;
    border-radius: 8px;
}

.three-column-item-link-wrapper:hover {
    background-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

.page-type-home-page .three-column-image {
    max-width: 178px;
    width: auto;
    object-fit: contain;
    align-self: flex-start;
    /* Left aligned */
}

.page-type-home-page .three-column-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* No gap between logo and text */
}

/* User Request: Add 20px top/bottom padding to the team variant items (logos) */
.page-type-home-page .three-column--team .three-column-item {
    padding-top: 20px;
    padding-bottom: 20px;
}

.page-type-home-page .three-column-image-wrapper {
    margin-bottom: 0 !important;
    height: auto !important;
    /* Fix for "Major" gap issue caused by fixed 100px height */
    min-height: 0 !important;
}

.page-type-home-page .three-column-item-header {
    margin-top: 10px !important;
    /* Small gap between logo and text */
    font-size: 18px !important;
    line-height: 24px !important;
}

/* Inner wrapper for centering the left-aligned block */
.page-type-home-page .three-column-content-inner {
    display: flex;
    flex-direction: column;
    /* Left align content inside the card */
    text-align: left;
    width: fit-content;
    /* Shrink fit to content so it can be perfectly centered */
    max-width: 100%;
    gap: 0;
    /* No gap between logo and text */
}

/* Ensure background grid is visible through this section (ONLY for Three-Column Section) */
.page-type-home-page .three-column-section.bg-opt-blue {
    position: relative;
    z-index: 2;
    /* Spec: Specialized z-index of 2 or higher */
}