/* Client page: industry directory. Page-specific (cl- prefix);
   overrides of the shared .company-logo are scoped to .cl-logo-grid so
   about.html is unaffected. */

/* The shared .container stops at 1280px. This page's directory is the
   element that should be wide: about 94% of the layout width, capped at
   1600px, with a small equal inset so it does not touch the viewport. */
.section:has(.cl-industries) > .container {
    width: min(1600px, calc(100% - 2 * clamp(20px, 3vw, 64px)));
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
}

/* The directory is inside .about-section (96px bottom margin) and a
   .section (96px bottom padding). The CTA section then adds 96px of
   top padding and the trust card adds 48px of margin. Keep one gap. */
.section:has(.cl-industries) .about-section {
    margin-bottom: 0;
}

/* Top padding clears the fixed navigation bar (was an inline 120px in
   clients.html); a little more room on desktop. */
.section:has(.cl-industries) {
    padding-top: 146px;
    padding-bottom: 0;
}

@media (max-width: 768px) {
    .section:has(.cl-industries) {
        padding-top: 120px;
    }
}

.section:has(.cl-industries) + .section {
    padding-top: 64px;
}

.section:has(.cl-industries) + .section .trust-statement {
    margin-top: 0;
}

/* Hero band: cool blue-grey behind the Industry Experience block only. The
   block stays 880px wide; a spread box-shadow paints the colour edge to edge
   (no horizontal scroll) and clip-path trims it from the page top to
   --cl-band-below under the stats, inside the existing gap above the first
   industry. */
.cl-summary {
    --cl-band-below: 72px;
    max-width: 880px;
    margin: 0 auto 136px;
    text-align: center;
    background: #EEF2F6;
    box-shadow: 0 0 0 100vmax #EEF2F6;
    clip-path: inset(-100vmax -100vmax calc(-1 * var(--cl-band-below)));
}

.cl-summary-label {
    margin: 0 0 26px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--text-muted);
}

.cl-summary-title {
    margin: 0 0 30px;
    font-size: 42px;
    line-height: 1.2;
}

.cl-summary-text {
    margin: 0;
    font-size: 17px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.cl-summary-metrics {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 112px;
    margin-top: 48px;
}

/* Narrow tablets: the three groups are about 390px wide, so step the gap
   down to keep them on one row. */
@media (max-width: 680px) {
    .cl-summary-metrics {
        gap: 48px;
    }
}

@media (max-width: 600px) {
    .cl-summary-metrics {
        gap: 24px;
    }
}

/* Each statistic: outline icon on the left (inline SVG in clients.html:
   building, factory, certificate), number and label stacked on the right.
   The icon is centred on the combined height of the number and label. */
.cl-summary-metric {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
    text-align: left;
}

/* About the height of the number + label (≈51px) without overpowering it. */
.cl-summary-metric-icon {
    grid-row: 1 / span 2;
    grid-column: 1;
    display: block;
    width: 32px;
    height: 32px;
    color: var(--text-secondary);
}

/* Reuses the shared .stat-number; only the size is page-specific. */
.cl-summary-num {
    grid-column: 2;
    font-size: 32px;
    line-height: 1.1;
}

.cl-summary-metric-label {
    grid-column: 2;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.12em;
    color: var(--text-muted);
}

/* One industry per row in a centred column, capped at 1200px so the six
   Manufacturing logos (6 x 188px slots + 5 x 30px gaps = 1278px) fit on one
   row on desktop; full content width on smaller screens. */
.cl-industries {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 96px;
    align-items: start;
    max-width: 1290px;
    margin-left: auto;
    margin-right: auto;
}

/* No box: each industry sits on the page background. Order: centred
   heading, logos, then a thin grey divider (the section's bottom edge, same
   width for every section), then the column's row gap before the next
   heading. */
.cl-industry {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(29, 30, 31, 0.32);
    border-radius: 0;
    box-shadow: none;
    padding: 0 0 98px;
    min-height: 0;
    height: auto;
}

/* Centred industry heading above its logos. */
.cl-industry-head {
    text-align: center;
    margin-bottom: 70px;
}

.cl-industry-title {
    margin: 0;
    font-size: 28.8px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

/* Logos sit on the section background. Shared .company-logo tiles are
   cleared here only. Every slot has the same width and the image scales
   inside it; rows wrap and each row (including a part-filled last row) is
   centred in the section. */
.cl-logo-grid {
    --cl-slot: 188px;
    --cl-gap: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: var(--cl-gap);
    row-gap: 48px;
}

.cl-logo-grid .company-logo {
    display: flex;
    flex: 0 0 var(--cl-slot);
    align-items: center;
    justify-content: center;
    max-width: 100%;
    min-width: 0;
    height: 70px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    filter: none;
    opacity: 1;
    transform: none;
    transition: none;
}

/* No hover, tap or focus effect: the shared .company-logo lifts, shades and
   animates tiles (transition: all); logos here stay still and fully visible. */
.cl-logo-grid .company-logo:hover,
.cl-logo-grid .company-logo:active,
.cl-logo-grid .company-logo:focus,
.cl-logo-grid .company-logo:focus-within {
    background: transparent;
    border-color: transparent;
    transform: none;
    box-shadow: none;
    filter: none;
    opacity: 1;
}

.cl-logo-grid .company-logo img {
    transition: none;
}

.cl-logo-grid .company-logo img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(100%, 172px);
    max-height: 66px;
    object-fit: contain;
    object-position: center;
}

/* These two wordmarks are too wide to read inside one slot. */
.cl-logo-grid .company-logo.cl-logo-wide {
    flex-basis: calc(2 * var(--cl-slot) + var(--cl-gap));
    height: auto;
    min-height: 44px;
}

.cl-logo-grid .company-logo.cl-logo-wide img {
    max-width: min(100%, 352px);
    max-height: 53px;
}

/* Telecommunications (7th) and Media, Entertainment & Hospitality (8th):
   wider gaps between their few logos. Phones keep the standard two-per-row
   layout. Slots shrink to fit (max-width: 100%), so a row wraps rather than
   overflowing on narrow tablets. */
@media (min-width: 1101px) {
    .cl-industry:nth-child(7) .cl-logo-grid,
    .cl-industry:nth-child(8) .cl-logo-grid {
        --cl-gap: 64px;
    }
}

@media (min-width: 481px) and (max-width: 1100px) {
    .cl-industry:nth-child(7) .cl-logo-grid,
    .cl-industry:nth-child(8) .cl-logo-grid {
        --cl-gap: 52px;
    }
}

@media (max-width: 1100px) {
    .cl-summary {
        margin-bottom: 120px;
    }

    .cl-industries {
        row-gap: 84px;
    }

    .cl-industry {
        padding-bottom: 94px;
    }

    .cl-logo-grid {
        --cl-slot: 176px;
        --cl-gap: 28px;
    }

    .cl-logo-grid .company-logo {
        height: 64px;
    }

    .cl-logo-grid .company-logo img {
        max-width: min(100%, 163px);
        max-height: 59px;
    }

    .cl-logo-grid .company-logo.cl-logo-wide img {
        max-width: min(100%, 286px);
        max-height: 46px;
    }
}

@media (max-width: 960px) {
    .cl-summary {
        margin-bottom: 104px;
    }

    .cl-industries {
        row-gap: 76px;
    }

    .cl-summary-title {
        font-size: 35px;
    }
}

@media (max-width: 480px) {
    .cl-summary-title {
        font-size: 30px;
    }

    .cl-summary-metrics {
        gap: 16px;
        margin-top: 40px;
    }

    .cl-summary-metric {
        column-gap: 6px;
    }

    .cl-summary-metric-icon {
        width: 24px;
        height: 24px;
    }

    .cl-summary-num {
        font-size: 28px;
    }

    .cl-summary-metric-label {
        font-size: 10px;
        letter-spacing: 0.04em;
    }

    .cl-summary {
        --cl-band-below: 48px;
        margin-bottom: 80px;
    }

    .cl-industries {
        row-gap: 56px;
    }

    .cl-industry {
        padding-bottom: 70px;
    }

    .cl-industry-head {
        margin-bottom: 54px;
    }

    /* Scales with the screen so long single words such as
       "Telecommunications" fit at 320px instead of breaking mid-word. */
    .cl-industry-title {
        font-size: clamp(22px, 7.5vw, 26.4px);
    }

    /* Two logos per row on phones; a wide wordmark takes a whole row. */
    .cl-logo-grid {
        --cl-gap: 20px;
        --cl-slot: calc((100% - var(--cl-gap)) / 2);
        row-gap: 36px;
    }

    .cl-logo-grid .company-logo {
        height: 53px;
    }

    .cl-logo-grid .company-logo img {
        max-width: min(100%, 141px);
        max-height: 46px;
    }

    .cl-logo-grid .company-logo.cl-logo-wide img {
        max-width: 100%;
        max-height: 42px;
    }
}

/* Very small phones: tighter gaps so the three statistics stay on one row. */
@media (max-width: 360px) {
    .cl-summary-metrics {
        gap: 10px;
    }

    .cl-summary-metric-icon {
        width: 18px;
        height: 18px;
    }

    .cl-summary-metric-label {
        font-size: 9px;
    }

    /* The shared stylesheet drops .container to 8px side padding here; keep
       the 16px gutter of wider phones (nav, hero and footer stay aligned). */
    .container {
        padding: 0 var(--spacing-sm);
    }
}

/* Hyphenated compounds (E-Commerce) in page copy are wrapped in this span so
   a line never ends on a hyphen. */
.cl-nowrap {
    white-space: nowrap;
}