/* role_detail (templates/marketplace/public/role_detail.html): one open role, section cards beside the interest card,
   blurred gated details; tokens only. */

.role {
  padding-block: var(--ds-space-48) var(--ds-space-120);
}

.role__back {
  margin-bottom: var(--ds-space-32);
}

.role__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ds-space-16);
  margin-bottom: var(--ds-space-32);
}

.role__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-8) var(--ds-space-24);
  padding: 0;
  list-style: none;
  color: var(--public-muted);
  font-size: var(--ds-type-small-size);
  line-height: var(--ds-type-small-leading);
}

.role__meta li {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-8);
}

.role__meta .ds-icon {
  width: 16px;
  height: 16px;
}

/* Compensation type tones (as on the board) */
.role-comp--equity {
  background: var(--ds-status-active-bg);
  border-color: var(--ds-status-active-bg);
  color: var(--ds-status-active-text);
}

.role-comp--hybrid {
  background: var(--ds-status-info-bg);
  border-color: var(--ds-status-info-bg);
  color: var(--ds-status-info-text);
}

.role-comp--milestone {
  background: var(--ds-status-success-bg);
  border-color: var(--ds-status-success-bg);
  color: var(--ds-status-success-text);
}

.role-comp--revenue_share {
  background: var(--ds-status-warning-bg);
  border-color: var(--ds-status-warning-bg);
  color: var(--ds-status-warning-text);
}

/* Main column of section cards beside a sticky interest card */
.role__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--ds-space-32);
  align-items: start;
}

.role__main {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-24);
  min-width: 0;
}

.role__aside {
  position: sticky;
  top: var(--ds-space-24);
}

.role-section {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-16);
}

.role-section__title {
  display: flex;
  align-items: center;
  gap: var(--ds-space-8);
}

.role-section__title .ds-icon {
  color: var(--public-muted);
}

.role-teaser {
  align-self: flex-start;
  padding: var(--ds-space-8) var(--ds-space-12);
  border-radius: var(--ds-radius-12);
  background: var(--ds-status-success-bg);
  color: var(--ds-status-success-text);
  font-size: var(--ds-type-small-size);
  line-height: var(--ds-type-small-leading);
  font-weight: 600;
}

/* Gated details: placeholder text blurred under a sign-up prompt */
.role-gated {
  position: relative;
  overflow: hidden;
  border-radius: var(--ds-radius-12);
  background: var(--ds-surface-subtle);
}

.role-gated__content {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-8);
  padding: var(--ds-space-24);
  filter: blur(6px);
  user-select: none;
  pointer-events: none;
}

.role-gated__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-12);
  padding: var(--ds-space-16);
  background: color-mix(in srgb, var(--ds-surface) 60%, transparent);
  text-align: center;
}

.role-gated__icon {
  display: inline-flex;
  padding: var(--ds-space-8);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface);
  color: var(--ds-text);
  box-shadow: var(--ds-shadow-card);
}

.role-gated__text {
  color: var(--ds-text);
  font-weight: 600;
}

.role-gated__note {
  color: var(--ds-text-muted);
  font-size: var(--ds-type-small-size);
  line-height: var(--ds-type-small-leading);
}

/* Milestones */
.role-milestones {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-12);
  padding: 0;
  list-style: none;
}

.role-milestone {
  display: flex;
  gap: var(--ds-space-16);
  padding: var(--ds-space-16);
  border: 1px solid var(--ds-border-subtle);
  border-radius: var(--ds-radius-12);
}

.role-milestone__number {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--ds-space-32);
  height: var(--ds-space-32);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-inverse);
  color: var(--ds-on-inverse);
  font-size: var(--ds-type-small-size);
  font-weight: 600;
}

.role-milestone__body {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
  min-width: 0;
}

.role-milestone__title {
  font-weight: 600;
}

.role-milestone__criteria {
  color: var(--public-muted);
  font-size: var(--ds-type-small-size);
  line-height: var(--ds-type-small-leading);
}

.role-milestone__payout {
  margin-top: var(--ds-space-4);
  font-size: var(--ds-type-small-size);
  line-height: var(--ds-type-small-leading);
  font-weight: 600;
}

.role-milestone__payout--blurred {
  filter: blur(5px);
  user-select: none;
}

/* Interest card */
.role-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ds-space-12);
}

.role-cta__text {
  color: var(--public-muted);
  font-size: var(--ds-type-small-size);
  line-height: var(--ds-type-small-leading);
}

.role-cta__form {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-12);
  width: 100%;
}

.role-cta__button {
  width: 100%;
}

@media (max-width: 1023px) {
  .role__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .role__aside {
    position: static;
  }
}

@media (max-width: 767px) {
  .role {
    padding-block: var(--ds-space-32) var(--ds-space-64);
  }
}