/* ==========================================================================
   Base
   ========================================================================== */
body {
  font-family: var(--font-main);
  color: var(--color-text);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.uc {
  text-transform: uppercase;
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
}

.section {
  padding: clamp(40px, 7vw, 60px) var(--side-padding);
}

.section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 32px;
}

.section__title {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--fw-semibold);
  font-size: 16px;
  white-space: nowrap;
}

.btn--text {
  color: var(--color-purple);
  transition: opacity var(--transition-fast);
}

.btn--text:hover {
  opacity: 0.7;
}

.btn__icon {
  width: 16px;
  height: 12px;
  flex-shrink: 0;
}

/* Hero CTA — matches the Figma export exactly: an open ring bracket on
   the left with the label emerging from inside it, then a separate
   arrow a short gap after the label. No pill/border/background box —
   the ring is purely decorative and sits *behind* the start of the text.
   Everything scales off --hero-ring so the proportions from Figma
   (ring 90, label starts at x28, arrow starts at x207/ends x250,
   viewBox 251x90) are preserved at any size. */
.btn--hero {
  --hero-ring: clamp(56px, 7.2vw, 90px);
  position: relative;
  gap: 0;
  color: var(--color-white);
}

.btn--hero__ring {
  width: var(--hero-ring);
  height: var(--hero-ring);
  flex-shrink: 0;
  color: inherit;
  transition: transform var(--transition-base);
}

.btn--hero__label {
  /* 28/90 of the ring = how far the label sits from the ring's left
     edge in the source file, pulled left over the ring by that much. */
  margin-left: calc(var(--hero-ring) * -0.689);
  padding-top: 2px;
  transition: opacity var(--transition-base);
}

.btn--hero__arrow {
  width: calc(var(--hero-ring) * 0.478);
  height: calc(var(--hero-ring) * 0.133);
  /* 11/90 of the ring = gap between label and arrow in the source file */
  margin-left: calc(var(--hero-ring) * 0.122);
  flex-shrink: 0;
  color: inherit;
  transition: transform var(--transition-base);
}

.btn--hero:hover .btn--hero__ring {
  transform: rotate(-18deg) scale(1.06);
}

.btn--hero:hover .btn--hero__arrow {
  transform: translateX(10px);
}

.btn--hero:hover .btn--hero__label {
  opacity: 0.85;
}

.btn--hero:active .btn--hero__arrow {
  transform: translateX(4px);
}

/* Reusable "ring + arrow" icon: a circular outline broken by an arrow
   that shoots out through the gap. Used on .btn--hero and .btn--round.
   Sizing is locked down with !important + flex-grow:0 so that a global
   "svg { width: 100% }"-style reset elsewhere on the page can't stretch
   it across the whole button (this is what causes the ring and arrow
   to split apart to opposite ends of the pill). */
.ra-icon {
  display: block;
  width: 50px !important;
  height: 42px !important;
  overflow: visible;
  flex-shrink: 0;
  flex-grow: 0;
}

.ra-icon__ring,
.ra-icon__arrow {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--transition-base);
}

.btn--hero:hover .ra-icon__arrow {
  transform: translateX(5px);
}

.btn--hero:hover .ra-icon__ring {
  transform: rotate(-16deg);
}

.btn--round {
  width: 50px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-purple);
  transition: transform var(--transition-base);
}

.btn--round .ra-icon {
  width: 50px !important;
  height: 42px !important;
}

/* ==========================================================================
   Small UI bits
   ========================================================================== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--color-purple-light);
  color: var(--color-purple);
  font-size: 12px;
  font-weight: var(--fw-medium);
  padding: 4px 6px;
  border-radius: 4px;
}

.chip svg {
  width: 14px;
  height: 14px;
}

.rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--color-text-80);
}

.rating svg {
  width: 18px;
  height: 18px;
  color: var(--color-star);
}

.dots {
  display: none;
  gap: 4px;
  justify-content: center;
  margin-top: 4px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: rgba(21, 20, 25, 0.15);
  cursor: pointer;
  transition: width var(--transition-base), background var(--transition-base);
}

.dot--active {
  width: 24px;
  background: var(--color-purple);
}

/* ==========================================================================
   Horizontal scroller (mobile course/book rows)
   ========================================================================== */
.h-scroll {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.h-scroll::-webkit-scrollbar {
  display: none;
}

.h-scroll > * {
  scroll-snap-align: start;
}