/* ===================================================================
   Client Gallery (acf/client-gallery)
   Featured rail: portrait tiles that widen to reveal services.
   More rail:     16:9 tiles with a slide-up services panel.
   Both rails scroll horizontally (native scroll + snap, prev/next buttons).
   =================================================================== */

.client-gallery {
    /* Layout tokens */
    --cg-gutter: 2.875rem;                     /* matches hero-2 section padding */
    --cg-inset: calc(var(--cg-gutter) + 0.625rem); /* hero-2 gutter + 10px nudge; no width cap */
    --cg-gap: 0.75rem;

    --cg-feat-h: clamp(22rem, 30vw, 27rem);
    --cg-feat-w: calc(var(--cg-feat-h) * 0.62);
    --cg-feat-w-open: min(calc(var(--cg-feat-h) * 1.72), 86vw);
    --cg-small-w: clamp(17.5rem, 24vw, 22rem);

    /* Brand tokens */
    --cg-ink: #19323C;     /* base / section background */
    --cg-cream: #F3F7F0;   /* Mint Cream — replaces all white */
    --cg-accent: #F2545B;  /* accent (was Strike Orange) */
    --cg-blue: #1E6BFF;    /* Voltage Blue — focus rings only */
    --cg-ease: cubic-bezier(.2, .7, .2, 1);
    --cg-dur: .55s;

    position: relative;
    width: 100%;
    background: var(--cg-ink);
    color: var(--cg-cream);
    /* padding (not child margins) so spacing can't collapse out of the section */
    padding: 6rem 0 7rem;
    /* rails are full-bleed; stop any mid-transition overflow widening the page */
    overflow-x: hidden;
}

/* ---------- Header ---------- */
.client-gallery__header {
    padding: 0 var(--cg-inset);
    margin-bottom: 3rem;
}

.client-gallery .client-gallery__eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(243, 247, 240, .45);
    margin: 0 0 1.25rem;
}

.client-gallery .client-gallery__heading {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(2.5rem, 4.6vw, 4.5rem);
    font-weight: 800;
    line-height: 0.94;
    letter-spacing: -0.045em;
    color: var(--cg-cream);
    max-width: 18ch;
    margin: 0;
}

/* ---------- Rail ---------- */
.client-gallery__rail + .client-gallery__rail {
    margin-top: 0.5rem;
}

.client-gallery__rail-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0 var(--cg-inset);
    margin-bottom: 1rem;
}

.client-gallery__rail-title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}

.client-gallery .client-gallery__rail-label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--cg-cream);
    margin: 0;
}

.client-gallery .client-gallery__rail-link {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: rgba(243, 247, 240, .72);
    text-decoration: none;
    transition: color .2s ease;
}
.client-gallery .client-gallery__rail-link:hover,
.client-gallery .client-gallery__rail-link:focus-visible {
    color: var(--cg-accent);
}

/* Prev / next — only shown once script.js has booted and the rail actually overflows */
.client-gallery__controls {
    display: none;
    gap: 0.5rem;
    flex-shrink: 0;
}
.client-gallery--js .client-gallery__rail.is-overflowing .client-gallery__controls {
    display: flex;
}
.client-gallery--no-controls .client-gallery__controls {
    display: none !important;
}

.client-gallery__control {
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(243, 247, 240, .3);
    background: transparent;
    color: var(--cg-cream);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, opacity .2s ease;
}
.client-gallery__control:hover:not(:disabled) {
    background: var(--cg-accent);
    border-color: var(--cg-accent);
}
.client-gallery__control:focus-visible {
    outline: 3px solid var(--cg-blue);
    outline-offset: 2px;
}
.client-gallery__control:disabled {
    opacity: .28;
    cursor: default;
}

/* Track: native horizontal scroll. Edge fades only appear on the side(s)
   that have more tiles to reveal (classes set by script.js). */
.client-gallery .client-gallery__track {
    --cg-fade-l: 0px;
    --cg-fade-r: 0px;
    display: flex;
    align-items: stretch;
    gap: var(--cg-gap);
    list-style: none;
    margin: 0;
    padding: 0.25rem var(--cg-inset) 0.75rem;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--cg-inset);
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--cg-fade-l), #000 calc(100% - var(--cg-fade-r)), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 var(--cg-fade-l), #000 calc(100% - var(--cg-fade-r)), transparent 100%);
}
.client-gallery .client-gallery__track::-webkit-scrollbar {
    display: none;
}
.client-gallery__rail.has-more-start .client-gallery__track { --cg-fade-l: 3rem; }
.client-gallery__rail.has-more-end .client-gallery__track   { --cg-fade-r: 6rem; }

/* ---------- Tile (shared) ---------- */
.client-gallery .client-gallery__tile {
    position: relative;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    overflow: hidden;
    isolation: isolate;
    background: var(--cg-tile-bg, #22404B);
    scroll-snap-align: start;
}

.client-gallery__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* Theme img reset (height:auto / max-width:100%) defeats object-fit — guard it */
.client-gallery__image {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    display: block;
    transition: transform .8s var(--cg-ease);
}
.client-gallery__tile:not(.is-open):hover .client-gallery__image {
    transform: scale(1.04);
}

/* Scrims keep a cream logo legible over any client photo */
.client-gallery__media::before,
.client-gallery__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    transition: opacity var(--cg-dur) var(--cg-ease);
}

.client-gallery__pinstripe {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-image: repeating-linear-gradient(180deg, rgba(243,247,240,.05) 0px, rgba(243,247,240,.05) 1px, transparent 1px, transparent 3px);
    background-size: 100% 3px;
}
.client-gallery--pinstripe-off .client-gallery__pinstripe {
    display: none;
}

/* Stretched toggle — the whole tile is the click target */
.client-gallery__toggle {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
            appearance: none;
}
.client-gallery__toggle:focus-visible {
    outline: 3px solid var(--cg-blue);
    outline-offset: -3px;
}

.client-gallery__content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    pointer-events: none;   /* clicks fall through to the toggle... */
}
.client-gallery__tile.is-open .client-gallery__link {
    pointer-events: auto;   /* ...except the case-study link, once visible */
}

/* Logo */
.client-gallery .client-gallery__logo img {
    display: block;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: left bottom;
}
/* Cream knockout: the <img> stays in flow (sizes the box, keeps its alt text) but is
   hidden; a sibling masked with the same file is filled Mint Cream. A filter can only
   make a logo pure white, never a specific colour — hence the mask. */
.client-gallery .client-gallery__logo-mark {
    position: relative;
    display: inline-block;
    vertical-align: bottom;
}
.client-gallery .client-gallery__logo-mark img {
    opacity: 0;
}
.client-gallery .client-gallery__logo-mark::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--cg-cream);
    -webkit-mask: var(--cg-logo) left bottom / contain no-repeat;
            mask: var(--cg-logo) left bottom / contain no-repeat;
    pointer-events: none;
}
.client-gallery__tile--small .client-gallery__logo-mark::after {
    -webkit-mask-position: center;
            mask-position: center;
}
@supports not ((-webkit-mask-image: none) or (mask-image: none)) {
    .client-gallery .client-gallery__logo-mark img { opacity: 1; } /* original colours rather than white */
    .client-gallery .client-gallery__logo-mark::after { display: none; }
}
.client-gallery .client-gallery__logo-text {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--cg-cream);
}

/* +/× indicator — visual only; accent colour marks the active tile
   (per the arrow system: active state = colour, never an arrow) */
.client-gallery__indicator {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 3;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    border: 1px solid rgba(243, 247, 240, .42);
    background: rgba(25, 50, 60, .5);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    pointer-events: none;
    transition: transform var(--cg-dur) var(--cg-ease), background-color .25s ease, border-color .25s ease;
}
.client-gallery__indicator::before,
.client-gallery__indicator::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.875rem;
    height: 2px;
    margin: -1px 0 0 -0.4375rem;
    border-radius: 2px;
    background: var(--cg-cream);
}
.client-gallery__indicator::after {
    transform: rotate(90deg);
}
.client-gallery__tile:not(.is-open):hover .client-gallery__indicator {
    border-color: var(--cg-accent);
}
.client-gallery__tile.is-open .client-gallery__indicator {
    transform: rotate(45deg);
    background: var(--cg-accent);
    border-color: var(--cg-accent);
}

/* Optional tile label, e.g. "New client" — top-left, opposite the +/× indicator */
.client-gallery .client-gallery__badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 3;
    max-width: calc(100% - 5rem); /* never runs under the indicator */
    padding: 0.375rem 0.625rem;
    border-radius: 0.25rem;
    background: var(--cg-cream);
    color: var(--cg-ink);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none; /* clicks pass through to the toggle */
    transition: opacity .25s ease;
}

/* Small tiles: the open panel's name/industry sit top-left, so step the tag aside */
.client-gallery__tile--small.is-open .client-gallery__badge {
    opacity: 0;
}

/* Panel typography (shared) */
.client-gallery .client-gallery__industry {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(243, 247, 240, .6);
    margin: 0 0 0.75rem;
}

.client-gallery .client-gallery__summary {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--cg-cream);
    max-width: 34ch;
    margin: 0 0 1rem;
}

.client-gallery .client-gallery__services {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.client-gallery .client-gallery__services li {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.005em;
    color: var(--cg-cream);
    margin: 0;
    padding: 0.375rem 0.75rem;
    border: 1px solid rgba(243, 247, 240, .28);
    border-radius: 999px;
    background: rgba(25, 50, 60, .35);
}

.client-gallery .client-gallery__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.125rem;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--cg-cream);
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 2px solid var(--cg-accent);
    transition: color .2s ease;
}
.client-gallery .client-gallery__link:hover {
    color: var(--cg-accent);
}
.client-gallery .client-gallery__link:focus-visible {
    outline: 3px solid var(--cg-blue);
    outline-offset: 3px;
}

/* ---------- Featured tile ---------- */
.client-gallery .client-gallery__tile--featured {
    width: var(--cg-feat-w);
    height: var(--cg-feat-h);
    border-radius: 0.75rem;
    /* width animates as a literal property: it must land exactly on the open width */
    transition: width var(--cg-dur) var(--cg-ease);
}
.client-gallery .client-gallery__tile--featured.is-open {
    width: var(--cg-feat-w-open);
}

.client-gallery__tile--featured .client-gallery__media::before {
    background: linear-gradient(to top, rgba(12,28,34,.88) 0%, rgba(12,28,34,.35) 45%, rgba(12,28,34,0) 75%);
}
.client-gallery__tile--featured .client-gallery__media::after {
    opacity: 0;
    background: linear-gradient(to right, rgba(12,28,34,.9) 0%, rgba(12,28,34,.55) 40%, rgba(12,28,34,0) 72%);
}
.client-gallery__tile--featured.is-open .client-gallery__media::after {
    opacity: 1;
}

.client-gallery__tile--featured .client-gallery__content {
    justify-content: flex-end;
    padding: 1.75rem;
}

.client-gallery__tile--featured .client-gallery__logo img {
    max-width: min(12rem, 100%) !important;
    max-height: 4.5rem;
}
.client-gallery__tile--featured .client-gallery__logo-text {
    font-size: 1.75rem;
}

/* Optical sizing: template.php passes each logo's aspect ratio, and height scales with
   1 / ratio^curve.
   --cg-logo-curve: 0 = every logo the same height; 0.5 = every logo the same area.
     0.3 sits between: heights stay close, but wide wordmarks still fit the card.
   --cg-logo-size = height a square (1:1) logo gets; tune this to scale them all.
     (Re-tuned with the curve so MOEN keeps the same height as before.)
   No ratio, or a browser without pow(), falls back to the max-width/height rules above. */
.client-gallery {
    --cg-logo-curve: 0.3;
}
.client-gallery__tile--featured .client-gallery__logo {
    --cg-logo-size: 3.45rem;
}
.client-gallery__tile--small .client-gallery__logo {
    --cg-logo-size: 2.4rem;
}
.client-gallery .client-gallery__logo[style*="--cg-logo-ratio"] img {
    height: calc(var(--cg-logo-size) / pow(var(--cg-logo-ratio), var(--cg-logo-curve)));
}

/* Panel grows beneath the logo (0fr -> 1fr), which lifts the logo up with it */
.client-gallery__tile--featured .client-gallery__panel {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows var(--cg-dur) var(--cg-ease), opacity .3s ease;
}
.client-gallery__tile--featured .client-gallery__panel-inner {
    min-height: 0;
    overflow: hidden;
    /* fixed inner width so text doesn't reflow while the tile widens */
    width: min(26rem, calc(var(--cg-feat-w-open) - 3.5rem));
    padding-top: 1.25rem;
}
.client-gallery__tile--featured.is-open .client-gallery__panel {
    grid-template-rows: 1fr;
    opacity: 1;
    transition: grid-template-rows var(--cg-dur) var(--cg-ease), opacity .35s ease .18s;
}

/* ---------- Small tile ---------- */
.client-gallery .client-gallery__tile--small {
    width: var(--cg-small-w);
    aspect-ratio: 16 / 9;
    border-radius: 0.5rem;
}

.client-gallery__tile--small .client-gallery__media::before {
    background: rgba(12, 28, 34, .42);
}

.client-gallery__tile--small .client-gallery__content {
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

.client-gallery__tile--small .client-gallery__logo {
    transition: opacity .25s ease;
    text-align: center;
}
.client-gallery__tile--small .client-gallery__logo img {
    max-width: min(10rem, 70%) !important;
    max-height: 3.25rem;
    margin: 0 auto;
    object-position: center;
}
.client-gallery__tile--small .client-gallery__logo-text {
    font-size: 1.25rem;
    text-align: center;
}
.client-gallery__tile--small.is-open .client-gallery__logo {
    opacity: 0;
}

.client-gallery__tile--small .client-gallery__panel {
    position: absolute;
    inset: 0;
    padding: 0.875rem 1rem;
    background: rgba(34, 64, 75, .97); /* a step lighter than #19323C so the open tile keeps its edge */
    transform: translateY(101%);
    transition: transform .42s var(--cg-ease);
    overflow-y: auto;
    scrollbar-width: none; /* still scrolls by wheel/touch if a long services list overflows, but no visible bar */
}
.client-gallery__tile--small .client-gallery__panel::-webkit-scrollbar {
    display: none;
}
.client-gallery__tile--small.is-open .client-gallery__panel {
    transform: none;
}
.client-gallery__tile--small .client-gallery__panel-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.client-gallery .client-gallery__panel-name {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--cg-cream);
    margin: 0 0 0.25rem;
    padding-right: 2.75rem; /* clear the × indicator */
}
.client-gallery__tile--small .client-gallery__industry {
    margin-bottom: 0.625rem;
    padding-right: 2.75rem;
}
.client-gallery__tile--small .client-gallery__services {
    gap: 0.25rem;
}
.client-gallery__tile--small .client-gallery__services li {
    font-size: 0.72rem;
    padding: 0.25rem 0.5625rem;
}
.client-gallery__tile--small .client-gallery__link {
    margin-top: 0.625rem;
    font-size: 0.875rem;
}

/* ---------- Visually hidden (don't depend on theme's .screen-reader-text) ---------- */
.client-gallery__sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- JS boot: no transitions while script.js sets initial open/closed state ---------- */
.client-gallery--booting *,
.client-gallery--booting *::before,
.client-gallery--booting *::after {
    transition: none !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 48rem) {
    .client-gallery {
        --cg-gutter: 1rem;
        --cg-inset: var(--cg-gutter);  /* phones stay flush with hero-2 — no nudge */
        --cg-feat-h: 32rem;
        --cg-feat-w: 80vw;
        --cg-feat-w-open: 80vw;   /* no widening on phones — panel just grows under the logo */
        --cg-small-w: 74vw;
        padding: 4rem 0 5rem;
    }

    .client-gallery__header {
        margin-bottom: 2rem;
    }

    .client-gallery .client-gallery__rail-label {
        font-size: 1.25rem;
    }

    /* swipe is the control on touch; buttons would just crowd the heading */
    .client-gallery--js .client-gallery__rail.is-overflowing .client-gallery__controls {
        display: none;
    }

    .client-gallery__tile--featured .client-gallery__content {
        padding: 1.25rem;
    }
    .client-gallery__tile--featured .client-gallery__panel-inner {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .client-gallery *,
    .client-gallery *::before,
    .client-gallery *::after {
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }
    .client-gallery__tile:not(.is-open):hover .client-gallery__image {
        transform: none;
    }
}

.client-gallery .client-gallery__rail-label .accent {
    font-style: italic;
    color: #4D9ECE;
}