/* =====================================================================
   OUR CLIENTS PAGE — our-clients.php
   Headings, eyebrow, sub text and buttons come from the shared
   common.css and buttons.css. This file only styles the page itself.

   1. Section background
   2. Industry filters
   3. Logo grid
   4. Call to action
   5. Tablet and phone
   ===================================================================== */

/* ---------- 1. SECTION BACKGROUND ---------- */
.cs-clients {
    --clients-line: #d7e6ef;

    background:
        radial-gradient(ellipse at 50% 0%, #d5ecf8 0%, transparent 48%),
        linear-gradient(180deg, #eef8fd 0%, #fbfdff 42%, #eef8fd 100%);
}

.cs-clients [hidden] {
    display: none !important;
}

.cs-clients__directory {
    padding: clamp(14px, 3vw, 34px);
    border: 1px solid #fff;
    border-radius: clamp(18px, 3vw, 28px);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 18px 54px rgba(16, 64, 101, 0.08);
}

/* ---------- 2. INDUSTRY FILTERS ---------- */
.cs-clients__filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: clamp(18px, 2.7vw, 30px);
    padding-bottom: clamp(16px, 2.3vw, 24px);
    border-bottom: 1px solid var(--clients-line);
}

.cs-clients__filters button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    min-height: 42px;
    padding: 8px 16px;
    border: 1px solid var(--clients-line);
    border-radius: 50px;
    background: #fff;
    color: var(--cs-c-title);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        border-color 0.25s ease,
        background-color 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease;
}

.cs-clients__filters button:hover {
    border-color: rgba(8, 112, 175, 0.35);
    color: var(--cs-c-blue);
}

/* selected filter: the site's blue button gradient */
.cs-clients__filters button[aria-pressed="true"] {
    border-color: transparent;
    background: var(--cs-btn-gradient, linear-gradient(120deg, #159dd3, #0870af 42%, #065a8c 72%, #0a86c9));
    color: #fff;
    box-shadow: 0 6px 16px rgba(8, 112, 175, 0.24);
}

.cs-clients__filters button:focus-visible {
    outline: 2px solid var(--cs-c-cyan);
    outline-offset: 3px;
}

/* ---------- 3. LOGO GRID ---------- */
.cs-clients__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cs-clients__card {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 110px;
    overflow: hidden;
    border: 1px solid var(--clients-line);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(16, 64, 101, 0.05);
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

/* the whole card is the link to the client's website */
.cs-clients__link {
    display: grid;
    min-width: 0;
    padding: 14px;
    place-items: center;
    color: inherit;
    text-decoration: none;
    border-radius: inherit;
}

/* logo sits in the middle; on hover it moves up to make room for the name */
.cs-clients__link img {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.cs-clients__card:hover .cs-clients__link img,
.cs-clients__link:focus-visible img {
    transform: translateY(-14px);
}

.cs-clients__link[href] {
    cursor: pointer;
}

.cs-clients__link:focus-visible {
    outline: 2px solid var(--cs-c-cyan);
    outline-offset: -2px;
}

/* client name: slides up at the bottom of the card on hover */
.cs-clients__name {
    position: absolute;
    inset: auto 0 0;
    padding: 7px 10px;
    overflow: hidden;
    background: var(--cs-grad-brand, linear-gradient(135deg, #0870af 0%, #065a8c 100%));
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(100%);
    transition:
        opacity 0.25s ease,
        transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.cs-clients__card:hover .cs-clients__name,
.cs-clients__link:focus-visible .cs-clients__name {
    opacity: 1;
    transform: none;
}

/* touch screens have no hover: show the name all the time */
@media (hover: none) {
    .cs-clients__name {
        opacity: 1;
        transform: none;
    }

    .cs-clients__link img {
        transform: translateY(-14px);
    }
}

.cs-clients__card img {
    display: block;
    width: 100%;
    max-width: 170px;
    height: 64px;
    object-fit: contain;
}

/* logos fade in when a filter changes */
.cs-clients__card.is-entering {
    animation: csClientIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--card-delay, 0ms);
}

@keyframes csClientIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (hover: hover) {
    .cs-clients__card:hover {
        border-color: rgba(8, 112, 175, 0.3);
        box-shadow: 0 12px 24px rgba(16, 64, 101, 0.1);
        transform: translateY(-3px);
    }
}

.cs-clients__empty {
    margin: 0;
    padding: 24px;
    border: 1px dashed var(--clients-line);
    border-radius: 14px;
    color: var(--cs-c-text);
    text-align: center;
}

/* ---------- 4. CALL TO ACTION ---------- */
.cs-clients__cta {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: clamp(28px, 4vw, 48px);
    padding: clamp(26px, 4.6vw, 54px);
    overflow: hidden;
    border-radius: clamp(18px, 3vw, 28px);
    background: var(--cs-grad-brand, linear-gradient(135deg, #0870af 0%, #065a8c 100%));
    box-shadow: 0 18px 36px rgba(8, 90, 140, 0.22);
}

/* fine diagonal lines on the right */
.cs-clients__cta::before {
    position: absolute;
    z-index: -1;
    inset: 0 0 0 auto;
    width: min(55%, 420px);
    background: repeating-linear-gradient(130deg,
            transparent 0 24px,
            rgba(223, 246, 252, 0.16) 25px,
            transparent 26px 42px);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000);
    mask-image: linear-gradient(90deg, transparent, #000);
    content: "";
}

.cs-clients__cta .cs-subtext {
    margin: 10px 0 0;
}

.cs-clients__cta-actions {
    flex-shrink: 0;
    margin-top: 0;
}

/* ---------- 5. TABLET AND PHONE ---------- */
@media (max-width: 1199.98px) {
    .cs-clients__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .cs-clients__cta {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 767.98px) {
    .cs-clients__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    /* filters scroll sideways instead of stacking into many rows */
    .cs-clients__filters {
        flex-wrap: nowrap;
        justify-content: flex-start;
        margin-inline: calc(clamp(14px, 3vw, 34px) * -1);
        padding-inline: clamp(14px, 3vw, 34px);
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .cs-clients__filters::-webkit-scrollbar {
        display: none;
    }

    .cs-clients__filters button {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

@media (max-width: 575.98px) {
    .cs-clients__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cs-clients__filters button {
        min-height: 38px;
        padding: 6px 13px;
        font-size: 13px;
    }

    .cs-clients__card {
        min-height: 88px;
    }

    .cs-clients__link {
        padding: 10px;
    }

    .cs-clients__card:hover .cs-clients__link img,
    .cs-clients__link:focus-visible img {
        transform: translateY(-12px);
    }

    .cs-clients__name {
        padding: 6px 8px;
        font-size: 11.5px;
    }

    .cs-clients__card img {
        height: 50px;
    }

    .cs-clients__cta-actions {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cs-clients__card,
    .cs-clients__name,
    .cs-clients__link img,
    .cs-clients__filters button {
        transition: none;
    }

    .cs-clients__card.is-entering {
        animation: none;
    }

    .cs-clients__card:hover {
        transform: none;
    }
}