/* =========================================
   FULL-WIDTH HERO IMAGE STYLES
   ========================================= */

/* Full-width variant */
.gt-hero-fullwidth {
    position: relative;
    min-height: 70vh;
    /* 🎯 CHANGE HEIGHT HERE: 70vh, 80vh, 90vh, 100vh */
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Full-width background image container */
.hero-fullwidth-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.gt-hero-fullwidth .hero-premium-image-frame {
    width: 100%;
    height: 100%;
    padding: 0;
    background: transparent;
    /* No golden border frame */
    /* REMOVED clip-path for full rectangular image */
    box-shadow: none;
}

.gt-hero-fullwidth .hero-premium-image-inner {
    width: 100%;
    height: 100%;
    /* REMOVED clip-path for full rectangular image */
    background: #000;
    position: relative;
}

.gt-hero-fullwidth .hero-premium-image-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: brightness(0.9);
    /* Slight darken */
    transition: filter 0.6s ease;
}

.gt-hero-fullwidth:hover .hero-premium-image-inner img {
    filter: brightness(1);
}

/* Blur overlay for glassmorphism effect - SEAMLESS BLEND */
.gt-hero-fullwidth::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg,
            rgba(0, 0, 0, 0.5) 0%,
            rgba(0, 0, 0, 0.3) 40%,
            rgba(0, 0, 0, 0.1) 70%,
            transparent 100%);
    backdrop-filter: blur(0px);
    /* Base - no blur on whole section */
    z-index: 2;
    pointer-events: none;
}

/* Blur effect on left side for content area - SMOOTH TRANSITION */
.gt-hero-fullwidth::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.05) 0%,
            rgba(255, 255, 255, 0.02) 60%,
            transparent 100%);
    backdrop-filter: blur(8px) saturate(1.2);
    -webkit-backdrop-filter: blur(8px) saturate(1.2);
    z-index: 3;
    pointer-events: none;
    /* Smooth edge blend */
    mask-image: linear-gradient(90deg,
            black 0%,
            black 40%,
            transparent 100%);
    -webkit-mask-image: linear-gradient(90deg,
            black 0%,
            black 40%,
            transparent 100%);
}

/* Content overlay positioning */
/* 🎯 ADJUST VERTICAL SPACING HERE - THIS CONTROLS THE ACTUAL HEIGHT! */
.hero-content-overlay {
    position: relative;
    z-index: 10;
    padding-top: 40px;
    /* 🎯 Top spacing - REDUCED for smaller hero */
    padding-bottom: 60px;
    /* 🎯 Bottom spacing - REDUCED for smaller hero */
}

/* Adjust content for full-width layout */
.gt-hero-fullwidth .hero-premium-content {
    padding-right: 60px;
}

/* Enhanced text shadow for better readability */
.gt-hero-fullwidth .hero-premium-title {
    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.8),
        0 4px 20px rgba(0, 0, 0, 0.6);
}

.gt-hero-fullwidth .hero-premium-description {
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.7);
}

/* =========================================
   RESPONSIVE ADJUSTMENTS FOR FULL-WIDTH
   ========================================= */

@media (max-width: 1199px) {
    .gt-hero-fullwidth::after {
        width: 70%;
    }

    .hero-content-overlay {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .gt-hero-fullwidth .hero-premium-content {
        padding-right: 40px;
    }
}

@media (max-width: 991px) {

    /* Match phone-style overlay: uniform black, no blur/gradient */
    .gt-hero-fullwidth::before {
        display: none;
    }

    .gt-hero-fullwidth::after {
        display: block;
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        mask-image: none;
        -webkit-mask-image: none;
        z-index: 2;
    }

    .hero-content-overlay {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .gt-hero-fullwidth .hero-premium-content {
        padding-right: 20px;
        text-align: center;
    }

    .gt-hero-fullwidth .hero-premium-welcome::before {
        display: none;
    }

    .gt-hero-fullwidth .hero-premium-description {
        max-width: 100%;
    }

    .gt-hero-fullwidth .hero-premium-buttons {
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .gt-hero-fullwidth .hero-premium-image-inner img {
        filter: brightness(1);
        /* Full brightness as requested */
    }

    /* Reset specific overlays for mobile to show full image */
    /* NUCLEAR FIX: Force the 'half' overlay to become a FULL screen overlay */
    .gt-hero-fullwidth::after,
    .gt-hero-premium::after,
    .gt-hero-fullwidth.gt-hero-premium::after {
        display: block !important;
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        right: 0 !important;
        bottom: 0 !important;
        opacity: 1 !important;
        background: rgba(0, 0, 0, 0.6) !important;
        /* Uniform black overlay */
        backdrop-filter: none !important;
        mask-image: none !important;
        -webkit-mask-image: none !important;
        z-index: 2 !important;
    }

    /* Hide the other overlay to prevent double-darkening */
    .gt-hero-fullwidth::before {
        display: none !important;
    }

    /* Show more of the image by reducing height */
    .gt-hero-fullwidth {
        min-height: 55vh;
        height: auto;
    }

    .hero-content-overlay {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .gt-hero-fullwidth .hero-premium-content {
        padding-right: 0;
    }

    /* Force buttons in one row */
    .gt-hero-fullwidth .hero-premium-buttons {
        flex-direction: row !important;
        gap: 10px !important;
        justify-content: center;
        flex-wrap: nowrap !important;
        width: 100%;
        padding: 0 10px;
    }

    .gt-hero-fullwidth .hero-premium-btn {
        width: auto !important;
        padding: 12px 10px !important;
        font-size: 11px !important;
        min-width: unset !important;
        flex: 1;
        white-space: nowrap;
        text-align: center;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 575px) {
    .hero-content-overlay {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .gt-hero-fullwidth .hero-premium-btn {
        font-size: 10px !important;
        padding: 10px 5px !important;
    }
}

/* Ensure proper stacking */
.gt-hero-fullwidth .container {
    position: relative;
    z-index: 10;
}

/* =========================================
   FORCE REMOVE ALL CLIP-PATH TRIANGLES
   ========================================= */

/* Override hero-premium.css clip-path styles */
.gt-hero-fullwidth .hero-premium-image-frame {
    clip-path: none !important;
    background: transparent !important;
    padding: 0 !important;
}

.gt-hero-fullwidth .hero-premium-image-inner {
    clip-path: none !important;
}

/* Remove any transform effects */
.gt-hero-fullwidth .hero-premium-image-container {
    transform: none !important;
}

.gt-hero-fullwidth .hero-premium-image-container:hover {
    transform: none !important;
}

/* Ensure full rectangular image on all screens */
@media (max-width: 767px) {

    .gt-hero-fullwidth .hero-premium-image-frame,
    .gt-hero-fullwidth .hero-premium-image-inner {
        clip-path: none !important;
    }
}

/* =========================================
   CRITICAL: REMOVE GT-HERO-PREMIUM PADDING
   ========================================= */

/* This overrides the padding from hero-premium.css 
   which prevents min-height from working properly */
.gt-hero-fullwidth.gt-hero-premium {
    padding: 0 !important;
    /* Now min-height will actually control the hero size */
}