.kbw-card-stack-widget {
    font-family: 'Inter', sans-serif;
    position: relative;
    /* Ensure widget has enough height for scrolling */
}

/* Animated Cards Container */
.kbw-cards-animated {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 70vh;
    z-index: 10;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Performance optimizations */
    will-change: transform;
    transform: translateZ(0);
    /* Force GPU layer */
}

.kbw-card-item {
    position: absolute;
    width: 270px;
    /* Slightly smaller to fit better */
    background: #fff;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    pointer-events: all;
    padding: 15px 15px 50px 15px;
    /* Polaroid padding */
    transform-origin: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Performance optimizations */
    will-change: transform, opacity;
    transform: translateZ(0);
    /* Force GPU layer */
    backface-visibility: hidden;
    /* Prevent flickering */
}


@media (max-width: 1024px) {
    .kbw-card-item {
        width: 199px;
        padding: 8px 8px 50px 8px;
    }

    .kbw-cards-animated {
        height: 42vh;
    }
}


/* Stacked State (Section 1) */
.kbw-card-item[data-index="0"] {
    transform: rotate(-8deg) translate(-20px, -10px);
    z-index: 4;
}

.kbw-card-item[data-index="1"] {
    transform: rotate(-4deg) translate(-10px, 0px);
    z-index: 3;
}

.kbw-card-item[data-index="2"] {
    transform: rotate(2deg) translate(5px, 10px);
    z-index: 2;
}

.kbw-card-item[data-index="3"] {
    transform: rotate(6deg) translate(15px, 20px);
    z-index: 1;
}

.kbw-card-item[data-index="4"] {
    transform: rotate(8deg) translate(20px, 25px);
    z-index: 0;
    opacity: 0.7;
}

/* GPU Fallback: CSS-only animation */
.kbw-card-stack-fallback .kbw-cards-animated {
    position: relative !important;
    transform: none !important;
    height: auto !important;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Stack State: Cards on left side */
.kbw-card-stack-fallback.stack-state .kbw-cards-animated {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 40px 20px !important;
}

.kbw-card-stack-fallback.stack-state .kbw-card-item {
    position: absolute;
    left: 25% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Spread State: Cards centered horizontally */
.kbw-card-stack-fallback.spread-state .kbw-cards-animated {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    padding: 40px 20px !important;
    min-height: 500px !important;
}

.kbw-card-stack-fallback.spread-state .kbw-card-item {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Spread State handled by GSAP or CSS fallback */

.kbw-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.kbw-card-inner img {
    width: 100%;
    height: 315px;
    /* 380px total height - 50px bottom padding - 15px top padding */
    /* Fixed height for consistency */
    object-fit: cover;
    display: block;
}

.kbw-card-caption {
    position: absolute;
    bottom: -35px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: #333;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
}

/* Section 1: Stacked Cards */
.kbw-section-1 {
    background: #f5f1eb;
    /* Cream background */
    padding: 100px 0px;
    min-height: 87vh;
    display: flex;
    /* align-items: center; */
    justify-content: center;
    /* Text on the right */
    position: relative;
    z-index: 1;
}

.kbw-card-stack-container {
    /* max-width: 700px; */
    max-width: 1290px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    /* Occupy right half */
    /* padding-left: 40px; */
}

.kbw-card-stack-container .kbw-section-content {
    max-width: 57%;
}

/* Section 2: Spread Cards */
.kbw-section-2 {
    background: #fff;
    padding: 120px 60px 500px;
    /* Extra bottom padding for cards */
    min-height: 110vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 0;
}

.kbw-section-content h2,
.kbw-section-content-top h2 {
    margin: 0 0 12px 0;
    color: #2c2c2c;
    font-family: 'Be Vietnam Pro', sans-serif;
    /* Darker text */
    font-weight: 600;
    font-size: 40px;
    line-height: 120%;
    /* identical to box height, or 48px */
    letter-spacing: -0.02em;
    text-transform: capitalize;
    color: #382F2D;
}

.kbw-section-content p,
.kbw-section-content-top p {
    margin-bottom: 32px;
    /* Preikestolen BaseCamp is starting point for rest, adventure, and everything in between, with unique stays and experiences in and around Lysefjorden.Host Your Next Corporate Retreat in Norway. Bring your team together with nature, comfort and inspiring meeting spaces. */
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    /* or 24px */

    color: #382F2D;
}

.kbw-section-content-top {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}


.kbw-card-btn {
    display: inline-block;
    padding: 0px 28px;
    background: #bf8c00;
    /* Gold/Mustard color */
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    font-size: 15px;
    transition: background 0.3s ease, transform 0.2s ease;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 40px;
    text-transform: capitalize;
    min-width: 184px;
}

.pin-spacer {
    pointer-events: none;
}


.kbw-card-btn:hover {
    background: #a67900;
    color: #fff;
    transform: translateY(-2px);
}

/* Visibility Utilities */
.mobile-only {
    display: none;
}

.desktop-only {
    display: flex;
}

/* Mobile Carousel Styling */
.kbw-mobile-card-stack {
    width: 100%;
    padding: 20px 0 50px;
    overflow: hidden;
}

.kbw-card-item-mobile {
    background: #fff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    padding: 15px 15px 50px 15px;
    border-radius: 4px;
    width: 100%;
    max-width: 290px;
    margin: 0 auto;
}

/* Responsive */
@media (max-width: 1024px) {
    .kbw-section-1 {
        flex-direction: column;
        justify-content: center;
        padding: 80px 40px;
        text-align: center;
    }

    .kbw-card-stack-container {
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        margin-top: 50px;
        /* Reduced margin since we use a separate carousel now */
    }

    .kbw-cards-animated {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        margin: 0 auto 30px;
    }

    .kbw-section-content h2,
    .kbw-section-content-top h2 {
        font-size: 36px;
    }
}

@media (max-width: 1024px) {

    /* Toggle Visibility */
    .mobile-only {
        display: block;
    }

    /* Show desktop stack on mobile too */
    .desktop-only {
        display: flex !important;
    }

    /* Mobile Layout */
    .kbw-card-stack-widget {
        display: block;
    }

    .kbw-section-1 {
        min-height: auto;
        padding: 35px 20px 40px;
        flex-direction: column;
    }

    .kbw-card-stack-container {
        margin-top: 0;
        width: 100%;
        padding-left: 0;
        margin-bottom: 40px;
    }

    .kbw-card-stack-container .kbw-section-content {
        max-width: 100%;
    }

    /* Section 2: Spread Cards (Hidden/Adjusted if needed, but we focus on Section 1 carousel) */
    .kbw-section-2 {
        min-height: auto;
        padding: 55px 0 20px;
    }

    .kbw-section-content-top {
        padding: 0 20px;
    }
}

@media (max-width: 1024px) {

    .kbw-section-content h2,
    .kbw-section-content-top h2 {
        font-size: 33px;
        text-align: left;
    }

    .kbw-section-content p,
    .kbw-section-content-top p {
        text-align: left;
        margin-bottom: 23px;
    }

    .kbw-card-inner img {
        height: 280px;
    }

    .kbw-card-btn {
        width: 100%;
    }
}