/* Result Preview component - from free-assessment.html
   Uses deel-gpt variables where available, fallbacks for missing tokens. */

/* Fallbacks for design tokens not in deel-gpt */
.result-preview {
  --rp-spacing-enormous: 80px;
  --rp-spacing-xxxl: 48px;
  --rp-spacing-xl: 24px;
  --rp-spacing-lg: 20px;
  --rp-spacing-md: 16px;
  --rp-spacing-sm: 12px;
  --rp-spacing-xs: 8px;
  --rp-radius-circular: 9999px;
  --rp-radius-xl: 24px;
  --rp-color-green-400: #22c55e;
  --rp-color-cornbread-400: #d4a017;
  --rp-color-purple-525: #a98df6;
  --rp-color-purple-400: #c4b1f9;
  --rp-content-on-dark-secondary: rgba(250, 244, 238, 0.85);
  --rp-content-on-dark-accessory: rgba(250, 244, 238, 0.65);
}

/* Wrapper uses Tailwind: w-full tablet:px-xxxs for outer padding;
   inner div has bg-surface-dark rounded-0 tablet:rounded-[20px] for contained dark box.
   No full-width background on .result-preview. */
.result-preview {
  overflow: hidden;
}

/* Override padding on result-preview dark box: 72px top, no bottom */
.result-preview > .bg-surface-dark {
  padding-top: 72px;
  padding-bottom: 0;
}

/* Homepage banner: keep 72px bottom padding */
.result-preview--banner-pb > .bg-surface-dark {
  padding-bottom: 72px;
}

.result-preview .fa-result-report-img {
  padding-bottom: 0;
  margin-bottom: 0;
  align-self: end;
}

/* Match v4 .container: max-width 1312px, centered, padding */
.result-preview-container {
  max-width: 1312px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

.result-preview-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rp-spacing-xxxl);
  align-items: center;
}

@media (max-width: 768px) {
  .result-preview-inner {
    grid-template-columns: 1fr;
  }
}

.result-preview-copy {
  display: flex;
  flex-direction: column;
  gap: var(--rp-spacing-md);
}

.result-preview-overline {
  font-family: var(--font-inter);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rp-color-purple-525);
}

.result-preview-heading {
  margin-top: 0;
  margin-bottom: 0;
  font-family: var(--font-bagoss-condensed);
  font-size: 44px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--color-content-on-dark-primary, #faf4ee);
  font-feature-settings: 'ss02' on;
}

.result-preview-desc {
  font-family: var(--font-inter);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 1);
}

.result-toggle {
  display: flex;
  gap: 2px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--rp-radius-circular);
  padding: 3px;
  width: fit-content;
}

.result-toggle-btn {
  font-family: var(--font-bagoss-standard);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: var(--rp-radius-circular);
  cursor: pointer;
  color: var(--rp-content-on-dark-accessory);
  transition: all 0.2s ease;
  border: none;
  background: transparent;
}

.result-toggle-btn.active {
  background: var(--color-purple-750, #5938b7);
  color: #fff;
}

.result-preview-includes {
  display: flex;
  flex-direction: column;
  gap: var(--rp-spacing-xs);
}

.result-include-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-bagoss-standard);
  font-size: 18px;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
}

.result-include-icon {
  width: 20px;
  height: 20px;
  background: rgba(89, 56, 183, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--rp-color-purple-400);
  flex-shrink: 0;
}

/* For Leaders & Teams section only: solid purple background, white icon */
.fixed-gap .result-preview-includes .result-include-icon {
  background: #5938B7;
  color: #fff;
}

/* CTA button - btn btn-purple btn-lg (shared: hero + result-preview) */
.btn.btn-purple.btn-lg,
.result-preview .btn.btn-purple.btn-lg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-bagoss-standard);
  font-size: 16px;
  font-weight: 600;
  border-radius: 9999px;
  padding: 14px 28px;
  cursor: pointer;
  border: none;
  transition: all 0.15s ease;
  white-space: nowrap;
  text-decoration: none;
  font-feature-settings: 'ss02' on;
  background: var(--color-purple-750, #5938b7);
  color: #fff;
  box-shadow: 0 4px 8px rgba(89, 56, 183, 0.25);
}

.btn.btn-purple.btn-lg:hover,
.result-preview .btn.btn-purple.btn-lg:hover {
  background: #452995;
}

.result-preview .btn {
  margin-top: 16px;
}

.result-card-full {
  background: var(--color-surface-card-on-dark, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--color-border-primary-on-dark, rgba(250, 244, 238, 0.16));
  backdrop-filter: blur(12px);
  border-radius: var(--rp-radius-xl);
  padding: var(--rp-spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--rp-spacing-lg);
}

.result-card-top {
  display: flex;
  flex-direction: column;
  gap: var(--rp-spacing-xs);
}

.result-card-archetype-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: color-mix(in srgb, var(--archetype-color, #5938b7) 25%, transparent);
  border: 1px solid color-mix(in srgb, var(--archetype-color, #a98df6) 40%, transparent);
  color: var(--archetype-color, var(--rp-color-purple-400));
  font-family: var(--font-bagoss-standard);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--rp-radius-circular);
  width: fit-content;
}

.result-card-archetype-name {
  font-family: var(--font-bagoss-condensed);
  font-size: 36px;
  font-weight: 500;
  color: var(--color-content-on-dark-primary, #faf4ee);
  line-height: 1.1;
  font-feature-settings: 'ss02' on;
}

.result-card-tagline {
  font-family: var(--font-inter);
  font-size: 14px;
  color: var(--rp-content-on-dark-secondary);
  line-height: 1.5;
}

.result-card-rank-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 207, 37, 0.15);
  border: 1px solid rgba(255, 207, 37, 0.3);
  color: var(--rp-color-cornbread-400);
  font-family: var(--font-bagoss-standard);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--rp-radius-circular);
  width: fit-content;
}

.result-card-powers {
  display: flex;
  flex-direction: column;
  gap: var(--rp-spacing-xs);
}

.result-card-powers-label {
  font-family: var(--font-inter);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rp-content-on-dark-accessory);
}

.rc-superpower {
  display: flex;
  align-items: center;
  gap: var(--rp-spacing-xs);
}

.rc-superpower-name {
  font-family: var(--font-bagoss-standard);
  font-size: 13px;
  font-weight: 500;
  color: var(--rp-content-on-dark-secondary);
  width: 130px;
  flex-shrink: 0;
}

.rc-superpower-track {
  flex: 1;
  height: 5px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  overflow: hidden;
}

.rc-superpower-fill {
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--archetype-color, var(--color-purple-750, #5938b7)), color-mix(in srgb, var(--archetype-color, var(--rp-color-purple-525)) 85%, white));
}

.rc-superpower-score {
  font-family: var(--font-bagoss-extended);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-content-on-dark-primary, #faf4ee);
  width: 30px;
  text-align: right;
}

.result-card-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rp-spacing-sm);
  padding-top: var(--rp-spacing-sm);
  border-top: 1px solid rgba(250, 244, 238, 0.08);
}

.result-card-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.result-card-metric-label {
  font-family: var(--font-inter);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rp-content-on-dark-accessory);
}

.result-card-metric-value {
  font-family: var(--font-bagoss-extended);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--color-content-on-dark-primary, #faf4ee);
}

.result-card-metric-sub {
  font-family: var(--font-bagoss-standard);
  font-size: 13px;
  font-weight: 500;
  color: var(--rp-color-green-400);
}

/* Result cards Swiper - swipe carousel matching hero behavior */
.result-cards-swiper {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.result-cards-swiper .swiper-slide {
  height: auto;
  display: flex;
}

.result-cards-swiper .swiper-slide .result-card-full {
  width: 100%;
}

.result-cards-prev,
.result-cards-next {
  display: none !important;
}

.result-cards-prev:hover,
.result-cards-next:hover {
  background: rgba(255, 255, 255, 0.35);
  color: var(--rp-color-purple-400);
}

.result-cards-prev.swiper-button-disabled,
.result-cards-next.swiper-button-disabled {
  opacity: 0.4;
  cursor: default;
}