/* ========================================
   RaiderZ Global - Home Carousel Styles
   ======================================== */

/* ========================================
   HERO SECTION
   ======================================== */
.hero {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20em;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url('/assets/images/home/site-hero--sm.png?v=6');
    background-size: cover;
    background-position: center;
    -webkit-mask-image: -webkit-linear-gradient(-90deg, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
}

.full-width {
    max-width: 2550px;
    margin-left: auto;
    margin-right: auto;
}

.hero__title {
    object-fit: cover;
    width: 75vw;
    max-width: 400px;
    animation: fadeInScale 1.5s ease-out;
}

@media (width >= 40rem) {
    .hero::before {
        background-image: url('/assets/images/home/site-hero--md.png?v=6');
    }
}

@media (width >= 90rem) {
    .hero::before {
        background-image: url('https://raiderzglobal.com/assets/images/home/site-hero--lg.png?v=6');
    }
}

@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ========================================
   HIGHLIGHTS SECTION
   ======================================== */
.highlights {
    background-color: #101010;
    --section-start: var(--spacing-14);
    grid-template-rows:
        [section-start] var(--section-start)
        [content-start] auto
        [content-end] var(--spacing-10)
        [section-end];
    position: relative;
}

@media (width >= 60rem) {
    .highlights {
        --section-start: var(--spacing-10);
    }
}

/* ========================================
   CAROUSEL STRUCTURE
   ======================================== */
.carousel {
    grid-row: content;
    display: grid;
    grid-template-columns:
        [carousel-start navigation-start] 1fr
        [carousel-end navigation-start];
    grid-template-rows:
        [carousel-start] minmax(min-content, 320px)
        [carousel-end navigation-start] min-content
        [navigation-end];
}

@media (width >= 48rem) {
    .carousel {
        grid-template-columns:
            [carousel-start] auto
            [carousel-end navigation-start] minmax(min-content, 320px)
            [navigation-end];
        grid-template-rows: auto;
        border-radius: var(--radius-3);
        box-shadow: 
            0px 1.5185185670852661px 3.8958332538604736px 0px rgba(0, 0, 0, 0.05),
            0px 6.68148136138916px 8.066666603088379px 0px rgba(0, 0, 0, 0.08),
            0px 16.399999618530273px 16.087499618530273px 0px rgba(0, 0, 0, 0.1),
            0px 31.585186004638672px 31.53333282470703px 0px rgba(0, 0, 0, 0.12),
            0px 53.14814758300781px 57.97916793823242px 0px rgba(0, 0, 0, 0.15),
            0px 82px 99px 0px rgba(0, 0, 0, 0.2);
    }
}

.carousel-hero {
    grid-area: carousel;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-3);
}

@media (width >= 48rem) {
    .carousel-hero {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
        min-height: 540px;
    }
}

/* ========================================
   CAROUSEL PANELS
   ======================================== */
.carousel-panel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    transition: opacity 600ms ease-in-out, transform 300ms ease;
    opacity: 0;
    pointer-events: none;
    -webkit-tap-highlight-color: transparent;
    transform: translateX(10px);
}

@media (width >= 48rem) {
    .carousel-panel {
        align-items: flex-start;
    }
}

.carousel-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-3);
    transition: opacity 1000ms ease-in, background-image 1000ms ease-in;
    pointer-events: none;
    background-image: linear-gradient(
        25deg,
        var(--clr-black--80) 0%,
        var(--clr-black--40) 40%,
        rgba(0, 0, 0, 0) 60%
    );
}

@media (width >= 48rem) {
    .carousel-panel::before {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        background-image: linear-gradient(
            90deg,
            var(--clr-black--80) 0%,
            var(--clr-black--40) 40%,
            rgba(0, 0, 0, 0) 60%
        );
    }
}

.carousel-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-3);
    border: 1px solid var(--clr-white--5);
    pointer-events: none;
}

@media (width >= 48rem) {
    .carousel-panel::after {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
}

.carousel-panel.active {
    opacity: 1;
    pointer-events: all;
    transform: translateX(0);
}

.panel-banner {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    object-fit: cover;
    border-radius: var(--radius-3);
    overflow: hidden;
    transition: opacity 1000ms ease-in;
    z-index: -1;
    user-select: none;
    pointer-events: none;
}

@media (width >= 48rem) {
    .panel-banner {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
    }
}

.panel-content {
    overflow: hidden;
    isolation: isolate;
    padding: var(--spacing-6);
}

@media (width >= 48rem) {
    .panel-content {
        padding-block: var(--spacing-8);
        padding-inline-start: var(--spacing-8);
    }
}

@media (width >= 60rem) {
    .panel-content {
        padding-block: var(--spacing-10);
        padding-inline-start: var(--spacing-10);
    }
}

/* ========================================
   PANEL CONTENT ELEMENTS
   ======================================== */
.panel-headline {
    margin-bottom: var(--spacing-4);
    opacity: 0;
    transition: opacity 300ms ease-in;
    font-family: var(--font-serif);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1em;
    letter-spacing: -0.05rem;
    text-transform: uppercase;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
    text-overflow: ellipsis;
    background: linear-gradient(237deg, #FFF9E4 47.65%, #CBB990 93.68%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(1px 1px 1px black);
    max-width: 100%;
}

@media (width >= 48rem) {
    .panel-headline {
        font-size: 3rem;
        line-height: 1em;
        -webkit-line-clamp: 4;
        max-width: 132ch;
    }
}

@media (width >= 60rem) {
    .panel-headline {
        font-size: 3.5rem;
        line-height: 1em;
        -webkit-line-clamp: 3;
        max-width: 14ch;
    }
}

.panel-lead {
    margin-bottom: var(--size-11);
    opacity: 0;
    transition: opacity 300ms ease-in;
    color: var(--clr-white--75, rgba(255, 255, 255, 0.75));
    text-shadow: 1px 1px 1px var(--clr-black);
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

@media (width >= 48rem) {
    .panel-lead {
        max-width: 40ch;
    }
}

@media (width >= 60rem) {
    .panel-lead {
        max-width: 44ch;
    }
}

.panel-cta {
    box-sizing: border-box;
    height: var(--size-17, 3.5rem);
    display: grid;
    place-items: center;
    gap: var(--spacing-2, 0.5rem);
    padding-inline: var(--spacing-7, 2rem);
    max-width: max-content;
    background-color: var(--clr-white);
    color: var(--clr-black);
    border-color: var(--clr-white);
    border-radius: var(--radius-3);
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.5rem;
    text-transform: uppercase;
    transition: opacity 200ms ease-out, color 200ms ease-out,
        background-color 300ms ease-out, border-color 300ms ease-out;
    opacity: 0;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.panel-cta:hover {
    background-color: var(--clr-black);
    color: var(--clr-white);
    border-color: var(--clr-black);
    transition: opacity 200ms ease-out, color 200ms ease-out,
        background-color 300ms ease-out, border-color 300ms ease-out;
}

.panel-cta:focus-visible {
    outline: 2px solid var(--clr-forAccent-bronze--subtle);
    outline-offset: 2px;
    z-index: 1;
}

.carousel-panel.active .panel-banner,
.carousel-panel.active .panel-headline,
.carousel-panel.active .panel-lead,
.carousel-panel.active .panel-cta {
    opacity: 1;
}

.progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--clr-brand-400), var(--clr-brand-600));
    width: 0;
    pointer-events: none;
    transition: width 100ms ease;
    border-radius: 0 2px 2px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ========================================
   CAROUSEL NAVIGATION
   ======================================== */
.carousel-navigation {
    grid-area: navigation;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-3);
}

@media (width <= 48rem) {
    .carousel-navigation [data-news-redirect] {
        position: absolute;
        top: 100%;
    }
}

@media (width >= 48rem) {
    .carousel-navigation {
        flex-direction: column;
        justify-content: flex-start;
        gap: var(--spacing-2);
        padding: var(--spacing-4);
        min-width: var(--size-34);
        border-left: none;
        border-bottom-right-radius: var(--radius-3);
        border-top-right-radius: var(--radius-3);
        border: 1px solid var(--clr-forSurface-01--strong);
        background-color: var(--clr-surface-02);
    }

    .carousel-navigation li {
        flex: 1;
        width: 100%;
        display: grid;
        place-items: center;
        max-height: var(--size-20);
    }
}

/* ========================================
   CAROUSEL TABS
   ======================================== */
.carousel-tab {
    position: relative;
    height: var(--size-16);
    width: var(--size-16);
    cursor: pointer;
    border: none;
    background-color: transparent;
    transition: transform 200ms ease;
}

.carousel-tab:hover {
    transform: scale(1.1);
}

.carousel-tab:hover .decorator {
    background-color: var(--clr-brand-400);
    transform: scaleY(1.2);
}

.carousel-tab .label,
.carousel-tab .date {
    display: none;
}

.carousel-tab .decorator {
    width: var(--size-16);
    height: var(--size-4);
    background-color: var(--clr-onSurface-01--subtle);
    border-radius: var(--radius-2);
    transition: transform 300ms ease-out, background-color 200ms ease;
}

.carousel-tab.active .decorator {
    background-color: var(--clr-brand-300);
    transform: scaleY(1.4);
    transition: transform 300ms ease-out, background-color 200ms ease;
}

.carousel-tab.active:hover .decorator {
    background-color: var(--clr-brand-300);
    transform: scaleY(1.5);
}

@media (width >= 48rem) {
    .carousel-tab {
        position: relative;
        cursor: pointer;
        width: 100%;
        height: 100%;
        padding: var(--spacing-4);
        border-radius: var(--radius-2, 0.125rem);
        border: 1px solid var(--clr-forSurface-03);
        background: var(--clr-surface-03);
        text-align: left;
        transition: background 300ms ease-out, color 300ms ease-out,
            border-color 300ms ease-out;
    }

    .carousel-tab:hover {
        background-color: var(--clr-surface-04);
        border: 1px solid var(--clr-forSurface-04);
    }

    .carousel-tab:focus-visible {
        background-color: var(--clr-surface-04);
        border: 1px solid var(--clr-forSurface-04);
        outline: 2px solid var(--clr-forAccent-bronze--subtle);
        outline-offset: 2px;
        z-index: 1;
    }

    .carousel-tab .label {
        display: inline-block;
        color: var(--clr-onSurface-03--bold);
        font-size: 1.125rem;
        font-weight: 600;
        line-height: 1em;
        text-transform: uppercase;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        transition: transform 300ms ease-out;
    }

    .carousel-tab:focus-visible .label,
    .carousel-tab:hover .label {
        transform: translate(10px);
        color: var(--clr-onSurface-04--strong);
    }

    .carousel-tab .date {
        display: block;
        color: var(--clr-onSurface-03--subtle);
        font-size: 0.75rem;
        font-weight: 600;
        line-height: 1rem;
        position: absolute;
        bottom: var(--spacing-2);
        right: var(--spacing-2);
        transition: color 300ms ease-out;
    }

    .carousel-tab:focus-visible .date,
    .carousel-tab:hover .date {
        color: var(--clr-onSurface-03--strong);
    }

    .carousel-tab .decorator {
        border-bottom-left-radius: var(--radius-2);
        border-bottom-right-radius: var(--radius-2);
        position: absolute;
        inset-inline: 0;
        bottom: 0;
        height: var(--size-3);
        width: 100%;
        background-image: linear-gradient(
            135deg,
            var(--clr-bronze-400--5) 0%,
            rgba(2, 207, 157, 50%) 50%,
            var(--clr-bronze-400) 100%
        );
        transition: opacity 300ms ease-in;
        display: none;
        opacity: 0;
    }

    .carousel-tab::before {
        content: '';
        width: var(--size-2);
        height: 100%;
        background-image: linear-gradient(
            180deg,
            rgba(190, 167, 116, 0) 0%,
            #BEA774 50%,
            rgba(190, 167, 116, 0) 100%
        );
        position: absolute;
        left: 0;
        inset-block: 0;
        transform: scale(0);
        border-bottom-left-radius: var(--radius-2);
        border-top-left-radius: var(--radius-2);
        transition: transform 600ms ease-out;
    }

    .carousel-tab:focus-visible::before,
    .carousel-tab:hover::before {
        transform: scale(1);
        top: 0;
    }

    .carousel-tab::after {
        content: '';
        position: absolute;
        right: 99.5%;
        border-radius: 1px;
        top: 50%;
        opacity: 0;
        transform: translate(300%, -50%) rotate(45deg) scale(0);
        width: var(--size-8);
        height: var(--size-8);
        background-color: var(--clr-bronze-400);
        border: 4px solid var(--clr-black);
        outline: 2px solid var(--clr-bronze-400);
        transition: transform 300ms ease-out, opacity 300ms ease-in;
    }

    .carousel-tab:focus-visible::after,
    .carousel-tab:hover::after {
        transform: translate(50%, -50%) rotate(45deg) scale(1);
        opacity: 1;
    }

    .carousel-tab.active {
        background-color: var(--clr-accent-bronze);
        border: none;
        animation: highlight 150ms ease-in forwards;
        transition: color 300ms ease-out, background 300ms ease-out;
    }

    @keyframes highlight {
        0% {
            transform: translate(0px, 0px);
        }
        50% {
            transform: translate(4px, -4px);
        }
        100% {
            transform: translate(0px, 0px);
        }
    }

    .carousel-tab.active .date {
        color: var(--clr-onAccent-bronze--subtle);
    }

    .carousel-tab.active .label {
        color: var(--clr-onAccent-bronze--strong);
        font-weight: 700;
        transform: translate(10px);
    }

    .carousel-tab.active .decorator {
        opacity: 1;
        display: block;
    }

    .carousel-tab.active::before {
        transform: scale(1);
        background-color: var(--clr-bronze-400);
    }

    .carousel-tab.active::after {
        width: var(--size-10);
        height: var(--size-10);
        transform: translate(50%, -50%) rotate(45deg) scale(1);
        border-width: 5px;
        background-color: var(--clr-brand-400);
        opacity: 1;
    }
}