/*----------------------------------------*/
/*  HOME — SOLUTIONS                       */
/*  Figma: Frame 586 473-11167             */
/*  Full-bleed image on the left, the      */
/*  accordion and its progress bar on the  */
/*  right. The vertical scrollbar of the   */
/*  old block becomes the pill pagination. */
/*----------------------------------------*/

.solutions-sec {
    /* the design is drawn at 1920: 1046 image + 119 gap + 725 column + 30 inset */
    --sol-media-w: 1046px;
    --sol-media-h: clamp(560px, 46.9vw, 900px);
    --sol-col-w: 725px;
    --sol-gap: clamp(40px, 6.2vw, 119px);

    position: relative;
    z-index: 1;
    padding: clamp(90px, 8.3vw, 160px) 0 0;
    background-color: var(--rd-surface);
}

/* main.css styles every descendant of body, which outranks a plain
   `.solutions-sec` selector — hence the universal one here */
.solutions-sec,
.solutions-sec * {
    font-family: var(--rd-ff);
}


/*--------------------*/
/* - BEHAVIOUR BASE   */
/*--------------------*/
/* Carried over from the old style.css block (now removed) — the accordion
   script in global.js relies on these: it slides .accordion-content open and
   shut, and swaps the image column in step with the active item. */
.solutions-sec .accordion-content {
    display: none;
}

/* each item carries a copy of its image for phones; the media column shows
   it everywhere else */
.solutions-sec .accordion .solutions-img {
    display: none;
}

.solutions-sec .solutions-slider .swiper-wrapper {
    overflow: hidden;
    cursor: default !important;
}

.solutions-sec .solutions-img {
    position: relative;
    overflow: hidden;
}

.solutions-sec .solutions-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* the heading lives in the text column on desktop, above the image below it */
.solutions-sec .title-mobile {
    display: none;
}


/*--------------------*/
/* - LAYOUT           */
/*--------------------*/
/* The image bleeds to the left viewport edge, so the container drops its
   own max-width and keeps an inset on the right side only. */
.solutions-sec .container {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0 var(--rd-gutter) 0 0;
}

.solutions-sec .solutions-slider-wrapp {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--sol-gap);
    margin: 0;
}

.solutions-sec .col-slider {
    flex: 1 1 var(--sol-media-w);
    width: auto;
    max-width: var(--sol-media-w);
    min-width: 0;
    margin: 0;
    padding: 0;
}

.solutions-sec .col-info {
    flex: 0 1 var(--sol-col-w);
    width: auto;
    max-width: var(--sol-col-w);
    min-width: 0;
    margin: 0;
    padding: 0;
}


/*--------------------*/
/* - MEDIA            */
/*--------------------*/
.solutions-sec .solutions-slider {
    max-width: none;
    width: 100%;
    margin: 0;
}

.solutions-sec .solutions-slider .swiper-slide {
    height: var(--sol-media-h) !important;
}

.solutions-sec .solutions-img {
    height: 100%;
    padding-bottom: 0;
    border-radius: 0 var(--rd-radius) var(--rd-radius) 0;
}

/* The old block slid the whole frame around between slides; with the frame
   now pinned to the viewport edge the movement belongs on the image inside. */
.solutions-sec .solutions-slider .swiper-slide .solutions-img {
    transform: none;
}

.solutions-sec .solutions-img img {
    transition: transform .8s cubic-bezier(.19, 1, .22, 1);
}

.solutions-sec .swiper-slide:not(.swiper-slide-active) .solutions-img img {
    transform: scale(1.06);
}


/*--------------------*/
/* - TEXT COLUMN      */
/*--------------------*/
.solutions-sec .accordion-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 60px;
    max-width: none;
    padding: 0;
}

.solutions-sec .accordion-inner > .title,
.solutions-sec .title-mobile {
    font-family: var(--rd-ff-head);
    letter-spacing: 0;
    max-width: 540px;
    margin: 0;
    font-size: clamp(32px, 2.19vw, 42px);
    line-height: 1.16;
    font-weight: 400;
    color: var(--rd-txt-on-light);
    text-transform: uppercase;
}

/* inline marks inside the heading (b, strong, span) keep its face —
   the section's universal `*` rule would reset them to the text font */
.solutions-sec .accordion-inner > .title *,
.solutions-sec .title-mobile * {
    font-family: inherit;
}

/* the design sets the first word solid and lets the rest run light —
   the editor marks it up in the ACF field */
.solutions-sec .accordion-inner > .title b,
.solutions-sec .accordion-inner > .title strong,
.solutions-sec .title-mobile b,
.solutions-sec .title-mobile strong {
    font-weight: 400;
}

.solutions-sec .solutions-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 60px;
    width: 100%;
}

/* the scrollbar is replaced by the pill pagination below */
.solutions-sec .scrollbar-wrapp {
    display: none;
}

.solutions-sec .accordion-wrapp {
    order: 1;
    width: 100%;
    padding: 0;
}

/* style.css floats this to the right of the open item at the same
   specificity, so this selector carries one class more */
.solutions-sec .solutions-info .swiper-controls-wrapp {
    position: static;
    order: 2;
    width: 100%;
    margin: 0;
}


/*--------------------*/
/* - ACCORDION        */
/*--------------------*/
.solutions-sec .accordion {
    margin: 0 0 24px;
}

.solutions-sec .accordion:last-child {
    margin-bottom: 0;
}

.solutions-sec .accordion-title {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding: 0;
    font-size: clamp(24px, 1.67vw, 32px);
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--rd-txt-on-light);
    background-color: transparent;
    transition: opacity var(--rd-transition);
}

/* The design draws the open item exactly like the closed ones — the
   description underneath is what marks it, so only weight/colour are pinned. */
.solutions-sec .accordion.active .accordion-title {
    font-weight: 400;
    color: var(--rd-txt-on-light);
}

/* closed items are the switch — the open one has nothing left to do */
.solutions-sec .accordion:not(.active) .accordion-title {
    cursor: pointer;
}

@media (min-width: 1200px) {
    .solutions-sec .accordion:not(.active) .accordion-title:hover {
        opacity: .6;
    }
}

/* 10px below the title, and enough underneath to reach the 60px the design
   leaves between the open item and the list that follows it */
.solutions-sec .accordion-content {
    padding: 10px 0 36px;
}

.solutions-sec .accordion:last-child .accordion-content {
    padding-bottom: 0;
}

.solutions-sec .accordion-content .text {
    max-width: 567px;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--rd-txt-on-light-muted);
}

.solutions-sec .accordion-content .btn-wrapp {
    margin-top: 30px;
}


/*--------------------*/
/* - CTA              */
/*--------------------*/
.solutions-sec .accordion-content .btn {
    gap: 16px;
    height: 54px;
    min-width: 0;
    padding: 0 20px;
    border-width: 1px;
    border-radius: var(--rd-radius);
    font-size: 18px;
    line-height: 1;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.solutions-sec .accordion-content .btn-secondary {
    border-color: var(--rd-accent);
    background-color: var(--rd-accent);
    color: var(--rd-white);
}

.solutions-sec .accordion-content .btn-secondary::after {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background: url("../../img/redesign/icons/arrow-cta.svg") no-repeat center / contain;
}

.solutions-sec .accordion-content .btn-thirdy {
    border-color: var(--rd-border-on-light);
    background-color: transparent;
    color: var(--rd-txt-on-light);
}

@media (min-width: 1200px) {
    .solutions-sec .accordion-content .btn-secondary:hover {
        border-color: var(--rd-txt-on-light);
        background-color: var(--rd-txt-on-light);
        color: var(--rd-accent);
    }

    .solutions-sec .accordion-content .btn-secondary:hover::after {
        background-image: url("../../img/redesign/icons/arrow-cta-accent.svg?v=6");
    }

    .solutions-sec .accordion-content .btn-thirdy:hover {
        border-color: var(--rd-txt-on-light);
        background-color: transparent;
        color: var(--rd-txt-on-light);
    }
}


/*--------------------*/
/* - PAGINATION       */
/*--------------------*/
.solutions-sec .solutions-info .swiper-controls {
    flex-direction: row;
    width: 100%;
}

/* the design navigates by clicking the pills and the titles — no arrows */
.solutions-sec .solutions-info .swiper-button-prev,
.solutions-sec .solutions-info .swiper-button-next {
    display: none;
}

.solutions-sec .solutions-info .swiper-pagination {
    position: static;
    top: auto;
    right: auto;
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    margin: 0;
    transform: none;
}

/* style.css pins the bullet margin with !important and draws a 2px dark
   ring around every bullet — both have to come off for the pills. */
.solutions-sec .solutions-info .swiper-pagination-bullet {
    width: 64px;
    height: 4px;
    margin: 0 !important;
    border: 0;
    border-radius: 12px;
    background: var(--rd-line-on-light);
    opacity: 1;
    transition: width var(--rd-transition), background-color var(--rd-transition);
}

.solutions-sec .solutions-info .swiper-pagination-bullet:hover {
    background: var(--rd-border-on-light);
}

.solutions-sec .solutions-info .swiper-pagination-bullet-active,
.solutions-sec .solutions-info .swiper-pagination-bullet-active:hover {
    width: 120px;
    background: var(--rd-accent);
}


/*--------------------*/
/* - TABLET (<1200px) */
/*--------------------*/
@media (max-width: 1199px) {
    .solutions-sec {
        --sol-media-h: clamp(360px, 52vw, 560px);
        padding: 80px 0 0;
    }

    .solutions-sec .container {
        padding: 0 var(--rd-gutter);
    }

    .solutions-sec .solutions-slider-wrapp {
        flex-direction: column;
        align-items: stretch;
        gap: 40px;
    }

    /* the image keeps bleeding to the edges once the columns stack */
    .solutions-sec .col-slider {
        flex: 0 0 auto;
        max-width: none;
        margin: 0 calc(var(--rd-gutter) * -1);
    }

    .solutions-sec .col-info {
        flex: 0 0 auto;
        max-width: none;
        padding: 0;
    }

    .solutions-sec .solutions-img {
        border-radius: 0;
    }

    .solutions-sec .title-mobile {
        margin-bottom: 40px;
    }

    .solutions-sec .accordion-inner,
    .solutions-sec .solutions-info {
        gap: 40px;
    }

    .solutions-sec .accordion-content {
        padding: 10px 0 24px;
    }
}


/*--------------------*/
/* - PHONE (<768px)   */
/*--------------------*/
@media (max-width: 767px) {
    /* each section on the phone opens with 60px and the next one closes the
       gap — the About card follows straight on */
    .solutions-sec {
        padding: 60px 0 0;
    }

    .solutions-sec .col-info {
        margin-left: 0;
    }

    .solutions-sec .accordion-wrapp {
        padding: 0;
    }

    /* The media column sits above the list, so a tap on an item further down
       would swap an image the reader can no longer see. On phones each item
       opens with its own image instead, and the titles do the navigating —
       the pills would only repeat them, and six don't fit across anyway. */
    .solutions-sec .col-slider {
        height: 0;
        margin: 0;
        overflow: hidden;
        opacity: 0;
    }

    /* kept alive at zero height: the accordion drives the swiper, so it must
       stay initialised rather than display:none */
    .solutions-sec .solutions-slider-wrapp {
        gap: 0;
    }

    .solutions-sec .accordion .solutions-img {
        display: block;
        height: auto;
        margin-bottom: 16px;
        padding-bottom: 67.2%;
        border-radius: var(--rd-radius);
    }

    .solutions-sec .solutions-info .swiper-controls-wrapp {
        display: none;
    }

    .solutions-sec .accordion-content .btn-wrapp {
        margin-top: 24px;
    }

    .solutions-sec .accordion-content .btn-wrapp > .btn {
        min-width: 0;
        padding: 0 20px;
    }

}