/* "Trusted by industry leaders" — fig 7033:3563. White panel, sector list left,
   kitchen photo right with a discount badge hanging off its bottom-left corner. */

.corp-clients .corp-panel {
    --corp-panel-pad-min: 85px;
    display: grid;
    grid-template-columns: 600px 1fr;
    gap: 50px;
    align-items: start;
}

.corp-sector-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

/* The mock runs every caption on one line, its longest reaching 545 where the
   600 column leaves 534. The row is allowed into the 20 gap beside it rather
   than given nowrap, so editor copy longer than the mock's still wraps. */
@media (min-width: 1200px) {
    .corp-sector-list {
        width: calc(100% + 20px);
    }
}

.corp-sector {
    display: flex;
    align-items: center;
    gap: 18px;
}

.corp-sector-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--corp-ink);
}

/* The icon frames are 28 wide but their 2-unit stroke is centred on the
   frame edge, so the drawing is 30 across. The assets carry that bleed
   inside a 30-unit box; sizing the slot 28 would shave the outer half of
   every edge stroke off. */
.corp-sector-icon img {
    width: 30px;
    height: 30px;
}

.corp-sector-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.corp-sector-title {
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    color: var(--corp-ink);
}

.corp-sector-text {
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    color: var(--corp-muted);
}

/* ---------- photo + badge ----------
   The badge hangs off the photo's bottom-left corner, so the column carries the
   overhang as padding: 26 left and 20 below at 1920 (fig 7033:3608). */
.corp-clients-media {
    position: relative;
    padding: 0 0 20px 26px;
}

.corp-clients-photo {
    display: block;
    width: 100%;
    aspect-ratio: 754 / 598;
    object-fit: cover;
    border-radius: 20px;
}

/* No width at any size: the frames draw this card round its own two children,
   so the disc and the copy stay 20 apart wherever it is used. */
.corp-badge {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 20px;
    box-sizing: border-box;
    padding: 25px;
    border: 1px solid #f3f4f6;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
}

.corp-badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #f69924;
}

.corp-badge-icon img {
    width: 23.33px;
    height: 23.33px;
}

.corp-badge-body {
    display: flex;
    flex-direction: column;
}

.corp-badge-title {
    font-size: 18px;
    font-weight: 700;
    line-height: normal;
    color: var(--corp-ink);
}

.corp-badge-text {
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    color: #4a5565;
}

/* the 1440 mock keeps 60 top/bottom where the 1920 one uses 80, squares the
   photo up to 590x560 and drops it 20 below the top of the text column */
@media (max-width: 1470px) and (min-width: 1200px) {
    /* 600 of copy and 610 of media (20 of badge overhang + the 590 photo) with
       whatever the row has left between them, as the frame spreads them. The
       caps are maxima: under about 1400 the row stops fitting both and the
       tracks give way rather than run past the panel. */
    .corp-clients .corp-panel {
        --corp-panel-pad-y: 60px;
        grid-template-columns: minmax(0, 600px) minmax(0, 610px);
        justify-content: space-between;
        gap: 0;
    }

    .corp-clients-media {
        padding: 20px 0 18px 20px;
    }

    .corp-clients-photo {
        aspect-ratio: 590 / 560;
    }

    .corp-badge {
        padding-block: 21px;
    }
}

/* ---------- 1199 and below: the photo drops under the list ---------- */
@media (max-width: 1199px) {
    .corp-clients .corp-panel {
        --corp-panel-pad-min: 20px;
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .corp-clients-media {
        padding: 0 0 20px 22px;
    }

    .corp-clients-photo {
        aspect-ratio: 665 / 622;
    }

    .corp-badge {
        padding-block: 27px;
    }
}

@media (max-width: 767px) {
    .corp-clients .corp-panel {
        --corp-panel-pad-min: 16px;
        gap: 20px;
    }

    .corp-sector-list {
        margin-top: 16px;
    }

    .corp-clients-media {
        padding: 0 0 28px 16px;
    }

    .corp-clients-photo {
        aspect-ratio: 295 / 307;
    }

    /* the phone frame draws 16 between the disc and the copy, and the card has
       to stay inside a 358 page column */
    .corp-badge {
        max-width: calc(100% - 16px);
        gap: 16px;
        padding: 16px;
    }

    .corp-badge-title {
        font-size: 16px;
    }

    .corp-badge-text {
        font-size: 14px;
    }
}