/* Difficulty levels and the academy home. Surfaces and type come from the theme tokens, so the light and dark schemes follow. */
:root {
  --academy-beginner: #12b76a;
  --academy-intermediate: #f79009;
  --academy-advanced: #7a5af8;
  --academy-radius: 1rem;
  --academy-brand: #c1d45d;
}
.cs-meta-level {
  --academy-level-color: var(--cs-color-contrast-500);
}
.cs-meta-level--beginner,
.academy-level--beginner {
  --academy-level-color: var(--academy-beginner);
}
.cs-meta-level--intermediate,
.academy-level--intermediate {
  --academy-level-color: var(--academy-intermediate);
}
.cs-meta-level--advanced,
.academy-level--advanced {
  --academy-level-color: var(--academy-advanced);
}
.cs-entry__post-meta .cs-meta-level > a,
.cs-entry__post-meta .cs-meta-level > span {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.1875rem 0.5rem;
  line-height: 1;
  border-radius: 999px;
  background: color-mix(in srgb, var(--academy-level-color) 18%, transparent);
  color: var(--cs-color-primary);
  font-family: var(--cs-font-category-family), sans-serif;
  font-size: var(--cs-font-category-size);
  font-weight: var(--cs-font-category-weight);
  letter-spacing: var(--cs-font-category-letter-spacing);
  text-transform: var(--cs-font-category-text-transform);
}
.cs-meta-level > a::before,
.cs-meta-level > span::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--academy-level-color);
}

/* App-style icon: the theme's category letter tile, rounded instead of clipped so it scales. */
.academy-icon.cs-entry__title-category-letter,
.academy-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 4rem;
  height: 4rem;
  margin: 0;
  border-radius: 28%;
  clip-path: none;
  -webkit-clip-path: none;
  background-size: 100% 200%;
  font-size: 2.5rem;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.35);
}
.academy-icon--small.cs-entry__title-category-letter {
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.625rem;
}
.academy-icon--level {
  width: 3.25rem;
  height: 3.25rem;
  background: linear-gradient(180deg, var(--academy-level-color) 0%, color-mix(in srgb, var(--academy-level-color) 55%, #ffffff) 100%);
  color: #ffffff;
}
.academy-icon--level svg {
  width: 1.625rem;
  height: 1.625rem;
}

.academy-home {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  padding: 2.5rem 0 4rem;
}
.academy-section__lead {
  margin: 0.5rem 0 1.5rem;
  color: var(--cs-color-excerpt);
}

.academy-hero {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
/* Centred, text-only first screen on a soft brand glow; the H1 is the largest paint, so nothing waits for an image. */
.academy-hero__panel {
  --academy-hero-glow: color-mix(in srgb, var(--academy-brand) 24%, var(--cs-color-widgets-background));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: 3rem 1.25rem;
  border-radius: calc(var(--academy-radius) * 1.75);
  background: radial-gradient(circle, var(--cs-color-widgets-background) 0, var(--cs-color-widgets-background) 10%, var(--academy-hero-glow) 115%);
  text-align: center;
}
.academy-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.25rem;
  border-radius: 0.875rem;
  background: color-mix(in srgb, var(--academy-level-color) 12%, transparent);
  color: var(--cs-color-primary);
  font-size: 0.8125rem;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
}
.academy-hero__badge:hover {
  color: var(--cs-color-primary);
}
.academy-icon.academy-hero__badge-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 0.625rem;
}
.academy-hero__badge-icon svg {
  width: 1.125rem;
  height: 1.125rem;
}
.academy-hero__badge-cta {
  flex: none;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--cs-color-primary-contrast);
  box-shadow: 0 6px 10px -4px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05);
  transition: transform 0.25s;
}
.academy-hero__badge:hover .academy-hero__badge-cta {
  transform: translateX(2px);
}
.academy-hero__title {
  max-width: 14ch;
  margin: 0.5rem 0 0;
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.academy-hero__lead {
  max-width: 34rem;
  margin: 0;
  font-size: 1.125rem;
  color: var(--cs-color-excerpt);
}
.academy-hero .cs-search__form {
  width: 100%;
  max-width: 34rem;
  margin-top: 0.75rem;
}
.academy-hero .cs-search__form .cs-search__container {
  padding-right: 0.375rem;
  border-radius: 999px;
  box-shadow: 0 6px 10px -4px rgba(0, 0, 0, 0.12);
}
.academy-hero .cs-search__submit {
  padding: 0.875rem 1.5rem;
  border-radius: 999px;
}

.academy-levels {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.academy-level {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: var(--academy-radius);
  background: color-mix(in srgb, var(--academy-level-color) 14%, var(--cs-color-widgets-background));
  color: var(--cs-color-primary);
  text-decoration: none;
  transition: transform 0.25s, box-shadow 0.25s;
}
.academy-level:hover {
  color: var(--cs-color-primary);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -14px var(--academy-level-color);
}
.academy-level__text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.academy-level__name,
.academy-topic__name,
.academy-column__title {
  margin: 0;
  font-family: var(--cs-font-headings-family), sans-serif;
  font-weight: var(--cs-font-headings-weight);
  font-size: 1.25rem;
  line-height: 1.2;
}
.academy-level__hint,
.academy-topic__blurb,
.academy-column__hint {
  margin: 0;
  color: var(--cs-color-excerpt);
}
.academy-level__count,
.academy-topic__count {
  font-family: var(--cs-font-post-meta-family), sans-serif;
  font-size: var(--cs-font-post-meta-size);
  color: var(--cs-color-post-meta);
}

.academy-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: academy-step;
}
.academy-step {
  position: relative;
  min-height: 5rem;
  padding: 1.25rem;
  padding-inline-start: 5rem;
  border-radius: var(--academy-radius);
  background: var(--cs-color-widgets-background);
  counter-increment: academy-step;
}
.academy-step::before {
  content: counter(academy-step);
  position: absolute;
  top: 1.25rem;
  inset-inline-start: 1.25rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 28%;
  background: linear-gradient(180deg, var(--academy-beginner) 0%, color-mix(in srgb, var(--academy-beginner) 55%, #ffffff) 100%);
  color: #ffffff;
  font-family: var(--cs-font-category-letter-family), sans-serif;
  font-size: 1.5rem;
  line-height: 2.75rem;
  text-align: center;
}
.academy-step__title {
  font-family: var(--cs-font-headings-family), sans-serif;
  font-weight: var(--cs-font-headings-weight);
  color: var(--cs-color-primary);
}
.academy-step .cs-entry__post-meta:not(:first-child) {
  margin-top: 0.5rem;
}

.academy-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
.academy-column {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border-radius: var(--academy-radius);
  background: var(--cs-color-widgets-background);
  border-top: 6px solid var(--academy-level-color);
}
.academy-column__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 0.5rem;
}
.academy-column__hint {
  margin-top: 0.25rem;
}
.academy-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--cs-color-contrast-200);
}
.academy-item__body {
  min-width: 0;
}
.academy-item .cs-entry__title,
.academy-card .cs-entry__title {
  margin: 0;
  font-size: 1.125rem;
}
.academy-item .cs-entry__post-meta:not(:first-child),
.academy-card .cs-entry__post-meta:not(:first-child),
.academy-item .cs-entry__title-wrapper:not(:first-child),
.academy-card .cs-entry__title-wrapper:not(:first-child) {
  margin-top: 0.5rem;
}
.academy-item .cs-entry__title-wrapper,
.academy-card .cs-entry__title-wrapper {
  display: block;
}
.academy-more {
  display: inline-block;
  margin-top: 1.25rem;
  font-family: var(--cs-font-primary-family), sans-serif;
  font-size: var(--cs-font-primary-size);
  font-weight: var(--cs-font-primary-weight);
  text-transform: var(--cs-font-primary-text-transform);
  color: var(--cs-color-primary);
}

.academy-topic-grid,
.academy-grid,
.academy-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
.academy-section > .cs-section-heading + .academy-topic-grid,
.academy-section > .cs-section-heading + .academy-grid {
  margin-top: 1.5rem;
}
.academy-topic {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1.5rem;
  border-radius: var(--academy-radius);
  background: var(--cs-color-widgets-background);
  color: var(--cs-color-primary);
  text-decoration: none;
  transition: transform 0.25s, box-shadow 0.25s;
}
.academy-topic .academy-icon {
  margin-bottom: 0.5rem;
}
.academy-topic:hover {
  color: var(--cs-color-primary);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -16px rgba(0, 0, 0, 0.4);
}
.academy-topic:hover .academy-icon {
  background-position: center 50%;
}
.academy-card {
  display: flex;
  flex-direction: column;
}
.academy-card__body {
  padding-top: 1rem;
}

.cs-footer-badges {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}
.cs-footer-badges img {
  display: block;
  width: auto;
  height: 4rem;
}

@media (max-width: 719px) {
  .academy-hero .cs-search__submit {
    padding: 0.75rem;
    font-size: 0;
  }
  .academy-hero .cs-search__submit::before {
    content: '\e92c';
    font-family: cs-icons !important;
    font-size: 1rem;
  }
}
@media (min-width: 720px) {
  .academy-hero__panel {
    padding: 5rem 3rem;
  }
  .academy-hero__title {
    font-size: 3.5rem;
  }
  .academy-levels,
  .academy-steps {
    grid-template-columns: repeat(3, 1fr);
  }
  .academy-topic-grid,
  .academy-grid,
  .academy-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1020px) {
  .academy-hero__panel {
    padding: 6rem 4rem;
  }
  .academy-hero__title {
    font-size: 4rem;
  }
  .academy-columns {
    grid-template-columns: repeat(3, 1fr);
  }
  .academy-topic-grid {
    grid-template-columns: repeat(5, 1fr);
  }
  .academy-grid,
  .academy-list {
    grid-template-columns: repeat(4, 1fr);
  }
}