/*
   Certificeringen en erkenningen (DEC-0096, 2026-10-12, owner).

   The compact trust strip directly under the homepage hero. Page-scoped:
   components/site/cert-strip pushes this file into the head only where the
   strip renders, so no other page pays for it.

   About 80px tall from tablet up, one row. The logos are capped at 95 x 42 and never
   upscaled (each file holds twice the drawn size), so they read as support
   for the hero, not as a second hero.
*/

.cert-strip {
    /* Sits on the hero's bottom hairline instead of doubling it. */
    margin-top: -1px;
    border-block: 1px solid #e3e7eb;
    background: #fff;
}

.cert-strip__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding-block: 12px;
}

.cert-strip__label {
    display: flex;
    gap: var(--s-3);
    align-items: center;
    margin: 0;
    color: var(--c-ink-3);
    font-size: var(--t-xs);
    line-height: 1.35;
}

/* The red rule of the eyebrow, shorter, as in the reference. */
.cert-strip__label::before {
    width: 1.5rem;
    height: 2px;
    background: var(--c-red);
    content: "";
    flex: none;
}

/* Mobile: the label on one line, then three per row - every mark visible,
   nothing hidden behind a scroll, the logos a little smaller. */
.cert-strip__logos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px 0;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cert-strip__item {
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 40px;
    padding-inline: 10px;
    border-left: 1px solid #e5e8eb;
}

.cert-strip__item img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(100%, 95px);
    max-height: 36px;
    object-fit: contain;
}

@media (max-width: 47.99rem) {
    .cert-strip__item:nth-child(3n + 1) {
        border-left: 0;
    }
}

/* Tablet and up: the label on the left, every logo in one row beside it,
   however many marks there are. */
@media (min-width: 48rem) {
    .cert-strip__inner {
        grid-template-columns: 150px minmax(0, 1fr);
        gap: 16px;
        min-height: 78px;
        padding-block: 0;
    }

    .cert-strip__logos {
        grid-template-columns: none;
        grid-auto-columns: minmax(0, 1fr);
        grid-auto-flow: column;
        row-gap: 0;
    }

    .cert-strip__item {
        min-height: 44px;
    }

    .cert-strip__item img {
        max-height: 42px;
    }
}

@media (min-width: 64rem) {
    .cert-strip__inner {
        grid-template-columns: 180px minmax(0, 1fr);
        gap: 24px;
    }

    .cert-strip__item {
        padding-inline: clamp(12px, 1.2vw, 18px);
    }
}