/**
 * Proof strip — case studies on a service page.
 * =============================================
 * Its own file because the strip appears on SERVICE pages, which do not load
 * asire-case-studies.css. Enqueued by service-details.php and
 * service-item-details.php through $pageStyles, before header.php runs.
 *
 * Carries its own copy of the client-mark rules, scoped under .cs-proof, for
 * the same reason — see asire_cs_logo_kind() for what the three kinds mean.
 */

/* The mask is a PNG alpha mask, not a picture: painting it with
   background-color lets one file render in any colour. */
.cs-proof .cs-logo{
    display: block;
    aspect-ratio: var(--cs-logo-ratio, 1);
    background-color: var(--cs-logo-ink, #101828);
    -webkit-mask-image: var(--cs-logo-src);
            mask-image: var(--cs-logo-src);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center;  mask-position: center;
    -webkit-mask-size: contain;     mask-size: contain;
}
@supports not ((-webkit-mask-image: url(x)) or (mask-image: url(x))){
    .cs-proof .cs-logo{ display: none; }
}
.cs-proof .cs-logo-img{ display: block; width: auto; height: auto; }

/* ==========================================================================
   Proof strip — case studies on a service page
   ==========================================================================
   Not the listing card. Three of those under a service page read as a second
   gallery; this is one narrow row per study, carrying that client's own colour
   as an edge so three of them still look like three different pieces of work.
   See includes/case-study-strip.php. */
.cs-proof{ padding: 72px 0; background: var(--white-color, #fff); }

.cs-proof-head{
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 24px; margin-bottom: 26px; padding-bottom: 18px;
    border-bottom: 1px solid rgba(3,29,54,.1);
}
.cs-proof-eyebrow{
    display: block; margin-bottom: 7px;
    font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: var(--accent-color, #0A49A6);
}
.cs-proof h2{ font-size: 28px; line-height: 1.2; margin: 0; color: var(--primary-color, #031D36); }

.cs-proof-all{
    flex: none; display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 700; text-decoration: none;
    color: var(--accent-color, #0A49A6);
    padding-bottom: 3px; border-bottom: 2px solid transparent;
    transition: border-color .25s ease;
}
.cs-proof-all:hover{ border-bottom-color: currentColor; color: var(--accent-color, #0A49A6); }
.cs-proof-all svg{ transition: transform .25s ease; }
.cs-proof-all:hover svg{ transform: translateX(3px); }

.cs-proof-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.cs-proof-item > a{
    position: relative;
    display: grid;
    grid-template-columns: 6px 118px minmax(0, 1fr) 40px;
    align-items: center;
    gap: 0 20px;
    padding: 0 18px 0 0;
    min-height: 92px;
    overflow: hidden;
    border-radius: 12px;
    text-decoration: none;
    background: var(--white-color, #fff);
    box-shadow: 0 1px 0 rgba(3,29,54,.1), 0 6px 18px rgba(3,29,54,.05);
    transition: transform .25s ease, box-shadow .25s ease;
}
.cs-proof-item > a:hover{
    transform: translateX(4px);
    box-shadow: 0 1px 0 rgba(3,29,54,.1), 0 14px 30px rgba(3,29,54,.12);
}

/* The client's colour as a bar down the leading edge — the one thing that
   makes three rows read as three different clients. */
.cs-proof-edge{ display: block; width: 6px; height: 100%; background: var(--cs-accent, #0A49A6); }

.cs-proof-mark{
    display: flex; align-items: center; justify-content: center;
    height: 60px; padding: 8px 10px;
    border-radius: 8px;
    background: rgba(3,29,54,.04);
}
.cs-proof-mark.is-dark{ background: var(--cs-deep, #101828); }
.cs-proof-mark .cs-logo{ --cs-logo-ink: var(--cs-deep, #101828); width: auto; max-width: 92px; height: 30px; }
.cs-proof-mark .cs-logo-img{ max-width: 92px; max-height: 30px; width: auto; }
.cs-proof-word{ font-size: 14px; font-weight: 700; color: var(--cs-deep, #101828); }

.cs-proof-body{ display: block; padding: 16px 0; }
.cs-proof-client{
    display: block; margin-bottom: 3px;
    font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: rgba(3,29,54,.5);
}
.cs-proof-title{
    display: block;
    font-size: 17px; font-weight: 700; line-height: 1.35;
    color: var(--primary-color, #031D36);
}

.cs-proof-go{
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    color: var(--cs-accent, #0A49A6);
    background: color-mix(in srgb, var(--cs-accent, #0A49A6) 12%, transparent);
    transition: transform .25s ease;
}
@supports not (background: color-mix(in srgb, red 10%, white)){
    .cs-proof-go{ background: rgba(10,73,166,.12); }
}
.cs-proof-item > a:hover .cs-proof-go{ transform: translateX(3px); }

@media only screen and (max-width: 767px){
    .cs-proof{ padding: 52px 0; }
    .cs-proof-head{ flex-direction: column; align-items: flex-start; gap: 12px; }
    .cs-proof h2{ font-size: 24px; }
    /* The mark column goes; at this width the name carries the identity and
       the logo would squeeze the headline to two words a line. */
    .cs-proof-item > a{ grid-template-columns: 6px minmax(0, 1fr) 36px; gap: 0 16px; }
    .cs-proof-mark{ display: none; }
}