/* =========================================================================
   Work areas ("clients-one" / .wa-section) - CMS-backed capability rail
   -------------------------------------------------------------------------
   Scoped to the .wa-* classes plus the existing .clients-one wrapper, so no
   other homepage section is affected. Loaded after style1.css, which is why
   these rules win without needing !important except where they override an
   earlier !important in style1.css / responsive.css.

   Data note: items come from MasterWorkAreaInformation, which carries an icon
   class OR an uploaded image plus a bilingual title and description. The
   earlier lookup-backed version had labels only, which is why this design
   could not be built before the module existed.
   ========================================================================= */

.clients-one.wa-section {
    position: relative;
}

/* ---------- Shell ---------- */

/* Keeps the template's rounded panel silhouette (.clients-one .inner-container
   in style1.css) and lightens it into the near-white gradient the design uses,
   so the icon wells and the connector line read cleanly on top. */
.clients-one .inner-container.wa-shell {
    position: relative;
    padding: 44px 48px 40px;
    border-radius: 28px;
    background: linear-gradient(180deg, #ffffff 0%, #f3f8fd 100%);
    border: 1px solid rgba(17, 24, 39, .06);
    box-shadow: 0 28px 80px rgba(17, 29, 66, .12);
    overflow: hidden;
}

/* ---------- Header ---------- */

.wa-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 34px;
}

.wa-head_text {
    min-width: 0;
}

.wa-head_eyebrow {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--main-color);
}

.clients-one .wa-head .wa-head_title {
    margin: 0 0 10px;
    font-size: 38px;
    line-height: 1.15;
    font-weight: 800;
    color: #0f2d52;
    /* style1.css pins .clients-one_title to nowrap; this heading is its own class
       but the reset is stated anyway because Arabic headings run longer. */
    white-space: normal;
}

.wa-head_intro {
    margin: 0;
    max-width: 470px;
    font-size: 16px;
    line-height: 1.6;
    color: #6b7a90;
}

/* ---------- Navigation arrows ---------- */

.wa-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.wa-nav_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 50%;
    font-size: 15px;
    cursor: pointer;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease, opacity .25s ease;
}

/* Ghost previous, solid next - the resting state in the design. */
.wa-nav_btn--prev {
    background: #ffffff;
    border: 1px solid rgba(17, 24, 39, .10);
    color: #8794a8;
}

.wa-nav_btn--next {
    background: var(--main-color);
    border: 1px solid var(--main-color);
    color: #ffffff;
}

.wa-nav_btn--prev:hover {
    border-color: rgba(var(--main-color-rgb), .45);
    color: var(--main-color);
}

.wa-nav_btn--next:hover {
    filter: brightness(.94);
}

/* Swiper adds this to whichever end the rail is already at. */
.wa-nav_btn.swiper-button-disabled {
    opacity: .45;
    cursor: default;
}

/* The glyphs are directional, so they mirror with the page. */
.rtl .wa-nav_btn i {
    transform: scaleX(-1);
}

/* ---------- Rail ---------- */

.wa-rail {
    position: relative;
}

/* The connector line that threads the icon wells. Drawn once across the rail at
   the wells' vertical centre and sitting behind them, rather than per item, so
   it needs no knowledge of how many items exist or which one is last - and it
   mirrors for free under RTL. */
.wa-rail::before {
    content: "";
    position: absolute;
    top: 48px;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(17, 24, 39, .09);
    z-index: 0;
    pointer-events: none;
}

.wa-carousel {
    position: relative;
    z-index: 1;
    width: 100%;
    overflow: hidden;
}

.wa-carousel .swiper-wrapper {
    align-items: flex-start;
}

.wa-carousel .swiper-slide {
    height: auto;
}

/* ---------- Item ---------- */

.wa-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 6px;
}

/* Opaque so the connector line stops cleanly at the well's edge. */
.wa-item_media {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: #e9f1fa;
    border: 2px solid transparent;
    color: var(--main-color);
    font-size: 30px;
    line-height: 1;
    transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
    border: solid 1px #c3cdd8;

}

.wa-item_media img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 50%;
}

/* Neither icon nor image: a quiet ring rather than an empty hole. */
.wa-item_media--empty::after {
    content: "";
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px dashed rgba(17, 24, 39, .18);
}

.wa-item_title {
    margin: 0 0 8px;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 700;
    color: #0f2d52;
    /* Two lines matches the design; a longer name ellipsises rather than pushing
       the row out of alignment. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wa-item_text {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #7a8699;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The bar that marks the active item. Its box is reserved on EVERY item and only
   painted when that item is active, so moving the highlight can never change an
   item's height - otherwise the rail would grow and settle again under the
   pointer as it travelled along the row. */
.wa-item::after {
    content: "";
    width: 42px;
    height: 3px;
    margin-top: 16px;
    border-radius: 3px;
    background: transparent;
    transition: background-color .25s ease;
}

/* ---------- Active emphasis ---------- */

/* Exactly one item is lit at a time, and two things can choose it. At rest it is
   Swiper's leading visible slide, which travels with the rail. While the pointer
   is on the rail it is the item under it - .is-hovering on the carousel switches
   the resting rule off, .is-hovered names the replacement. Both get the identical
   treatment, so the highlight reads as one thing moving along the row.

   Both classes come from JsPages/HomeWorkAreas.js rather than from a bare
   :hover, which would drop the highlight in the gap between two slides. See the
   comment on bindWorkAreaHover. */
.wa-carousel:not(.is-hovering) .swiper-slide-active .wa-item_media,
.wa-carousel .wa-item.is-hovered .wa-item_media {
    background: #ffffff;
    border-color: rgb(23 96 144 / 73%);
    box-shadow: 0 6px 18px rgba(var(--main-color-rgb), .16);
}

.wa-carousel:not(.is-hovering) .swiper-slide-active .wa-item::after,
.wa-carousel .wa-item.is-hovered::after {
    background: var(--main-color);
}

/* ---------- Loading placeholders ---------- */

/* Blank shapes shipped in the markup so the rail keeps its height while the
   request is in flight. They carry no text and no data - renderHomeWorkAreas()
   replaces the whole wrapper. Without this the placeholder <span> collapses to
   zero height and the section looks broken for the length of the request. */
.wa-item--skeleton {
    display: block;
    width: 96px;
    height: 96px;
    margin: 0 auto;
    border-radius: 50%;
    background: linear-gradient(90deg,
        rgba(17, 24, 39, .035) 0%,
        rgba(17, 24, 39, .075) 50%,
        rgba(17, 24, 39, .035) 100%);
    background-size: 200% 100%;
    animation: wa-skeleton 1.6s ease-in-out infinite;
}

/* A skeleton is a fixed-height shape, not a real item, so it must not carry the
   active bar's reserved box. */
.wa-item--skeleton::after {
    content: none;
}

@keyframes wa-skeleton {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---------- RTL ---------- */

/* Direction handles the mirroring: .wa-head and .wa-nav are flex rows and the
   carousel gets dir="rtl" from the renderer. Only the Latin-oriented letter
   spacing needs restating, because it damages Arabic letterforms. */
.rtl .wa-head_eyebrow {
    letter-spacing: 0;
    text-transform: none;
}

/* ---------- Responsive ---------- */

@media (max-width: 1199.98px) {
    .clients-one .inner-container.wa-shell {
        padding: 38px 34px 34px;
    }

    .clients-one .wa-head .wa-head_title {
        font-size: 32px;
    }
}

@media (max-width: 991.98px) {
    .clients-one .inner-container.wa-shell {
        padding: 32px 26px 30px;
        border-radius: 24px;
    }

    .clients-one .wa-head .wa-head_title {
        font-size: 28px;
    }

    .wa-head_intro {
        font-size: 15px;
    }
}

@media (max-width: 767.98px) {
    .clients-one .inner-container.wa-shell {
        padding: 28px 18px 26px;
        border-radius: 20px;
    }

    /* The arrows move under the copy so the heading keeps the full width. */
    .wa-head {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        margin-bottom: 26px;
    }

    .wa-nav {
        justify-content: flex-start;
    }

    /* responsive.css hides .clients-one_title below 767px. This heading is its
       own class so it is unaffected, but the size is stepped down here. */
    .clients-one .wa-head .wa-head_title {
        font-size: 24px;
    }

    .wa-head_intro {
        max-width: none;
    }

    .wa-item_media {
        width: 78px;
        height: 78px;
        margin-bottom: 14px;
        font-size: 25px;
    }

    .wa-item_media img {
        width: 40px;
        height: 40px;
    }

    .wa-item--skeleton {
        width: 78px;
        height: 78px;
    }

    /* Track the smaller well so the line still meets the circles' centre. */
    .wa-rail::before {
        top: 39px;
    }

    .wa-item_title {
        font-size: 15px;
    }

    .wa-item_text {
        font-size: 13px;
    }
}

@media (max-width: 575.98px) {
    .clients-one .inner-container.wa-shell {
        padding: 24px 14px 22px;
    }

    .clients-one .wa-head .wa-head_title {
        font-size: 22px;
    }
}

/* The lift and the shimmer are decorative; honour a reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
    .wa-item_media,
    .wa-item::after,
    .wa-nav_btn {
        transition: none;
    }

    .wa-item--skeleton {
        animation: none;
    }
}