/* ==========================================================================
   Supplier Cards — dark navy section, centered header, row of value-prop cards.
   ========================================================================== */

.section.suppliercards {
    padding-top: 64px;
    padding-bottom: 64px;
    background: #000a29; /* Everflow brand-primary/800 */
}

/* ---- Header ------------------------------------------------------------- */
.suppliercards-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    max-width: 718px;
    margin: 0 auto 64px;
}
.suppliercards-eyebrow {
    font-family: var(--font-heading);
    font-size: var(--text-label-xs);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-background);
}
.suppliercards-heading { margin: 0; color: var(--color-background); }

/* ---- Grid --------------------------------------------------------------- */
.suppliercards-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

/* ---- Card --------------------------------------------------------------- */
.suppliercards-card {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 20px 16px;
    background: var(--color-background);
    border: 1px solid var(--color-brand-primary-50);
    border-radius: var(--radius-sm);
}
.suppliercards-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    color: var(--color-background);
    background: linear-gradient(
        104.6deg,
        var(--color-brand-secondary-blue) 30%,
        var(--color-brand-light-blue) 159%
    );
}
.suppliercards-icon svg {
    display: block;
    width: 24px;
    height: 24px;
}
.suppliercards-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: auto;       /* push text to the bottom; icons stay aligned at top */
}
.suppliercards-title {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-label-lg);
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-navy);
}
.suppliercards-sub {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-paragraph-sm);
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: var(--color-navy);
}

/* ==========================================================================
   Light mode — light-gray section, dark header text, dark icon circles.
   ========================================================================== */
.section.suppliercards--light {
    background: var(--color-secondary);
}
.suppliercards--light .suppliercards-eyebrow,
.suppliercards--light .suppliercards-heading,
.suppliercards--light .suppliercards-title,
.suppliercards--light .suppliercards-sub {
    color: var(--color-foreground);
}
.suppliercards--light .suppliercards-card {
    border-color: var(--color-border);
}
.suppliercards--light .suppliercards-icon {
    background: var(--color-foreground);
    color: var(--color-background);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1000px) {
    .suppliercards-grid { grid-template-columns: repeat(2, 1fr); }
    .suppliercards-card { gap: 32px; }
}
@media (max-width: 540px) {
    .suppliercards-grid { grid-template-columns: 1fr; padding: 0 30px; }
    .suppliercards-header { padding: 0 30px; margin-bottom: 32px; }
    .suppliercards-card { gap: 20px; }
}