/* ==========================================================================
   Corporate Projukti — Redesign :: Clients
   Page-specific layout only. Consumes tokens; never redefines one.
   ========================================================================== */

/* ---- Logo wall ---------------------------------------------------------
   Client logos arrive at wildly different aspect ratios and most carry
   their own white background, so each sits in a fixed-ratio box and is
   contained rather than cropped.
   ------------------------------------------------------------------------ */

.rd-slab-clients {
    grid-template-columns: repeat(5, 1fr);
    --glow-size: 150px;
    --corner-size: 26px;
}

.rd-slab-clients .rd-cell {
    align-items: center;
    /* justify-content: center; */
    text-align: center;
    padding: 0px 5px;
    /* padding: var(--sp-5) var(--sp-4); */
    min-height: 148px;
}

.rd-client-mark {
    display: grid;
    place-items: center;
    width: 100%;
    height: 62px;
    margin-bottom: var(--sp-3);
}

.rd-client-mark img {
    max-width: 100%;
    max-height: 150px;
    width: auto;
    object-fit: contain;

    /* Logos are a riot of brand colours against a near-monochrome page.
       Desaturating at rest keeps the wall calm; hover restores full
       colour, which doubles as the cell's feedback. */
    filter: grayscale(1);
    opacity: .72;
    transition: filter var(--t), opacity var(--t);
}

.rd-cell:hover .rd-client-mark img,
.rd-cell:focus-within .rd-client-mark img {
    filter: grayscale(0);
    opacity: 1;
}

.rd-client-name {
    color: var(--tx-3);
    font-size: 12.5px;
    line-height: 1.4;
    transition: color var(--t);

    /* Names run long. Clamp at two lines and always reserve both, so every
       row of the wall is the same height rather than only the cells that
       happen to share one. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8em;
}

.rd-cell:hover .rd-client-name { color: var(--tx-1); }

@media (max-width: 1080px) { .rd-slab-clients { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 860px)  { .rd-slab-clients { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  {
    .rd-slab-clients {
        grid-template-columns: repeat(2, 1fr);
        --glow-size: 130px;
        --corner-size: 22px;
    }
}

/* ---- Sector list ------------------------------------------------------- */

.rd-sector-name { color: var(--tx-1); font-weight: 600; }

.rd-sector-count {
    font-family: var(--ff-mono);
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: var(--track-micro);
    color: var(--accent-ink);
    margin-top: var(--sp-2);
    display: block;
}

/* Photos in the light theme have no dark backdrop to sit against, so the
   grayscale rest state is lightened rather than dimmed. */
:root[data-theme="light"] .rd-client-mark img { opacity: .78; }