/*
  Shared tokens for every code component.

  A site-level CSS *class* never reaches inside a shadow root, but a site-level
  *variable* does (CLAUDE.md section 2) - so this file is where the components
  meet the site's own design system. Each --na-* name below resolves to the real
  Webflow variable first and to the value from the Figma file only as a fallback,
  which means retuning a colour in the Designer moves every block with it, while
  the components still render correctly in the local gallery, in Figma-faithful
  isolation, and on any site that does not define these.

  The Webflow names are the ones the Designer emits for the "Semantic Colors"
  and "Base" collections of the Nebius Academy site; every fallback here was
  checked against the live value and matches it.
*/
/* Both selectors on purpose: the CLI rewrites `:root` to `:host` when it builds
   the shadow-DOM stylesheet (section 2), but the local gallery inlines this file
   as-is, where `:root` matches nothing and every token would silently fall back.
   Naming `:host` as well makes the gallery behave like the real thing. */
:host,
:host {
  --container-max-width: 1280px;

  /* Type. Webflow holds no font-family variables - the faces are set in the
     site's typography settings - so these are ours, with the project's own
     "Inter 28" first and metric-compatible Arial behind it. */
  --na-font-sans: "Inter 28", Arial, sans-serif;
  --na-font-display: "Inter Tight", "Inter 28", Arial, sans-serif;
  --na-font-serif: "Tiempos Text", Georgia, "Times New Roman", serif;

  /* Text */
  --na-content-primary-bold: var(--_semantic-colors---content--primary-bold, #14070f);
  --na-content-primary: var(--_semantic-colors---content--primary, rgba(20, 7, 15, 0.9));
  --na-content-secondary: var(--_semantic-colors---content--secondary, rgba(20, 7, 15, 0.7));
  --na-content-tertiary: var(--_semantic-colors---content--tertiary, rgba(20, 7, 15, 0.5));
  --na-content-inverse-primary-bold: var(--_semantic-colors---content--inverse-primary-bold, #f9f8f6);
  --na-content-inverse-primary: var(--_semantic-colors---content--inverse-primary, rgba(249, 248, 246, 0.9));
  --na-content-inverse-secondary: var(--_semantic-colors---content--inverse-secondary, rgba(249, 248, 246, 0.7));
  --na-content-inverse-tertiary: var(--_semantic-colors---content--inverse-tertiary, rgba(249, 248, 246, 0.5));

  /* Surfaces */
  --na-background-primary: var(--_semantic-colors---background--primary, #f3efe8);
  --na-background-secondary: var(--_semantic-colors---background--secondary, #f9f8f6);
  --na-background-inverse: var(--_semantic-colors---background--inverse, rgba(20, 7, 15, 0.95));
  --na-background-primary-hover-subtle: var(--_semantic-colors---background--primary-hover-subtle, #eae6dc);

  /* Borders */
  --na-border-primary: var(--_semantic-colors---border-stroke--black--primary, rgba(20, 7, 15, 0.2));
  --na-border-secondary: var(--_semantic-colors---border-stroke--black--secondary, rgba(20, 7, 15, 0.1));
  --na-border-inverse-primary: var(--_semantic-colors---border-stroke--white--primary, rgba(249, 248, 246, 0.7));
  --na-color-black-alpha-20-a: var(--black--alpha--20-a, rgba(20, 7, 15, 0.2));

  /* No counterpart in the site's collections, so these stay ours - but they are
     still variables, so a page can retune them.

     Two of them deliberately do NOT use the similarly named Webflow token:
     Background/primary-hover is #ab9c8f there, and primary-hover-subtle is the
     opaque #eae6dc. Both are meant for beige cards. Over the header's glass bar
     a hover has to be a transparent wash or it reads as a solid chip, which is
     what the two "ghost" names below are for. */
  --na-background-primary-subtle: #f3efe8;
  --na-background-white: #fff;
  --na-background-glass: rgba(255, 255, 255, 0.5);
  --na-background-primary-hover: rgba(20, 7, 15, 0.06);
  --na-background-ghost-hover: rgba(20, 7, 15, 0.06);
  --na-background-ghost-hover-subtle: rgba(20, 7, 15, 0.04);
  --na-color-white-alpha-70-a: rgba(255, 255, 255, 0.7);
  --na-color-white-alpha-50-a: rgba(255, 255, 255, 0.5);
  --na-color-white-alpha-40-a: rgba(255, 255, 255, 0.4);

  /* The Problem section's "Tint" stat card (Figma node 21245-5945): a solid
     lavender card with a black-fading-to-lavender figure. No counterpart in
     the site's collections, so this stays ours the way the block above does. */
  --na-background-tint-purple: #d3d3fa;
  --na-gradient-stat-fade: linear-gradient(90deg, rgba(20, 7, 15, 0.95) 0%, rgba(20, 7, 15, 0.95) 35%, rgba(211, 211, 250, 0.9) 100%);

  /* The gradient every *emphasis* italic run in a heading is clipped to
     (Figma node 21045-20, the Hero heading). Webflow has no gradient
     variables to bridge to (same reasoning as the fonts above), so this one
     is ours outright - defined once here and referenced by every section's
     .emphasis rule instead of repeating the five stops seven times. */
  --na-gradient-emphasis: linear-gradient(213deg, #b5a9ea 18%, #8873de 54%, #2e2e7d 75%, #43425b 95%);
}

/* The consumer mega-menu panel: one link column plus a grid of promo cards.
   The card rail keeps its two-column grid, at the desktop 3:4 ratio, from
   tablet up (768px) and only stacks into one column below that, on a
   phone-width drawer. The panel's own chrome still swaps from the stacked
   drawer to the desktop sheet at 1280px, independently (see the media
   queries; CLAUDE.md section 11 covers why the header only ever needs the
   desktop shape and the drawer's own stacked one, not something in
   between). */
.LdQRDdYRZdJm_iUjeWOv {
  display: flex;
  flex-direction: column;
  gap: var(--na-spacing-16, 16px);
  box-sizing: border-box;
  width: 100%;
  padding: var(--na-spacing-16, 16px);
  background: var(--na-background-primary, #f3efe8);
  border-radius: var(--na-border-radius-16, 16px);
}

.e6dFlpmNVQbAZ5icYGgo {
  display: flex;
  flex-direction: column;
  gap: var(--na-spacing-24, 24px);
  min-width: 0;
}

.CFw3Q_HHOVuAiZ6SjHJw {
  display: block;
  margin-inline: -8px;
  padding: var(--na-spacing-8, 8px);
  border-radius: var(--na-border-radius-8, 8px);
  font-family: var(--na-font-display, "Inter Tight", "Inter 28", Arial, sans-serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  color: var(--na-content-primary, rgba(20, 7, 15, 0.9));
  text-decoration: none;
  transition: background-color 120ms ease-out;
}

a.CFw3Q_HHOVuAiZ6SjHJw:hover {
  background: var(--na-background-ghost-hover-subtle, rgba(20, 7, 15, 0.04));
}

/* The Links slot - same clipped-first-divider arrangement as MenuPanel's, with
   this panel's own tighter rhythm: the rows here sit 8px apart rather than
   16px. That 8px is split either side of the rule - 4px of gap below one row
   and 4px of `--menu-link-space` (which each Menu Link reads for its own
   padding) above the next - so the pitch is unchanged but a row's hover wash
   never reaches the divider under it. A one-sided split leaves the wash flush
   against the next rule, which reads as the hover lighting up the line. */
.CcouuHPW0YQD1yR9bZOv {
  --menu-link-space: var(--na-spacing-4, 4px);
  margin-inline: -8px;
  min-width: 0;
  overflow: hidden;
}

.CcouuHPW0YQD1yR9bZOv > slot::slotted(*) {
  display: flex;
  flex-direction: column;
  gap: var(--na-spacing-4, 4px);
  margin-top: calc(-1px - var(--na-spacing-4, 4px));
}

.cEi5FdHJ9vpFdAjfqARW {
  display: none;
}

.rDUyT7AFLtZNhS6ARZtq {
  display: flex;
  flex-direction: column;
  gap: var(--na-spacing-4, 4px);
  min-width: 0;
}

/* Same divider-on-the-wrapper trick as MenuPanel's own link list - drawn on a
   wrapper around the link rather than inside it, so the hover wash on the
   link below never lights up while the cursor is still on the rule above it
   (CLAUDE.md section 11). */
.sU730YHTgoQ6LAmZaTDA {
  margin-inline: -8px;
  min-width: 0;
}

.bM1q2L7Sotp0KSKYASiD {
  padding-top: var(--na-spacing-4, 4px);
  border-top: 1px solid var(--na-border-secondary, rgba(20, 7, 15, 0.1));
}

/* The banner rail. From 768 up it is the two-column grid, kept at the same
   3:4 ratio as the 1280+ desktop sheet (node 21218:156144's 300:400) rather
   than the equal halves Figma's own 768/992 Drawer frames show - a
   deliberate override so the tablet and laptop drawer reads as the desktop
   grid, not a plainer one. Below 768 - a phone-width drawer, per Figma's 320
   frame - the two columns stack into one continuous 10px-spaced list
   instead. */
.lSY6ItrSeqXdMiXF4DHO {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.GaIgABiUGreu38ASID6g {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

/* An empty column would otherwise still claim its share of the rail. */
.avr2oUdVxMvRxJehW7ZA {
  display: none;
}

/* Each column is a props.Slot: the real DOM is `.cardsColumn > slot > div >
   code-island x N`. Collapsing that one wrapper is what turns each Course
   Card's own box into a direct flex item here, so the card's own Height
   (fill / fixed 150) is what the column reads (CLAUDE.md section 3). */
.GaIgABiUGreu38ASID6g > slot::slotted(*) {
  display: contents;
}

/* Tablet and laptop (the drawer, 768-1279): the rail becomes the two-column
   grid, well before the panel itself switches from the stacked drawer to the
   desktop sheet at 1280px below. Cards sit in `.panel`'s column-direction
   flow here, same as the stacked list did - which means nothing here is tall
   enough for a sibling to lend `.cards` height the way the desktop sheet's
   own link column does below. Figma's 768 and 992 Drawer frames fix the rail
   at 430px for exactly that reason, so a Fixed card's sibling has 430 - 150 -
   10px gap = 270px to grow into, matching the desktop stagger instead of two
   cards both sitting on the 150px floor. */
@media (min-width: 768px) {
  .lSY6ItrSeqXdMiXF4DHO {
    flex-direction: row;
    align-items: stretch;
    height: 430px;
  }

  /* 3 : 4 is Figma's 300 : 400 desktop ratio, carried down here on purpose. */
  .RvQQz45A1nEzWpbpKuNh {
    flex: 3 1 0;
  }

  .XPYrtFr8iTUUr_qho_VI {
    flex: 4 1 0;
  }
}

@media (min-width: 1280px) {
  .LdQRDdYRZdJm_iUjeWOv {
    flex-direction: row;
    align-items: flex-start;
    gap: 32px;
    padding: var(--na-spacing-24, 24px);
    background: var(--na-background-glass, rgba(255, 255, 255, 0.5));
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-radius: var(--na-border-radius-8, 8px);
    max-height: calc(100vh - 102px);
    overflow-y: auto;
  }

  .e6dFlpmNVQbAZ5icYGgo {
    flex: 0 0 340px;
  }

  .lSY6ItrSeqXdMiXF4DHO {
    flex: 1 1 0;
    align-self: stretch;
    /* Cancels the drawer's fixed 430px: from here the sheet is a row, so
       `align-self: stretch` borrows height straight from the link column
       instead - the dynamic mechanism CourseCard.module.css's `.heightFill`
       comment describes. */
    height: auto;
  }
}

/* One row of a menu link list, shared by the two panels' own text-driven lists
   and by the `Menu Link` component a designer drops into a Links slot. The
   three used to carry their own copy of these rules; one row looks the same
   wherever it is, so it is defined once and the *spacing between* rows - which
   genuinely differs per panel - stays with each panel instead.

   A shared .module.css is safe here for the same reason NoiseOverlay's is: the
   bundler folds an imported stylesheet into every chunk that imports it, and
   CSS Module names are per-file, so nothing collides. */

.NZJhwBXR2TC751A52xKd {
  display: block;
  padding: var(--na-spacing-8, 8px);
  border-radius: var(--na-border-radius-8, 8px);
  color: inherit;
  text-decoration: none;
  transition: background-color 120ms ease-out;
}

a.NZJhwBXR2TC751A52xKd:hover {
  background: var(--na-background-ghost-hover-subtle, rgba(20, 7, 15, 0.04));
}

.X1nxbB1azdbknBLLGSmA {
  display: flex;
  align-items: center;
  gap: var(--na-spacing-8, 8px);
  min-width: 0;
}

.BeuSX5V5H8XC_VUkqsMr {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--na-font-sans, "Inter 28", Arial, sans-serif);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.2px;
  color: var(--na-content-primary-bold, #14070f);
}

.Hc7nHAJhF14ObP8hlTzg {
  flex: none;
  padding: var(--na-spacing-4, 4px) var(--na-spacing-12, 12px);
  border-radius: 6px;
  background: linear-gradient(90deg, #18227c 0%, #514eba 37%, #af6ed7 75%, #f3cff2 100%);
  font-family: var(--na-font-sans, "Inter 28", Arial, sans-serif);
  font-size: 13px;
  line-height: 14px;
  letter-spacing: -0.2px;
  color: var(--na-content-inverse-primary-bold, #f9f8f6);
  white-space: nowrap;
}

.RpgXiNbspYslT2DUb7Jg {
  display: block;
  margin-top: 4px;
  font-family: var(--na-font-sans, "Inter 28", Arial, sans-serif);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.2px;
  color: var(--na-content-tertiary, rgba(20, 7, 15, 0.5));
}