/**
 * A.M TRADERS - Hero Section Styles
 * Strict 3-Color Palette: White (#FFFFFF) | Royal Blue (#3858e9) | Deep Charcoal (#151516)
 * Typography: Headings -> Megante | SubHeadings & Body -> Raleway
 * Section Specs: 100vh Height | Full Width | Max 50% Left Overlay
 * Button Specs: 100% Stable | Slow Diagonal L->R Sweep | Arrow -> to ↗ on hover
 */

/* Import Google Font: Raleway (Weights 300 to 800) */
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');

/* Custom Headings Font: Megante */
@font-face {
    font-family: 'Megante';
    src: url('../fonts/megante/Megante.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --am-blue: #3858e9;
    --am-blue-dark: #2643cb;
    --am-dark: #151516;
    --am-white: #ffffff;
    --am-font-heading: 'Megante', serif;
    --am-font-body: 'Raleway', sans-serif;
}

/* 
 * Elementor Flexbox & Container Full-Bleed Resets
 */
.elementor-widget-am_hero_widget,
.elementor-widget-am_hero_widget .elementor-widget-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.e-con:has(.am-hero-wrapper),
.e-con-inner:has(.am-hero-wrapper),
.elementor-element:has(> .elementor-widget-container > .am-hero-wrapper) {
    --padding-top: 0px !important;
    --padding-bottom: 0px !important;
    --padding-left: 0px !important;
    --padding-right: 0px !important;
    padding: 0 !important;
    gap: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Hero Section Wrapper: Exact 100vh Full Width */
.am-hero-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: var(--am-dark);
    font-family: var(--am-font-body);
    color: var(--am-white);
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

/* Background Video Layer */
.am-hero-video-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.am-hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
    pointer-events: none;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    will-change: transform;
}

/* Clean Fallback Background */
.am-hero-video-fallback {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 75% 50%, #202636 0%, #151516 70%);
    background-size: cover;
    background-position: center;
}

/* 
 * Smooth Curved Fade Overlay (STRICTLY CAPPED AT HALF / 50% MAX)
 * Left side: high opacity dark for pristine text readability
 * Outward curve finishes at 48%-50%
 * The remaining 50%+ on the right is 100% completely clear video
 */
.am-hero-curved-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    background: 
        radial-gradient(
            ellipse var(--am-curve-spread, 50%) 135% at 0% 50%,
            var(--am-overlay-color, #151516) 0%,
            rgba(21, 21, 22, calc(var(--am-overlay-opacity, 0.94) * 0.92)) calc(var(--am-curve-spread, 50%) * 0.45),
            rgba(21, 21, 22, calc(var(--am-overlay-opacity, 0.94) * 0.55)) calc(var(--am-curve-spread, 50%) * 0.75),
            rgba(21, 21, 22, 0) var(--am-curve-spread, 50%)
        ),
        linear-gradient(
            to right,
            var(--am-overlay-color, #151516) 0%,
            rgba(21, 21, 22, calc(var(--am-overlay-opacity, 0.94) * 0.88)) calc(var(--am-curve-spread, 50%) * 0.38),
            rgba(21, 21, 22, calc(var(--am-overlay-opacity, 0.94) * 0.35)) calc(var(--am-curve-spread, 50%) * 0.72),
            rgba(21, 21, 22, 0) calc(var(--am-curve-spread, 50%) * 0.96)
        );
}

/* Content Layer: Full Width & 100vh Centered */
.am-hero-content-layer {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 3;
    display: flex;
    align-items: center;
}

.am-hero-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 4.5vw;
    display: grid;
    grid-template-columns: 48% 52%;
    gap: 20px;
    align-items: center;
    box-sizing: border-box;
}

/* Left Content Box: Sitting strictly inside the 48% left half */
.am-hero-left-box {
    max-width: 660px;
    width: 100%;
}

/* Main Title Heading: Megante Custom Font */
.am-hero-title {
    font-family: var(--am-font-heading);
    font-size: clamp(36px, 4.4vw, 58px);
    font-weight: 400;
    line-height: 1.14;
    letter-spacing: 0.01em;
    color: var(--am-white);
    margin: 0 0 22px 0;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.am-hero-title span {
    color: var(--am-blue);
}

/* Subtitle Description: Raleway Font */
.am-hero-desc {
    font-family: var(--am-font-body);
    font-size: clamp(16px, 1.2vw, 18px);
    line-height: 1.65;
    color: #cbd5e1;
    margin: 0 0 38px 0;
    max-width: 580px;
    font-weight: 400;
}

/* Action Buttons Layout (Buttons styled via button-component.css) */
.am-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin-bottom: 42px;
}

/* Micro-Stats Strip (Raleway Font) */
.am-hero-mini-stats {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    padding: 12px 24px;
    background: rgba(21, 21, 22, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    backdrop-filter: blur(12px);
    font-family: var(--am-font-body);
}

.am-stat-pill {
    display: flex;
    flex-direction: column;
}

.am-stat-val {
    font-size: 14px;
    font-weight: 800;
    color: var(--am-white);
    line-height: 1.2;
}

.am-stat-lbl {
    font-size: 11px;
    font-weight: 500;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.am-stat-divider {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.15);
}

/* Right side spacer (keeps video completely visible) */
.am-hero-right-box {
    min-height: 480px;
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
    .am-hero-wrapper {
        height: auto;
        min-height: 100vh;
    }

    .am-hero-container {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 60px 24px;
    }
    
    .am-hero-curved-overlay {
        background: linear-gradient(
            to bottom,
            rgba(21, 21, 22, 0.96) 0%,
            rgba(21, 21, 22, 0.9) 65%,
            rgba(21, 21, 22, 0.35) 100%
        );
    }

    .am-hero-left-box {
        max-width: 100%;
    }

    .am-hero-right-box {
        display: none;
    }
}

@media (max-width: 640px) {
    .am-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .am-hero-btn {
        width: 100%;
        justify-content: space-between;
    }

    .am-hero-mini-stats {
        flex-wrap: wrap;
        border-radius: 16px;
        gap: 14px;
    }

    .am-stat-divider {
        display: none;
    }
}