/* Stat band under the claim strip — fig 7033:2560. White card on the content
   column, four figures split by hairlines, an icon over each.

   The frame spreads the figures with auto spacing, not equal columns: each
   figure box is a fixed 142 and the leftover width is split evenly between
   them, which is why the outer two sit against the band's own padding. */

.corp-stat-band {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    padding: 20px 100px;
    border-radius: 30px;
    background: #fff;
    box-shadow: var(--corp-panel-shadow);
}

.corp-stat {
    display: flex;
    /* min-width:0 or the caption's one-line width above 1200 would widen the
       box the frame fixes at 142 */
    flex: 0 0 142px;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* the hairline runs the band's full height, past the block padding */
.corp-stat-sep {
    flex: 0 0 1px;
    align-self: stretch;
    margin-block: -20px;
    background: #ececec;
}

.corp-stat img {
    width: 40px;
    height: 40px;
}

.corp-stat-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.corp-stat-num {
    font-family: "Unbounded", sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: normal;
    color: var(--corp-ink);
}

.corp-stat-cap {
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    /* Figma lays 16px Montserrat on 20; the browser's normal rounds up by half
       a pixel, which grows the band by one */
    line-height: 20px;
    color: var(--corp-ink);
}

/* Above the tablet frame the caption stays on one line and overhangs its 142
   box — the frame draws "Food Trailer Models Available" 232 wide inside it.
   The cap is where a longer caption starts wrapping instead: past it the
   overhang would reach the next figure, and an editor's paragraph would run
   off the page. */
@media (min-width: 1200px) {
    .corp-stat-cap {
        width: max-content;
        max-width: 260px;
    }
}

/* the 1440 frame keeps the 100 the 1920 one uses; only the tablet frame in
   drops it to the band's own 20 */
@media (max-width: 1199px) {
    .corp-stat-band {
        padding-inline: 20px;
    }
}

/* the tablet frame stops the hairlines 10 short of the band's edges */
@media (max-width: 1199px) and (min-width: 768px) {
    .corp-stat-sep {
        margin-block: -10px;
    }
}

/* the phone mock drops the hairlines and puts the four figures on two rows */
@media (max-width: 767px) {
    .corp-stat-band {
        flex-wrap: wrap;
        align-content: flex-start;
        row-gap: 20px;
        padding: 16px;
        border-radius: 16px;
        box-shadow: none;
        filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .1)) drop-shadow(0 1px 1px rgba(0, 0, 0, .1));
    }

    .corp-stat-sep {
        display: none;
    }

    .corp-stat-num {
        font-size: 30px;
    }

    .corp-stat-cap {
        font-size: 14px;
        line-height: 17px;
    }
}