.catalog-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  margin-block-start: var(--block-space-double);
}

/* An open invitation, not a roadmap — a flat list, every name equal (no
   status dots, no highlighting), ending in one call: become a curator. */
.catalog-soon {
  margin-block-start: 3.5rem;
  text-align: center;
}

/* The label doubles as a section divider — fading hairlines (Fizzy's
   divider--fade) separate the dead list from the live grid. */
.catalog-soon__label {
  align-items: center;
  color: var(--color-subtle-dark);
  display: flex;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  gap: 1.25rem;
  letter-spacing: 0.06em;
  margin-block: 0 1.25rem;
  text-transform: uppercase;
}

.catalog-soon__label::before,
.catalog-soon__label::after {
  block-size: 1px;
  content: "";
  flex: 1;
}

.catalog-soon__label::before {
  background: linear-gradient(to right, transparent, var(--color-subtle));
}

.catalog-soon__label::after {
  background: linear-gradient(to left, transparent, var(--color-subtle));
}

.catalog-soon__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--block-space-half);
  justify-content: center;
  margin-block: 0;
  margin-inline: auto;
  max-inline-size: 52rem;
}

/* Dashed border = the hidden-contour line of a ГОСТ drawing. Not a link
   itself — the block below carries the CTA link. */
.catalog-soon__slot {
  border: 1px dashed var(--color-subtle);
  border-radius: 2rem;
  color: var(--color-subtle-dark);
  display: inline-block;
  font-size: 0.85rem;
  hyphens: none;
  padding: 0.35rem 0.9rem;
}

/* The way onward, not another vacancy — so it drops the dashed capsule and takes
   an arrow instead. Vertical metrics match a slot exactly, so it sits on the row's
   baseline as a peer; only the horizontal padding is tighter, since without a
   border there's no frame needing air. Stays in this block's quiet register (grey →
   ink), never an accent: the whole section is deliberately dimmer than the live
   cards above it. */
.catalog-soon__more {
  align-items: center;
  display: inline-flex;
  font-size: 0.85rem;
  gap: 0.35rem;
  hyphens: none;
  padding: 0.35rem 0.4rem;

  .icon {
    --icon-size: 0.9em;
  }

  @media (prefers-reduced-motion: no-preference) {
    .icon {
      transition: transform 150ms ease-out;
    }
  }

  @media (any-hover: hover) {
    &:hover .icon {
      transform: translateX(0.15em);
    }
  }
}

.catalog-soon__call {
  hyphens: none;
  margin-block: var(--block-space-double) 0;

  /* The rough-notation oval IS this button's frame — the default capsule
     border would draw a frame around a frame. Hover nudges the arrow
     instead of decorating the (invisible) box. */
  .btn {
    --btn-border-color: transparent;
  }

  .btn .icon {
    block-size: 1rem;
    inline-size: 1rem;
  }

  @media (prefers-reduced-motion: no-preference) {
    .btn .icon {
      transition: transform 150ms ease-out;
    }
  }

  @media (any-hover: hover) {
    .btn:hover .icon {
      transform: translateX(0.2em);
    }
  }
}

/* Card grid — multi-col layout for path/profession cards (dashboard "other paths") */
.card-grid {
  display: grid;
  gap: 1.5rem;
  margin-block-start: 3rem;
}

.card-grid--3-col {
  @media (min-width: 640px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (min-width: 1024px) {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* A drawing-sheet poster: the profession NAME in the GOST drafting face
   (--font-technical) is the design; corner ticks are the one decorative nod
   to an engineering-drawing frame. */
.path-card {
  --panel-padding: 1.75rem;
  --panel-background: var(--color-bg);
  --panel-border-radius: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: var(--block-space);
  position: relative;
  transition: border-color 200ms ease, box-shadow 200ms ease;
  /* Low floor only — desktop height is content-/row-stretch-driven; this just
     stops a lone single-line card from looking stubby. */
  min-block-size: 6rem;
}

.path-card::before,
.path-card::after {
  block-size: 0.85rem;
  border: 0 solid var(--color-subtle);
  content: "";
  inline-size: 0.85rem;
  pointer-events: none;
  position: absolute;
  transition: border-color 200ms ease;
}

.path-card::before {
  border-block-start-width: 1px;
  border-inline-start-width: 1px;
  inset-block-start: var(--block-space-half);
  inset-inline-start: 0.5rem;
}

.path-card::after {
  border-block-end-width: 1px;
  border-inline-end-width: 1px;
  inset-block-end: var(--block-space-half);
  inset-inline-end: 0.5rem;
}

@media (any-hover: hover) {
  .path-card:hover {
    /* Stay black on hover — panel--hover's grey fill would break the poster look. */
    --panel-background: var(--color-bg);
    --panel-border-color: var(--color-subtle-dark);
    box-shadow: 0 0 0 1px var(--color-subtle-dark);
  }

  .path-card:hover::before,
  .path-card:hover::after {
    border-color: var(--color-subtle-dark);
  }
}

.path-card__title {
  font-family: var(--font-technical);
  /* Large enough for the monoline drafting face to show its character —
     at body sizes it reads as a broken monospace, at poster size as a drawing */
  font-size: clamp(1.75rem, 2.4vw, 2.3rem);
  font-weight: 400;
  /* GOST is a monoline drafting face — a hair of tracking lets it breathe */
  letter-spacing: 0.005em;
  /* a profession name hyphenated mid-word («Сетевой ин-женер») reads cheap */
  hyphens: none;
  line-height: 1.1;
  margin-block: 0;
  text-wrap: balance;
}

/* Clamped so an editor's long description can't break the card's row alignment. */
.path-card__desc {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: var(--color-subtle-dark);
  display: -webkit-box;
  font-size: 0.875rem;
  hyphens: none;
  line-height: 1.5;
  margin-block: 0;
  overflow: hidden;
}

/* margin-block-start: auto pins this to the card's base so cards in a row align. */
.path-card__foot {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-block-start: auto;
}

.path-card__meta-row {
  align-items: center;
  display: flex;
  gap: var(--block-space);
  justify-content: space-between;
}

.path-card__meta {
  color: var(--color-subtle-dark);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.path-card__go {
  color: var(--color-subtle-dark);
  flex-shrink: 0;
  font-size: 1.25rem;
  line-height: 1;
  transition: color 200ms ease, transform 200ms ease;
}

.path-card .progress {
  margin-block: 0;
}

@media (any-hover: hover) {
  .path-card:hover .path-card__go {
    color: var(--color-link);
    transform: translateX(3px);
  }
}

.section-subtitle {
  color: var(--color-subtle-dark);
  margin-block: var(--block-space) 0;
  margin-inline: auto;
  max-inline-size: 42rem;
  text-align: center;
}

/* One quiet icon style for every course/path circle — the framing circle itself
   comes from the caller's context (progress ring, bordered badge, hero circle). */
.topic-badge {
  block-size: 100%;
  display: inline-grid;
  grid-template: 100% / 100%;
  inline-size: 100%;
  place-items: center;

  > * {
    grid-area: 1 / 1;
  }
}

/* Individual profession page (paths/show) */
.topic-hero-icon {
  align-items: center;
  block-size: 5rem;
  border: 2px solid var(--color-subtle-dark);
  border-radius: 50%;
  color: var(--color-ink);
  display: inline-flex;
  inline-size: 5rem;
  justify-content: center;
  margin-block-end: 1.5rem;

  .topic-badge > :is(.icon, img) {
    block-size: 2.5rem;
    inline-size: 2.5rem;
  }
}

/* Bigger than the plain hero badge — TOP renders its course-page circle at 7rem. */
.topic-hero-icon--ring {
  block-size: 7rem;
  border: none;
  inline-size: 7rem;

  .progress-ring__svg {
    block-size: 100%;
    inline-size: 100%;
  }

  .progress-ring__body .topic-badge > :is(.icon, img) {
    block-size: 3.25rem;
    inline-size: 3.25rem;
  }
}

.path-hero {
  text-align: center;
}

/* Same GOST face as the catalog card poster — the profession name keeps one
   identity at every size it appears. */
.path__title {
  font-family: var(--font-technical);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.1;
  margin-block: 0;
  text-transform: uppercase;
}

/* GOST is reserved for the profession identity, not every hero underneath it. */
.path__title--course {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.02;
}

.path__overview {
  margin-block: 2.5rem var(--block-space-double);
}

.path__overview-text {
  color: var(--color-subtle-dark);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-block: 0;
  margin-inline: auto;
  max-inline-size: 60ch;
  text-align: center;
}

.path__curators {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  margin-block: 0 var(--block-space-double);
}

.path__curators-label {
  color: var(--color-subtle-dark);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.path__curator {
  align-items: center;
  display: inline-flex;
  gap: 0.6rem;
}

.path__curator-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  text-align: start;
}

.path__curator-name {
  color: var(--color-ink);
  font-size: 0.9rem;
  font-weight: 600;
}

.path__curator-headline {
  color: var(--color-subtle-dark);
  font-size: 0.8rem;
}

/* A learner mid-path sees their direction before any new profession competes
   for attention. */
.focus-banner {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--block-space);
  justify-content: space-between;
  margin-block-end: 1.5rem;

  .btn .icon {
    block-size: 0.9rem;
    inline-size: 0.9rem;
  }
}

.focus-banner__text {
  color: var(--color-subtle-dark);
  font-size: 0.9rem;
}

.focus-banner__link {
  color: var(--color-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--color-subtle);
}

.path__start {
  display: flex;
  flex-direction: column;
  gap: var(--block-space);
  margin-block-end: 2.5rem;

  .btn {
    align-self: center;

    .icon {
      block-size: 1rem;
      inline-size: 1rem;
    }
  }
}

.path__continue-hint {
  color: var(--color-subtle-dark);
  font-size: 0.85rem;
  margin-block: -0.5rem 0;
  text-align: center;
}

/* Quiet link to the profession's document library — a footnote, not a section. */
.path__library-link {
  border-block-start: 1px solid var(--color-subtle);
  font-size: 0.85rem;
  margin-block-start: var(--block-space);
  padding-block-start: var(--block-space);
}