:root {
  --ink: #173851;
  --muted: #587189;
  --line: #d7e5f0;
  --soft: #eaf4fb;
  --panel: #ffffff;
  --blue: #a9cce5;
  --blue-dark: #204b6b;
  --accent: #c97042;
  --shadow: 0 16px 36px rgba(23, 56, 81, .14);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: #f8fbfd;
  line-height: 1.45;
}

body.catalog-page,
body.archive-page,
body.course-page {
  min-height: 100vh;
  background: #011b35 url("/assets/academy-raww-tech-background.png") center top / cover fixed no-repeat;
}

body.course-page {
  background-image: url("/assets/academy-raww-course-background-v2.png");
}

.catalog-page .page,
.archive-page .page,
.course-page .page {
  position: relative;
  animation: catalog-enter .62s cubic-bezier(.2, 0, 0, 1) both;
}

.catalog-page .hero h1,
.catalog-page .section-head h2,
.catalog-page .catalog-search > span,
.archive-page .hero h1,
.archive-page .section-head h2,
.archive-page .catalog-search > span {
  color: #f1f6fb;
}

.catalog-page .lead,
.catalog-page .section-head p,
.archive-page .lead,
.archive-page .section-head p {
  color: #b7cad9;
}

@keyframes catalog-enter {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-page .page,
  .archive-page .page,
  .course-page .page { animation: none; }
}

a { color: inherit; }

.topbar {
  background: var(--blue);
  box-shadow: 0 10px 24px rgba(23, 56, 81, .14);
}

.nav {
  max-width: 1180px;
  margin: 0 auto;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  text-decoration: none;
}

.brand-mark {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: var(--blue-dark);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 24px;
}

.nav-links {
  display: flex;
  gap: 24px;
  font-size: 15px;
  font-weight: 700;
}

.page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 24px 72px;
}

.detail-page {
  padding-top: 36px;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 36px;
  align-items: center;
  margin-bottom: 42px;
}

h1 {
  margin: 0 0 16px;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: 0;
}

.lead {
  margin: 0;
  max-width: 760px;
  color: var(--muted);
  font-size: 19px;
}

.lead:empty {
  display: none;
}

.button {
  min-height: 48px;
  border: 0;
  border-radius: 6px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-dark);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease, color .16s ease;
}

.button.secondary {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
}

.button:not(.inactive):hover {
  box-shadow: 0 8px 20px rgba(23, 56, 81, .16);
  transform: translateY(-1px);
}

.button.secondary:not(.inactive):hover {
  border-color: #a9cce5;
  background: #fff;
  color: var(--blue-dark);
}

.button.inactive {
  cursor: default;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
}

.home-action {
  width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid #abd4ec;
  border-radius: 999px;
  background: #d9eef9;
  color: var(--blue-dark);
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.home-action:hover {
  border-color: #7fb1d1;
  background: #b9d9ee;
  box-shadow: 0 8px 20px rgba(0, 23, 51, .22);
  transform: translateY(-1px);
}

.detail-hero {
  max-width: 100%;
  margin-bottom: 26px;
  position: relative;
  padding: 24px 28px 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(23, 56, 81, .08);
  overflow: hidden;
}

.detail-hero::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 5px;
  background: #d9eef9;
}

.detail-hero[data-palette="dpo"]::before { background: #b9d9ee; }
.detail-hero[data-palette="express"]::before { background: #7fb1d1; }
.detail-hero[data-palette="practice"]::before { background: #c7b7e8; }
.detail-hero[data-palette="seminar"]::before { background: #d2deea; }
.detail-hero[data-palette="intensive"]::before { background: #aebccd; }
.detail-hero[data-palette="neutral"]::before { background: #dce4ea; }

.detail-hero h1 {
  max-width: 900px;
  margin-bottom: 12px;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.08;
}

.detail-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.hero-badge,
.hero-date {
  min-height: 32px;
  border-radius: 999px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  background: var(--soft);
  color: var(--blue-dark);
  font-size: 13px;
  font-weight: 900;
}

.hero-badge {
  text-transform: uppercase;
  background: #d9eef9;
}

.hero-badge[data-palette="dpo"] { background: #b9d9ee; }
.hero-badge[data-palette="express"] { background: #7fb1d1; }
.hero-badge[data-palette="practice"] { background: #c7b7e8; color: #261f45; }
.hero-badge[data-palette="seminar"] { background: #d2deea; }
.hero-badge[data-palette="intensive"] { background: #aebccd; }
.hero-badge[data-palette="neutral"] { background: #dce4ea; }

.back-link {
  display: inline-flex;
  align-items: center;
  margin-bottom: 18px;
  color: var(--blue-dark);
  font-weight: 900;
  text-decoration: none;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 22px;
  box-shadow: var(--shadow);
}

.panel strong {
  display: block;
  font-size: 28px;
  margin-bottom: 6px;
}

.contact-panel {
  position: relative;
  overflow: hidden;
  border-color: #bdd8e9;
  background: linear-gradient(135deg, #fff 0%, #f0f8fd 100%);
}

.contact-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--blue-dark), #0891a5, var(--accent));
}

.contact-panel strong {
  margin-bottom: 16px;
}

.contact-title {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  line-height: 1.1;
}

.contact-title img {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: block;
}

.contact-list {
  display: grid;
  gap: 10px;
}

.contact-item {
  min-height: 52px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #d7e5f0;
  border-radius: 8px;
  background: rgba(255, 255, 255, .82);
  color: var(--ink);
  font-weight: 900;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}

.contact-item:hover {
  border-color: #a9cce5;
  box-shadow: 0 8px 20px rgba(23, 56, 81, .1);
}

.contact-icon {
  width: 38px;
  height: 38px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: var(--blue-dark);
  color: #fff;
  font-size: 19px;
  font-weight: 900;
}

.contact-text {
  min-width: 0;
}

.contact-copy {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #eaf4fb;
  color: var(--muted);
  transition: background .16s ease, color .16s ease, transform .16s ease;
}

.contact-copy::before,
.contact-copy::after {
  content: "";
  position: absolute;
  width: 11px;
  height: 13px;
  border: 2px solid currentColor;
  border-radius: 3px;
}

.contact-copy::before {
  left: 9px;
  top: 11px;
  background: #eaf4fb;
}

.contact-copy::after {
  left: 13px;
  top: 8px;
  background: #eaf4fb;
}

.contact-item:hover .contact-copy {
  color: var(--blue-dark);
  transform: translateY(-1px);
}

.contact-item.copied .contact-copy {
  background: #087a4f;
  color: #087a4f;
}

.contact-item.copied .contact-copy::before {
  left: 10px;
  top: 9px;
  width: 12px;
  height: 7px;
  border-width: 0 0 3px 3px;
  border-color: #fff;
  border-radius: 0;
  background: transparent;
  transform: rotate(-45deg);
}

.contact-item.copied .contact-copy::after {
  display: none;
}

.contact-item.copy-failed .contact-copy {
  background: #fff0e8;
  color: #a66219;
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  margin: 0 0 24px;
}

h2 {
  margin: 0;
  font-size: 34px;
  line-height: 1.12;
  letter-spacing: 0;
}

.section-head p {
  margin: 8px 0 0;
  color: var(--muted);
  max-width: 690px;
}

.filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.chip {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 999px;
  padding: 9px 14px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
}

.chip:hover {
  border-color: #a9cce5;
  box-shadow: 0 8px 20px rgba(23, 56, 81, .1);
  transform: translateY(-1px);
}

.chip[data-palette="webinar"] {
  background: #d9eef9;
  border-color: #abd4ec;
}

.chip[data-palette="dpo"] {
  background: #b9d9ee;
  border-color: #86b7d8;
}

.chip[data-palette="express"] {
  background: #7fb1d1;
  border-color: #5f9abd;
}

.chip[data-palette="practice"] {
  background: #c7b7e8;
  border-color: #9b84cf;
}

.chip[data-palette="seminar"] {
  background: #d2deea;
  border-color: #a7bbcf;
}

.chip[data-palette="intensive"] {
  background: #aebccd;
  border-color: #8094aa;
}

.chip[data-palette="neutral"] {
  background: #dce4ea;
  border-color: #bac8d2;
}

.chip[aria-pressed="true"] {
  background: var(--blue-dark);
  color: #fff;
  border-color: var(--blue-dark);
}

.chip[aria-pressed="true"]:hover {
  border-color: var(--blue-dark);
  box-shadow: 0 8px 20px rgba(23, 56, 81, .16);
}

.catalog-search {
  display: block;
  max-width: 520px;
  margin: -4px 0 22px;
}

.catalog-search span {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.search-control {
  position: relative;
  display: block;
}

.catalog-search input {
  width: 100%;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  padding: 0 48px 0 18px;
  font: inherit;
  box-shadow: 0 8px 20px rgba(23, 56, 81, .06);
}

.catalog-search input::-webkit-search-cancel-button,
.catalog-search input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f3f8fc;
  color: var(--muted);
  font-size: 21px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}

.search-clear[hidden] {
  display: none;
}

.search-clear:hover {
  border-color: var(--blue-soft);
  background: #fff;
  color: var(--blue-dark);
  transform: translateY(calc(-50% - 1px));
}

.course-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.course-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(23, 56, 81, .1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.course-top {
  background: #d9eef9;
  padding: 18px;
  min-height: 154px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
}

.course-card[data-palette="dpo"] .course-top {
  background: #b9d9ee;
}

.course-card[data-palette="express"] .course-top {
  background: #7fb1d1;
}

.course-card[data-palette="practice"] .course-top {
  background: #c7b7e8;
}

.course-card[data-palette="seminar"] .course-top {
  background: #d2deea;
}

.course-card[data-palette="intensive"] .course-top {
  background: #aebccd;
}

.course-card[data-palette="neutral"] .course-top {
  background: #dce4ea;
}

.course-card[data-palette="dpo"] {
  --card-tone: #b9d9ee;
}

.course-card[data-palette="express"] {
  --card-tone: #7fb1d1;
}

.course-card[data-palette="practice"] {
  --card-tone: #c7b7e8;
}

.course-card[data-palette="seminar"] {
  --card-tone: #d2deea;
}

.course-card[data-palette="intensive"] {
  --card-tone: #aebccd;
}

.course-card[data-palette="neutral"] {
  --card-tone: #dce4ea;
}

.type-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.type-tools {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 0 10px;
  background: #fff;
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.materials-badge {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: rgba(255, 255, 255, .66);
  border: 1px solid rgba(32, 75, 107, .16);
  color: var(--blue-dark);
  position: relative;
}

.materials-badge svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translate(.5px, 0);
}

.materials-badge::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  z-index: 5;
  width: max-content;
  max-width: 230px;
  transform: translate(-50%, -4px);
  border: 1px solid rgba(32, 75, 107, .16);
  border-radius: 999px;
  padding: 5px 9px;
  background: #fff;
  color: var(--blue-dark);
  box-shadow: 0 8px 18px rgba(23, 56, 81, .12);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-transform: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
}

.materials-badge:hover::after,
.materials-badge:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.date {
  color: var(--blue-dark);
  font-weight: 900;
  font-size: 14px;
  white-space: nowrap;
}

/* CATALOG UI FIX 01. On the page where a visitor CHOOSES a course, the title
   is the primary information, and a three-line clamp was cutting real course
   names off mid-word. The clamp stays - this is a grid of cards, and one
   pathological title must not push its row to an absurd height - but it is a
   safety limit now rather than an editorial one: four lines instead of three,
   and no reserved 75px band under a one-line title.

   The clamp needs `display: -webkit-box`, which makes the element a flex-like
   box; `min-height: 0` is removed with the band because an empty title area is
   what .course-top's own min-height already covers. */
.course-title {
  margin: 0;
  font-size: 20px;
  line-height: 1.22;
  letter-spacing: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.course-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

.summary {
  color: var(--muted);
  margin: 0;
  min-height: 66px;
}

/* CATALOG UI FIX 01, scoped to the catalogue card alone.

   `.summary` is also the class of the course page's "Программа курса будет
   добавлена позже." paragraph, which must keep behaving exactly as it does
   today - hence the descendant selector rather than an edit to the rule above.

   white-space: pre-line is the HOME UI FIX 03A decision applied to this
   surface: «Краткое описание для карточки» is authored content, so the
   newlines the editor typed in the admin textarea are rendered as written.
   app.js still emits ONE escaped text node, so this adds no markup and no new
   HTML path - a summary containing <b> renders as literal characters.

   The 66px reserved band goes: with authored text of varying length a fixed
   band is either wasted space or not enough, and the cards in a row are
   levelled by the grid, not by padding each block to a guessed height. */
.course-card .summary {
  min-height: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* CATALOG UI FIX 01: the cast is the first thing under the title now, and on
   this narrow card it is ONE column - every card takes the full width of the
   body. The shared component (expert-cast.css) is a flex-wrap row with
   `flex: 1 1 210px`; this is a surface-specific override in the catalogue's
   own stylesheet, so no other consumer of that component is affected. */
.course-card .expert-cast {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.meta {
  display: grid;
  gap: 8px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.meta-row {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 10px;
}

.meta-label { color: var(--muted); }
.meta-value { font-weight: 800; }

/* CATALOG UI FIX 01, scoped to the catalogue card alone.

   The two-column «label | value» row does not survive this card width: at
   116px for the label, «Заочная форма с применением ДОТ» and «Удостоверение о
   повышении квалификации» were left a sliver to wrap in and broke into four
   and five lines. Each parameter becomes a small secondary label with its
   value on the FULL width underneath.

   One hairline above the block is kept as its separator and the bottom rule is
   dropped: the block is the last thing before the CTA, a second rule there
   only boxes the card in. Parameters that render nothing are not rendered at
   all (see app.js), so neither this border nor this gap can be left behind
   around an empty block. */
.course-card .meta {
  gap: 12px;
  padding: 14px 0 0;
  border-bottom: 0;
}

.course-card .meta-row {
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
}

.course-card .meta-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.course-card .meta-value {
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.course-actions {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.course-actions.single {
  grid-template-columns: 1fr;
}

.link {
  color: var(--blue-dark);
  font-weight: 900;
  text-decoration: none;
}

.archive-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

/* The row is the CARD SHELL and is not interactive itself. Its two children -
   the course link and the expert cast - are stacked. Before 0.31.1 this
   element was the <a>; the link moved inward so that the expert buttons could
   stop being descendants of an anchor. */
.archive-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  display: grid;
  gap: 12px;
  align-items: start;
  color: var(--ink);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
}

/* The course link: the whole course area of the row, carrying the layout the
   row itself used to have. */
.archive-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 14px;
  align-items: start;
  text-decoration: none;
  color: inherit;
}

/* Only a linked row lifts on hover: with showDetails=false there is no link
   and the row must not look clickable. Hovering anywhere inside a linked row
   lifts it, exactly as it did when the row itself was the anchor. */
.archive-item.is-linked:hover {
  border-color: var(--blue-soft);
  box-shadow: 0 10px 24px rgba(23, 56, 81, .08);
  transform: translateY(-1px);
}

/* The link is now an inner element, so keyboard focus needs a ring of its own -
   previously the whole row was the focusable anchor. */
.archive-main:focus-visible {
  outline: 2px solid var(--blue-dark);
  outline-offset: 3px;
  border-radius: 4px;
}

.archive-date {
  justify-self: end;
  color: var(--blue-dark);
  font-weight: 900;
  font-size: 14px;
  white-space: nowrap;
}

.archive-title {
  grid-column: 1 / -1;
  font-size: 18px;
  line-height: 1.22;
  font-weight: 900;
}

.archive-kind {
  justify-self: start;
  min-height: 26px;
  border-radius: 999px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  background: #eef7fc;
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.archive-item[data-palette="dpo"] .archive-kind { background: #d7ebf7; }
.archive-item[data-palette="express"] .archive-kind { background: #c4dff0; }
.archive-item[data-palette="practice"] .archive-kind { background: #e7def8; }
.archive-item[data-palette="seminar"] .archive-kind { background: #e7eef5; }
.archive-item[data-palette="intensive"] .archive-kind { background: #dfe7ef; }
.archive-item[data-palette="neutral"] .archive-kind { background: #edf2f5; }

.archive-summary {
  grid-column: 1 / -1;
  color: var(--muted);
  line-height: 1.55;
}

.archive-more {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 4px;
  color: var(--blue-dark);
  font-weight: 900;
}

.course-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 24px;
  align-items: start;
}

.detail-card,
.program {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 26px;
  position: relative;
  overflow: hidden;
}

.detail-card::before,
.program::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 5px;
  background: #d9eef9;
}

.detail-card {
  position: sticky;
  top: 20px;
}

.detail-card[data-palette="dpo"]::before,
.program[data-palette="dpo"]::before { background: #b9d9ee; }
.detail-card[data-palette="express"]::before,
.program[data-palette="express"]::before { background: #7fb1d1; }
.detail-card[data-palette="practice"]::before,
.program[data-palette="practice"]::before { background: #c7b7e8; }
.detail-card[data-palette="seminar"]::before,
.program[data-palette="seminar"]::before { background: #d2deea; }
.detail-card[data-palette="intensive"]::before,
.program[data-palette="intensive"]::before { background: #aebccd; }
.detail-card[data-palette="neutral"]::before,
.program[data-palette="neutral"]::before { background: #dce4ea; }

.detail-card h2 {
  margin: 0 0 16px;
  font-size: 21px;
  line-height: 1.2;
}

.teacher-detail-card {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin: 0 0 18px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--line);
}

.teacher-detail-photo {
  position: relative;
  width: 86px;
  height: 86px;
  display: block;
}

.teacher-detail-photo::before {
  content: "";
  position: absolute;
  width: 84px;
  height: 84px;
  left: 0;
  top: 0;
  border-radius: 999px;
  background: var(--blue-dark);
}

.teacher-detail-photo img {
  position: absolute;
  left: 1px;
  top: 3px;
  z-index: 1;
  width: 78px;
  height: 78px;
  border-radius: 999px;
  display: block;
  object-fit: cover;
  background: var(--soft);
}

.teacher-detail-card small {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 13px;
}

.teacher-detail-card strong {
  display: block;
  font-size: 15px;
  line-height: 1.35;
}

.detail-action {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.detail-action .button {
  width: 100%;
}

.program-head {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
}

.program-head h2 {
  margin: 0;
}

.program .summary {
  min-height: 0;
  max-width: 760px;
}

.detail-meta {
  border-top: 0;
  padding-top: 0;
}

.detail-meta .meta-row {
  grid-template-columns: 94px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.detail-meta .meta-row:first-child {
  padding-top: 0;
}

.detail-meta .meta-row:last-child {
  border-bottom: 0;
}

.detail-meta .meta-label {
  font-size: 13px;
  line-height: 1.4;
}

.detail-meta .meta-value {
  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;
}

.program p,
.program ul,
.program ol,
.program blockquote,
.program h2,
.program h3,
.program h4 {
  margin: 18px 0 0;
}

/* DIVIDER (toolbar "─"): a quiet 1px rule in the standard border colour,
   centred and clearly narrower than the program column (88%), with the
   program's own 24px of air above; the next block's 18px top margin collapses
   into the 24px below, so the divider sits symmetrically. */
.program hr {
  width: 88%;
  margin: 24px auto;
  border: 0;
  border-top: 1px solid var(--line);
}

/* the program content itself starts the card (no generated heading above it) */
.program > :first-child {
  margin-top: 0;
}

/* UX-II: third heading level (toolbar H4). Browser default h4 is the
   paragraph size; keep it clearly between .program h3 (18.72px) and p (16px). */
.program h4 {
  font-size: 17px;
  line-height: 1.4;
  letter-spacing: .01em;
  color: var(--blue-dark);
}

/* TYPOGRAPHY: controlled inline text size from the program editor (exact
   same px as the admin editor; line-height stays the block's). */
.program .program-text-size-14 { font-size: 14px; }
.program .program-text-size-16 { font-size: 16px; }
.program .program-text-size-18 { font-size: 18px; }
.program .program-text-size-20 { font-size: 20px; }
.program .program-text-size-24 { font-size: 24px; }
.program .program-text-size-28 { font-size: 28px; }

.program p {
  max-width: 760px;
  color: var(--ink);
  line-height: 1.7;
}

.program a {
  color: var(--blue-dark);
  font-weight: 800;
}

.program ul,
.program ol {
  padding-left: 24px;
  line-height: 1.7;
}

.program p + p,
.program p + ul,
.program p + ol,
.program ul + p,
.program ol + p,
.program ul + ul,
.program ol + ol,
.program ul + ol,
.program ol + ul,
.program blockquote + p {
  margin-top: 14px;
}

.program li + li { margin-top: 12px; }

/* FIX-PROGRAM-EDITOR: nested numbered items read "2.1.", "2.2." (as in the
   Word programs the owner pastes), identical rule in admin/admin.css. */
.program ol {
  counter-reset: item;
  list-style: none;
}

.program ol > li {
  counter-increment: item;
}

.program ol > li::before {
  content: counters(item, ".") ". ";
  font-weight: 700;
}

.program ul ul,
.program ul ol,
.program ol ul,
.program ol ol {
  margin-top: 8px;
}

.program ul ul li + li,
.program ol ol li + li,
.program ul ol li + li,
.program ol ul li + li { margin-top: 6px; }

.program blockquote {
  border-left: 4px solid var(--line);
  padding: 4px 0 4px 16px;
  color: var(--muted);
  line-height: 1.6;
}

.materials {
  margin-top: 32px;
  padding: 22px;
  border-top: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfd;
}

.materials h2 {
  margin: 0 0 16px;
  font-size: 22px;
}

.materials-list {
  display: grid;
  gap: 10px;
}

.material-link {
  min-height: 72px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
  background: #f8fbfd;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
}

.material-link:hover {
  border-color: var(--blue-soft);
  background: #fff;
  box-shadow: 0 8px 20px rgba(23, 56, 81, .08);
  transform: translateY(-1px);
}

.material-icon {
  width: 50px;
  height: 44px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: var(--blue-dark);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
}

.material-info {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.material-info strong {
  font-weight: 800;
  overflow-wrap: anywhere;
}

.material-info small {
  color: var(--muted);
  font-weight: 700;
}

.material-download {
  min-height: 36px;
  border-radius: 6px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--blue-dark);
  font-weight: 900;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}

.material-link:hover .material-download {
  border-color: var(--blue-soft);
  background: var(--blue);
  color: #fff;
}

.empty {
  grid-column: 1 / -1;
  min-height: 220px;
  display: grid;
  align-content: center;
  gap: 8px;
  background: #fff7ef;
  border: 1px solid #f0d3bb;
  border-radius: 8px;
  padding: 28px;
  color: #6b4126;
}

.empty strong {
  color: #5a351c;
  font-size: 22px;
}

.empty span {
  color: #7b553b;
  font-size: 16px;
}

@media (max-width: 920px) {
  .hero,
  .course-detail {
    grid-template-columns: 1fr;
  }

  .detail-hero h1 { font-size: 24px; }

  .section-head {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .filters {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }

  .chip { white-space: nowrap; }

  .course-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .archive-list {
    grid-template-columns: 1fr;
  }

  .detail-card {
    position: static;
    order: -1;
  }

  .detail-meta .meta-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .teacher-detail-card {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .teacher-detail-photo {
    width: 72px;
    height: 72px;
  }

  .teacher-detail-photo::before {
    width: 70px;
    height: 70px;
    left: 0;
    top: 0;
  }

  .teacher-detail-photo img {
    width: 66px;
    height: 66px;
    left: 1px;
    top: 2px;
  }
}

@media (max-width: 620px) {
  .nav {
    min-height: 58px;
    padding: 0 12px;
  }

  .brand-mark {
    width: 34px;
    height: 34px;
    font-size: 18px;
    border-radius: 6px;
  }

  .brand span {
    font-size: 12px;
    line-height: 1.1;
  }

  .nav-links { display: none; }

  .page {
    padding: 28px 10px 46px;
  }

  h1 { font-size: 31px; }
  .detail-hero h1 { font-size: 20px; }
  h2 { font-size: 27px; }
  .lead { font-size: 16px; }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .course-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .course-top {
    min-height: auto;
    padding: 14px;
  }

  .course-title {
    min-height: 0;
    font-size: 19px;
    display: block;
    overflow: visible;
  }
  .course-body { padding: 14px; }
  .summary { min-height: 0; }

  .meta-row {
    grid-template-columns: 94px minmax(0, 1fr);
  }

  .course-actions {
    grid-template-columns: 1fr;
  }

  .button { width: 100%; }

  .archive-main {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .archive-date {
    justify-self: start;
  }

  .materials {
    padding: 16px;
  }

  .material-link {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .material-download {
    grid-column: 1 / -1;
    width: 100%;
  }
}