/* =========================================================
   Block: CUSTOMERS / LOGOBAR  (.certified.customers)
   "In production at enterprises like" + 6 logos row.
   Logos are inline text/SVG — grayscale by default, brand
   color on hover.
   ========================================================= */
.certified {
  padding: 28px 0;
  background: #ffffff;
  border-top: 1px solid var(--ink-100);
  border-bottom: 1px solid var(--ink-100);
}
.certified + .certified { border-top: none; }

.certified-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 64px;
  align-items: center;
}
.certified-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-500);
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.6;
}

.logos-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px;
}
.logo-item {
  color: var(--ink-500);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.01em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  filter: grayscale(1) opacity(.7);
  transition: filter .2s ease;
}
.logo-item:hover { filter: grayscale(0) opacity(1); }

/* Customer-specific tuning */
.customers .logos-row { gap: 28px; }
.customers .logo-item {
  filter: grayscale(1) opacity(.55);
  transition: filter .25s ease, opacity .25s ease;
  color: var(--ink-700);
}
.customers .logo-item:hover { filter: grayscale(0) opacity(1); }
.customers .logo-item svg { display: block; }

.customers .logo-wm {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1;
}
.customers .logo-wm small {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .04em;
  margin-top: 3px;
}

/* Brand colors revealed on hover */
.customers .c-ibm   { color: #1F70C1; }
.customers .c-ey    { color: #2E2E38; }
.customers .c-ey .dot { color: #FFE600; }
.customers .c-intel { color: #0068B5; }
.customers .c-sie   { color: #009999; }
.customers .c-cisco { color: #1BA0D7; }
.customers .c-hpe   { color: #01A982; }
.customers .c-hpe:hover span { color: #01A982; }
.customers .c-hpe .bar { background: currentColor; }

/* Two-line label: line-break span behaves as block on desktop
   (creates a line break inside the 240px column), inline on mobile
   (folds into a single eyebrow line). */
.certified-label .cl-newline { display: block; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  /* Label becomes a single-line eyebrow above logos
     with a thin divider — no awkward two-line stack. */
  .certified-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .certified-label {
    font-size: 10px;
    letter-spacing: .14em;
    padding-bottom: 16px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--ink-100);
    width: 100%;
  }
  .certified-label .cl-newline { display: inline; }

  /* 3-per-row grid on mobile (6 logos = 3 × 2) */
  .logos-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 16px;
    padding: 0;
  }
  .logos-row .logo-item {
    flex: unset;
    justify-self: center;
    text-align: center;
  }
}

@media (max-width: 390px) {
  .logos-row { gap: 24px 12px; }
}