/*----------------------------------------*/
/*  SOLUTIONS PAGE (page-solutions.php)    */
/*  No Figma frame — built from the home   */
/*  Solutions block and the category       */
/*  banner: plate tabs, a rounded photo    */
/*  with a glass text panel, and a thin    */
/*  accent timer bar under it.             */
/*                                         */
/*  global.js drives it: `.caption.active` */
/*  and `.solutions-entry.active` switch   */
/*  every 5s, `.mob-select.fixed` /        */
/*  `.mob-caption.fixed` pin the tabs under */
/*  the header while scrolling, and on     */
/*  phones the tabs fold into a select.    */
/*  Replaces the old SOLUTION PAGE block   */
/*  in style.css.                          */
/*----------------------------------------*/

body.page-template-page-solutions {
    --sol-tab-h: 46px;
    --sol-media-h: clamp(520px, 41.7vw, 800px);
}


/*--------------------*/
/* - CATEGORY TABS    */
/*--------------------*/
body.page-template-page-solutions .solution-category {
    position: relative;
    z-index: 10;
    /* keeps its place while the tab row is pinned under the header */
    min-height: calc(var(--sol-tab-h) + 30px);
    padding: 0 var(--rd-gutter) 30px;
    background-color: var(--rd-surface);
    font-size: 0;
    line-height: 1;
}

body.page-template-page-solutions .solution-category .close-layer,
body.page-template-page-solutions .solution-category .mob-caption {
    display: none;
}

body.page-template-page-solutions .solution-category .mob-select {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: var(--in-wide);
    margin: 0 auto;
}

body.page-template-page-solutions .solution-category .mob-select.fixed {
    position: fixed;
    top: var(--rd-hdr-stick);
    left: 0;
    right: 0;
    z-index: 50;
    max-width: none;
    padding: 12px var(--rd-gutter);
    background-color: rgba(246, 246, 246, .92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--rd-line-on-light);
}

body.page-template-page-solutions .solution-category .caption {
    display: inline-flex;
    align-items: center;
    height: var(--sol-tab-h);
    padding: 0 20px;
    border-radius: var(--rd-radius);
    font-size: 14px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0;
    white-space: nowrap;
    text-transform: uppercase;
    color: var(--rd-txt-on-light-muted);
    cursor: pointer;
    transition: background-color var(--rd-transition), color var(--rd-transition);
}

body.page-template-page-solutions .solution-category .caption::after {
    content: none;
}

body.page-template-page-solutions .solution-category .caption.active {
    background-color: var(--rd-dark);
    color: var(--rd-white);
    cursor: default;
}

@media (min-width: 1200px) {
    body.page-template-page-solutions .solution-category .caption:not(.active):hover {
        background-color: #E8E8E8;
        color: var(--rd-txt-on-light);
    }
}


/*--------------------*/
/* - SLIDES           */
/*--------------------*/
body.page-template-page-solutions .solutions-entries {
    position: relative;
    height: var(--sol-media-h);
    margin: 0 var(--rd-gutter);
    padding: 0;
    border-radius: var(--rd-radius);
    background-color: var(--rd-dark);
    overflow: hidden;
}

body.page-template-page-solutions .solutions-entry {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s cubic-bezier(.19, 1, .22, 1), visibility .8s;
}

/* before the script marks one active the first slide shows */
body.page-template-page-solutions .solutions-entries:not(:has(.active)) .solutions-entry:first-child,
body.page-template-page-solutions .solutions-entry.active {
    z-index: 2;
    opacity: 1;
    visibility: visible;
}

body.page-template-page-solutions .solutions-entry > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    transform: scale(1.04);
    transition: transform 6s linear;
}

body.page-template-page-solutions .solutions-entry.active > img {
    transform: scale(1);
}

body.page-template-page-solutions .solutions-entry::before {
    content: '';
    position: absolute;
    top: 35%;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(32, 32, 32, 0) 0%, rgba(32, 32, 32, .55) 100%);
}

/* glass panel, as on the category banner */
body.page-template-page-solutions .solutions-entry .solutions-entry-text {
    position: absolute;
    top: auto;
    right: auto;
    bottom: 30px;
    left: 30px;
    z-index: 2;
    width: calc(100% - 60px);
    max-width: 725px;
    margin: 0;
    padding: 30px;
    background-color: var(--rd-glass);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid var(--rd-glass-border);
    border-radius: var(--rd-radius);
    text-align: left;
    transform: none;
    transition: opacity .25s ease;
}

/* the outgoing panel clears before the next one fades in, so two panels
   never show through each other during the crossfade */
body.page-template-page-solutions .solutions-entry:not(.active) .solutions-entry-text {
    opacity: 0;
}

body.page-template-page-solutions .solutions-entries:not(:has(.active)) .solutions-entry:first-child .solutions-entry-text {
    opacity: 1;
}

body.page-template-page-solutions .solutions-entry.active .solutions-entry-text {
    opacity: 1;
    transition: opacity .6s ease .35s;
}

body.page-template-page-solutions .solutions-entry-text .container,
body.page-template-page-solutions .solutions-entry-text .row,
body.page-template-page-solutions .solutions-entry-text .row > [class*="col-"] {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

body.page-template-page-solutions .solutions-entry-text .row {
    display: block;
}

body.page-template-page-solutions .solutions-entry-text .title {
    margin: 0 0 16px;
    font-family: var(--rd-ff-head);
    font-size: clamp(30px, 2.2vw, 42px);
    line-height: 1.16;
    font-weight: 300;
    letter-spacing: 0;
    color: var(--rd-white);
    text-transform: none;
}

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

body.page-template-page-solutions .solutions-entry-text .bottom-info {
    display: block;
}

body.page-template-page-solutions .solutions-entry-text .bottom-info .text {
    max-width: none;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 300;
    letter-spacing: 0;
    color: var(--rd-txt-muted);
}

body.page-template-page-solutions .solutions-entry-text .btn-wrapp {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 30px 0 0;
}

body.page-template-page-solutions .solutions-entry-text .btn-wrapp > * {
    margin: 0;
}


/*--------------------*/
/* - TIMER BAR        */
/*--------------------*/
body.page-template-page-solutions .progress-line {
    position: relative;
    height: 4px;
    margin: 20px var(--rd-gutter) var(--in-section);
    border-radius: var(--rd-radius-pill);
    background-color: var(--rd-line-on-light);
    overflow: hidden;
}

body.page-template-page-solutions .progress-line i {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background-color: var(--rd-accent);
}

/* global.js restarts the 5s cycle by toggling this class */
body.page-template-page-solutions .progress-line.start-animation i {
    animation: rd-sol-progress 5s linear infinite;
}

@keyframes rd-sol-progress {
    from { width: 0; }
    to { width: 100%; }
}


/*--------------------*/
/* - TABLET (<1200px) */
/*--------------------*/
@media (max-width: 1199px) {
    body.page-template-page-solutions .solutions-entry .solutions-entry-text {
        bottom: 20px;
        left: 20px;
        width: calc(100% - 40px);
        max-width: 600px;
        padding: 24px;
    }

    body.page-template-page-solutions .solutions-entry-text .bottom-info .text {
        font-size: 16px;
    }
}


/*--------------------*/
/* - PHONE (<768px)   */
/*--------------------*/
/* The script stops the timer here and the slides stack as cards; the tabs
   fold into a select that scrolls to the chosen card. */
@media (max-width: 767px) {
    body.page-template-page-solutions .solution-category {
        min-height: 0;
        padding: 0 var(--rd-gutter) 24px;
    }

    body.page-template-page-solutions .solution-category .mob-caption {
        display: block;
    }

    body.page-template-page-solutions .solution-category .mob-caption.fixed {
        position: fixed;
        top: var(--rd-hdr-stick);
        left: 0;
        right: 0;
        z-index: 50;
        padding: 8px var(--rd-gutter);
        background-color: rgba(246, 246, 246, .92);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--rd-line-on-light);
    }

    body.page-template-page-solutions .solution-category .mob-caption span {
        position: relative;
        display: flex;
        align-items: center;
        height: 54px;
        padding: 0 44px 0 16px;
        background-color: var(--rd-white);
        border: 1px solid rgba(32, 32, 32, .1);
        border-radius: var(--rd-radius);
        font-size: 14px;
        line-height: 1;
        font-weight: 500;
        color: var(--rd-txt-on-light);
        cursor: pointer;
    }

    /* line chevron, as on the product page selects */
    body.page-template-page-solutions .solution-category .mob-caption span::before {
        content: '';
        position: absolute;
        top: 50%;
        right: 20px;
        width: 8px;
        height: 8px;
        margin: 0;
        border: solid var(--rd-txt-on-light);
        border-width: 0 1.5px 1.5px 0;
        transform: translateY(-75%) rotate(45deg);
        transition: transform var(--rd-transition);
    }

    body.page-template-page-solutions .solution-category.open .mob-caption span::before {
        transform: translateY(-25%) rotate(-135deg);
    }

    body.page-template-page-solutions .solution-category .close-layer {
        position: fixed;
        inset: 0;
        z-index: 3;
    }

    body.page-template-page-solutions .solution-category.open .close-layer {
        display: block;
    }

    body.page-template-page-solutions .solution-category .mob-select,
    body.page-template-page-solutions .solution-category .mob-select.fixed {
        position: absolute;
        top: 58px;
        right: var(--rd-gutter);
        left: var(--rd-gutter);
        z-index: 4;
        display: block;
        width: auto;
        max-width: none;
        margin: 0;
        padding: 6px;
        background-color: var(--rd-white);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border: 1px solid rgba(32, 32, 32, .1);
        border-radius: var(--rd-radius);
        box-shadow: 0 12px 32px rgba(32, 32, 32, .08);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity var(--rd-transition), visibility var(--rd-transition), transform var(--rd-transition);
    }

    body.page-template-page-solutions .solution-category .mob-caption.fixed + .mob-select {
        position: fixed;
        top: calc(var(--rd-hdr-stick) + 66px);
    }

    body.page-template-page-solutions .solution-category.open .mob-select {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    body.page-template-page-solutions .solution-category .caption {
        display: flex;
        height: 48px;
        padding: 0 12px;
        font-size: 18px;
        font-weight: 400;
        text-transform: none;
        color: var(--rd-txt-on-light);
        cursor: pointer;
    }

    body.page-template-page-solutions .solution-category .caption.active {
        background-color: var(--rd-surface);
        color: var(--rd-accent);
        font-weight: 500;
    }

    body.page-template-page-solutions .solutions-entries {
        display: flex;
        flex-direction: column;
        gap: 16px;
        height: auto;
        margin: 0 var(--rd-gutter) 60px;
        background-color: transparent;
        border-radius: 0;
        overflow: visible;
    }

    body.page-template-page-solutions .solutions-entry,
    body.page-template-page-solutions .solutions-entries:not(:has(.active)) .solutions-entry:first-child {
        position: relative;
        inset: auto;
        height: auto;
        background-color: var(--rd-white);
        border-radius: var(--rd-radius);
        overflow: hidden;
        opacity: 1;
        visibility: visible;
        line-height: normal;
    }

    body.page-template-page-solutions .solutions-entry::before {
        content: none;
    }

    body.page-template-page-solutions .solutions-entry > img {
        position: relative;
        display: block;
        height: 240px;
        transform: none;
    }

    body.page-template-page-solutions .solutions-entry:not(.active) .solutions-entry-text {
        opacity: 1;
    }

    body.page-template-page-solutions .solutions-entry .solutions-entry-text {
        position: relative;
        bottom: auto;
        left: auto;
        width: 100%;
        max-width: none;
        padding: 20px;
        background-color: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border: 0;
        border-radius: 0;
    }

    body.page-template-page-solutions .solutions-entry-text .title {
        margin-bottom: 12px;
        font-family: var(--rd-ff-head);
        font-size: 28px;
        color: var(--rd-txt-on-light);
    }

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

    body.page-template-page-solutions .solutions-entry-text .bottom-info .text {
        color: var(--rd-txt-on-light-muted);
    }

    body.page-template-page-solutions .solutions-entry-text .btn-wrapp {
        flex-direction: column;
        margin-top: 20px;
    }

    body.page-template-page-solutions .solutions-entry-text .btn-wrapp > .btn {
        width: 100%;
    }

    /* the glass outline has no photo behind it on a white card */
    body.page-template-page-solutions .solutions-entry-text .rd-btn-glass {
        border-color: var(--rd-border-on-light);
        color: var(--rd-txt-on-light);
    }

    body.page-template-page-solutions .progress-line {
        display: none;
    }
}