/* ==========================================================================
   DigiTalents — Our Talents page
   Depends on dt-core.css for tokens, reset and shared chrome.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Helpers
   -------------------------------------------------------------------------- */

.is-hidden { display: none !important; }

.talents-c-mid2     { color: var(--c-gradient-mid-2); }
.talents-c-tertiary { color: var(--c-tertiary); }
.talents-c-error    { color: var(--c-error); }

/* The source design used a green "available" dot outside the brand palette. */
.dt { --c-live-green: #34d399; }

.talents-clamp {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* Arrow points the reading direction in RTL */
.talents-flip { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   Canvas and ambient glows
   -------------------------------------------------------------------------- */

.talents-canvas {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.talents-glow {
  position: absolute;
  border-radius: var(--radius-full);
  pointer-events: none;
}

.talents-glow--a {
  top: -8rem;
  right: -8rem;
  width: 24rem;
  height: 24rem;
  background-color: rgb(167 75 247 / 0.2);
  filter: blur(128px);
}

.talents-glow--b {
  top: 33.333333%;
  left: -8rem;
  width: 30rem;
  height: 30rem;
  background-color: rgb(241 62 245 / 0.15);
  filter: blur(140px);
}

.talents-glow--c {
  bottom: 2.5rem;
  right: 25%;
  width: 20rem;
  height: 20rem;
  background-color: rgb(252 164 136 / 0.15);
  filter: blur(120px);
}

/* --------------------------------------------------------------------------
   Page header
   -------------------------------------------------------------------------- */

.talents-head,
.talents-section {
  position: relative;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--margin-sm);
}

@media (min-width: 768px) {
  .talents-head,
  .talents-section { padding-inline: var(--margin); }
}

@media (min-width: 1024px) {
  .talents-head,
  .talents-section { padding-inline: var(--margin-lg); }
}

.talents-head {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-lg);
}

.talents-section { padding-block: var(--space-lg); }
.talents-section--cta { padding-block: var(--space-xl); }

.talents-head__top {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-lg);
}

@media (min-width: 1024px) {
  .talents-head__top {
    flex-direction: row;
    align-items: flex-end;
  }
}

.talents-head__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 48rem;
}

.talents-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.talents-eyebrow__label {
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.1em;
  font-weight: 700;
  text-transform: uppercase;
  color: #ecdcff;
}

.talents-eyebrow__sep {
  margin-inline: var(--space-xs);
  color: var(--c-outline-variant);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.talents-title {
  font-size: 40px;
  line-height: 46px;
  letter-spacing: -0.025em;
  font-weight: 800;
  color: var(--c-text-premium-white);
}

@media (min-width: 1024px) {
  .talents-title {
    font-size: 64px;
    line-height: 72px;
  }
}

.talents-head__lead { max-width: 42rem; }

.talents-stats {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-xl);
  background-color: var(--c-surface-card);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: var(--shadow-xl);
}

.talents-stats__value {
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--c-text-premium-white);
}

.talents-stats__divider {
  width: 1px;
  height: 2rem;
  background-color: var(--c-surface-border);
  flex: none;
}

.talents-dot-live {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background-color: var(--c-live-green);
  flex: none;
}

/* --------------------------------------------------------------------------
   Filters
   -------------------------------------------------------------------------- */

.talents-filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.talents-track {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding-bottom: var(--space-xs);
  overflow-x: auto;
  scrollbar-width: none;
}

.talents-track::-webkit-scrollbar { display: none; }

.talents-track__label {
  padding-inline: var(--space-xs);
  color: var(--c-outline);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.04em;
  font-weight: 600;
  flex-shrink: 0;
}

.talents-pill {
  display: flex;
  -webkit-user-select: none;
  user-select: none;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  background-color: var(--c-surface-container);
  color: var(--c-on-surface-variant);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.02em;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 150ms var(--ease);
}

.talents-pill:hover {
  background-color: var(--c-surface-container-high);
  color: var(--c-text-premium-white);
}

.talents-choice:checked + .talents-pill {
  background-color: var(--c-primary-container);
  color: var(--c-on-primary-container);
  box-shadow: var(--shadow-md);
}

.talents-pill__mark {
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.talents-chip {
  display: inline-flex;
  align-items: center;
  -webkit-user-select: none;
  user-select: none;
  padding: 0.25rem var(--space-sm);
  border-radius: var(--radius-lg);
  background-color: var(--c-surface-container-low);
  color: var(--c-on-surface-variant);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.04em;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 150ms var(--ease);
}

.talents-chip:hover { color: var(--c-on-surface); }

.talents-choice:checked + .talents-chip {
  background-color: var(--c-surface-container-highest);
  color: var(--c-text-premium-white);
}


/* --------------------------------------------------------------------------
   Filtering
   The chips and pills are radio inputs behind labels, and the filtering is
   done here rather than in script: :has() lets an ancestor react to which
   radio is checked, so the roster filters with no JavaScript on the page and
   stays operable from the keyboard. A browser without :has() support simply
   shows every creator, which is the correct fallback.
   -------------------------------------------------------------------------- */

.talents-choice {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.talents-choice:checked + .talents-chip {
  background-color: var(--c-surface-container-highest);
  color: var(--c-text-premium-white);
}

.talents-choice:focus-visible + .talents-chip,
.talents-choice:focus-visible + .talents-pill {
  outline: 2px solid var(--c-gradient-mid-1);
  outline-offset: 2px;
}

.talents-card { display: flex; }

.talents-canvas:has(#niche-lifestyle:checked) .talents-card:not([data-category="lifestyle"]) { display: none; }
.talents-canvas:has(#niche-tech:checked) .talents-card:not([data-category="tech"]) { display: none; }
.talents-canvas:has(#niche-beauty:checked) .talents-card:not([data-category="beauty"]) { display: none; }
.talents-canvas:has(#niche-food:checked) .talents-card:not([data-category="food"]) { display: none; }
.talents-canvas:has(#niche-fitness:checked) .talents-card:not([data-category="fitness"]) { display: none; }
.talents-canvas:has(#niche-business:checked) .talents-card:not([data-category="business"]) { display: none; }

.talents-canvas:has(#plat-tiktok:checked) .talents-card:not([data-platforms~="tiktok"]) { display: none; }
.talents-canvas:has(#plat-instagram:checked) .talents-card:not([data-platforms~="instagram"]) { display: none; }
.talents-canvas:has(#plat-youtube:checked) .talents-card:not([data-platforms~="youtube"]) { display: none; }
.talents-canvas:has(#plat-ugc:checked) .talents-card:not([data-platforms~="ugc"]) { display: none; }

/* --------------------------------------------------------------------------
   Creator cards
   -------------------------------------------------------------------------- */

.talents-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 640px) {
  .talents-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .talents-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.talents-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
  background-color: var(--c-surface-card);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  transition: all 300ms var(--ease);
}

.talents-card:hover {
  transform: translateY(-0.375rem);
  box-shadow: 0 16px 36px -10px rgba(167, 75, 247, 0.4);
}

.talents-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background-color: var(--c-surface-container-low);
  overflow: hidden;
}

.talents-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 500ms var(--ease);
}

.talents-card:hover .talents-card__img { transform: scale(1.05); }

.talents-card__scrim {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to top,
    var(--c-surface),
    rgb(35 28 49 / 0.3),
    transparent
  );
}

.talents-card__top {
  position: absolute;
  top: 0.75rem;
  inset-inline: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.talents-status {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem var(--space-sm);
  border-radius: var(--radius-full);
  background-color: rgb(46 35 76 / 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--c-text-premium-white);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.1em;
  font-weight: 700;
  text-transform: uppercase;
}

.talents-status--hot {
  background-color: var(--c-secondary-container);
  color: var(--c-on-secondary-container);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.talents-status--mega {
  background-image: linear-gradient(to right, var(--c-gradient-start), var(--c-gradient-mid-1));
  color: var(--c-text-premium-white);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.talents-status__dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--radius-full);
  background-color: var(--c-live-green);
  flex: none;
}

.talents-status__dot--pulse {
  animation: dt-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.talents-status__glyph { font-size: 12px; }

.talents-er {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem var(--space-sm);
  border-radius: var(--radius-full);
  background-color: rgb(185 107 255 / 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--c-on-primary-container);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.talents-er__icon { font-size: 13px; }

.talents-card__bottom {
  position: absolute;
  bottom: 0.75rem;
  inset-inline: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--c-text-premium-white);
}

.talents-reach {
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius);
  background-color: rgba(28, 22, 46, 0.8);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: var(--c-text-muted-lilac);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.talents-match {
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius);
  background-color: rgb(46 35 76 / 0.8);
  color: #ecdcff;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.talents-match--warm {
  color: var(--c-gradient-end);
}

.talents-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  background-color: var(--c-surface-card);
}

.talents-card__name {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  color: var(--c-text-premium-white);
  transition: color 150ms var(--ease);
}

.talents-card:hover .talents-card__name { color: var(--c-primary); }

.talents-card__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  background-color: var(--c-surface-container-high);
  color: var(--c-primary);
  transition: all 150ms var(--ease);
  flex: none;
}

.talents-card:hover .talents-card__badge {
  background-color: var(--c-primary-container);
  color: var(--c-on-primary-container);
}

.talents-card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-top: var(--space-xs);
}

.talents-btn-main {
  display: flex;
  flex: 1 1 0%;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0.5rem var(--space-md);
  border-radius: var(--radius-lg);
  background-color: var(--c-surface-container);
  color: var(--c-text-premium-white);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.04em;
  font-weight: 600;
  text-align: center;
  transition: all 300ms var(--ease);
}

.talents-btn-main:hover {
  background-image: linear-gradient(to right, var(--c-gradient-start), var(--c-gradient-mid-1));
}

.talents-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-lg);
  background-color: var(--c-surface-container);
  color: var(--c-on-surface-variant);
  transition: all 150ms var(--ease);
  flex: none;
}

.talents-btn-icon:hover {
  background-color: var(--c-surface-container-high);
  color: var(--c-primary);
}

/* --------------------------------------------------------------------------
   Join CTA banner
   -------------------------------------------------------------------------- */

.talents-banner {
  position: relative;
  padding: var(--space-lg);
  border-radius: var(--radius-xl);
  background-image: linear-gradient(
    to bottom left,
    var(--c-surface-container-high),
    var(--c-surface-card),
    var(--c-surface-container-lowest)
  );
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  overflow: hidden;
}

@media (min-width: 1024px) {
  .talents-banner { padding: var(--space-xl); }
}

.talents-banner__sheen {
  position: absolute;
  width: 20rem;
  height: 20rem;
  border-radius: var(--radius-full);
  filter: blur(64px);
  pointer-events: none;
}

.talents-banner__sheen--a {
  right: -4rem;
  top: -4rem;
  background-color: rgb(167 75 247 / 0.25);
}

.talents-banner__sheen--b {
  left: -4rem;
  bottom: -4rem;
  background-color: rgb(252 164 136 / 0.2);
}

.talents-banner__row {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

@media (min-width: 1024px) {
  .talents-banner__row { flex-direction: row; }
}

.talents-banner__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 42rem;
  text-align: center;
}

@media (min-width: 1024px) {
  .talents-banner__copy { text-align: right; }
}

.talents-banner__badge {
  display: inline-flex;
  align-self: center;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.25rem var(--space-sm);
  border-radius: var(--radius-full);
  background-color: rgb(185 107 255 / 0.2);
  color: #ecdcff;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.1em;
  font-weight: 700;
  text-transform: uppercase;
}

@media (min-width: 1024px) {
  .talents-banner__badge { align-self: flex-start; }
}

.talents-banner__badge-glyph { font-size: 14px; }

.talents-banner__title {
  font-size: 32px;
  line-height: 38px;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--c-text-premium-white);
}

@media (min-width: 1024px) {
  .talents-banner__title {
    font-size: 44px;
    line-height: 52px;
  }
}

.talents-banner__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .talents-banner__actions {
    flex-direction: row;
    width: auto;
  }
}

.talents-btn-ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 2px;
  border-radius: var(--radius-full);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.02em;
  font-weight: 600;
  box-shadow: 0 12px 32px -8px rgba(167, 75, 247, 0.5);
  overflow: hidden;
}

@media (min-width: 640px) {
  .talents-btn-ring { width: auto; }
}

.talents-btn-ring__fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: var(--dt-gradient-ltr);
  transition: transform 300ms var(--ease);
}

.talents-btn-ring:hover .talents-btn-ring__fill { transform: scale(1.05); }

.talents-btn-ring__label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  width: 100%;
  padding: var(--space-sm) var(--space-xl);
  border-radius: var(--radius-full);
  background-color: var(--c-surface-container-lowest);
  color: var(--c-text-premium-white);
  font-weight: 700;
  transition: all 300ms var(--ease);
}

@media (min-width: 640px) {
  .talents-btn-ring__label { width: auto; }
}

.talents-btn-ring:hover .talents-btn-ring__label { background-color: transparent; }

.talents-btn-soft {
  width: 100%;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-full);
  background-color: var(--c-surface-container);
  color: var(--c-on-surface);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.02em;
  font-weight: 600;
  text-align: center;
  transition: all 150ms var(--ease);
}

@media (min-width: 640px) {
  .talents-btn-soft { width: auto; }
}

.talents-btn-soft:hover { background-color: var(--c-surface-container-high); }

.talents-banner__metrics {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-xl);
  padding: var(--space-md);
  padding-top: var(--space-lg);
  border-radius: var(--radius-lg);
  background-color: rgba(28, 22, 46, 0.4);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

@media (min-width: 768px) {
  .talents-banner__metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.talents-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (min-width: 1024px) {
  .talents-metric { align-items: flex-start; }
}

.talents-metric__value {
  font-size: 28px;
  line-height: 36px;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--c-text-premium-white);
}