/* Slider Section Styles */

/* =============================================================================
   Slider Angle Configuration (CSS Custom Properties)
   
   When slider sections have angled backgrounds, we "lift" the angle UP
   (positive bottom value) instead of pushing it DOWN like regular sections.
   This creates a gap that we close with negative margin.
   
   Formula: margin-bottom = -(lift + 5px buffer)
   ============================================================================= */
:root {
    /* Default angle values (769px - 1199px) */
    --slider-angle-lift: 50px;
    --slider-angle-margin: -55px;

    /* Desktop tight (1025px+) - used by desktop-tightening.css */
    --slider-angle-lift-desktop: 20px;
    --slider-angle-margin-desktop: -25px;

    /* Mobile (<768px) */
    --slider-angle-lift-mobile: 30px;
    --slider-angle-margin-mobile: -35px;
}

.slider-section {
    position: relative;
    width: 100%;
}

.slider-section-background {
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
    position: absolute;
    top: 0;
    left: 0;
}

.slider-section .content-container {
    padding: 60px 40px;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    box-sizing: border-box;
}

.slider-section-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    gap: 20px;
    width: 100%;
    max-width: 100%;
    margin: 0 0 40px 0;
    flex-wrap: nowrap;
}

/* Default header - left aligned */
.slider-section-header {
    font-family: var(--font-family-base);
    font-size: var(--font-h1-size);
    font-weight: 700;
    line-height: var(--font-h1-height);
    color: #006997;
    margin: 0;
    text-transform: none;
    flex: 1;
    min-width: 0;
    text-align: left;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Centered header modifier for homepage */
.slider-section--centered .slider-section-header-row {
    justify-content: center;
}

.slider-section--centered .slider-section-header {
    text-align: center;
}

.slider-section--centered .slider-section-nav {
    position: absolute;
    right: 50px;
}

.slider-section-header-spacer {
    flex: 1;
}

/* Navigation arrows */
.slider-section-nav {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.slider-nav-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    /* Border removed - provided by SVG */
    border: none;
    background: transparent;
    color: #006997;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
}

.slider-nav-btn:hover {
    background: #006997;
    color: #FFFFFF;
}

.slider-nav-btn:focus {
    outline: 2px solid #00A6DD;
    outline-offset: 2px;
}

.slider-nav-btn--disabled,
.slider-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.slider-nav-btn svg {
    /* Precise dimensions per user request */
    width: 24.38px;
    height: 24.38px;
}

/* =============================================================================
   Slider Arrow & Header Colors on Non-White Backgrounds
   SVGs use fill="currentColor", so setting color on the button changes the arrow.
   On any colored background, arrows and header should be white.
   ============================================================================= */
.slider-section.bg-opt-blue .slider-nav-btn,
.slider-section.bg-opt-blue-angle .slider-nav-btn,
.slider-section.bg-opt-blue-dark .slider-nav-btn,
.slider-section.bg-opt-blue-dark-angle .slider-nav-btn,
.slider-section.bg-opt-orange .slider-nav-btn,
.slider-section.bg-opt-orange-angle .slider-nav-btn,
.slider-section.bg-opt-smartsub-orange .slider-nav-btn,
.slider-section.bg-opt-smartsub-orange-angle .slider-nav-btn {
    color: #FFFFFF;
}

.slider-section.bg-opt-blue .slider-nav-btn:hover,
.slider-section.bg-opt-blue-angle .slider-nav-btn:hover,
.slider-section.bg-opt-blue-dark .slider-nav-btn:hover,
.slider-section.bg-opt-blue-dark-angle .slider-nav-btn:hover,
.slider-section.bg-opt-orange .slider-nav-btn:hover,
.slider-section.bg-opt-orange-angle .slider-nav-btn:hover,
.slider-section.bg-opt-smartsub-orange .slider-nav-btn:hover,
.slider-section.bg-opt-smartsub-orange-angle .slider-nav-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
}

.slider-section.bg-opt-blue .slider-section-header,
.slider-section.bg-opt-blue-angle .slider-section-header,
.slider-section.bg-opt-blue-dark .slider-section-header,
.slider-section.bg-opt-blue-dark-angle .slider-section-header,
.slider-section.bg-opt-orange .slider-section-header,
.slider-section.bg-opt-orange-angle .slider-section-header,
.slider-section.bg-opt-smartsub-orange .slider-section-header,
.slider-section.bg-opt-smartsub-orange-angle .slider-section-header {
    color: #FFFFFF;
}

/* Slider track */
.slider-section-track-container {
    overflow-x: auto;
    padding-bottom: 20px;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 0 20px;
    box-sizing: border-box;
    /* Hide scrollbar */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
}

.slider-section-track-container::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari/Webkit */
}

.slider-section-track {
    display: flex;
    gap: 24px;
    will-change: transform;
    /* Keep performance opt from slider.css */
    width: fit-content;
    /* From slider.css */
    margin: 0 auto;
}

/* Slider cards */
.slider-section-card {
    flex: 0 0 auto;
    width: 300px;
    background: linear-gradient(176.43deg, rgba(255, 255, 255, 0) 85.39%, rgba(2, 112, 158, 0.2) 103.46%), #FFFFFF;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.slider-card-image {
    width: 100%;
    height: 260px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.slider-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.slider-card-content {
    padding: 20px;
}

.slider-card-title {
    font-family: var(--font-family-base);
    font-size: 16px !important;
    /* Enforce 16px to override base h3 */
    font-weight: 600;
    line-height: var(--font-h3-height);
    color: #383838;
    margin: 0;
}

.slider-card-body {
    font-family: var(--font-family-base);
    font-size: 14px !important;
    /* Enforce 14px to override base p/li */
    font-weight: 500;
    line-height: var(--font-ui-height);
    color: #666666;
    margin: 10px 0 0 0;
}

/* Static mode - no scroll, 4-up grid */
.slider-section--static .slider-section-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    width: 100%;
}

.slider-section--static .slider-section-card {
    width: auto;
}

/* Slider Section Responsive - 1024px */
@media (max-width: 1024px) {
    .slider-section .content-container {
        padding: 50px 30px;
    }

    .slider-section-header {
        font-size: var(--font-h1-size);
        line-height: 52px;
    }

    .slider-section--static .slider-section-track {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Slider Section Responsive - 768px */
@media (max-width: 768px) {
    .slider-section .content-container {
        padding: 40px 20px;
    }

    .slider-section-header-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin: 0 auto 20px;
        gap: 15px;
        flex-wrap: nowrap;
    }

    .slider-section--centered .slider-section-header-row {
        align-items: center;
    }

    .slider-section--centered .slider-section-nav {
        position: static;
    }

    .slider-section-header {
        font-size: var(--font-h2-size);
        line-height: 40px;
    }

    .slider-section-card {
        width: 260px;
    }

    .slider-card-image {
        height: 200px;
    }

    .slider-section--static .slider-section-track {
        grid-template-columns: 1fr;
    }
}

/* Angle Offset Overrides for Slider Section */
/* 
   OPPOSITE DIRECTION (Positive/Lifted):
   We lift the angle UP (positive bottom) so it cuts into the section.
   Then we apply NEGATIVE MARGIN to the container so the NEXT section
   slides up to cover the resulting gap.
*/

/* Default (769px - 1199px) - Uses CSS variables from :root */
.slider-section.bg-opt-blue-angle,
.slider-section.bg-opt-blue-dark-angle,
.slider-section.bg-opt-orange-angle,
.slider-section.bg-opt-smartsub-orange-angle {
    box-shadow: none !important;
    /* No shadow needed as next section covers gap */
    margin-top: 5px;
    margin-bottom: var(--slider-angle-margin);
    /* z-index removed to allow next section to overlap if higher */
}

.slider-section.bg-opt-blue-angle::after,
.slider-section.bg-opt-blue-dark-angle::after,
.slider-section.bg-opt-orange-angle::after,
.slider-section.bg-opt-smartsub-orange-angle::after,
.slider-section.bg-opt-blue-angle::before,
.slider-section.bg-opt-blue-dark-angle::before,
.slider-section.bg-opt-orange-angle::before,
.slider-section.bg-opt-smartsub-orange-angle::before {
    bottom: var(--slider-angle-lift);
}

/* Ultra Large (>2500px) */
@media (min-width: 2500px) {

    .slider-section.bg-opt-blue-angle,
    .slider-section.bg-opt-blue-dark-angle,
    .slider-section.bg-opt-orange-angle,
    .slider-section.bg-opt-smartsub-orange-angle {
        margin-bottom: -55px;
        /* Increased overlap */
    }

    .slider-section.bg-opt-blue-angle::after,
    .slider-section.bg-opt-blue-dark-angle::after,
    .slider-section.bg-opt-orange-angle::after,
    .slider-section.bg-opt-smartsub-orange-angle::after,
    .slider-section.bg-opt-blue-angle::before,
    .slider-section.bg-opt-blue-dark-angle::before,
    .slider-section.bg-opt-orange-angle::before,
    .slider-section.bg-opt-smartsub-orange-angle::before {
        bottom: 50px;
    }
}

/* Extra Large (1600px - 2499px) */
@media (min-width: 1600px) and (max-width: 2499px) {

    .slider-section.bg-opt-blue-angle,
    .slider-section.bg-opt-blue-dark-angle,
    .slider-section.bg-opt-orange-angle,
    .slider-section.bg-opt-smartsub-orange-angle {
        margin-bottom: -55px;
        /* Increased overlap */
    }

    .slider-section.bg-opt-blue-angle::after,
    .slider-section.bg-opt-blue-dark-angle::after,
    .slider-section.bg-opt-orange-angle::after,
    .slider-section.bg-opt-smartsub-orange-angle::after,
    .slider-section.bg-opt-blue-angle::before,
    .slider-section.bg-opt-blue-dark-angle::before,
    .slider-section.bg-opt-orange-angle::before,
    .slider-section.bg-opt-smartsub-orange-angle::before {
        bottom: 50px;
    }
}

/* Large (1200px - 1599px) */
@media (min-width: 1200px) and (max-width: 1599px) {

    .slider-section.bg-opt-blue-angle,
    .slider-section.bg-opt-blue-dark-angle,
    .slider-section.bg-opt-orange-angle,
    .slider-section.bg-opt-smartsub-orange-angle {
        margin-bottom: -55px;
        /* Increased overlap */
    }

    .slider-section.bg-opt-blue-angle::after,
    .slider-section.bg-opt-blue-dark-angle::after,
    .slider-section.bg-opt-orange-angle::after,
    .slider-section.bg-opt-smartsub-orange-angle::after,
    .slider-section.bg-opt-blue-angle::before,
    .slider-section.bg-opt-blue-dark-angle::before,
    .slider-section.bg-opt-orange-angle::before,
    .slider-section.bg-opt-smartsub-orange-angle::before {
        bottom: 50px;
    }
}

/* Tablet (<768px) - Uses mobile CSS variables */
@media (max-width: 768px) {

    .slider-section.bg-opt-blue-angle,
    .slider-section.bg-opt-blue-dark-angle,
    .slider-section.bg-opt-orange-angle,
    .slider-section.bg-opt-smartsub-orange-angle {
        margin-bottom: var(--slider-angle-margin-mobile);
    }

    .slider-section.bg-opt-blue-angle::after,
    .slider-section.bg-opt-blue-dark-angle::after,
    .slider-section.bg-opt-orange-angle::after,
    .slider-section.bg-opt-smartsub-orange-angle::after,
    .slider-section.bg-opt-blue-angle::before,
    .slider-section.bg-opt-blue-dark-angle::before,
    .slider-section.bg-opt-orange-angle::before,
    .slider-section.bg-opt-smartsub-orange-angle::before {
        bottom: var(--slider-angle-lift-mobile);
    }
}

/* Mobile (<480px) - Uses mobile CSS variables (same as tablet) */
@media (max-width: 480px) {

    .slider-section.bg-opt-blue-angle,
    .slider-section.bg-opt-blue-dark-angle,
    .slider-section.bg-opt-orange-angle,
    .slider-section.bg-opt-smartsub-orange-angle {
        margin-bottom: var(--slider-angle-margin-mobile);
    }

    .slider-section.bg-opt-blue-angle::after,
    .slider-section.bg-opt-blue-dark-angle::after,
    .slider-section.bg-opt-orange-angle::after,
    .slider-section.bg-opt-smartsub-orange-angle::after,
    .slider-section.bg-opt-blue-angle::before,
    .slider-section.bg-opt-blue-dark-angle::before,
    .slider-section.bg-opt-orange-angle::before,
    .slider-section.bg-opt-smartsub-orange-angle::before {
        bottom: var(--slider-angle-lift-mobile);
    }
}

/* =============================================================================
   Desktop Overrides (Consolidated from desktop-tightening.css)
   ============================================================================= */
@media (min-width: 1025px) {
    .slider-section .content-container {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .slider-section-header {
        font-size: var(--font-h2-size);
        line-height: 49px;
    }

    .slider-card-title {
        font-size: var(--font-lead-size);
        line-height: 24px;
    }

    .slider-section-track {
        gap: 32px;
    }

    .slider-card-image {
        height: 220px;
    }

    /* Angle Overrides using CSS Variables */
    .slider-section.bg-opt-blue-angle,
    .slider-section.bg-opt-blue-dark-angle,
    .slider-section.bg-opt-orange-angle,
    .slider-section.bg-opt-smartsub-orange-angle {
        margin-bottom: var(--slider-angle-margin-desktop) !important;
    }

    .slider-section.bg-opt-blue-angle::after,
    .slider-section.bg-opt-blue-dark-angle::after,
    .slider-section.bg-opt-orange-angle::after,
    .slider-section.bg-opt-smartsub-orange-angle::after,
    .slider-section.bg-opt-blue-angle::before,
    .slider-section.bg-opt-blue-dark-angle::before,
    .slider-section.bg-opt-orange-angle::before,
    .slider-section.bg-opt-smartsub-orange-angle::before {
        bottom: var(--slider-angle-lift-desktop) !important;
    }
}