/**
 * Homepage Module 5: Product Showcase Section
 *
 * Tabbed carousel with product cards and AI gallery section.
 *
 * Figma Node: 179-6736
 */

/* ==========================================================================
   SECTION CONTAINER
   ========================================================================== */

.workjam-product-showcase {
    width: 100%;
    padding: 72px 40px 100px;
    background: #FFFFFF;
    overflow-x: hidden; /* Prevent horizontal page scroll */
}

.workjam-product-showcase__container {
    max-width: 1224px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 103px; /* Gap between top section and AI section */
}

/* Top section containing header, tabs, and cards */
.workjam-product-showcase__top-section {
    display: flex;
    flex-direction: column;
    gap: 48px; /* Desktop: consistent 48px gap between header, tabs, and cards */
}

/* ==========================================================================
   HEADER SECTION
   ========================================================================== */

.workjam-product-showcase__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.workjam-product-showcase__title {
    font-family: 'Avenir Next', sans-serif;
    font-size: 48px;
    font-weight: 700; /* Bold */
    color: #121C66;
    line-height: normal;
    text-align: center;
    margin: 0;
    width: 100%;
}

.workjam-product-showcase__subtitle {
    font-family: 'Avenir Next', sans-serif;
    font-size: 16px;
    font-weight: 400; /* Regular */
    color: #121C66;
    line-height: normal;
    text-align: center;
    margin: 0;
    max-width: 1112px;
}

/* ==========================================================================
   TAB CAROUSEL (SPLIDE)
   ========================================================================== */

.workjam-product-showcase__tabs-carousel {
    width: 100%;
    overflow: visible;
}

.workjam-product-showcase__tabs-carousel .splide__track {
    overflow: visible;
    touch-action: pan-y pinch-zoom; /* Allow vertical scroll and pinch, reserve horizontal for carousel */
}

.workjam-product-showcase__tabs-carousel .splide__list {
    display: flex;
    align-items: center;
}

/* Tab slides */
.workjam-product-showcase__tabs-carousel .splide__slide {
    width: auto !important;
    flex-shrink: 0;
    opacity: 1 !important;
    visibility: visible !important;
}

.workjam-product-showcase__tab {
    padding: 18px 36px;
    background: rgba(43, 56, 143, 0.1);
    color: #121C66;
    font-family: 'Avenir Next', sans-serif;
    font-size: 16px;
    font-weight: 400; /* Regular */
    line-height: normal;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.workjam-product-showcase__tab:hover {
    background: rgba(43, 56, 143, 0.15);
}

/* Active state for Splide active slide */
.workjam-product-showcase__tabs-carousel .splide__slide.is-active .workjam-product-showcase__tab {
    background: #2B388F;
    color: #FFFFFF;
}

/* ==========================================================================
   PRODUCT CARDS CAROUSEL (SPLIDE)
   ========================================================================== */

.workjam-product-showcase__cards-carousel {
    width: 100%;
    overflow: visible;
}

.workjam-product-showcase__cards-carousel .splide__track {
    overflow: visible;
    touch-action: pan-y pinch-zoom; /* Allow vertical scroll and pinch, reserve horizontal for carousel */
}

.workjam-product-showcase__cards-carousel .splide__list {
    display: flex;
    align-items: center;
}

/* Card slides */
.workjam-product-showcase__cards-carousel .splide__slide {
    width: 100% !important;
    max-width: 1224px;
    flex-shrink: 0;
    opacity: 1 !important;
    visibility: visible !important;
    cursor: pointer; /* Show cards are clickable */
}

.workjam-product-showcase__cards-carousel .splide__slide.is-active {
    cursor: default; /* Active card is not clickable */
}


.workjam-product-showcase__card {
    display: flex;
    width: 100%;
    max-width: 1224px;
    background: #00E0C4;
    border-radius: 20px;
    padding: 24px;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}

.workjam-product-showcase__media {
    max-width: 400px;
    width: 100%;
    height: 400px;
    flex-shrink: 0;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
}

.workjam-product-showcase__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.workjam-product-showcase__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.workjam-product-showcase__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.workjam-product-showcase__eyebrow {
    font-family: 'Avenir Next', sans-serif;
    font-size: 16px;
    font-weight: 400; /* Regular */
    color: #121C66;
    line-height: normal;
    display: block;
}

.workjam-product-showcase__headline {
    font-family: 'Avenir Next', sans-serif;
    font-size: 36px;
    font-weight: 400; /* Regular */
    color: #121C66;
    line-height: normal;
    margin: 0;
}

.workjam-product-showcase__text {
    font-family: 'Avenir Next', sans-serif;
    font-size: 16px;
    font-weight: 400; /* Regular */
    color: #121C66;
    line-height: normal;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.workjam-product-showcase__text p {
    margin: 0;
}

.workjam-product-showcase__features ul {
    list-style: disc;
    margin-left: 24px;
    padding: 0;
}

.workjam-product-showcase__features li {
    margin-bottom: 8px;
}

.workjam-product-showcase__features li:last-child {
    margin-bottom: 0;
}

.workjam-product-showcase__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    background: #2B388F;
    color: #FFFFFF;
    font-family: 'Avenir Next', sans-serif;
    font-size: 16px;
    font-weight: 500; /* Medium */
    text-decoration: none;
    border-radius: 500px;
    white-space: nowrap;
    transition: all 0.3s ease;
    width: fit-content;
}

.workjam-product-showcase__cta:hover,
.workjam-product-showcase__cta:focus {
    background: #1F2A6E;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(43, 56, 143, 0.3);
    color: #FFFFFF;
}

/* ==========================================================================
   AI GALLERY SECTION
   ========================================================================== */

.workjam-product-showcase__ai-section {
    width: 100%;
    max-width: 1224px;
    margin: 0 auto;
    background: #E9EBF3;
    border-radius: 24px;
    padding: 36px;
    display: flex;
    align-items: center;
    gap: 160px;
}

.workjam-product-showcase__ai-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.workjam-product-showcase__ai-title {
    font-family: 'Avenir Next', sans-serif;
    font-size: 48px;
    font-weight: 700; /* Bold */
    color: #121C66;
    line-height: normal;
    margin: 0;
}

.workjam-product-showcase__ai-description {
    font-family: 'Avenir Next', sans-serif;
    font-size: 16px;
    font-weight: 400; /* Regular */
    color: #121C66;
    line-height: normal;
    margin: 0;
}

.workjam-product-showcase__ai-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    background: #121C66;
    color: #FFFFFF;
    font-family: 'Avenir Next', sans-serif;
    font-size: 16px;
    font-weight: 500; /* Medium */
    text-decoration: none;
    border-radius: 500px;
    white-space: nowrap;
    transition: all 0.3s ease;
    width: fit-content;
}

.workjam-product-showcase__ai-cta:hover {
    background: #0F1754;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(18, 28, 102, 0.3);
    color: #FFFFFF;
}

.workjam-product-showcase__ai-gallery {
    width: 351px;
    height: 401px;
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.workjam-product-showcase__ai-image {
    position: absolute;
    height: 100%;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}

.workjam-product-showcase__ai-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.workjam-product-showcase__ai-image.active {
    opacity: 1;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* Laptop - 1200px */
@media (max-width: 1200px) {
    .workjam-product-showcase {
        padding: 60px 80px 90px;
    }

    .workjam-product-showcase__title {
        font-size: 42px;
    }

    .workjam-product-showcase__card {
        max-width: 1100px;
    }

    .workjam-product-showcase__headline {
        font-size: 32px;
    }

    .workjam-product-showcase__ai-section {
        gap: 100px;
    }

    .workjam-product-showcase__ai-title {
        font-size: 42px;
    }

    .workjam-product-showcase__ai-gallery {
        width: 320px;
        height: 360px;
    }
}

/* Tablet Landscape - 1024px */
@media (max-width: 1024px) {
    .workjam-product-showcase {
        padding: 50px 60px 80px;
    }

    .workjam-product-showcase__container {
        gap: 40px;
    }

    .workjam-product-showcase__title {
        font-size: 38px;
    }

    .workjam-product-showcase__card {
        flex-direction: column;
        align-items: center;
    }

    .workjam-product-showcase__media {
        width: 100%;
        max-width: 500px;
        height: auto;
        aspect-ratio: 500 / 640;
    }

    .workjam-product-showcase__content {
        width: 100%;
    }

    .workjam-product-showcase__headline {
        font-size: 30px;
    }

    .workjam-product-showcase__ai-section {
        flex-direction: column;
        gap: 40px;
    }

    .workjam-product-showcase__ai-title {
        font-size: 38px;
    }

    .workjam-product-showcase__ai-gallery {
        width: 100%;
        max-width: 350px;
    }
}

/* Tablet Portrait - 768px */
@media (max-width: 768px) {
    .workjam-product-showcase {
        padding: 40px 40px 70px;
    }

    .workjam-product-showcase__title {
        font-size: 34px;
    }

    .workjam-product-showcase__subtitle {
        font-size: 15px;
    }

    .workjam-product-showcase__tab {
        padding: 14px 28px;
        font-size: 15px;
    }

    .workjam-product-showcase__media {
        display: none; /* Hide product images on tablet portrait and mobile */
    }

    .workjam-product-showcase__headline {
        font-size: 28px;
    }

    .workjam-product-showcase__eyebrow,
    .workjam-product-showcase__text,
    .workjam-product-showcase__ai-description {
        font-size: 15px;
    }

    .workjam-product-showcase__ai-title {
        font-size: 34px;
    }
}

/* Mobile - 600px */
@media (max-width: 600px) {
    .workjam-product-showcase {
        padding: 35px 20px 60px;
    }

    .workjam-product-showcase__container {
        gap: 35px;
    }

    .workjam-product-showcase__top-section {
        gap: 20px; /* Mobile: reduce gap between tabs and cards */
    }

    .workjam-product-showcase__header {
        margin-bottom: 16px; /* Mobile: extra spacing after header */
    }

    .workjam-product-showcase__title {
        font-size: 30px;
    }

    .workjam-product-showcase__subtitle {
        font-size: 14px;
    }

    .workjam-product-showcase__tabs {
        gap: 10px;
    }

    .workjam-product-showcase__tab {
        padding: 12px 24px;
        font-size: 14px;
    }

    .workjam-product-showcase__card {
        padding: 20px;
        gap: 20px;
    }

    .workjam-product-showcase__media {
        max-width: 100%;
    }

    .workjam-product-showcase__headline {
        font-size: 24px;
    }

    .workjam-product-showcase__eyebrow,
    .workjam-product-showcase__text,
    .workjam-product-showcase__ai-description {
        font-size: 14px;
    }

    .workjam-product-showcase__cta,
    .workjam-product-showcase__ai-cta {
        width: 100%;
        text-align: center;
    }

    .workjam-product-showcase__ai-section {
        padding: 28px;
        gap: 32px;
    }

    .workjam-product-showcase__ai-title {
        font-size: 30px;
    }

    .workjam-product-showcase__ai-gallery {
        height: 320px;
    }
}

/* Small Mobile - 400px */
@media (max-width: 400px) {
    .workjam-product-showcase {
        padding: 30px 16px 50px;
    }

    .workjam-product-showcase__title {
        font-size: 26px;
    }

    .workjam-product-showcase__headline {
        font-size: 22px;
    }

    .workjam-product-showcase__tab {
        padding: 10px 20px;
        font-size: 13px;
    }

    .workjam-product-showcase__card {
        padding: 16px;
        gap: 16px;
    }

    .workjam-product-showcase__ai-section {
        padding: 20px;
    }

    .workjam-product-showcase__ai-title {
        font-size: 26px;
    }

    .workjam-product-showcase__ai-gallery {
        height: 280px;
    }
}