/* =====================================================
   Hero Section
   ===================================================== */
.hero-section {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    min-height: 100vh; /* Increased height to show bottom of cards and dots */
    height: 100vh; /* Increased height to show bottom of cards and dots */
    overflow-x: hidden; /* Prevent horizontal scrolling */
    overflow-y: hidden; /* Clip vertical overflow only - prevent internal scrolling */
    display: block; /* Changed from flex to allow absolute positioning of slider */
    background: transparent;
    z-index: 1; /* Ensure cards appear above any overlays */
}


/* Hero Container: max-width 1440px, centered, responsive */
.hero-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
    height: 100%;
    box-sizing: border-box;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal scrolling */
    overflow-y: hidden; /* Clip vertical overflow only - prevent internal scrolling */
}

/* Vertically center hero heading on tall screens (viewport height > 1000px) */
/* GSAP animations remain unaffected as they animate .hero-heading with y transforms */
@media (min-height: 1000px) {
    .hero-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}

/* Ensure hero-desktop respects container constraints */
.hero-desktop {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-x: hidden; /* Prevent horizontal scrolling */
    overflow-y: hidden; /* Clip vertical overflow only - prevent internal scrolling */
}

/* Heading section */
.hero-heading {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px; /* Match Figma design: 24px gap between content and button */
    max-width: 1132px;
    margin: 0 auto;
    text-align: center;
}

/* Initial padding-top to prevent flash of content at top before JS sets it */
/* Only apply on screens wider than 1400px */
@media (min-width: 1401px) {
    .hero-heading {
        padding-top: 169px; /* Default: header height (105px) + 64px */
    }
}

.hero-heading-content {
    display: flex;
    flex-direction: column;
    gap: 24px; /* Match Figma design: 24px gap between heading and subtitle */
    align-items: center;
}

.hero-title {
    font-family: var(--font-family-inter-tight, "Inter Tight", sans-serif);
    font-weight: 500;
    font-size: 64px;
    line-height: 72px;
    letter-spacing: 0.35px;
    margin: 0;
    max-width: 746px;
    background: linear-gradient(-83.7deg, var(--Colors-Violet-900, #4B4578) 3.384%, var(--fg-primary-rest, #EBEBEE) 70.633%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle {
    font-family: var(--font-family-inter-tight, "Inter Tight", sans-serif);
    font-weight: 400;
    font-size: 20px;
    line-height: 20px;
    letter-spacing: 0.2px;
    color: var(--fg-primary-rest, #D4D4DE);
    margin: 0;
}

/* Slider offset wrapper - applies base 70% downward offset */
.hero-slider-offset-wrapper {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    overflow: visible; /* Ensure pagination dots are visible */
    transform: translateY(57%); /* Moved down by 20% from previous position */
    margin: 0;
    padding-top: 0; /* Removed padding so first word of first card title is visible */
    z-index: 2;
    overflow-x: visible; /* Allow horizontal overflow - don't clip horizontally */
    overflow-y: visible; /* Allow vertical overflow for animations */
}

/* Event cards slider - GSAP animates this element */
.hero-slider {
    position: relative; /* Changed from absolute - wrapper handles positioning */
    width: 100%;
    margin-top: 0; /* Remove all top margin */
    padding-top: 0; /* Remove all top padding */
    /* padding-bottom: 280px; Increased bottom padding to accommodate pagination dots */
    overflow-x: hidden; /* Prevent horizontal scrolling */
    overflow-y: visible; /* Allow vertical overflow for animations */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background: transparent; /* Ensure no black background */
    z-index: 2; /* Ensure cards appear above any overlays */
    /* Hide slider until JS initialization completes */
    opacity: 0;
    visibility: hidden;
    transition: opacity 1000ms ease;
}

/* Show slider after JS initialization completes */
.hero-slider.hero-slider-ready {
    opacity: 1;
    visibility: visible;
}

/* Embla viewport - has overflow hidden, arrows must be outside */
.hero-slider-container .embla__viewport {
    overflow: hidden;
}

/* Embla container */
.hero-slider-container .embla__container {
    display: flex;
}

.hero-slider-container {
    position: relative;
    min-height: 800px; /* Increased minimum height to accommodate cards with negative top values and rotations */
    height: auto; /* Allow height to grow if needed */
    margin: 0 auto;
    overflow: visible; /* Ensure cards are not clipped */
    /* Ensure container properly contains all absolutely positioned cards */
    box-sizing: border-box;
    margin-top: 0; /* Remove any top margin */
    padding-top: 0; /* Remove any top padding */
}

/* Hero slider track - flex container for slider mode */
.hero-slider-track {
    display: flex;
    gap: 56px;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    position: relative;
}

/* Hero slider card - when in slider mode (flex positioning) */
.hero-slider-card {
    flex: 0 0 auto;
    position: relative; /* Changed from absolute to relative in slider mode */
    width: 791.908px;
    height: 420px;
}

/* Responsive card widths in slider mode */
@media (min-width: 1024px) and (max-width: 1366px) {
    .hero-slider-card {
        max-width: 791.908px;
        width: clamp(600px, 791.908px, calc(100vw - 200px));
    }
}

@media (min-width: 1367px) {
    .hero-slider-card {
        width: 791.908px;
        max-width: none;
    }
}

@media (max-width: 1200px) {
    .hero-slider-card {
        width: 600px;
        height: 320px;
    }
}

/* Arrow buttons for horizontal slider */
.hero-slider-arrow {
    position: absolute;
    top: 42%; /* Center vertically */
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10000;
    transform: translateY(calc(-50% - 317px)); /* Center then move up by 317px (moved down 20%: 396px * 0.8 = 316.8px ≈ 317px) */
    transition: opacity 0.3s ease, transform 0.2s ease;
    padding: 0;
    border: none;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.hero-slider-arrow:hover {
    opacity: 0.9;
}

.hero-slider-arrow:active {
    opacity: 0.8;
    transform: translateY(calc(-50% - 317px)) scale(0.95); /* Keep same translateY to prevent bounce */
}

.hero-slider-arrow-left {
    left: 0; /* Position outside container, 32px from container edge */
    /* Note: Arrows may be clipped by .hero-container overflow-x: hidden on left side */
}

.hero-slider-arrow-right {
    right: 0; /* Position outside container, 32px from container edge */
    /* Right arrow extends beyond container but won't be clipped (only left side is clipped) */
}

/* Adjust arrow position for smaller screens */
@media (max-width: 1440px) {
    .hero-slider-arrow-left {
        left: 32px; /* Fall back to fixed positioning on smaller screens */
}

.hero-slider-arrow-right {
        right: 32px; /* Fall back to fixed positioning on smaller screens */
    }
}

/* Rounded button background for arrows using PNG */
/* Arrow button styles are now in shared_arrow_button.css */
/* Specific hero-slider-arrow overrides can be added here if needed */

/* Show arrows only during horizontal slider phase */
.hero-section.horizontal-slider-active .hero-slider-arrow {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

/* Ensure arrows are not clipped by parent containers */
.hero-slider,
.hero-slider-container,
/* Removed conflicting overflow rule - using overflow-y: hidden on main .hero-section instead */

/* Ensure ScrollTrigger pin wrappers don't clip arrows */
.pin-spacer {
    overflow: visible !important;
    margin-top: 0 !important; /* Margin-top converted to padding-top via JavaScript */
}

/* Reduce pin spacer height for hero section to prevent extra blank space */
.hero-section + .pin-spacer,
body > div.pin-spacer:has(+ .hero-section),
body > div.pin-spacer:first-child {
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Pagination dots */
.hero-slider-pagination {
    position: absolute;
    top: 320px; /* Moved down by 10% more (374px * 1.1 = 411.4px ≈ 411px) */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 10001; /* Higher z-index to ensure visibility above other elements */
    opacity: 0;
    pointer-events: none;
    visibility: visible; /* Ensure visibility */
    transition: opacity 0.3s ease;
    /* Ensure dots are not clipped */
    overflow: visible;
}

/* Dot is now a button for accessibility + reliable hit area.
   Visual dot remains 8x8 via ::after (button itself is the hit target). */
.hero-slider-dot {
    width: 10px;           /* larger click target */
    height: 10px;          /* larger click target */
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}

.hero-slider-dot::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 100px;
    background: var(--bg-control-tertiary-deactivated, #4b4578);
    transition: background 0.3s ease, transform 0.3s ease;
}

.hero-slider-dot.active::after {
    background: var(--bg-control-tertiary-active, #c4b5ff);
}

.hero-slider-dot:hover::after {
    transform: scale(1.2);
}

.hero-slider-dot:focus-visible {
    outline: 2px solid rgba(196, 181, 255, 0.8);
    outline-offset: 2px;
    border-radius: 999px;
}

/* Show pagination only during horizontal slider phase */
.hero-section.horizontal-slider-active .hero-slider-pagination {
    opacity: 1 !important;
    pointer-events: auto;
    visibility: visible !important;
    display: flex !important;
}

/* Right side decorative element */
.hero-slider-right-element {
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    height: auto;
    overflow: visible; /* Changed from hidden to visible - don't clip */
    pointer-events: none;
    z-index: 5; /* Above cards but below arrows */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    /* Removed clip-path - don't clip on left side */
}

/* Show right element only during horizontal slider phase */
.hero-section.horizontal-slider-active .hero-slider-right-element {
    opacity: 1;
    visibility: visible;
}

/* Blur effect on the right side - create gradient blur mask */
.hero-slider-right-element::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right,
        rgba(23, 22, 32, 0) 0%,
        rgba(23, 22, 32, 0.3) 30%,
        rgba(23, 22, 32, 0.6) 60%,
        rgba(23, 22, 32, 0.9) 100%
    );
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 2;
    pointer-events: none;
}

/* Additional blur overlay for stronger effect */
.hero-slider-right-element::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right,
        transparent 0%,
        rgba(23, 22, 32, 0.4) 50%,
        rgba(23, 22, 32, 0.8) 100%
    );
    z-index: 3;
    pointer-events: none;
}

/* Circular blur overlay on right side - creates veil effect */
.hero-slider-right-ellipse {
    position: absolute;
    right: -130px; /* Positioned relative to hero-slider parent */
    width: 350px; /* Base width matching original SVG */
    height: 485px; /* Height matching original scale */
    min-width: 350px; /* Prevent shrinking */
    min-height: 485px; /* Prevent shrinking */
    max-width: 350px; /* Prevent growing */
    max-height: 420px; /* Never exceed card height (420px) */
    box-sizing: border-box; /* Include padding/border in width/height */
    border-radius: 600px;
    filter: blur(30px);
    overflow: clip; /* Clip overflow - preferred method */
    overflow: hidden; /* Fallback for browsers that don't support clip */
    z-index: 5; /* Above cards but below arrows */
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    /* Prevent contributing to layout */
    contain: layout style paint; /* Isolate from layout */
}

/* Background element inside ellipse - absolutely positioned to not affect layout */
.hero-slider-right-ellipse::before {
    content: '';
    position: absolute;
    inset: 0; /* Fill entire wrapper */
    width: 100%;
    height: 100%;
    background: var(--bg-surface-primary, #0B0A15); /* Background color */
    filter: blur(50px); /* Blur effect matching SVG filter */
    display: block;
    z-index: -1; /* Behind wrapper content */
}

/* Show ellipse only during horizontal slider phase */
.hero-section.horizontal-slider-active .hero-slider-right-ellipse {
    opacity: 1;
    visibility: visible;
}

/* Positioning adjustments for 1200px-1440px breakpoint */
@media (min-width: 1200px) and (max-width: 1439px) {
    /* Arrow: increase top by +11% (42% + 11% = 53%) */
    .hero-section.horizontal-slider-active .hero-slider-arrow {
        top: 50%;
    }

    /* Pagination: move down by +40px (320px + 40px = 360px) */
    .hero-section.horizontal-slider-active .hero-slider-pagination {
        top: 360px;
    }

    .hero-slider-right-ellipse {
        transform: translateY(-152px);
    }
}

@media (min-width: 1440px) {
    .hero-section.horizontal-slider-active .hero-slider-arrow {
        top: 52%;
    }

    .hero-section.horizontal-slider-active .hero-slider-pagination {
        top: 380px;
    }

    .hero-slider-right-ellipse {
        transform: translateY(calc(-50% + 16%)) translateZ(0);
    }
}

/* Move arrows and dots up by 50% at 2560px breakpoint */
@media (min-width: 2560px) {
    /* Arrows: move up by 50% (16.5104vw * 1.5 = 24.7656vw at 2560px) */
    .hero-section.horizontal-slider-active .hero-slider-arrow {
        top:37%
    }

    /* Dots: move up by 50% + 20% more (205.5px * 0.8 = 164.4px) */
    .hero-section.horizontal-slider-active .hero-slider-pagination {
        top: 250px
    }
    .hero-slider-right-ellipse {
        transform: translateY(calc(-50% - 30px)) translateZ(0);
    }
}

/* Inner content wrapper - positioned to show only 1/3 */
.hero-slider-right-element > *:not(.hero-slider-right-ellipse) {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 300%; /* 3x width so only 1/3 is visible */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    z-index: 1;
    filter: blur(2px); /* Slight blur on the content itself */
}

.hero-card {
    position: absolute;
    width: 791.908px;
    height: 420px;
    transform-origin: 0 66.67%; /* Two-thirds down the left edge */
    z-index: 10; /* Ensure cards appear above any overlays */
    /* Initial state: cards start 40% lower to prevent flash/jump on load */
    transition: none !important; /* Prevent transition-based snapping */
    will-change: transform; /* Optimize for transform animations */
}

/* Clone card - non-interactive visual element, hidden initially */
.hero-card-clone {
    pointer-events: none; /* Prevent all interactions */
    cursor: default;
    opacity: 0; /* Hidden initially */
    visibility: hidden;
}

.hero-card-clone a,
.hero-card-clone button {
    pointer-events: none; /* Prevent clicks on links/buttons inside clone */
    cursor: default;
}

/* Responsive card widths - ensure consistent desktop look on tablet/iPad Pro */
/* Prevent excessive spacing on iPad Pro while maintaining desktop design */
@media (min-width: 1024px) and (max-width: 1366px) {
    /* iPad Pro and similar tablet sizes - cap width to prevent excessive spacing */
    .hero-card {
        max-width: 791.908px;
        width: clamp(600px, 791.908px, calc(100vw - 200px)); /* Ensure cards fit with proper spacing */
    }
}

@media (min-width: 1367px) {
    /* Desktop - use full design width */
    .hero-card {
        width: 791.908px;
        max-width: none;
    }
}

/* Ensure hero section and containers allow cards to be visible */
/* Removed conflicting overflow rule - using overflow-y: hidden on main .hero-section instead */

.hero-slider,
.hero-slider-container {
    overflow: visible; /* Keep visible for slider animations */
}

/* Ensure cards are visible */
.hero-card {
    z-index: 10;
}

/* Fix ScrollTrigger pin wrapper - ensure it's transparent and doesn't clip */
.pin-spacer {
    background: transparent !important;
    background-color: transparent !important;
    overflow: visible !important;
}

/* Ensure parent containers allow overflow but keep their backgrounds */
#main,
#wrap,
#content {
    overflow: visible !important;
    /* Don't override background - let it use the original body color */
}

/* Only target ScrollTrigger-created wrappers, not body or main containers */
body > div.pin-spacer {
    background: transparent !important;
    overflow: visible !important;
}

/* Fan-style layout: cards positioned relative to hero-slider-container */
/* All cards at x:0, base y:4.42 relative to container with different rotations */
.hero-card[data-index="0"] {
    left: 50%;
    top: 4.42px; /* y:4.42 relative to container (back card stays at original position) */
    transform: translate3d(-50%, 40%, 0) rotate(-10.3deg); /* Initial: 40% lower, x:0 (centered), -10.3deg rotation */
    z-index: -1; /* Moved to back */
}

.hero-card[data-index="1"] {
    left: 50%;
    top: -25.58px; /* y:4.42 - 30px = -25.58px (middle card moved up 30px) */
    transform: translate3d(-50%, 40%, 0) rotate(0deg); /* Initial: 40% lower, x:0 (centered), 0deg rotation */
    z-index: 0;
}

.hero-card[data-index="2"] {
    left: 50%;
    top: -45.58px; /* y:4.42 - 50px = -45.58px (top card moved up 50px) */
    transform: translate3d(-50%, 40%, 0) rotate(9.54deg); /* Initial: 40% lower, x:0 (centered), 9.54deg rotation */
    z-index: 1; /* Moved to top */
}


.hero-card-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 12.824px 12.824px 12.824px 57.71px;
    border-radius: 25.649px;
    border: 1.042px solid var(--stroke-controls-other-active, rgba(235, 235, 238, 0.15));
    background: #171620;
    backdrop-filter: blur(20.038px);
    -webkit-backdrop-filter: blur(20.038px);
    box-shadow: 0px 4.416px 26.499px 0px rgba(13, 1, 19, 0.8);
    /* Default fallback color if extraction fails */
    --card-dark-rgb: 12, 10, 18;
}

/* Radial gradient overlay using extracted color - only show when arrows are visible */
/* Central light highlight that smoothly blends into card background */
/* Ellipse size: max 1/3 (16.67% radius) of card dimensions, with 60px blur for smooth blending */
.hero-section.horizontal-slider-active .hero-card-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        ellipse 53.625% 42.48% at 50% 45%,
        rgba(var(--card-dark-rgb, 12, 10, 18), 0.48) 0%,
        rgba(var(--card-dark-rgb, 12, 10, 18), 0.36) 40%,
        rgba(var(--card-dark-rgb, 12, 10, 18), 0.24) 60%,
        rgba(var(--card-dark-rgb, 12, 10, 18), 0.12) 80%,
        rgba(var(--card-dark-rgb, 12, 10, 18), 0) 100%
    );
    filter: blur(60px);
    -webkit-filter: blur(60px);
    border-radius: 25.649px;
    pointer-events: none;
    z-index: 1; /* Above background, below content */
}

.hero-card[data-index="0"] .hero-card-inner {
    background: #171620;
    backdrop-filter: blur(20.038px);
    -webkit-backdrop-filter: blur(20.038px);
}

.hero-card[data-index="1"] .hero-card-inner {
    background: #171620;
    backdrop-filter: blur(20.038px);
    -webkit-backdrop-filter: blur(20.038px);
}

.hero-card[data-index="2"] .hero-card-inner {
    background: #171620;
    backdrop-filter: blur(20.038px);
    -webkit-backdrop-filter: blur(20.038px);
}

.hero-card-info {
    display: flex;
    flex-direction: column;
    gap: 32.061px;
    width: 388.74px;
    flex-shrink: 0;
    position: relative;
    z-index: 2; /* Above overlay */
}

.hero-card-top {
    display: flex;
    flex-direction: column;
    gap: 19.237px;
}

.hero-card-tag {
    position: relative;
    height: 22.447px;
    display: inline-flex;
    align-items: center;
    padding: 0;
    /* Width is determined by content */
}

.hero-card-tag-left-cap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    height: 100%;
}

.hero-card-tag-left-cap svg {
    width: auto;
    height: 22.447px;
    display: block;
}

.hero-card-tag-middle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    position: relative;
    padding: 0 16px 0 8px;
    min-width: 0;
}

.hero-card-tag-middle-bg {
    position: absolute;
    top: 0;
    left: -1px;
    right: 0;
    bottom: 0;
    z-index: -1;
    display: flex;
    align-items: stretch;
}

.hero-card-tag-middle-bg svg {
    width: 100%;
    height: 100%;
    display: block;
}

.hero-card-tag-text {
    font-family: var(--font-family-inter-tight, "Inter Tight", sans-serif);
    font-weight: 500;
    font-size: 11.22px;
    line-height: 16.834px;
    letter-spacing: 0.1px;
    color: var(--Colors-Base-Black, #0B0A15);
    white-space: nowrap;
    flex-shrink: 0;
}


.hero-card-tag-right-cap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
    left: -1px;
}

.hero-card-tag-right-cap svg {
    width: auto;
    height: 22.447px;
    display: block;
}

.hero-card-tag-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 2px;
}

/* Consistent sizing for all SVG icons inside hero-card-tag-icon */
.hero-card-tag-icon svg {
    width: 15px;
    height: 15px;
    display: block;
    flex-shrink: 0;
}

/* Desktop Badge Styles (default) */
.hero-card-tag-desktop {
    height: 22.447px;
}

.hero-card-tag-desktop > .hero-card-tag-left-cap svg,
.hero-card-tag-desktop > .hero-card-tag-right-cap > svg {
    height: 22.447px;
}

.hero-card-tag-desktop .hero-card-tag-text {
    font-size: 11.22px;
    line-height: 16.834px;
}

/* Tablet Badge Styles */
.hero-card-tag-tablet {
    height: 22.447px;
}

.hero-card-tag-tablet .hero-card-tag-left-cap svg,
.hero-card-tag-tablet .hero-card-tag-right-cap svg {
    height: 22.447px;
}

.hero-card-tag-tablet .hero-card-tag-text {
    font-size: 11.22px;
    line-height: 16.834px;
}

/* Mobile Badge Styles */
.hero-card-tag-mobile {
    height: 20px;
}

.hero-card-tag-mobile .hero-card-tag-left-cap svg,
.hero-card-tag-mobile .hero-card-tag-right-cap svg {
    height: 20px;
}

.hero-card-tag-mobile .hero-card-tag-text {
    font-size: 10px;
    line-height: 15px;
}

.hero-card-tag-mobile .hero-card-tag-icon {
    width: 12px;
    height: 12px;
}

.hero-card-tag-mobile .hero-card-tag-middle {
    padding: 0 12px 0 6px;
}

.hero-card-title {
    font-family: var(--font-family-inter-tight, "Inter Tight", sans-serif);
    font-weight: 500;
    font-size: 32.061px;
    line-height: 38.473px;
    letter-spacing: 0.4809px;
    color: var(--fg-primary-rest, #EBEBEE);
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.hero-card-title-link {
    color: inherit;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    line-height: inherit;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
}

.hero-card-title-link:hover,
.hero-card-title-link:focus,
.hero-card-title-link:active,
.hero-card-title-link:visited {
    color: inherit;
    text-decoration: none;
    outline: none;
}

.hero-card-title-text {
    display: block;
}

.hero-card-title-date {
    display: block;
}

.hero-card-details {
    display: flex;
    flex-direction: column;
    gap: 12.824px;
}

.hero-card-detail-item {
    display: flex;
    align-items: center;
    gap: 12.824px;
}

.hero-card-detail-item svg {
    width: 17.636px;
    height: 17.636px;
    flex-shrink: 0;
}

.hero-card-detail-item svg path {
    fill: #9F9CB0;
}

.hero-card-detail-item {
    display: flex;
    align-items: center;
    gap: 12.824px;
}

.hero-card-detail-item span {
    font-family: var(--font-family-inter-tight, "Inter Tight", sans-serif);
    font-weight: 500;
    font-size: 14.427px;
    line-height: 14.427px;
    letter-spacing: 0.2805px;
    color: var(--fg-primary-rest, #EBEBEE);
}


.hero-card-poster {
    width: 291.756px;
    height: 394.351px;
    border-radius: 12.824px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    z-index: 1; /* Behind overlay */
}

.hero-card-poster-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
}

.hero-card-poster-link:hover,
.hero-card-poster-link:focus,
.hero-card-poster-link:active,
.hero-card-poster-link:visited {
    text-decoration: none;
    color: inherit;
    outline: none;
}

.hero-card-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Responsive */
@media (max-width: 1440px) {
}

@media (max-width: 1200px) {
    .hero-title {
        font-size: 48px;
        line-height: 56px;
    }

    .hero-card {
        width: 600px;
        height: 320px;
    }

    .hero-card-info {
        width: 300px;
        gap: 24px;
    }

    .hero-card-title {
        font-size: 24px;
        line-height: 30px;
    }

    .hero-card-poster {
        width: 220px;
        height: 300px;
    }
}

/* =====================================================
   Mobile Hero Section - Completely separate from desktop
   ===================================================== */
.hero-section-mobile {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    min-height: auto;
    height: auto;
    overflow-x: visible;
    overflow-y: visible;
    display: block;
    background: transparent;
    z-index: 1;
    padding-bottom: 56px;
}

.hero-section-mobile .hero-bottom-right-image {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-image: url('/resources/images/home_new/hero-bg-mobile.png');
    background-size: contain;
    background-position: bottom right;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.hero-section-mobile .hero-mobile {
    display: block;
    overflow-x: visible;
    overflow-y: visible;
}


.hero-section-mobile .hero-mobile .hero-heading {
    padding-left: 24px;
    padding-right: 24px;
    margin-top: 146px;
}

.hero-section-mobile .hero-mobile .hero-heading-content {
    margin: 0 24px;
}

.hero-section-mobile .hero-mobile .hero-title {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: 0.35px;
}

.hero-section-mobile .hero-mobile .hero-subtitle {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.1px;
}

/* Tablet Hero Heading Styles */
.hero-section-tablet .hero-heading {
    padding-left: 24px;
    padding-right: 24px;
    margin-top: 146px;
}

.hero-section-tablet .hero-heading-content {
    margin: 0 24px;
}

.hero-section-tablet .hero-title {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: 0.35px;
}

.hero-section-tablet .hero-subtitle {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.1px;
}



/* Mobile Slider */
.hero-section-mobile .hero-mobile-slider {
        width: 100%;
        margin-top: 56px;
        user-select: none;
        -webkit-user-select: none;
    }

/* Embla viewport - has overflow hidden for horizontal, but allow vertical expansion */
.hero-section-mobile .hero-mobile-slider.embla {
        overflow-x: hidden; /* Hide horizontal overflow for Embla */
        overflow-y: visible; /* Allow vertical expansion for long content */
        padding-left: 24px;
        padding-right: 24px;
    }

/* Embla container - holds the slides */
.hero-section-mobile .hero-mobile-slider .embla__container {
        display: flex;
        gap: 24px; /* 24px gap between cards */
        align-items: flex-start; /* Align to top to prevent vertical clipping */
    }

/* Fallback for non-Embla (shouldn't happen on mobile, but keep for safety) */
.hero-section-mobile .hero-mobile-slider:not(.embla) {
        display: flex;
        gap: 24px;
        align-items: flex-start;
        padding-left: 24px;
        padding-right: 24px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        touch-action: pan-x pan-y;
        -webkit-overflow-scrolling: touch;
        scroll-padding-left: 24px;
        scroll-padding-right: 24px;
    }

.hero-section-mobile .hero-mobile-slider::-webkit-scrollbar {
    display: none;
}

/* Show exactly 1 card at a time - full width minus padding */
.hero-section-mobile .hero-mobile-card {
        position: relative;
        width: calc(100vw - 48px); /* 24px padding on each side */
        min-width: calc(100vw - 48px);
        max-width: calc(100vw - 48px);
        min-height: 680px; /* Minimum height, but allow expansion for long titles */
        height: auto; /* Allow height to grow with content */
        flex: 0 0 calc(100vw - 48px); /* Don't shrink or grow, fixed width */
    }

/* Embla slide styling */
.hero-section-mobile .hero-mobile-card.embla__slide {
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

/* Fallback for non-Embla */
.hero-section-mobile .hero-mobile-slider:not(.embla) .hero-mobile-card {
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

.hero-section-mobile .hero-mobile-card-content {
        position: relative;
        width: 100%;
        min-height: 100%; /* Use min-height to allow content to expand */
        height: auto; /* Allow height to grow with content */
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 16px 16px 24px 16px;
        border-radius: 32px;
        border: 1.3px solid var(--colors-base-white-15, rgba(235, 235, 238, 0.15));
        background: linear-gradient(180deg, var(--colors-base-white-5, rgba(235, 235, 238, 0.05)) 0%, var(--colors-base-white-1, rgba(235, 235, 238, 0.01)) 100%);
        box-shadow: 0px 5.51px 33.06px 0px rgba(13, 1, 19, 0.8);
        z-index: 1;
        box-sizing: border-box; /* Include padding in height calculation */
    }

.hero-section-mobile .hero-mobile-card-poster {
        width: 100%;
        height: 392px;
        overflow: hidden;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        padding: 0;
        position: relative;
    }

.hero-section-mobile .hero-mobile-card-poster-link {
        display: block;
        width: 100%;
        height: 100%;
        text-decoration: none;
        color: inherit;
        cursor: pointer;
        outline: none;
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        user-select: none;
        -webkit-user-select: none;
    }

.hero-section-mobile .hero-mobile-card-poster-link:hover,
.hero-section-mobile .hero-mobile-card-poster-link:focus,
.hero-section-mobile .hero-mobile-card-poster-link:active,
.hero-section-mobile .hero-mobile-card-poster-link:visited {
        text-decoration: none;
        color: inherit;
        outline: none;
    }

.hero-section-mobile .hero-mobile-card-poster-inner {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: stretch;
    }

.hero-section-mobile .hero-mobile-card-poster img {
        height: 100%;
        width: auto;
        max-width: none;
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        border-radius: 16px;
        object-position: center;
        pointer-events: none;
        display: block;
    }

.hero-section-mobile .hero-mobile-card-info {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 0 8px;
        flex: 1 1 auto; /* Allow flex to grow and shrink naturally */
        justify-content: flex-start; /* Align to top instead of center */
        align-items: flex-start;
        width: 100%;
        min-height: 0; /* Allow content to determine height */
    }

.hero-section-mobile .hero-mobile-card-top {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
        align-items: flex-start;
        flex-shrink: 0;
    }

.hero-section-mobile .hero-mobile-card-tag-group {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
        align-items: flex-start;
        flex-shrink: 0;
    }

/* Ensure new badge component works in mobile card tag group */
.hero-section-mobile .hero-mobile-card-tag-group .hero-card-tag {
    width: auto;
}

.hero-section-mobile .hero-mobile-card-tag {
        position: relative;
        width: 91px;
        height: 28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

.hero-section-mobile .hero-mobile-card-tag::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(138.91deg, #ffbfb5 22.107%, #c4b5ff 55.634%, #b5bfff 84.734%);
        border-radius: 999px;
    }

.hero-section-mobile .hero-mobile-card-tag-text {
        position: relative;
        font-family: var(--font-family-inter-tight, "Inter Tight", sans-serif);
        font-weight: 500;
        font-size: 14px;
        line-height: 21px;
        letter-spacing: 0.1px;
        color: var(--colors-base-black, #0B0A15);
        text-align: center;
        padding-left: 8px;
        padding-right: 4px;
        z-index: 1;
    }

.hero-section-mobile .hero-mobile-card-tag-icon {
        position: absolute;
        left: 70px;
        top: 5px;
        width: 18px;
        height: 18px;
        z-index: 2;
    }

.hero-section-mobile .hero-mobile-card-title {
        font-family: var(--font-family-inter-tight, "Inter Tight", sans-serif);
        font-weight: 500;
        font-size: 18px;
        line-height: 24px;
        letter-spacing: 0.35px;
        color: var(--fg-primary-rest, #EBEBEE);
        display: inline;
        margin: 0;
        padding: 0;
        line-height: inherit;
    }

.hero-section-mobile .hero-mobile-card-title a {
        color: inherit;
        text-decoration: none;
        display: inline;
        margin: 0;
        padding: 0;
        line-height: inherit;
        cursor: pointer;
        outline: none;
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        user-select: none;
        -webkit-user-select: none;
    }

.hero-section-mobile .hero-mobile-card-title a:hover,
.hero-section-mobile .hero-mobile-card-title a:focus,
.hero-section-mobile .hero-mobile-card-title a:active,
.hero-section-mobile .hero-mobile-card-title a:visited {
        color: inherit;
        text-decoration: none;
        outline: none;
    }

.hero-section-mobile .hero-mobile-card-details {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
        flex-shrink: 0;
        width: 100%;
    }

.hero-section-mobile .hero-mobile-card-detail-item {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-shrink: 0;
        width: 100%;
    }

.hero-section-mobile .hero-mobile-card-detail-item svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

.hero-section-mobile .hero-mobile-card-detail-item span {
        font-family: var(--font-family-inter-tight, "Inter Tight", sans-serif);
        font-weight: 500;
        font-size: 14px;
        line-height: 21px;
        letter-spacing: 0.1px;
        color: var(--fg-primary-rest, #EBEBEE);
        white-space: nowrap;
    }

/* Allow location to wrap to second line when large */
.hero-section-mobile .hero-mobile-card-detail-item-location {
        flex-wrap: wrap;
        align-items: flex-start;
    }

.hero-section-mobile .hero-mobile-card-detail-item-location span {
        white-space: normal;
        word-wrap: break-word;
        flex: 1;
        min-width: 0; /* Allow flex item to shrink below content size */
    }

/* Mobile hero card button */
.hero-section-mobile .hero-mobile-card-content .btn-outline {
    margin-top: 20px;
}

/* Mobile Pagination */
.hero-section-mobile .hero-mobile-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-top: 16px;
        pointer-events: auto; /* Ensure clicks work */
    }

.hero-section-mobile .hero-mobile-dot {
    width: 10px;           /* larger click target */
    height: 10px;          /* larger click target */
    padding: 0;
    border: 0;
    background: transparent; /* Make button itself transparent */
    cursor: pointer;
    position: relative; /* For ::after pseudo-element */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1; /* Ensure dots are clickable */
    pointer-events: auto; /* Ensure clicks work */
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
}

.hero-section-mobile .hero-mobile-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px; /* Visual dot size */
    height: 8px; /* Visual dot size */
    border-radius: 100px;
    background: var(--bg-control-tertiary-deactivated, #4b4578);
    transition: background 0.3s ease, transform 0.3s ease;
}

.hero-section-mobile .hero-mobile-dot.active::after {
    background: var(--bg-control-tertiary-active, #c4b5ff);
}

.hero-section-mobile .hero-mobile-dot:hover::after {
    transform: translate(-50%, -50%) scale(1.2);
}

.hero-section-mobile .hero-mobile-dot:focus-visible {
    outline: 2px solid var(--bg-control-tertiary-active, #c4b5ff); /* Accessibility outline */
    outline-offset: 2px;
    border-radius: 100px;
}

/* Background decorative elements */
.hero-section-mobile .hero-mobile::before {
    content: '';
    position: absolute;
    bottom: -450px;
    right: -493px;
    width: 808px;
    height: 885px;
    background: radial-gradient(ellipse, rgba(196, 181, 255, 0.1) 0%, transparent 70%);
    opacity: 0.3;
    z-index: 0;
}

/* Desktop - Hide mobile hero section, show desktop */
.hero-section .hero-mobile {
    display: none;
}

.hero-section .hero-desktop {
    display: block;
}

/* =====================================================
   Tablet Hero Section - Completely separate from desktop/mobile
   ===================================================== */
.hero-section-tablet {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    min-height: auto;
    height: auto;
    overflow-x: hidden;
    overflow-y: visible;
    display: block;
    background: transparent;
    z-index: 1;
}

.hero-section-tablet .hero-bottom-right-image {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    background-image: url('/resources/images/home_new/hero-bg.png');
    background-size: contain;
    background-position: bottom right;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.hero-section-tablet .hero-tablet {
    position: relative;
    width: 100%;
    min-height: auto; /* Natural height */
    height: auto; /* Natural height */
    overflow-x: hidden;
    overflow-y: visible;
    display: block;
    background: transparent;
}

.hero-section-tablet .hero-tablet .hero-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
    min-height: auto; /* Natural height */
    height: auto; /* Natural height */
    box-sizing: border-box;
    padding: 0;
    overflow-x: hidden;
    overflow-y: visible;
}

/* Tablet: Standalone slider inside hero section */
.hero-section-tablet .hero-tablet .standalone-slider-section {
    margin-top: 48px; /* 48px spacing from hero button */
    position: relative;
    width: 100%;
}

/* Tablet: Right side decorative element - REMOVED (overlay now inside card) */
/* The overlay is now implemented as .tablet-card-overlay inside each card */

/* Desktop responsive adjustments */
@media (max-width: 1200px) {
    .hero-title {
        font-size: 48px;
        line-height: 56px;
    }

    .hero-card {
        width: 600px;
        height: 320px;
    }

    .hero-card-info {
        width: 300px;
        gap: 24px;
    }

    .hero-card-title {
        font-size: 24px;
        line-height: 30px;
    }

    .hero-card-poster {
        width: 220px;
        height: 300px;
    }
}