/* =====================================================
   SOLUTIONS SECTION — pinned (sticky) horizontal scroll
   Desktop (>1024px): section is pinned while the 3 cards
   translate horizontally, one card per screen of scroll.
   Tablet/mobile (<=1024px): falls back to a vertical stack.
   ===================================================== */

.cp-solutions {
    background: #141517;
    position: relative;
    overflow: clip; /* clips border-radius without breaking sticky inside */
    border-radius: 44px;
    margin: 10px;
}

.cp-solutions .container {
    max-width: 1480px;
    /* GSAP ScrollTrigger pins the whole .cp-solutions section (no CSS sticky).
       The container is just the full-viewport pinned stage: heading in-flow
       on top, horizontal viewport filling the rest. */
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* =====================================================
   HEADING PANEL — in-flow at the top of the pinned stage
   ===================================================== */

.cp-solutions__sticky {
    position: static;
    flex: 0 0 auto;
    padding: 50px 40px 24px;
    background: #141517;
    z-index: 2;
}

.cp-solutions__sticky-inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cp-solutions__label {
    font-family: 'MonoBlack', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.009em;
    background: linear-gradient(90deg, #FF9626 0%, #FFB15D 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    text-transform: uppercase;
}

.cp-solutions__heading {
    margin: 0;
    color: #F7F7F7;
    text-transform: none;
    font-family: "SF UI Display", sans-serif;
    font-weight: 400;
    font-size: 54px;
    line-height: 62px;
    letter-spacing: -2%;
}

.cp-solutions__heading span {
    color: #FF9626;
}

/* Progress bar */

.cp-solutions__progress {
    margin-top: 16px;
    width: 100%;
    height: 2px;
    background: rgba(247, 247, 247, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.cp-solutions__progress-bar {
    height: 100%;
    width: 0%;
    background: var(--cp-accent, #FF9626);
    border-radius: 2px;
    transition: width 0.1s linear;
}

/* =====================================================
   HORIZONTAL SCROLL VIEWPORT — fills height left below heading
   ===================================================== */

.cp-solutions__viewport {
    flex: 1 1 auto;
    min-height: 0; /* allow the flex child to shrink so cards never overflow */
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
}

.cp-solutions__track {
    display: flex;
    gap: 0;
    will-change: transform;
    /* No CSS transition — GSAP owns the transform every frame (scrub + snap).
       A transition here would re-ease each GSAP write and lag/fight the snap. */
    height: 100%;
    align-items: stretch;
}

/* =====================================================
   SINGLE ITEM (card)
   ===================================================== */

.cp-solutions__item {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    display: grid!important;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    /* heading is now in-flow above; card just fills the viewport's leftover height */
    padding: 24px 60px 40px 40px;
    align-items: center;
    box-sizing: border-box;
    /* JS eases per-card opacity + translateY on transition (fade-in / settle) */
    will-change: opacity, transform;
}

/* =====================================================
   CONTENT (left half of item)
   ===================================================== */

.cp-solutions__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 452px;
    width: 100%;
}

.cp-solutions__icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 40px;
    height: 40px;
    background: rgba(247, 247, 247, 0.1);
    border-radius: 50%;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow:
            inset 8px 8px 20px rgba(255,255,255,0.08),
            inset -10px -10px 24px rgba(0,0,0,0.35),
            0 20px 40px rgba(0,0,0,0.45);
    overflow: hidden;
}

.cp-solutions__icon::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: 1.5px;

    background: linear-gradient(
            90deg,
            rgba(255,255,255,0.7) 0%,
            rgba(255,255,255,0.15) 30%,
            rgba(255,255,255,0.05) 50%,
            rgba(255,255,255,0.15) 70%,
            rgba(255,255,255,0.7) 100%
    );

    -webkit-mask:
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;
    mask-composite: exclude;

    pointer-events: none;
}

/* soft top glow */
.cp-solutions__icon::after {
    content: "";
    position: absolute;
    top: 12px;
    left: 40px;

    width: 45%;
    height: 22%;

    border-radius: 50%;

    background: rgba(255,255,255,0.12);
    filter: blur(18px);

    pointer-events: none;
}

.cp-solutions__icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.cp-solutions__title {
    font-size: 36px;
    line-height: 44px;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: #F7F7F7;
    text-transform: none;
}

.cp-solutions__subtitle {
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 400;
    letter-spacing: 0.03em;
    color: #FF9626;
}

/* Block */

.cp-solutions__block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cp-solutions__block-label {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.01em;
    color: #B9B9BA;
}

/* Checklist */

.cp-solutions__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cp-solutions__list li {
    padding-left: 18px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: #F7F7F7;
    position: relative;
}

.cp-solutions__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cp-accent, #FF9626);
    flex-shrink: 0;
}

/* Tags */

.cp-solutions__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cp-solutions__tag {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 20px;
    background: #F7F7F700;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow:
            inset 8px 8px 20px rgba(255,255,255,0.08),
            inset -10px -10px 24px rgba(0,0,0,0.35),
            0 20px 40px rgba(0,0,0,0.45);
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: #D2D2D2;
    white-space: nowrap;
}

.cp-solutions__tag::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1.5px;

    background: linear-gradient(
            90deg,
            rgba(255,255,255,0.7) 0%,
            rgba(255,255,255,0.15) 30%,
            rgba(255,255,255,0.05) 50%,
            rgba(255,255,255,0.15) 70%,
            rgba(255,255,255,0.7) 100%
    );

    -webkit-mask:
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;
    mask-composite: exclude;

    pointer-events: none;
}

/* soft top glow */
.cp-solutions__tag::after {
    content: "";
    position: absolute;
    top: 12px;
    left: 40px;

    width: 45%;
    height: 22%;

    border-radius: 50%;

    background: rgba(255,255,255,0.12);
    filter: blur(18px);

    pointer-events: none;
}

/* =====================================================
   MEDIA (right half of item)
   ===================================================== */

.cp-solutions__media {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
}

.cp-solutions__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    max-height: 100%;
}

.cp-solutions__img-placeholder {
    width: 100%;
    max-height: 480px;
    min-height: 320px;
    background: #16181C;
    border-radius: 20px;
    border: 1px solid rgba(247, 247, 247, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "SF Mono", "Fira Mono", monospace;
    font-size: 20px;
    font-weight: 500;
    color: var(--cp-text, #F7F7F7);
    letter-spacing: -0.01em;
}

/* =====================================================
   STATIC FALLBACK — prefers-reduced-motion at desktop widths.
   JS adds `.is-static` so the section stacks vertically with normal
   scroll (no pin/scrub), regardless of viewport width. Mirrors the
   tablet layout below. Higher specificity than the short-height tiers,
   so it wins over them.
   ===================================================== */

.cp-solutions.is-static { overflow: hidden; }

.cp-solutions.is-static .container {
    height: auto;
    overflow: visible;
}

.cp-solutions.is-static .cp-solutions__progress { display: none; }

.cp-solutions.is-static .cp-solutions__viewport {
    display: block;       /* not a flex row — let the track be a full-width block */
    height: auto;
    overflow: visible;
}

.cp-solutions.is-static .cp-solutions__track {
    flex-direction: column;
    width: 100%;          /* lock to viewport width; never shrink-wrap to image size */
    transform: none !important;
    transition: none;
    height: auto;
}

.cp-solutions.is-static .cp-solutions__media { height: auto; }
.cp-solutions.is-static .cp-solutions__img   { height: auto; }
.cp-solutions.is-static .cp-solutions__content,
.cp-solutions.is-static .cp-solutions__media { min-width: 0; }
.cp-solutions.is-static .cp-solutions__tag   { white-space: normal; }

.cp-solutions.is-static .cp-solutions__item {
    flex: none;
    width: 100%;
    height: auto;
    opacity: 1 !important;
    transform: none !important;
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 40px 40px;
    align-items: start;
}

.cp-solutions.is-static .cp-solutions__content {
    max-height: none;
    overflow: visible;
}

.cp-solutions.is-static .cp-solutions__media { order: -1; }

.cp-solutions.is-static .cp-solutions__img-placeholder { min-height: 220px; }

/* =====================================================
   RESPONSIVE — tablet: stack vertically, normal scroll
   ===================================================== */

@media (max-width: 1024px) {
    .cp-solutions {
        overflow: hidden;
    }

    .cp-solutions .container {
        position: static;
        height: auto;
        overflow: visible;
        display: flex;
        flex-direction: column;
    }

    .cp-solutions__sticky {
        position: static;
        background: none;
        width: 100%;
        padding: 72px 24px 40px;
    }

    .cp-solutions__progress {
        display: none;
    }

    .cp-solutions__viewport {
        display: block;       /* not a flex row — let the track be a full-width block */
        height: auto;
        overflow: visible;
    }

    .cp-solutions__track {
        flex-direction: column;
        width: 100%;          /* lock to viewport width; never shrink-wrap to image size */
        transform: none;
        transition: none;
        height: auto;
    }

    .cp-solutions__item {
        flex: none;
        width: 100%;
        height: auto;
        padding: 40px 24px;
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* Let the single grid column shrink to the viewport — without this its
       `auto` minimum is driven by min-content, which a long nowrap tag below
       would balloon, pushing the whole card (and image) past the screen. */
    .cp-solutions__content,
    .cp-solutions__media {
        min-width: 0;
    }

    /* Long sentence-tags must wrap on a narrow column instead of forcing it wide. */
    .cp-solutions__tag {
        white-space: normal;
    }

    .cp-solutions__media {
        order: -1;
        height: auto;         /* card is auto-height now — don't stretch to 100% */
    }

    .cp-solutions__img {
        height: auto;         /* scale by width; full 1334×1400 image stays visible */
    }

    .cp-solutions__img-placeholder {
        min-height: 220px;
    }
}

@media (max-width: 768px) {
    .cp-solutions__sticky {
        padding: 60px 16px 32px;
    }

    .cp-solutions__item {
        padding: 32px 16px;
    }

    .cp-solutions__title {
        font-size: 22px;
    }
}

/* =====================================================
   MOBILE SWIPER — <=768px
   The viewport becomes a Swiper container; the track
   becomes swiper-wrapper. Desktop/tablet CSS above is
   overridden only inside this breakpoint.
   ===================================================== */

@media (max-width: 768px) {
    /* Make the viewport a proper Swiper container */
    .cp-solutions__viewport {
        overflow: hidden;
        position: relative;
        padding-bottom: 40px; /* room for the pagination dots */
    }

    /* Undo the <=1024px column so Swiper can lay slides out horizontally.
       transform is left as a plain (non-!important) initial value so Swiper
       can freely overwrite it via its own inline style. */
    .cp-solutions__track {
        flex-direction: row !important;
        height: auto;
        transform: none;
        transition: none;
        width: 100%;
    }

    /* Each slide fills the full width of the viewport */
    .cp-solutions__item {
        flex: 0 0 100%;
        width: 100%;
        height: auto;
        padding: 0 16px 32px;
        opacity: 1 !important;
        transform: none;
    }

    /* Pagination dots */
    .cp-solutions__swiper-pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        position: absolute;
        bottom: 12px;
        left: 0;
        right: 0;
        z-index: 10;
    }

    .cp-solutions__swiper-pagination .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
        background: rgba(247, 247, 247, 0.3);
        border-radius: 50%;
        opacity: 1;
        transition: background 0.2s ease, transform 0.2s ease;
    }

    .cp-solutions__swiper-pagination .swiper-pagination-bullet-active {
        background: #FF9626;
        transform: scale(1.4);
    }
}

/* Hide pagination on tablet and desktop */
@media (min-width: 769px) {
    .cp-solutions__swiper-pagination {
        display: none;
    }
}

/* =====================================================
   SHORT DESKTOP VIEWPORTS — scale the card down so it
   fits the pinned 100vh stage (pinned mode only, >1024px).
   Heading-shrink targets only the section H2 via .__sticky.
   ===================================================== */

@media (min-width: 1025px) and (max-height: 900px) {
    .cp-solutions__sticky { padding: 36px 40px 18px; }
    .cp-solutions__sticky .cp-solutions__heading { font-size: 44px; line-height: 50px; }
    .cp-solutions__item { padding: 20px 60px 28px 40px; }
    .cp-solutions__content { gap: 18px; }
    .cp-solutions__title { font-size: 30px; line-height: 38px; }
    .cp-solutions__subtitle { font-size: 18px; line-height: 25px; }
}

@media (min-width: 1025px) and (max-height: 800px) {
    .cp-solutions__sticky { padding: 26px 40px 14px; }
    .cp-solutions__sticky .cp-solutions__heading { font-size: 36px; line-height: 42px; }
    .cp-solutions__progress { display: none; }
    .cp-solutions__item { padding: 16px 56px 20px 40px; }
    .cp-solutions__content { gap: 14px; }
    .cp-solutions__icon { width: 42px; height: 42px; }
    .cp-solutions__title { font-size: 26px; line-height: 32px; }
    .cp-solutions__subtitle { font-size: 16px; line-height: 22px; }
    .cp-solutions__block { gap: 7px; }
    .cp-solutions__block-label { font-size: 13px; line-height: 18px; }
    .cp-solutions__list li { font-size: 14px; line-height: 20px; }
    .cp-solutions__tag { font-size: 14px; line-height: 20px; padding: 4px 10px; }
}

@media (min-width: 1025px) and (max-height: 720px) {
    .cp-solutions__sticky { padding: 20px 40px 12px; }
    .cp-solutions__sticky .cp-solutions__heading { font-size: 30px; line-height: 36px; }

    /* Below the legible shrink floor: stretch the card and let only
       overflowing content scroll inside it, so nothing is ever cut. */
    .cp-solutions__item { padding: 12px 52px 16px 40px; align-items: stretch; }
    .cp-solutions__content {
        gap: 12px;
        min-height: 0;
        max-height: 100%;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(247, 247, 247, 0.25) transparent;
        padding-right: 8px;
    }
    .cp-solutions__content::-webkit-scrollbar { width: 6px; }
    .cp-solutions__content::-webkit-scrollbar-thumb {
        background: rgba(247, 247, 247, 0.25);
        border-radius: 3px;
    }
    .cp-solutions__icon { width: 38px; height: 38px; }
    .cp-solutions__title { font-size: 24px; line-height: 30px; }
    .cp-solutions__subtitle { font-size: 15px; line-height: 21px; }
    .cp-solutions__list li { font-size: 13px; line-height: 19px; }
    .cp-solutions__tag { font-size: 13px; line-height: 19px; }
}