/* ITBULVAR information-security vendor directory */
.security-vendors {
  --security-ink: #101830;
  --security-muted: #59627a;
  --security-line: #d9dfeb;
  --security-panel: #f1f4fb;
  --security-red: #ed1c24;
  color: var(--security-ink);
  margin: 0 0 6rem;
}

.security-vendors * { box-sizing: border-box; }

.security-vendors__hero {
  background: var(--security-ink);
  border-radius: 16px;
  color: #fff;
  margin: 1.5rem 0 clamp(3.5rem, 7vw, 7rem);
  overflow: hidden;
  padding: clamp(3rem, 6vw, 6.5rem);
  position: relative;
}

.security-vendors__hero::after {
  background: var(--security-red);
  border-radius: 50%;
  content: "";
  height: clamp(10rem, 22vw, 20rem);
  opacity: .96;
  position: absolute;
  right: clamp(-8rem, -5vw, -3rem);
  top: clamp(-8rem, -5vw, -3rem);
  width: clamp(10rem, 22vw, 20rem);
}

.security-vendors__eyebrow,
.security-vendors__hero h1,
.security-vendors__lead,
.security-vendors__index { position: relative; z-index: 1; }

.security-vendors__eyebrow {
  color: #f6b8bc;
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 1.3rem;
}

.security-vendors__hero h1 {
  color: #fff;
  font-size: clamp(3.6rem, 5.4vw, 6.8rem);
  letter-spacing: -.035em;
  line-height: 1.02;
  margin: 0;
  max-width: 13ch;
  text-wrap: balance;
}

.security-vendors__lead {
  color: #dfe5f2;
  font-size: clamp(1.7rem, 1.9vw, 2.2rem);
  line-height: 1.55;
  margin: 2.2rem 0 3rem;
  max-width: 68ch;
  text-wrap: pretty;
}

.security-vendors__index {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  max-width: 90rem;
}

.security-vendors__index a {
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  color: #fff;
  font-size: 1.35rem;
  font-weight: 600;
  padding: .65rem 1.15rem;
  text-decoration: none;
  transition: background-color .18s ease-out, border-color .18s ease-out;
}

.security-vendors__index a:hover,
.security-vendors__index a:focus-visible {
  background: var(--security-red);
  border-color: var(--security-red);
  color: #fff;
}

.security-vendors__directory { margin-inline: auto; max-width: 118rem; }

.security-vendors__directory-head {
  align-items: end;
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, .8fr) minmax(28rem, 1fr);
  margin-bottom: 3rem;
}

.security-vendors__directory-head h2 {
  color: var(--security-ink);
  font-size: clamp(3rem, 4vw, 5rem);
  letter-spacing: -.03em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

.security-vendors__directory-head p {
  color: var(--security-muted);
  font-size: 1.7rem;
  line-height: 1.6;
  margin: 0;
  max-width: 62ch;
  text-wrap: pretty;
}

.security-vendors__list { border-bottom: 1px solid var(--security-line); }

.security-vendor {
  align-items: center;
  border-top: 1px solid var(--security-line);
  display: grid;
  gap: clamp(2rem, 4vw, 5rem);
  grid-template-columns: minmax(18rem, 25rem) minmax(0, 1fr) auto;
  padding: clamp(2.4rem, 3.5vw, 4rem) 1.4rem;
  scroll-margin-top: 3rem;
  transition: background-color .18s ease-out;
}

.security-vendor:hover { background: var(--security-panel); }

.security-vendor__logo {
  align-items: center;
  background: #fff;
  border-radius: 12px;
  display: flex;
  height: 11rem;
  justify-content: center;
  padding: 1.5rem;
}

.security-vendor__logo--dark { background: #101830; }

.security-vendor__logo img {
  display: block;
  height: 100%;
  max-height: 8rem;
  max-width: 100%;
  object-fit: contain;
  width: 100%;
}

.security-vendor__meta {
  align-items: center;
  color: var(--security-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 1.3rem;
  font-weight: 700;
  gap: 1rem;
  margin-bottom: .75rem;
}

.security-vendor__meta span:first-child {
  color: var(--security-red);
  font-variant-numeric: tabular-nums;
}

.security-vendor__copy h3 {
  color: var(--security-ink);
  font-size: clamp(2.2rem, 2.4vw, 3rem);
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 0 0 1rem;
}

.security-vendor__copy p {
  color: #343d54;
  font-size: 1.55rem;
  line-height: 1.62;
  margin: 0;
  max-width: 72ch;
  text-wrap: pretty;
}

.security-vendor__link {
  align-items: center;
  color: var(--security-ink);
  display: inline-flex;
  font-size: 1.35rem;
  font-weight: 700;
  gap: .65rem;
  text-decoration: none;
  white-space: nowrap;
}

.security-vendor__link span { color: var(--security-red); font-size: 1.8rem; }
.security-vendor__link:hover,
.security-vendor__link:focus-visible { color: var(--security-red); }

.security-vendors__source {
  color: var(--security-muted);
  font-size: 1.25rem;
  line-height: 1.5;
  margin: 1.5rem 0 0;
}

@media (max-width: 900px) {
  .security-vendors__directory-head { grid-template-columns: 1fr; }
  .security-vendor {
    align-items: start;
    grid-template-columns: minmax(14rem, 20rem) minmax(0, 1fr);
  }
  .security-vendor__link { grid-column: 2; }
}

@media (max-width: 600px) {
  .security-vendors { margin-bottom: 3rem; }
  .security-vendors__hero { border-radius: 12px; margin-top: 1rem; padding: 2.6rem 2rem; }
  .security-vendors__hero::after { right: -7rem; top: -7rem; }
  .security-vendors__hero h1 { font-size: clamp(3.1rem, 11vw, 4.7rem); }
  .security-vendors__lead { font-size: 1.6rem; }
  .security-vendors__index { gap: .6rem; }
  .security-vendors__index a { font-size: 1.2rem; padding: .55rem .9rem; }
  .security-vendor {
    gap: 1.6rem;
    grid-template-columns: 1fr;
    padding: 2.4rem 0;
  }
  .security-vendor__logo { height: 10rem; max-width: 24rem; width: 100%; }
  .security-vendor__link { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .security-vendors__index a,
  .security-vendor { transition: none; }
}