/* Home banners grid — match 1win.ng breakpoints & templates */

/* Parent is the size query source (grid cannot query itself). */
.variant-1_root-aNH8T {
    container-type: inline-size;
    container-name: home-main;
}

.home-banners-grid {
    width: 100%;
    gap: var(--spacing-24) var(--spacing-8);
    grid-template-areas:
        "a a"
        "b c";
    grid-template-columns: 69% auto;
    grid-template-rows: auto auto;
}

.home-banners-grid > * {
    min-width: 0;
}

/* Tablet: equal bottom tiles */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .home-banners-grid {
        gap: var(--spacing-24) var(--spacing-12);
        grid-template-columns: 1fr 1fr;
    }

    .hero-banner.banners-carousel_root-pijlK {
        aspect-ratio: 2.078;
    }
}

/* Desktop (sidebar layout): hero left, two stacked promos right — 1win large */
@media (min-width: 1024px) {
    .home-banners-grid {
        gap: var(--spacing-16);
        grid-template-areas:
            "a b"
            "a c";
        grid-template-columns: 67% auto;
        grid-template-rows: 1fr 1fr;
    }

    .hero-banner.banners-carousel_root-pijlK {
        aspect-ratio: auto;
        height: 100%;
        min-height: 0;
    }

    .home-banners-grid > [style*="grid-area: b"],
    .home-banners-grid > [style*="grid-area: c"],
    .home-banners-grid > .freemoney-main-banner_bannerWrapper-xr9On,
    .home-banners-grid > .bonus-banner_bannerWrapper-lrEeT {
        min-height: 0;
        height: 100%;
    }
}

/* Wide content: single row hero | freemoney | bonus — 1win mid/wide */
@container home-main (min-width: 1200px) {
    .home-banners-grid {
        gap: var(--spacing-12);
        grid-template-areas: "a b c";
        grid-template-columns: 67% 1fr 1fr;
        grid-template-rows: auto;
    }

    .hero-banner.banners-carousel_root-pijlK {
        aspect-ratio: 2.625;
        height: auto;
    }
}

.hero-banner.banners-carousel_root-pijlK {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--rounding-container-l);
    aspect-ratio: 2.078;
}

@media (min-width: 1024px) {
    .hero-banner.banners-carousel_root-pijlK {
        border-radius: var(--rounding-container-xl);
    }
}

.hero-banner .hero-banner__stage {
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
}

.hero-banner .banners-carousel_scaler-pijlK {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
}

.hero-banner .hero-banner__swiper,
.hero-banner .banners-carousel_swiper-pijlK {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
    container-type: inline-size;
    container-name: hero-banner;
}

.hero-banner .hero-banner__track,
.hero-banner .swiper-wrapper {
    display: flex;
    height: 100%;
    width: max-content;
    max-width: none;
    box-sizing: border-box;
    will-change: transform;
    backface-visibility: hidden;
}

.hero-banner .hero-banner__slide,
.hero-banner .swiper-slide {
    flex: 0 0 auto;
    /* Exact viewport width via container query — no subpixel track drift */
    width: 100cqi !important;
    min-width: 100cqi;
    max-width: 100cqi;
    height: 100%;
    margin: 0 !important;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: inherit;
}

.hero-banner .hero-banner__card,
.hero-banner .banner_root-Vtqer {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: inherit;
}

.hero-banner .hero-banner__picture,
.hero-banner .picture-v2_root-uw4G6 {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: auto !important;
}

.hero-banner .hero-banner__image,
.hero-banner .banner_image-Vtqer {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 20% center;
    display: block;
}

@media (min-width: 1024px) {
    .hero-banner .hero-banner__image,
    .hero-banner .banner_image-Vtqer {
        object-position: center;
    }
}

.hero-banner .banner_content-Vtqer,
.hero-banner .banner_heading-Vtqer,
.hero-banner .banner_buttons-Vtqer {
    display: none !important;
}

/* Dots inside banner (1win.ng style) — override layout absolute offset */
.hero-banner .banners-carousel_dots-pijlK {
    position: absolute;
    z-index: 2;
    left: 16px;
    bottom: 14px;
    inset: auto auto 14px 16px;
    pointer-events: auto;
    align-items: center;
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    .hero-banner .banners-carousel_dots-pijlK {
        left: 24px;
        bottom: 20px;
        inset: auto auto 20px 24px;
    }
}

.hero-banner .banners-carousel_dots-pijlK .dots_dot-oeJqY {
    border: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    appearance: none;
    display: block;
    flex-shrink: 0;
    line-height: 0;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.hero-banner .banners-carousel_dots-pijlK.dots_timed-oeJqY .dots_dot-oeJqY.dots_active-oeJqY::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    height: auto;
    width: var(--a1087cfa, 0%);
    max-width: 100%;
    border-radius: inherit;
    background-color: var(--color-background-base-static-white);
    display: block;
    box-sizing: border-box;
}

.hero-banner .banners-carousel_arrows-pijlK {
    z-index: 2;
}

/* —— Home intro: futuristic lobby pathway —— */
.home-intro {
    --hi-ink: var(--color-content-base-primary, #f2f4f8);
    --hi-muted: var(--color-content-base-secondary, rgba(242, 244, 248, 0.7));
    --hi-line: rgba(18, 184, 87, 0.18);
    --hi-surface: #10151c;
    --hi-accent: #12b857;
    margin-block: var(--spacing-16, 16px) var(--spacing-24, 24px);
    padding: var(--spacing-16, 16px);
    border-radius: 20px;
    border: 1px solid var(--hi-line);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(18, 184, 87, 0.12), transparent 42%),
        radial-gradient(90% 120% at 0% 100%, rgba(0, 117, 255, 0.08), transparent 45%),
        linear-gradient(160deg, #141b24 0%, #0d1117 55%, #101820 100%);
    color: var(--hi-ink);
    display: grid;
    gap: var(--spacing-16, 16px);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.home-intro::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.35), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.home-intro__lead,
.home-intro__steps {
    position: relative;
    z-index: 1;
}

.home-intro__lead {
    display: grid;
    gap: 10px;
    align-content: start;
    min-width: 0;
}

.home-intro__eyebrow {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--hi-muted);
    text-transform: none;
}

.home-intro__title {
    margin: 0;
    font-size: clamp(22px, 2.8vw, 30px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.home-intro__text {
    margin: 0;
    max-width: 36rem;
    font-size: 14px;
    line-height: 1.55;
    color: var(--hi-muted);
}

.home-intro__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-8, 8px);
    margin-top: var(--spacing-12, 12px);
}

.home-intro__cta.base_root-ZOkD4 {
    flex: 0 0 auto;
}

.home-intro__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.home-intro__step {
    display: grid;
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 4px;
    align-items: start;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
    box-shadow: 0 0 0 1px rgba(18, 184, 87, 0.04) inset;
    transition:
        transform 200ms ease,
        border-color 200ms ease,
        box-shadow 200ms ease,
        background-color 200ms ease;
}

.home-intro__icon {
    grid-row: 1 / span 2;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: var(--hi-accent);
    background: color-mix(in srgb, var(--hi-accent) 16%, transparent);
    box-shadow: 0 0 18px rgba(18, 184, 87, 0.18);
}

.home-intro__num {
    grid-column: 2;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
    color: var(--hi-accent);
    line-height: 1;
    text-shadow: 0 0 12px rgba(18, 184, 87, 0.35);
}

.home-intro__step-body {
    grid-column: 2;
    min-width: 0;
}

.home-intro__step strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.home-intro__step-body > span {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--hi-muted);
}

@media (hover: hover) and (pointer: fine) {
    .home-intro__step:hover {
        transform: translateY(-2px);
        border-color: color-mix(in srgb, var(--hi-accent) 45%, transparent);
        box-shadow:
            0 10px 28px rgba(0, 0, 0, 0.28),
            0 0 0 1px rgba(18, 184, 87, 0.12) inset,
            0 0 24px rgba(18, 184, 87, 0.12);
        background: linear-gradient(180deg, rgba(18, 184, 87, 0.1), rgba(255, 255, 255, 0.02));
    }
}

@media (min-width: 768px) {
    .home-intro {
        grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.4fr);
        align-items: center;
        gap: var(--spacing-20, 20px);
        padding: 22px;
    }

    .home-intro__steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .home-intro__step {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        justify-items: start;
        gap: 10px;
        min-height: 100%;
        padding: 18px 16px;
    }

    .home-intro__icon {
        grid-row: auto;
        width: 40px;
        height: 40px;
    }

    .home-intro__num {
        grid-column: auto;
    }

    .home-intro__step-body {
        grid-column: auto;
    }
}

@media (min-width: 1100px) {
    .home-intro {
        grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.5fr);
        gap: var(--spacing-24, 24px);
        padding: 24px 26px;
    }
}