/*
 * peptilab/hero-badges — frontend styles
 *
 * Centered label + heading + text, then a row of icon cards.
 * Desktop: cards share the row (flex: 1). Mobile: horizontal slider —
 * left edge keeps the container padding, right edge bleeds off-screen.
 */

/* ============================================================
   Section vertical padding — depends on header mode
   ============================================================ */
.pl-hero-badges {
    position: relative;
    padding: 148px 0 60px;        /* default: header overlays the hero (fixed/absolute) */
}

.has-static-header .pl-hero-badges {
    padding: 60px 0;              /* static header takes its own space in flow */
}

/* ── Background image layer ── */
.pl-hero-badges__bg {
    position:            absolute;
    inset:               0;
    z-index:             0;
    background-size:     cover;
    background-position: center center;
    background-repeat:   no-repeat;
    pointer-events:      none;
}

/* ============================================================
   Container
   ============================================================ */
.pl-hero-badges__inner {
    position:       relative;
    z-index:        1;
    max-width:      1360px;
    margin:         0 auto;
    padding:        0 60px;
    box-sizing:     border-box;
    display:        flex;
    flex-direction: column;
    align-items:    center;
}

/* ── Label pill ── */
.pl-hero-badges__label {
    display:        inline-flex;
    align-items:    center;
    padding:        4px 12px;
    border-radius:  32px;
    background:     #FFF;
    box-shadow:     0 2px 10px 0 rgba(26, 26, 26, 0.08);
    color:          #537FF4;
    font-family:    Inter, sans-serif;
    font-size:      14px;
    font-style:     normal;
    font-weight:    500;
    line-height:    24px;
}

/* ── Heading ── */
.pl-hero-badges__heading {
    margin:         10px 0 0;      /* 10px gap from the label */
    color:          var( --primary-1, #1A1A1A );
    text-align:     center;
    font-family:    Switzer, sans-serif;
    font-size:      40px;
    font-style:     normal;
    font-weight:    500;
    line-height:    48px;
}

/* ── Intro text ── */
.pl-hero-badges__text {
    margin:      30px 0 0;         /* 30px gap from heading */
    color:       var( --grey-dark, #2A2A2A );
    text-align:  center;
    font-family: Inter, sans-serif;
    font-size:   18px;
    font-style:  normal;
    font-weight: 400;
    line-height: 28px;
}

.pl-hero-badges__text p {
    margin: 0;
}

/* ============================================================
   Cards row
   ============================================================ */
.pl-hero-badges__list {
    margin-top:            40px;  /* 40px gap from text */
    align-self:            stretch;
    width:                 100%;
    display:               grid;
    grid-template-columns: repeat( 6, minmax(0, 1fr) ); /* 6 per row on desktop */
    gap:                   20px;
}

.pl-hero-badges__card {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            14px;
    padding:        14px;
    flex:           1 0 0;
    align-self:     stretch;
    border-radius:  10px;
    border:         1px solid #fff;
    background:     rgba( 255, 255, 255, 0.39 );
    box-shadow:     0 2px 10px 0 rgba( 26, 26, 26, 0.08 );
    box-sizing:     border-box;
}

.pl-hero-badges__card-icon {
    width:        48px;
    height:       48px;
    aspect-ratio: 1 / 1;
    flex-shrink:  0;
    object-fit:   contain;
    display:      block;
}

.pl-hero-badges__card-body {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            6px;
    min-width:      0;
}

.pl-hero-badges__card-title {
    margin:      0;
    color:       var( --grey-dark, #2A2A2A );
    text-align:  center;
    font-family: Inter, sans-serif;
    font-size:   16px;
    font-style:  normal;
    font-weight: 600;
    line-height: 100%;
}

.pl-hero-badges__card-text {
    margin:      0;
    color:       #1A1A1A;
    text-align:  center;
    font-family: Inter, sans-serif;
    font-size:   12px;
    font-style:  normal;
    font-weight: 400;
    line-height: 120%;
}

/* ============================================================
   Mobile / tablet (≤1024)
   ============================================================ */
@media (max-width: 1024px) {

    /* Section padding — just 60 top/bottom regardless of header mode. */
    .pl-hero-badges,
    .has-static-header .pl-hero-badges {
        padding: 60px 0;
    }

    .pl-hero-badges__inner {
        padding: 0 24px;
    }

    .pl-hero-badges__heading {
        font-size:   36px;
        line-height: 40px;
    }

    .pl-hero-badges__text {
        margin-top:  24px;
        font-size:   16px;
        line-height: 24px;
    }

    /* Grid (no horizontal scroll) — 2 per row. */
    .pl-hero-badges__list {
        margin-top:            24px;
        display:               grid;
        grid-template-columns: repeat( 2, minmax(0, 1fr) );
        gap:                   5px;
    }

    .pl-hero-badges__card {
        width:   auto;
        padding: 10px;
    }

    .pl-hero-badges__card-icon {
        width:  38px;
        height: 38px;
    }

    .pl-hero-badges__card-title {
        font-size: 14px;
    }
}