/**
 * Section: Intro Tabs (Industry Tabs)
 * Figma Design Reference: node-id=1690-6426
 * 
 * Design System:
 * - Font: Montserrat
 * - Dark Blue: #004789
 * - Black: #1A1A1A
 * - White: #FFFFFF
 * - Border Radius: 12px for tabs
 * 
 * @package lifesolutions
 */

.section-intro-tabs {
    background: linear-gradient(360deg, #004789 28.67%, #0058A9 61.72%, #0069CB 95.44%);
    padding: 136px 0 142px;
    position: relative;
}

/* ==========================================================================
   Hero Title Area
   ========================================================================== */
.section-intro-tabs .intro-tabs__hero {
    text-align: left;
    padding: 48px 30px 59px;
    margin: 0 auto;
    max-width: 1312px;
}

.section-intro-tabs .intro-tabs__hero-title {
    color: #FFFFFF;
    margin: 0;
}

/* Breadcrumb in Hero */
.intro-tabs__breadcrumb {
    margin-bottom: 16px;
}

.intro-tabs__breadcrumb .breadcrumb__current {
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.5px;
}

.intro-tabs__label {
    display: block;
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 16px;
    text-transform: capitalize;
}

/* ==========================================================================
   Tab Navigation Container
   ========================================================================== */
.intro-tabs__nav {
    display: flex;
    justify-content: flex-start;
    position: relative;
    overflow: visible;
    /* Ensure indicator corners show */
    padding: 0 30px;
}


/* Swiper specific overrides for desktop */
.intro-tabs__nav.swiper {
    /* overflow: visible; */
}



.intro-tabs__tab.swiper-slide {
    width: 20%;
}

/* The SLIDING WHITE INDICATOR */
.intro-tabs__indicator {
    position: absolute;
    bottom: -1px;
    left: 30px;
    height: 100%;
    background-color: #FFFFFF;
    border-radius: 12px 12px 0 0;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    pointer-events: none;
}

/* Concave corners effect - creates the smooth cutout on each side */
.intro-tabs__indicator::before,
.intro-tabs__indicator::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 16px;
    height: 16px;
    background-color: transparent;
}

.intro-tabs__indicator::before {
    left: -16px;
    border-bottom-right-radius: 12px;
    box-shadow: 12px 7px 0 6px #FFFFFF;
}

.intro-tabs__indicator::after {
    right: -16px;
    border-bottom-left-radius: 12px;
    box-shadow: -7px 7px 0 6px #FFFFFF;
}

.intro-tabs__indicator.last-active::after {
    border-radius: 0;
    right: 0px;
    width: 20px;
    height: 52px;
    bottom: -30px;
    background: #fff;
    box-shadow: none;
}

.first-active.intro-tabs__indicator::before {
    border-radius: 0;
    left: 0px;
    width: 20px;
    height: 40px;
    bottom: -17px;
    background: #fff;
    box-shadow: none;
}

/* Tab Buttons */
.intro-tabs__tab {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    background-color: transparent;
    color: rgba(255, 255, 255, 0.9);
    border: none;
    cursor: pointer;
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    position: relative;
    z-index: 2;
    transition: color 0.3s ease;
    white-space: nowrap;
}

.intro-tabs__tab:hover {
    color: #FFFFFF;
}

/* Active tab text becomes dark blue */
.intro-tabs__tab.is-active {
    color: #004789;
}

.intro-tabs__tab-title {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}

/* ==========================================================================
   Tab Content Viewport
   ========================================================================== */
.intro-tabs__viewport {
    overflow: hidden;
    background-color: #FFFFFF;
    border-radius: 20px;
    /* All corners rounded 20px per Figma */
    margin: 0 auto;
    max-width: 1312px;
}

.intro-tabs__panel-inner {
    display: flex;
    gap: 60px;
    /* 60px gap per Figma */
    padding: 50px;
    /* 50px padding per Figma */
    align-items: center;
    flex-wrap: wrap;
}

/* ==========================================================================
   Panel Content
   ========================================================================== */
.intro-tabs__panel-image {
    border-radius: 20px;
    /* 20px per Figma */
    overflow: hidden;
    height: 400px;
    /* Fixed height per Figma */
    width: 47.397%;
}

.intro-tabs__panel-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 20px;
}

.intro-tabs__panel-content {
    padding-right: 0;
    width: calc(52.605% - 60px);
}

.intro-tabs__panel-title {
    color: #004789;
    margin: 0 0 30px;
    text-transform: capitalize;
}

.intro-tabs__panel-description {
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 400;
    line-height: 23px;
    color: #1A1A1A;
    margin: 0 0 60px;
}

/* Button - Primary style */
.intro-tabs__panel-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background-color: #004789;
    color: #FFFFFF;
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-decoration: none;
    border-radius: 100px;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.intro-tabs__panel-link:hover {
    background-color: #003366;
    transform: translateY(-2px);
}

.intro-tabs__panel-link svg {
    transition: transform 0.2s ease;
}

.intro-tabs__panel-link:hover svg {
    transform: translate(2px, -2px);
}

/* ==========================================================================
   Arrow Navigation (Prev/Next)
   ========================================================================== */
.intro-tabs__arrows {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 40px;
    margin-left: -24px;
}

.intro-tabs__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    /* width: 40px; */
    height: 48px;
    border: none;
    background-color: transparent;
    color: #004789;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
    padding: 0;
}

.intro-tabs__arrow:hover {
    color: #003366;
}

.intro-tabs__arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.intro-tabs__arrow:disabled:hover {
    color: #004789;
    transform: none;
}

.intro-tabs__counter {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 500;
    color: #1A1A1A;
}

.intro-tabs__counter-current {
    color: #004789;
    font-weight: 600;
}

.intro-tabs__counter-separator {
    color: #999;
}

.intro-tabs__counter-total {
    color: #666;
}

.intro-tabs__panel-subtitle {
    margin: 0 0 10px;
    color: var(--color-primary);
}

.intro-tabs__camera {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.intro-tabs__panel {
    flex: 0 0 100%;
    min-width: 100%;
}

@media (min-width: 1024px) {
    .intro-tabs__nav-inner.swiper-wrapper {
        display: flex;
        transform: none !important;
        /* Disable swiper transform on desktop */
        justify-content: space-between;
        width: 100%;
    }


    .intro-tabs__nav-inner {
        display: flex;
        position: relative;
        padding: 0;
        border-radius: 12px 12px 0 0;
        overflow: visible;
        width: auto;
        z-index: 2;
    }
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */
@media (max-width: 1200px) {

    .intro-tabs__tab {
        padding: 14px 20px;
        font-size: 14px;
    }

    .intro-tabs__panel-inner {
        gap: 40px;
        padding: 40px;
    }

}

@media (max-width: 1024px) {

    .intro-tabs__nav-inner {
        /* justify-content: flex-start; */
        /* overflow-x: auto; */
        /* overflow-y: hidden; */
    }

    .intro-tabs__indicator {
        border-radius: 12px;
    }

    .intro-tabs__tab {
        padding: 12px 16px;
    }

    .intro-tabs__indicator::before,
    .intro-tabs__indicator::after {
        display: none;
    }

    .intro-tabs__panel-inner {
        gap: 32px;
        padding: 32px;
    }

    .intro-tabs__viewport {
        margin-top: 12px;
    }

}

@media (max-width: 1023px) {
    .section-intro-tabs {
        padding: 88px 0 0;
        /* background: transparent; */
    }

    .section-intro-tabs .intro-tabs__hero {
        padding: 32px 30px 40px;
        position: relative;
        z-index: 1;
    }

    .section-intro-tabs:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 80%;
        background-color: #004789;
        z-index: -1;
        pointer-events: none;
    }

    .section-intro-tabs:after {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-image: url('../../assets/images/Ellipse25.svg');
        background-size: 100% auto;
        background-position: top left;
        pointer-events: none;
        z-index: 0;
    }

    .intro-tabs__label {
        font-size: 14px;
        margin-bottom: 20px;
        opacity: 0.9;
        line-height: 20px;
    }

    /* Horizontal Sliding Tabs with Swiper */
    .intro-tabs__nav {
        padding: 0;
        margin-bottom: 0;
        overflow: hidden;
        /* Use hidden for Swiper functionality */
    }

    .intro-tabs__nav.swiper {
        overflow: hidden;
    }

    .intro-tabs__nav-inner.swiper-wrapper {
        /* display: flex; */
        /* flex-wrap: nowrap; */
        /* transform: none; */
        /* Will be controlled by Swiper */
        width: 100%;
    }

    .intro-tabs__tab.swiper-slide {
        width: auto;
        flex-shrink: 0;
        margin-right: 0;
        /* Spacing handled by Swiper gap or just padding */
        border-radius: 100px;
        /* Pillow style on mobile */
        padding: 8px 16px;
        color: #fff;
    }


    .intro-tabs__tab.swiper-slide.is-active {
        background: #fff;
        color: var(--color-primary);
    }

    .intro-tabs__indicator {
        display: none;
    }

    .intro-tabs__viewport {
        border-radius: 12px;
        /* Rounded all corners if tab acts as pill, or 0 top-left if connected */
        /* To match interaction: if tab is physically connected, we need specific radius. 
           But with scrolling tabs, physically connecting is hard. 
           Usually mobile tabs differ slightly. 
           Let's assume "pill active" sitting on top, so viewport needs rounded top corners too except maybe where tab is?
           simplest match to design image: Card has rounded corners. Active tab sits on top.
        */
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        margin: 12px 0 0;
        background: transparent;
    }

    .intro-tabs__panel {
        /* background: var(--color-primary); */
        padding: 0 30px 50px;
    }

    .section-intro-tabs .container {
        padding: 0;
        position: relative;
        z-index: 2;
    }

    /* Adjust active tab to look connected if possible, or just distinct pill */
    .intro-tabs__tab.is-active {
        /* If we want it to look connected, we'd need it to overlap. 
           For horizontal scroll, standard pill is safer. */
    }

    .intro-tabs__panel-inner {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 0;
        display: block;
        position: relative;
    }

    .intro-tabs__panel-image {
        height: 250px;
        width: 100%;
        border-radius: 20px 20px 0 0;
        padding: 30px 30px 0 30px;
        background: #fff;
    }

    .intro-tabs__panel-content {
        padding-right: 0;
        width: 100%;
    }


    .intro-tabs__panel-description {
        font-size: 15px;
        line-height: 22px;
        margin-bottom: 24px;
    }

    .intro-tabs__arrows {
        justify-content: center;
        margin-top: 31px;
        margin-left: 0;
    }

    .intro-tabs__panel-title {
        padding: 25px 0 10px;
        margin: 0;
        font-size: 20px;
        line-height: 28px;
    }

    .intro-tabs__panel-subtitle {
        font-size: 15px;
        line-height: 22px;
        font-weight: 500;
    }

    .intro-tabs__panel-content-inner {
        background: #fff;
        padding: 0 30px 30px;
        border-radius: 0 0 20px 20px;
    }

    .intro-tabs__panel .intro-tabs__counter span {
        color: #fff;
    }
}

@media (max-width: 480px) {

    .intro-tabs__tab-title {
        font-size: 14px;
    }

    .intro-tabs__panel-link {
        width: 100%;
        justify-content: center;
    }

    .intro-tabs__arrows {
        justify-content: center;
    }
}