/* Category hero colors follow the Home hero palette; category tool cards keep their own accents. */
.category-detail-page .directory-page--category {
  background-color: var(--color-bg);
  background-image: var(--hero-brand-backdrop);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% 740px;
}

.category-detail-page .directory-page--category .cat-hero__h1,
.category-detail-page .directory-page--category .cat-hero__badge strong {
  color: var(--hero-brand-ink);
}

.category-detail-page .directory-page--category .cat-hero__desc {
  color: var(--hero-brand-muted);
}

.category-detail-page .directory-page--category .cat-hero__title-gradient {
  background: var(--hero-brand-title);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.category-detail-page .directory-page--category .cat-hero .directory-btn--primary {
  border-color: rgb(255 255 255 / .42);
  background: var(--hero-brand-cta);
  color: #fff;
  box-shadow: 0 12px 28px rgb(79 70 229 / .27), inset 0 1px 0 rgb(255 255 255 / .24);
}

.category-detail-page .directory-page--category .cat-hero .directory-btn--primary:hover {
  background: var(--hero-brand-cta-hover);
  box-shadow: 0 16px 34px rgb(79 70 229 / .34), inset 0 1px 0 rgb(255 255 255 / .28);
}

.category-detail-page .directory-page--category .cat-hero .directory-hero__actions {
  flex-wrap: nowrap;
}

.category-detail-page .directory-page--category .cat-hero .directory-btn {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

.category-detail-page .directory-page--category .cat-hero .directory-btn > span {
  min-width: 0;
}

.category-detail-page .directory-page--category .cat-hero .directory-btn--secondary {
  border-color: color-mix(in srgb, var(--hero-brand-ink) 24%, transparent);
  background: var(--hero-brand-badge-bg);
  color: var(--hero-brand-ink);
  box-shadow: none;
}

.category-detail-page .directory-page--category .cat-hero .directory-btn--secondary:hover {
  border-color: var(--hero-brand-muted);
  background: var(--color-bg);
  box-shadow: none;
}

.category-detail-page .directory-page--category .cat-hero .cat-hero__quick-start:hover svg {
  transform: translateX(2px);
}

@media (max-width: 640px) {
  .category-detail-page .directory-page--category .cat-hero .directory-hero__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: .5rem;
    width: 100%;
  }

  .category-detail-page .directory-page--category .cat-hero .directory-hero__actions > .directory-btn {
    width: 100%;
    min-height: 44px;
    gap: .35rem;
    padding-inline: .55rem;
    font-size: .8rem;
  }

  .category-detail-page .directory-page--category .cat-hero .directory-btn svg {
    width: 1rem;
    height: 1rem;
  }
}

@media (min-width: 641px) {
  .category-detail-page .directory-page--category .cat-hero__badge {
    border-color: var(--hero-brand-badge-line);
    background: var(--hero-brand-badge-bg);
    color: var(--hero-brand-ink);
    box-shadow: var(--hero-brand-badge-shadow);
    -webkit-backdrop-filter: blur(10px) saturate(145%);
    backdrop-filter: blur(10px) saturate(145%);
  }
}

@media (max-width: 640px) {
  .category-detail-page .directory-page--category .cat-hero__badge {
    color: var(--hero-brand-muted);
  }
}