/* ================================================================
   Hero Carousel – TapNow Style (Swiper)
   Light: Claude Design System  |  Dark: Binance Design System
   ================================================================ */

/* ── Container ── */
.hero-carousel {
    position: relative;
    padding: 16px 0 12px;
    overflow: hidden;
}

/* ── Swiper overrides ── */
.hero-carousel .swiper {
    overflow: visible;
    padding: 0 48px;
}

.hero-carousel .swiper-wrapper {
    align-items: stretch;
}

/* ── Slide sizing & transition ──
   Inactive slides keep at 0.55 (was 0.45) so peripheral cards still
   read as content rather than dim placeholders, while the active card
   still wins focus through scale + full opacity. */
.hero-carousel .swiper-slide {
    width: 55%;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: scale(0.88);
    opacity: 0.55;
}

.hero-carousel .swiper-slide-active {
    transform: scale(1);
    opacity: 1;
}

/* ── Card ── */
.hero-carousel__card {
    cursor: grab;
}

.hero-carousel__card:active {
    cursor: grabbing;
}

/* ── Image container ── */
/* Smart-fill: any uploaded aspect ratio renders fully (object-fit: contain)
   inside a fixed 16:9 container. The blurred backdrop is the same image
   blown-up + blurred, so there are no white/black letterbox bars. */
.hero-carousel__img {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--bn-radius-xl, 12px);
    overflow: hidden;
    background: var(--bn-surface-strong-light, #e8e6dc);
    isolation: isolate;
}

[data-bs-theme="dark"] .hero-carousel__img {
    background: var(--bn-surface-card-dark, #1e2329);
}

.hero-carousel__img::before {
    content: '';
    position: absolute;
    inset: -8%;
    background-image: var(--bn-img, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(36px) saturate(1.2) brightness(.85);
    transform: scale(1.2);
    z-index: 0;
    pointer-events: none;
}

[data-bs-theme="dark"] .hero-carousel__img::before {
    filter: blur(36px) saturate(1.05) brightness(.55);
}

.hero-carousel__img img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    transition: transform 0.4s ease;
}

.hero-carousel__img .hero-carousel__link {
    z-index: 2;
}

.hero-carousel .swiper-slide-active .hero-carousel__img img:hover {
    transform: scale(1.02);
}

/* Phone: tighten ratio so the slide doesn't dwarf the screen. */
@media (max-width: 575.98px) {
    .hero-carousel__img {
        aspect-ratio: 4 / 3;
    }
}

/* ── Permalink overlay ── */
.hero-carousel__link {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* ── Caption: subtitle + title ──
   Caption padding is on the design-system 4-px grid (16/8 instead of 12/4)
   so it lines up with cards in other widgets. Subtitle is tightened by
   tracking +0.02em to feel more like an "eyebrow" label, then the title
   uses fluid clamp() so it scales between 18 and 22px without breakpoints. */
.hero-carousel__caption {
    padding: var(--bn-space-md, 16px) var(--bn-space-xs, 8px) 0;
}

.hero-carousel__subtitle {
    margin: 0;
    font-family: var(--bn-font-body, Inter, system-ui, sans-serif);
    font-size: var(--bn-fs-body-md, 14px);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: var(--bn-muted, #5e5d59);
}

[data-bs-theme="dark"] .hero-carousel__subtitle {
    color: var(--bn-muted, #707a8a);
}

.hero-carousel__title {
    font-family: var(--bn-font-display, Inter, system-ui, sans-serif);
    font-size: clamp(18px, 1.6vw, 22px);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--bn-ink, #141413);
    margin: var(--bn-space-xxs, 4px) 0 0;
    transition: color 0.2s var(--bn-ease-out, ease);
}

[data-bs-theme="dark"] .hero-carousel__title {
    color: var(--bn-on-dark, #ffffff);
}

.hero-carousel__card:hover .hero-carousel__title {
    color: var(--bn-primary, #c96442);
}

/* Fallback _desc caption styles */
.hero-carousel__caption p {
    margin: 0;
    font-family: var(--bn-font-body, Inter, system-ui, sans-serif);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--bn-muted, #5e5d59);
}

[data-bs-theme="dark"] .hero-carousel__caption p {
    color: var(--bn-muted, #707a8a);
}

/* Non-active slides: dim caption */
.hero-carousel .swiper-slide:not(.swiper-slide-active) .hero-carousel__caption {
    opacity: 0.4;
}

/* ── Pagination dots ── */
.hero-carousel__pagination {
    text-align: center;
    margin-top: 8px;
    position: relative;
    z-index: 5;
}

.hero-carousel__pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bn-border-strong, #d1cfc5);
    opacity: 0.45;
    margin: 0 4px;
    transition: opacity 0.3s ease, background 0.3s ease, width 0.3s ease;
    display: inline-block;
    vertical-align: middle;
}

/* Active pill uses the brand primary so the dot reads as "current"
   instead of just "darker". Width bumped to 24px so the rectangle is
   visually distinct from the resting circles. */
.hero-carousel__pagination .swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--bn-primary, #c96442);
    width: 24px;
    border-radius: 4px;
}

[data-bs-theme="dark"] .hero-carousel__pagination .swiper-pagination-bullet {
    background: var(--bn-muted, #707a8a);
}

[data-bs-theme="dark"] .hero-carousel__pagination .swiper-pagination-bullet-active {
    background: var(--bn-primary, #fcd535);
}

/* ── Navigation arrows ──
   Restrained "big tech" interaction: arrows are hidden by default and
   only fade in when the carousel is hovered (or any nav arrow is
   keyboard-focused). The shadow uses the shared subtle elevation token
   so we don't re-invent a one-off depth. */
.hero-carousel__nav {
    position: absolute;
    top: calc(50% - 20px);
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s var(--bn-ease-out, ease),
                color 0.2s var(--bn-ease-out, ease),
                box-shadow 0.2s var(--bn-ease-out, ease),
                opacity 0.25s var(--bn-ease-out, ease);
    padding: 0;
    opacity: 0;

    /* Light theme (Claude) */
    background: var(--bn-surface-soft-light, #faf9f5);
    color: var(--bn-ink, #141413);
    box-shadow: var(--bn-shadow-subtle, rgba(0,0,0,0.05) 0px 4px 24px),
                0 0 0 1px var(--bn-hairline-on-light, #f0eee6);
}

.hero-carousel:hover .hero-carousel__nav,
.hero-carousel:focus-within .hero-carousel__nav {
    opacity: 1;
}

.hero-carousel__nav:hover {
    background: var(--bn-surface-strong-light, #e8e6dc);
    box-shadow: var(--bn-shadow-subtle, rgba(0,0,0,0.05) 0px 4px 24px),
                0 0 0 1px var(--bn-border-strong, #d1cfc5);
}

/* Touch devices have no hover, so arrows would never appear. Force them
   visible there but slightly dimmer so they don't fight the cards. */
@media (hover: none) {
    .hero-carousel__nav {
        opacity: 0.85;
    }
}

/* Dark theme (Binance) */
[data-bs-theme="dark"] .hero-carousel__nav {
    background: var(--bn-surface-card-dark, #1e2329);
    color: var(--bn-on-dark, #ffffff);
    box-shadow: 0px 0px 0px 1px var(--bn-hairline-on-dark, #2b3139);
}

[data-bs-theme="dark"] .hero-carousel__nav:hover {
    background: var(--bn-surface-elevated-dark, #2b3139);
    box-shadow: 0px 0px 0px 1px var(--bn-muted, #707a8a);
}

.hero-carousel__prev {
    left: 16px;
}

.hero-carousel__next {
    right: 16px;
}

/* Disabled state */
.hero-carousel__nav.swiper-button-disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}


/* ================================================================
   Responsive
   ================================================================ */

@media (min-width: 1400px) {
    .hero-carousel .swiper-slide {
        width: 50%;
    }

    .hero-carousel .swiper {
        padding: 0 60px;
    }

    .hero-carousel__prev { left: 20px; }
    .hero-carousel__next { right: 20px; }
}

@media (max-width: 991.98px) {
    .hero-carousel .swiper-slide {
        width: 70%;
    }

    .hero-carousel .swiper {
        padding: 0 40px;
    }
}

@media (max-width: 767.98px) {
    .hero-carousel {
        padding: 12px 0 8px;
    }

    .hero-carousel .swiper-slide {
        width: 82%;
        transform: scale(0.92);
    }

    .hero-carousel .swiper-slide-active {
        transform: scale(1);
    }

    .hero-carousel .swiper {
        padding: 0 32px;
    }

    .hero-carousel__nav {
        width: 36px;
        height: 36px;
    }

    .hero-carousel__nav svg {
        width: 18px;
        height: 18px;
    }

    .hero-carousel__prev { left: 8px; }
    .hero-carousel__next { right: 8px; }

    .hero-carousel__subtitle {
        font-size: 12px;
    }

    .hero-carousel__title {
        font-size: 16px;
    }

    .hero-carousel__caption p {
        font-size: 12px;
    }

    .hero-carousel__pagination {
        margin-top: 8px;
    }
}

@media (max-width: 575.98px) {
    .hero-carousel .swiper-slide {
        width: 90%;
    }

    .hero-carousel .swiper {
        padding: 0 24px;
    }

    .hero-carousel__nav {
        width: 32px;
        height: 32px;
    }

    .hero-carousel__nav svg {
        width: 16px;
        height: 16px;
    }

    .hero-carousel__prev { left: 4px; }
    .hero-carousel__next { right: 4px; }

    .hero-carousel__caption {
        padding: 8px 2px 0;
    }

    .hero-carousel__subtitle {
        font-size: 11px;
    }

    .hero-carousel__title {
        font-size: 14px;
    }

    .hero-carousel__pagination {
        margin-top: 6px;
    }

    .hero-carousel__pagination .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
        margin: 0 3px;
    }

    .hero-carousel__pagination .swiper-pagination-bullet-active {
        width: 16px;
    }
}