/* GFLB educational visual language: paper texture, structured paths, and restrained geometry. */
.module-illustration {
  --module-accent: var(--brand-learning-gold);
  position: relative;
  display: grid;
  flex: 0 0 auto;
  width: clamp(5rem, 9vw, 7.5rem);
  aspect-ratio: 1;
  margin: 0;
  overflow: hidden;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--module-accent) 45%, var(--color-border));
  border-radius: 32% 68% 58% 42% / 42% 35% 65% 58%;
  background: color-mix(in srgb, var(--module-accent) 14%, var(--color-surface));
  color: var(--brand-evergreen-900);
}

.module-illustration-2,
.module-illustration-5 {
  --module-accent: var(--brand-sea-glass);
}

.module-illustration-3,
.module-illustration-6 {
  --module-accent: var(--brand-harbor-teal);
}

.module-illustration-4,
.module-illustration-7 {
  --module-accent: var(--brand-learning-gold);
}

.module-illustration-orbit {
  position: absolute;
  width: 72%;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--module-accent) 65%, transparent);
  border-radius: 50%;
  transform: translate(20%, -18%);
}

.module-illustration-icon {
  display: grid;
  width: 48%;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.module-illustration-icon .icon {
  width: 52%;
  height: 52%;
}

.module-illustration-step {
  position: absolute;
  right: 12%;
  bottom: 10%;
  color: var(--brand-evergreen-900);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
}

.module-hero,
.course-overview-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-7);
  align-items: center;
}

.module-hero-copy {
  position: relative;
  z-index: 1;
}

.module-hero-copy > p:not(.eyebrow) {
  max-width: 700px;
  margin: var(--space-4) 0 0;
  color: var(--color-text-inverse-muted);
}

.module-hero .module-illustration {
  z-index: 1;
  width: clamp(8rem, 15vw, 12rem);
  border-color: var(--color-inverse-border);
  background: var(--color-inverse-fill-muted);
  color: var(--color-text-inverse);
}

.module-hero .module-illustration-icon {
  background: var(--color-inverse-fill);
  color: var(--color-text-inverse);
}

.module-hero .module-illustration-step {
  color: var(--brand-learning-gold);
}

.course-hero-art {
  position: relative;
  z-index: 1;
  width: clamp(12rem, 24vw, 22rem);
  aspect-ratio: 3 / 2;
  border: 1px solid var(--color-inverse-border);
  border-radius: var(--radius-xl);
  object-fit: cover;
  box-shadow: var(--shadow-md);
}

.module-content-card-visual {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.module-content-card-visual .module-illustration {
  width: 4.75rem;
}

.featured-course-card > img,
.catalog-cover,
.course-detail-cover,
.account-visual img,
.modal-illustration img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.featured-course-card > img,
.course-detail-cover {
  aspect-ratio: 3 / 2;
}

.catalog-card:has(.catalog-cover) {
  display: grid;
  grid-template-columns: minmax(14rem, 0.55fr) minmax(0, 1fr) auto;
  align-items: center;
}

.catalog-cover {
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-lg);
}

.course-detail-cover {
  margin-bottom: var(--space-8);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.public-module-visuals {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

.public-module-visuals li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.public-module-visuals .module-illustration {
  width: 4.5rem;
}

.public-module-visuals strong,
.public-module-visuals span {
  display: block;
}

.public-module-visuals span {
  margin-top: var(--space-1);
  color: var(--color-text-secondary);
}

.lesson-visual {
  position: relative;
  overflow: hidden;
}

.lesson-visual::after {
  position: absolute;
  right: -4rem;
  bottom: -5rem;
  width: 11rem;
  aspect-ratio: 1;
  border: 1.5rem solid color-mix(in srgb, var(--brand-learning-gold) 18%, transparent);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.lesson-visual-track {
  position: relative;
  z-index: 1;
}

.lesson-visual-item {
  overflow: visible;
}

.lesson-visual-connector {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: calc(var(--space-3) * -1 - 7px);
  width: 14px;
  height: 14px;
  border-top: 2px solid var(--brand-learning-gold);
  border-right: 2px solid var(--brand-learning-gold);
  transform: translateY(-50%) rotate(45deg);
}

.lesson-visual-timeline .lesson-visual-track::before {
  position: absolute;
  top: 1.65rem;
  right: 6%;
  left: 6%;
  height: 2px;
  background: var(--brand-sea-glass);
  content: "";
}

.lesson-visual-timeline .lesson-visual-item span {
  position: relative;
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-evergreen-900);
  color: var(--color-text-inverse);
}

.lesson-visual-compare .lesson-visual-item:nth-child(even),
.lesson-visual-layers .lesson-visual-item:nth-child(even) {
  background: var(--color-surface-subtle);
}

.lesson-visual-layers .lesson-visual-track {
  align-items: end;
}

.lesson-visual-layers .lesson-visual-item:nth-child(2) {
  min-height: 142px;
}

.lesson-visual-layers .lesson-visual-item:nth-child(3) {
  min-height: 166px;
}

.lesson-scenario {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.scenario-illustration {
  position: relative;
  display: grid;
  width: 7.5rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 42% 58% 52% 48%;
  background: var(--color-surface-subtle);
  color: var(--brand-evergreen-900);
}

.scenario-illustration span {
  display: grid;
  width: 3.5rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.scenario-illustration .icon {
  width: 1.6rem;
}

.scenario-illustration i,
.scenario-illustration b {
  position: absolute;
  width: 1rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--brand-learning-gold);
}

.scenario-illustration i {
  top: 14%;
  right: 14%;
}

.scenario-illustration b {
  bottom: 12%;
  left: 12%;
  background: var(--brand-sea-glass);
}

.learning-visual-library > header {
  max-width: 48rem;
  margin-bottom: var(--space-8);
}

.learning-visual-library > header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
}

.learning-visual-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.mini-explainer {
  display: grid;
  gap: var(--space-5);
  margin: 0;
  padding: clamp(var(--space-5), 4vw, var(--space-7));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, var(--color-surface), var(--color-surface-subtle));
  box-shadow: var(--shadow-sm);
}

.mini-explainer:last-child {
  grid-column: 1 / -1;
}

.mini-explainer figcaption {
  color: var(--brand-evergreen-950);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
}

.mini-explainer > p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.budget-stack,
.factor-bars {
  display: grid;
  gap: var(--space-2);
}

.budget-stack span,
.factor-bars span {
  width: var(--visual-share);
  min-width: 8rem;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--brand-harbor-teal);
  color: var(--color-text-inverse);
  font-size: var(--text-xs);
  font-weight: 700;
}

.budget-stack span:nth-child(2),
.factor-bars span:nth-child(2) {
  background: var(--brand-evergreen-900);
}

.budget-stack span:nth-child(3),
.factor-bars span:nth-child(3) {
  background: var(--brand-learning-gold);
  color: var(--brand-evergreen-950);
}

.budget-stack span:nth-child(4),
.factor-bars span:nth-child(4),
.factor-bars span:nth-child(5) {
  background: var(--brand-sea-glass);
  color: var(--brand-evergreen-950);
}

.decision-map,
.investing-path,
.fraud-flow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.decision-map span,
.investing-path span,
.fraud-flow span,
.fraud-flow b {
  flex: 1 1 7rem;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--brand-evergreen-950);
  font-size: var(--text-sm);
  text-align: center;
}

.decision-map b {
  color: var(--brand-learning-gold);
}

.investing-path span {
  border-top: 5px solid var(--brand-sea-glass);
}

.investing-path span:nth-child(even) {
  border-top-color: var(--brand-learning-gold);
}

.fraud-flow b {
  border-color: var(--brand-learning-gold);
  background: color-mix(in srgb, var(--brand-learning-gold) 13%, var(--color-surface));
}

.account-experience {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.95fr);
  gap: var(--space-7);
  align-items: stretch;
  max-width: var(--container-default);
}

.account-visual {
  display: grid;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--brand-evergreen-900);
}

.account-visual img {
  min-height: 100%;
  aspect-ratio: 4 / 3;
}

.account-visual figcaption {
  padding: var(--space-4) var(--space-5);
  background: var(--brand-evergreen-900);
  color: var(--color-text-inverse-muted);
  font-size: var(--text-sm);
}

.account-experience .account-panel {
  max-width: none;
}

.modal-illustration {
  overflow: hidden;
  margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-5);
  border-radius: var(--radius-lg);
}

.modal-illustration img {
  aspect-ratio: 16 / 7;
}

.empty-state-illustration {
  position: relative;
  display: grid;
  width: 8rem;
  aspect-ratio: 4 / 3;
  place-items: center;
}

.empty-state-illustration i {
  position: absolute;
  inset: 8% 0 0;
  border-radius: 50% 50% 42% 58%;
  background: var(--color-surface-subtle);
}

.empty-state-illustration b {
  position: relative;
  display: grid;
  width: 4.5rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--brand-harbor-teal);
  box-shadow: var(--shadow-sm);
}

.empty-state-illustration b .icon {
  width: 2rem;
}

.empty-state-illustration em {
  position: absolute;
  right: 8%;
  bottom: 6%;
  width: 1.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--brand-learning-gold);
}

.achievement-badge {
  position: relative;
  display: grid;
  width: 5rem;
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid var(--color-border-strong);
  border-radius: 28% 72% 36% 64% / 62% 34% 66% 38%;
  background: var(--color-surface-subtle);
  color: var(--color-text-secondary);
  transform: rotate(-3deg);
}

.achievement-badge .icon {
  width: 2rem;
  transform: rotate(3deg);
}

.achievement-badge i {
  position: absolute;
  right: -0.25rem;
  bottom: -0.25rem;
  width: 1.35rem;
  aspect-ratio: 1;
  border: 3px solid var(--color-surface);
  border-radius: 50%;
  background: var(--color-border-strong);
}

.achievement-badge.is-earned {
  border-color: var(--brand-learning-gold);
  background: color-mix(in srgb, var(--brand-learning-gold) 15%, var(--color-surface));
  color: var(--brand-evergreen-950);
}

.achievement-badge.is-earned i {
  background: var(--brand-harbor-teal);
}

.certificate::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22rem;
  aspect-ratio: 1;
  border: 2.5rem solid color-mix(in srgb, var(--brand-sea-glass) 12%, transparent);
  border-radius: 50%;
  content: "";
  transform: translate(-50%, -50%);
  pointer-events: none;
}

@media (max-width: 64rem) {
  .catalog-card:has(.catalog-cover) {
    grid-template-columns: minmax(12rem, 0.5fr) minmax(0, 1fr);
  }

  .catalog-card:has(.catalog-cover) .button {
    grid-column: 1 / -1;
  }

  .account-experience {
    grid-template-columns: 1fr;
  }

  .account-visual {
    grid-template-columns: minmax(0, 0.7fr) minmax(14rem, 0.3fr);
  }
}

@media (max-width: 47.99rem) {
  .module-hero,
  .course-overview-hero {
    grid-template-columns: 1fr;
  }

  .module-hero .module-illustration,
  .course-hero-art {
    width: min(100%, 20rem);
  }

  .module-content-card-visual {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .module-content-card-visual .button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .learning-visual-grid,
  .catalog-card:has(.catalog-cover),
  .lesson-scenario {
    grid-template-columns: 1fr;
  }

  .mini-explainer:last-child,
  .catalog-card:has(.catalog-cover) .button {
    grid-column: auto;
  }

  .account-visual {
    grid-template-columns: 1fr;
  }

  .scenario-illustration {
    width: 6rem;
  }
}

@media (max-width: 35rem) {
  .lesson-visual-connector {
    display: none;
  }

  .lesson-visual-timeline .lesson-visual-track::before {
    top: 6%;
    bottom: 6%;
    left: 1rem;
    width: 2px;
    height: auto;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .module-content-card:hover .module-illustration-icon {
    transform: translateY(-2px);
    transition: transform var(--duration-fast) var(--ease-standard);
  }
}