/*
 * «Підвищення кваліфікації — розділ» (templates/pages/education/page-cpd.php),
 * /cpd/: the design «Журнал» the owner chose on 2026-10-26, then brought in
 * line with the site — the navy opening of /applicants/, navy blocks and paper
 * in turn as the department block pages have them, their documents and
 * contacts. One type throughout (sizes and weights only), no small rules
 * beside the words, no rounding, no shadows.
 */

.cpd {
  --cpd-rule: var(--color-blue-200);
  --cpd-gap: clamp(56px, 6vw, 96px);
  color: var(--color-text-primary);
}

/* On graphite a navy line would vanish; it takes the accent, as the catalog's does. */
html[data-theme="dark"] .cpd {
  --cpd-rule: var(--color-accent);
}

/* layout.css spaces every section from the one before (up to 18rem); the page spaces
   its own. :where keeps this at one class, so the rules below set what they need. */
.cpd :where(section) {
  margin-top: 0;
}

/* Every block's words start where the opening's do: the page's margin plus
   the opening's inner margin (a navy block is set in by the first and pads by
   the second). On a phone the blocks span the screen, so the inner one alone. */
.cpd {
  --cpd-inner: clamp(20px, 3.5vw, 56px);
  --cpd-side: calc(var(--wrap) + var(--cpd-inner));
}

@media (max-width: 768px) {
  .cpd {
    --cpd-side: var(--cpd-inner);
  }
}

.cpd-wrap,
.cpd .dept-container {
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--cpd-side);
}

.cpd-kicker {
  margin: 0 0 12px;
  color: var(--color-text-secondary);
  font-size: 1rem;
  font-weight: 700;
}

/* One size for every section's heading, the department block pages' (.dept-title):
   the documents and the contacts come from those pages with theirs. */
.cpd-title {
  margin: 0;
  color: var(--color-text-heading);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}



.cpd-more {
  color: var(--color-link);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.cpd-more:hover {
  color: var(--color-link-hover, var(--color-link));
}

.cpd-text > :first-child {
  margin-top: 0;
}

.cpd-text > :last-child {
  margin-bottom: 0;
}

/* reset.css takes the lists' marks away; the order of steps needs its numbers. */
.cpd-text ol,
.cpd-text ul {
  margin: 0 0 12px;
  padding-left: 1.3em;
  list-style: decimal;
}

.cpd-text ul {
  list-style: disc;
}

.cpd-text li + li {
  margin-top: 8px;
}

.cpd-text a {
  color: var(--color-link);
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------ opening */

/*
 * The site's opening, as /applicants/ and the alumni's have it (page-alumni.css,
 * «opening»): navy, the photo behind under a navy shade deeper on the left
 * where the words stand, the breadcrumbs, the title, the line and the buttons
 * in white, the arms on the right. It stands outside .cpd,
 * the first section of <main>, so header/layout.css places it under the fixed
 * header as every other page's; in from the sides by the page's margin. A
 * little lower than the alumni's (the owner, 2026-10-26: smaller).
 */
.cpd-hero {
  --cpd-hero-top: 44px;
  --cpd-hero-bottom: 36px;
  position: relative;
  isolation: isolate;
  display: flex;
  overflow: hidden;
  padding: var(--cpd-hero-top) clamp(20px, 3.5vw, 56px) var(--cpd-hero-bottom);
  background: var(--color-blue-200);
  color: var(--color-white);
}

@media (min-width: 769px) {
  .cpd-hero {
    margin-right: var(--wrap);
    margin-left: var(--wrap);
  }
}

.cpd-hero__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.cpd-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(var(--color-blue-200--rgb), 0.86) 0%, rgba(var(--color-blue-200--rgb), 0.66) 45%, rgba(var(--color-blue-200--rgb), 0.34) 100%),
    linear-gradient(to bottom, transparent 40%, rgba(var(--color-blue-200--rgb), 0.35));
}

.cpd-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  width: 100%;
}

.cpd-hero__main > * {
  max-width: 760px;
}

/* The arms in the right column: the opening's whole height but 6px above and
   below, out of the flow, so they never make the opening taller (the owner,
   2026-10-26: as large as can be, without stretching the opening). */
.cpd-hero__side {
  position: relative;
  align-self: stretch;
  min-height: 200px;
  pointer-events: none;
}

.cpd-hero__arms {
  position: absolute;
  top: calc(6px - var(--cpd-hero-top));
  left: 0;
  display: block;
  width: 100%;
  height: calc(100% + var(--cpd-hero-top) + var(--cpd-hero-bottom) - 12px);
  object-fit: contain;
  object-position: center;
}

.cpd-hero__crumbs {
  margin-bottom: 24px;
  color: rgba(var(--color-white--rgb), 0.5);
  font-size: 0.875rem;
  line-height: 1.6;
}

.cpd-hero__crumbs a {
  color: var(--color-white) !important;
  font-weight: 700;
  text-decoration: none;
}

.cpd-hero__title {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  color: var(--color-white);
  font-size: clamp(2.2rem, 3.5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.cpd-hero__desc {
  margin: 0 0 24px;
  color: rgba(var(--color-white--rgb), 0.85);
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  font-weight: 500;
  line-height: 1.6;
}

.cpd-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 32px;
}

.cpd-hero__actions:last-child {
  margin-bottom: 0;
}

@media (max-width: 1199px) {
  .cpd-hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .cpd-hero__side {
    display: none;
  }

  .cpd-hero__title {
    font-size: clamp(2.2rem, 8vw, 2.8rem);
  }
}

/* Phones as the alumni's: the site's phone scale, the first button a row to itself. */
@media (max-width: 767px) {
  .cpd-hero {
    --cpd-hero-top: 28px;
    --cpd-hero-bottom: 28px;
  }

  .cpd-hero__crumbs {
    margin-bottom: 14px;
  }

  .cpd-hero__title {
    margin-bottom: 10px;
    font-size: var(--fs-title);
    line-height: 1.15;
    letter-spacing: -0.02em;
  }

  .cpd-hero__desc {
    margin-bottom: 22px;
    font-size: var(--fs-body);
    line-height: 1.5;
  }

  .cpd-hero__actions {
    gap: 10px;
    margin-bottom: 24px;
  }

  .cpd-hero__actions .btn {
    flex: 1 1 auto;
  }

  .cpd-hero__actions .btn:first-child {
    flex-basis: 100%;
  }
}



/* ----------------------------------------------------------- sections */

.cpd-section {
  padding-top: var(--cpd-gap);
}

.cpd-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  margin-bottom: 32px;
}

/* The programmes as a strict table (the owner, 2026-10-26): a column head
   over a navy rule, a row per programme between hairlines — its name, volume
   and form, «Програма» with an arrow at the end, the one thing to press —
   and each faculty (or partner) heading its rows with its emblem. */
.cpd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
  line-height: 1.4;
}

.cpd-table :is(th, td) {
  padding: 14px 16px;
  text-align: left;
  vertical-align: middle;
}

.cpd-table :is(th, td):first-child {
  padding-left: 0;
}

.cpd-table :is(th, td):last-child {
  padding-right: 0;
}

.cpd-table thead th {
  padding-top: 0;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--cpd-rule);
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  font-weight: 700;
}

.cpd-table thead th:first-child {
  width: 42%;
}

.cpd-table thead th:nth-child(2) {
  width: 30%;
}

.cpd-table tbody tr:not(.cpd-table__group) :is(th, td) {
  border-bottom: 1px solid var(--color-border);
}

.cpd-table tbody th[scope="row"] {
  color: var(--color-text-heading);
  font-weight: 600;
}

/* The programme's name is its link too: the heading's colour, blue and
   underlined under the pointer or anywhere in its row. */
.cpd-table .cpd-table__name {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 3px;
}

.cpd-table .cpd-table__name:focus-visible,
.cpd-table tbody tr:hover .cpd-table__name {
  color: var(--color-link);
  text-decoration: underline;
}

.cpd-table tbody td {
  color: var(--color-text-secondary);
}

.cpd-table__group th {
  padding-top: 32px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-heading);
}

.cpd-table tbody:first-of-type .cpd-table__group th {
  padding-top: 24px;
}

.cpd-table__group-name {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 1.125rem;
  font-weight: 700;
}

.cpd-table__group-name img {
  flex: none;
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.cpd-table__go {
  text-align: right;
  white-space: nowrap;
}

.cpd-table .cpd-table__go a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-link);
  font-weight: 700;
  text-decoration: none;
}

.cpd-table__go svg {
  transition: transform 0.2s ease;
}

.cpd-table__go a:hover svg,
.cpd-table__go a:focus-visible svg {
  transform: translateX(4px);
}

@media (hover: hover) {
  .cpd-table tbody tr:not(.cpd-table__group):hover :is(th, td) {
    background-color: var(--color-bg-secondary);
  }
}

/* Framed (the owner, 2026-10-26): from a tablet up the table has its border
   and a line between every cell, the cells padded on both sides, a faculty's
   heading row on the page's grey. A phone keeps its rows as blocks. */
@media (min-width: 768px) {
  .cpd-table {
    border: 1px solid var(--color-border);
  }

  .cpd-table :is(th, td),
  .cpd-table :is(th, td):first-child,
  .cpd-table :is(th, td):last-child {
    padding: 14px 18px;
    border: 1px solid var(--color-border);
  }

  .cpd-table thead :is(th, th:first-child, th:last-child) {
    padding-top: 12px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--cpd-rule);
    background-color: var(--color-bg-secondary);
  }

  .cpd-table__group th,
  .cpd-table tbody:first-of-type .cpd-table__group th {
    padding-top: 14px;
    padding-bottom: 14px;
    background-color: var(--color-bg-secondary);
  }
}

/* A partner over its table: a navy band as wide as the navy blocks (out by
   the inner margin, so its words keep the line of the table's), all in one
   row — the name on the left, whom to call or write on the right, each under
   a small name of its own (the owner, 2026-10-26). */
.cpd-partner + .cpd-partner {
  margin-top: 48px;
}

.cpd-partner__head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: 20px clamp(32px, 4vw, 64px);
  margin: 0 calc(-1 * var(--cpd-inner)) 28px;
  padding: clamp(28px, 3vw, 40px) var(--cpd-inner);
  background-color: var(--color-blue-200);
  color: var(--color-white);
}

.cpd-partner__name {
  margin: 0;
  color: var(--color-white);
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem);
  font-weight: 700;
  line-height: 1.3;
}

.cpd-partner__contacts {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px 32px;
  margin: 0;
}

.cpd-partner__contacts dt {
  margin-bottom: 4px;
  color: rgba(var(--color-white--rgb), 0.65);
  font-size: 0.875rem;
  font-weight: 700;
}

.cpd-partner__contacts dd {
  margin: 0;
  color: var(--color-white);
  font-size: 1.0625rem;
  font-weight: 600;
}

.cpd-partner__contacts a {
  color: var(--color-white);
  text-decoration: underline;
  text-decoration-color: rgba(var(--color-white--rgb), 0.4);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.cpd-partner__contacts a:hover,
.cpd-partner__contacts a:focus-visible {
  text-decoration-color: currentColor;
}

@media (max-width: 1023px) {
  .cpd-partner__head {
    grid-template-columns: minmax(0, 1fr);
  }

  .cpd-partner__contacts {
    justify-content: flex-start;
  }
}

/* Phones: a row is a block — the name, then volume and form each with its
   label, then «Програма». */
@media (max-width: 767px) {
  .cpd-table,
  .cpd-table :is(tbody, tr, th, td) {
    display: block;
    width: auto;
  }

  .cpd-table thead {
    display: none;
  }

  .cpd-table tbody tr:not(.cpd-table__group) {
    padding: 14px 0;
    border-bottom: 1px solid var(--color-border);
  }

  .cpd-table tbody tr:not(.cpd-table__group) :is(th, td) {
    padding: 2px 0;
    border-bottom: 0;
  }

  .cpd-table tbody td[data-label]:empty {
    display: none;
  }

  .cpd-table tbody td[data-label]::before {
    content: attr(data-label) ": ";
    font-weight: 700;
  }

  .cpd-table__go {
    margin-top: 6px;
    text-align: left;
  }

  .cpd-table__group th {
    padding: 28px 0 12px;
    border-bottom: 2px solid var(--cpd-rule);
  }
}

/* The steps along one line, the numbers standing on it: a piece of line from
   each step's number to the next one, an arrow at the end of the last piece,
   so the line starts at the first and ends at the last. A tag over the first
   and the last says which is which. */
.cpd-steps {
  --cpd-step-line: calc(26px + 2.36rem);
  display: grid;
  grid-template-columns: repeat(var(--cpd-steps, 4), minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.cpd-step {
  position: relative;
  padding-right: 32px;
}

.cpd-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--cpd-step-line) - 1px);
  right: 12px;
  left: 0;
  height: 2px;
  background-color: var(--cpd-rule);
}

/* The arrow at the end of the line, pointing at the last step. */
.cpd-step:nth-last-child(2)::before {
  content: "";
  position: absolute;
  top: calc(var(--cpd-step-line) - 7px);
  right: 4px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 10px solid var(--cpd-rule);
}

.cpd-step__tag {
  display: block;
  height: 18px;
  margin-bottom: 8px;
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 18px;
}

.cpd-step__n {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding-right: 16px;
  background-color: var(--color-bg-primary);
  color: var(--color-text-heading);
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.cpd-step__title {
  margin: 18px 0 8px;
  color: var(--color-text-heading);
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.3;
}

.cpd-step__text {
  margin: 0 0 10px;
  color: var(--color-text-secondary);
  line-height: 1.55;
}

/* How to enrol: a panel for each kind of applicant, side by side; its order
   (the editor's numbered list) as steps — a navy square with the number, a
   line down to the next — and the closing line after them. */
/* The panels as wide as the navy blocks, out by the inner margin on each side,
   so their words start on the line of the heading and of every block's words
   (the owner, 2026-10-26). */
.cpd-enrol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 16px;
  margin: 0 calc(-1 * var(--cpd-inner));
}

.cpd-enrol__col {
  padding: clamp(24px, 3vw, 40px) var(--cpd-inner);
  background-color: var(--color-bg-secondary);
}

.cpd-enrol__for {
  margin: 0 0 6px;
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
  font-weight: 700;
}

.cpd-enrol__title {
  margin: 0 0 28px;
  color: var(--color-text-heading);
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
}

.cpd-enrol__text {
  font-size: 1.0625rem;
  line-height: 1.55;
}

.cpd .cpd-enrol__text ol {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  counter-reset: cpd-enrol;
}

.cpd .cpd-enrol__text ol li {
  position: relative;
  min-height: 36px;
  margin: 0;
  padding: 6px 0 22px 56px;
  counter-increment: cpd-enrol;
}

.cpd .cpd-enrol__text ol li::before {
  content: counter(cpd-enrol);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background-color: var(--color-blue-200);
  color: var(--color-white);
  font-weight: 700;
}

/* The line from one step down to the next. */
.cpd .cpd-enrol__text ol li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 36px;
  bottom: 0;
  left: 17px;
  width: 2px;
  background-color: var(--color-border-strong);
}

.cpd .cpd-enrol__text ol li:last-child {
  padding-bottom: 0;
}

.cpd-enrol__text > p {
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

/* --------------------------------------------------------- navy blocks */

/*
 * Navy and paper in turn, as the department block pages have them: a navy
 * block is set in from the sides by the page's margin, as the opening is,
 * with the opening's inner margins; the paper's words line up with its edges.
 * The steps, the certificate, the questions and the corporate line.
 */
.cpd-box {
  --cpd-rule: rgba(var(--color-white--rgb), 0.4);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --cpd-box-pad: clamp(44px, 5vw, 72px);
  margin: var(--cpd-gap) var(--wrap) 0;
  padding: var(--cpd-box-pad) var(--cpd-inner);
  background-color: var(--color-blue-200);
  color: var(--color-white);
}

.cpd > :last-child {
  margin-bottom: var(--cpd-gap);
}

.cpd-box .cpd-kicker {
  color: rgba(var(--color-white--rgb), 0.72);
}

.cpd-box .cpd-title {
  color: var(--color-white);
}

.cpd-box .cpd-more {
  color: var(--color-white);
}

.cpd-step:last-child .cpd-step__tag {
  color: var(--color-link);
}

/* The steps on navy: a white line the numbers cut with the block's navy; the
   result in white on its panel (no yellow here, the owner, 2026-10-26). */
.cpd-box .cpd-steps {
  --cpd-rule: rgba(var(--color-white--rgb), 0.55);
}

.cpd-box .cpd-step__n {
  background-color: var(--color-blue-200);
  color: var(--color-white);
}

.cpd-box .cpd-step__tag {
  color: rgba(var(--color-white--rgb), 0.72);
}

.cpd-box .cpd-step:last-child .cpd-step__tag {
  color: var(--color-white);
}

.cpd-box .cpd-step__title {
  color: var(--color-white);
}

.cpd-box .cpd-step__text {
  color: rgba(var(--color-white--rgb), 0.8);
}

.cpd-box .cpd-step:last-child .cpd-step__title {
  font-size: 1.5rem;
}

/* ------------------------------------------------------- advantages */

/* Why study here: the points in a row on navy, each numbered over a white
   rule; behind them a light from the right and the arms' shield, large and
   faint, cut by the block's edge (the owner, 2026-10-26: a little decor). */
.cpd-adv {
  background-image: radial-gradient(ellipse 70% 120% at 100% 0%, rgba(var(--color-white--rgb), 0.1), transparent 70%);
}

.cpd-adv::before {
  content: "";
  position: absolute;
  top: -12%;
  right: -4%;
  z-index: -1;
  width: min(42%, 520px);
  aspect-ratio: 740 / 830;
  background: url("../../../media/departments/bg-gerb.svg") center / contain no-repeat;
  opacity: 0.06;
  pointer-events: none;
}

.cpd-adv__list {
  counter-reset: cpd-adv;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 28px clamp(24px, 3vw, 48px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cpd-adv__item {
  counter-increment: cpd-adv;
}

.cpd-adv__item::before {
  content: counter(cpd-adv, decimal-leading-zero);
  display: block;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--cpd-rule);
  color: rgba(var(--color-white--rgb), 0.6);
  font-size: 0.9375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cpd-adv__title {
  margin: 0 0 10px;
  color: var(--color-white);
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);
  font-weight: 700;
  line-height: 1.25;
}

.cpd-adv__text {
  margin: 0;
  color: rgba(var(--color-white--rgb), 0.82);
  line-height: 1.55;
}

/* ------------------------------------------------------------ about */

/* The centre in a word on a grid of two columns across the width: the
   sentence on the left, the two points on the right. Paper only. */
.cpd-intro {
  --cpd-cols: minmax(0, 7fr) minmax(0, 5fr);
  --cpd-col-gap: clamp(40px, 6vw, 112px);
  padding-top: var(--cpd-gap);
}

.cpd-about__grid {
  display: grid;
  grid-template-columns: var(--cpd-cols);
  gap: 32px var(--cpd-col-gap);
  align-items: start;
}

/* Plain (the owner, 2026-10-26: simpler, no decor): the sentence a size over
   the text, the points beside it as ordinary text. */
.cpd-about__lead {
  margin: 0;
  color: var(--color-text-heading);
  font-size: clamp(1.1875rem, 1.05rem + 0.4vw, 1.375rem);
  font-weight: 400;
  line-height: 1.5;
}

/* The centre's name, with which the sentence begins, in place of a caption. */
.cpd-about__lead strong {
  font-weight: 700;
}

.cpd-about__points {
  display: grid;
  gap: 24px;
  margin: 0;
}

.cpd-about__points dt {
  margin-bottom: 4px;
  color: var(--color-text-heading);
  font-weight: 700;
}

.cpd-about__points dd {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

@media (max-width: 899px) {
  .cpd-about__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------- certificate */

/* Words only: what it is and the regulation on the left; its points on the right,
   large, between hairlines; the arms faint behind, as on the block pages' navy. */
.cpd-cert::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../../../media/departments/gerb-watermark.webp") right -4% center / min(44%, 560px) no-repeat;
  opacity: 0.06;
  pointer-events: none;
}

.cpd-cert__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 40px clamp(40px, 6vw, 112px);
  align-items: center;
}

.cpd-cert__text {
  max-width: 34rem;
  margin: 18px 0 0;
  color: rgba(var(--color-white--rgb), 0.85);
  font-size: 1.125rem;
  line-height: 1.6;
}

.cpd-cert__go {
  margin-top: 28px;
}

.cpd-cert__rows {
  margin: 0;
  border-top: 2px solid var(--cpd-rule);
}

.cpd-cert__row {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: 8px 32px;
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid rgba(var(--color-white--rgb), 0.2);
}

.cpd-cert__row dt {
  color: var(--color-white);
  font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
}

.cpd-cert__row dd {
  margin: 0;
  color: rgba(var(--color-white--rgb), 0.85);
  font-size: 1.0625rem;
  line-height: 1.55;
}

/* ---------------------------------------------------------- questions */

.cpd-faq {
  border-top: 2px solid var(--cpd-rule);
}

.cpd-faq__item {
  border-bottom: 1px solid rgba(var(--color-white--rgb), 0.2);
}

/* The question is the accordion's button (assets/js/ui/accordion.js); the
   answer opens as the department pages' do (page-department.css,
   .dept-accordion-*): its height and fade on the same curve, the chevron
   turning over. */
.cpd-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 24px 0;
  border: 0;
  background: none;
  color: var(--color-white);
  font: inherit;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}

.cpd-faq__q:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 4px;
}

.cpd-faq__icon {
  flex: none;
  display: flex;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.cpd-faq__item.is-open .cpd-faq__icon {
  transform: rotate(180deg);
}

.cpd-faq__a {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: max-height 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease, visibility 0.6s;
}

.cpd-faq__item.is-open .cpd-faq__a {
  opacity: 1;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .cpd-faq__icon,
  .cpd-faq__a {
    transition: none;
  }
}

.cpd-faq__a .cpd-text {
  max-width: 62rem;
  padding-bottom: 24px;
  color: rgba(var(--color-white--rgb), 0.85);
  line-height: 1.6;
}

.cpd-faq__a .cpd-text a {
  color: var(--color-white);
}

/* ------------------------------------------------------------ corporate */

/* On the section page, an advertisement under the advantages: light grey
   with navy words, so it does not make a second navy block after them (the
   owner, 2026-10-26). The words of the page «Корпоративне навчання» on the
   left — the offer large, a short line, the button: minimal —
   and its photo report on the right in the department pages' slider
   (page-department.css, «dept-spot-gallery»). */
.cpd-ad {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: var(--cpd-gap) var(--wrap) 0;
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
}

.cpd-ad--photos {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: stretch;
}

.cpd-ad__main {
  align-self: center;
  padding: clamp(36px, 4vw, 56px) var(--cpd-inner);
}

.cpd-ad__title {
  max-width: 40rem;
  margin: 0;
  color: var(--color-text-heading);
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.cpd-ad__lead {
  max-width: 44rem;
  margin: 16px 0 32px;
  color: var(--color-text-primary);
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* The photo up to the banner's edges and as tall as its words, so the words
   set the banner's height and no grey stays empty round them (the owner,
   2026-10-26). */
.cpd-ad__gallery {
  position: relative;
  min-height: 300px;
}

.cpd-ad .dept-spot__photo {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border: 0;
}

/* The photo is dragged by the mouse as by a finger; the hand says so. */
.cpd-ad .dept-spot-gallery {
  cursor: grab;
}

.cpd-ad .dept-spot-gallery:active {
  cursor: grabbing;
}

@media (max-width: 1199px) {
  .cpd-ad--photos {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* Phones and tablets: the photos as a strip over the words. */
@media (max-width: 899px) {
  .cpd-ad--photos {
    grid-template-columns: minmax(0, 1fr);
  }

  .cpd-ad__gallery {
    order: -1;
    min-height: 0;
  }

  .cpd-ad .dept-spot__photo {
    position: relative;
    aspect-ratio: 3 / 2;
  }
}

/* ------------------------------------------------------- faculties */

/* The way into the catalog: the faculties that have programmes, two to a row
   in one frame with lines between, each its emblem, its name and an arrow,
   the whole row a link to the catalog on that faculty; the catalog's button
   under them. */
.cpd-faculties {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
  list-style: none;
}

.cpd-faculties li {
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.cpd-faculties a {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 14px 18px;
  color: var(--color-text-heading);
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.cpd-faculties img {
  flex: none;
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.cpd-faculties svg {
  flex: none;
  margin-left: auto;
  color: var(--color-link);
  transition: transform 0.2s ease;
}

.cpd-faculties a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

@media (hover: hover) {
  .cpd-faculties a:hover {
    background-color: var(--color-bg-secondary);
    color: var(--color-link);
  }

  .cpd-faculties a:hover svg {
    transform: translateX(4px);
  }
}

.cpd-programs__go {
  margin-top: 28px;
}

/* The earlier years' programmes: a plain link beside the catalog's button. */
.cpd-programs__archive {
  display: inline-block;
  margin: 28px 0 0 28px;
  color: var(--color-link);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.cpd-programs__archive:hover {
  text-decoration-thickness: 2px;
}

@media (max-width: 767px) {
  .cpd-programs__archive {
    display: block;
    margin: 18px 0 0;
  }
}

@media (max-width: 767px) {
  .cpd-faculties {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cpd-faculties a,
  .cpd-faculties svg {
    transition: none;
  }
}

/* The catalog's page (page-cpd-catalog.php) is drawn by the electives'
   catalog (page-elective-courses.css); here only its own columns — the
   programme's volume and form, longer than the electives' numbers — and the
   phone's labels for them. */
/* A long cell's first lines (page-cpd-catalog.php): two in a row, a few in
   a theme's expected results (its title stays whole), content or kind and
   form; «Читати далі» under them opens the rest (cpd-catalog.js). */
.cpd-catalog .cpd-clamp {
  overflow: hidden;
  line-height: 1.5;
}

.cpd-catalog .cpd-clamp--2 {
  max-height: 3em;
}

.cpd-catalog .cpd-clamp--4 {
  max-height: 6em;
}

.cpd-catalog .cpd-clamp--6 {
  max-height: 9em;
}

.cpd-catalog .cpd-clamp.is-open {
  max-height: none;
}

/* A cut cell fades out at its foot, so a line cut through reads as more to come. */
.cpd-catalog .cpd-clamp.is-cut:not(.is-open) {
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
  mask-image: linear-gradient(#000 55%, transparent);
}

.cpd-catalog .cpd-clamp__more {
  display: block;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-link);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}

.cpd-catalog .cpd-clamp__more:hover,
.cpd-catalog .cpd-clamp__more:focus-visible {
  text-decoration: underline;
}

@media (min-width: 768px) {
  /* The widths hold whatever a cell says. */
  .cpd-catalog .elc-t {
    table-layout: fixed;
  }

  .cpd-catalog .elc-t__dept {
    width: 22%;
  }

  .cpd-catalog .elc-t__vol {
    width: 20%;
  }

  .cpd-catalog .elc-t__form {
    width: 13%;
  }

  .cpd-catalog .elc-t__ctl {
    width: 11rem;
  }
}

/* A phone's card: the volume, the form and the cost as plain grey lines
   under the faculty, without the labels the electives' numbers carry. */
@media (max-width: 767px) {
  .cpd-catalog .elc-t__row td {
    width: auto;
  }

  .cpd-catalog .elc-t__row td.elc-t__vol,
  .cpd-catalog .elc-t__row td.elc-t__form,
  .cpd-catalog .elc-t__row td.elc-t__ctl {
    display: block;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.5;
  }

  .cpd-catalog .elc-t__row td::before,
  .cpd-catalog .elc-t__row td::after {
    content: none !important;
  }
}

/* Opened, a programme's themes (the owner, 2026-10-26: better and aligned).
   The electives' rules for their own cells reach this table too — the navy
   head, the narrow padding, words broken at any letter — so it is set here
   as a sheet of its own: white in a light frame under the programme's name,
   a quiet grey head, fixed widths, words wrapped whole with hyphens, every
   cell read from the top. */
.cpd-catalog .elc-more .dept-pk__table-wrap {
  margin-top: 4px;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface-card);
}

.cpd-catalog .elc-more .dept-pk__table {
  table-layout: fixed;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.cpd-catalog .elc-more .dept-pk__table :is(th, td) {
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-primary);
  vertical-align: top;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

.cpd-catalog .elc-more .dept-pk__table tbody tr:last-child :is(th, td) {
  border-bottom: 0;
}

.cpd-catalog .elc-more .dept-pk__table thead th {
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border-strong);
  background-color: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
  font-weight: 700;
  vertical-align: middle;
}

.cpd-catalog .elc-more .dept-pk__table .dept-pk__col-n {
  width: 3rem;
  color: var(--color-text-muted);
}

.cpd-catalog .elc-more .dept-pk__table thead th:nth-child(2) {
  width: 26%;
}

.cpd-catalog .elc-more .dept-pk__table thead th:nth-child(4) {
  width: 13%;
}

.cpd-catalog .elc-more .dept-pk__table thead th:nth-child(5) {
  width: 17%;
}

.cpd-catalog .elc-more .dept-pk__table thead th:nth-child(6) {
  width: 9.5rem;
}

.cpd-catalog .elc-more .dept-pk__theme {
  font-weight: 600;
}

@media (max-width: 767px) {
  .cpd-catalog .elc-more .dept-pk__table {
    table-layout: auto;
  }

  .cpd-catalog .elc-more .dept-pk__table-wrap {
    border: 0;
    background: none;
  }
}

/* --------------------------------------- the block pages' documents and contacts */

.cpd .dept-docs-intro {
  max-width: 52rem;
  margin: -8px 0 24px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* Their own sections (parts/documents.php, parts/contacts.php) keep their look;
   only the space before them follows the page's. */
.cpd .dept-section--docs,
.cpd .dept-contacts {
  padding-top: var(--cpd-gap);
  padding-bottom: 0;
}

/* The contacts' heading as far over them as every section's (32px; the
   documents' intro already pulls theirs in to that). */
.cpd .dept-contacts .dept-header-wrap {
  margin-bottom: 32px;
}

/* ------------------------------------------------------------- phones */

@media (max-width: 899px) {
  .cpd-cert__grid {
    grid-template-columns: minmax(0, 1fr);
  }

}

@media (max-width: 1023px) and (min-width: 768px) {
  .cpd-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 40px;
  }

  /* The line runs within a row only: the second step ends its row. */
  .cpd-step:nth-child(2)::after {
    display: none;
  }

}

@media (max-width: 768px) {
  .cpd-box,
  .cpd-ad {
    margin-right: 0;
    margin-left: 0;
  }
}

@media (max-width: 767px) {
  .cpd-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .cpd-step::after,
  .cpd-step::before {
    display: none;
  }

  .cpd-step__tag:empty {
    display: none;
  }

  .cpd-step__n {
    font-size: 3rem;
  }



  .cpd-cert__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}

/*
 * Phones on the site's scale (variables.css, «The phone's type and spacing
 * scale»; the owner, 2026-10-26: as the rest of the site): the blocks 3rem
 * apart as every page's, section headings a step under the page title, card
 * and point titles a step over the reading text, descriptions at the
 * secondary size. Sizes and spacing only; the layout stays.
 */
@media (max-width: 899px) {
  .cpd {
    --cpd-gap: var(--space-section);
  }

  .cpd-box {
    --cpd-box-pad: 2.5rem;
  }

  .cpd-title,
  .cpd .dept-title,
  .cpd-ad__title {
    font-size: var(--fs-section);
    line-height: 1.25;
  }

  .cpd-kicker {
    margin-bottom: 8px;
    font-size: var(--fs-secondary);
  }

  .cpd-head {
    margin-bottom: 24px;
  }

  .cpd-about__lead,
  .cpd-adv__title,
  .cpd-step__title,
  .cpd-enrol__title,
  .cpd-partner__name,
  .cpd-table__group-name,
  .cpd-faq__q,
  .cpd-cert__row dt {
    font-size: var(--fs-card);
    line-height: 1.35;
  }

  .cpd-ad__lead,
  .cpd-cert__text,
  .cpd-enrol__text,
  .cpd-about__points dd,
  .cpd-faq__a .cpd-text,
  .cpd-table {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }

  .cpd-adv__text,
  .cpd-step__text,
  .cpd-cert__row dd,
  .cpd-partner__contacts dd,
  .cpd-enrol__for,
  .cpd-step__tag {
    font-size: var(--fs-secondary);
  }

  .cpd-partner__contacts dt {
    font-size: var(--fs-caption);
  }

  .cpd-adv__list {
    gap: 24px;
  }

  .cpd-adv__item::before {
    margin-bottom: 12px;
    padding-bottom: 10px;
  }

  .cpd-steps {
    gap: 24px;
  }

  /* A step's words beside its number, not under it (the owner, 2026-10-26):
     the number in a column of its own, the caption, title, text and link
     to its right. */
  .cpd-step {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    column-gap: 14px;
    align-items: start;
    padding-right: 0;
  }

  .cpd-step > * {
    grid-column: 2;
  }

  .cpd-step .cpd-step__n {
    grid-column: 1;
    grid-row: 1 / span 4;
    padding-right: 0;
    font-size: 2.5rem;
    line-height: 1;
  }

  .cpd-step__tag {
    height: auto;
    margin-bottom: 2px;
  }

  .cpd-step__title {
    margin-top: 2px;
  }

  /* The result's title, larger on a wide screen, keeps the others' step here. */
  .cpd-box .cpd-step:last-child .cpd-step__title {
    font-size: var(--fs-card);
  }

  .cpd-faq__q {
    padding: 18px 0;
  }

  .cpd-ad__lead {
    margin-bottom: 24px;
  }

  .cpd-partner + .cpd-partner {
    margin-top: 32px;
  }
}