/* Public CPD page: matte learning journey, shared by the RU and EN documents.
   Cards speak the language of the homepage stat cards: thin frame, gold line on top,
   a 4px lift and a gold frame on hover. No gradients, glow or glass on any card. */
.cpd-page { --cpd-purple:#361163; --cpd-gold:#C0A582; --cpd-deep:#130526; --cpd-ink:#1c0938; --cpd-text:#505050; --cpd-pale:#ebebeb; --cpd-line:#e6e1ee; --cpd-on-dark:#e9e3f1; --cpd-hair:rgba(192,165,130,.32); --cpd-out:cubic-bezier(.16,1,.3,1); }
.cpd-page main section { padding:72px 0; scroll-margin-top:100px; }
.cpd-page .container { max-width:1280px; padding:0 32px; }
.cpd-page .section-title { font-size:32px; line-height:1.25; color:var(--cpd-purple); margin:12px 0 16px; text-align:left; }
.cpd-page .section-subtitle { color:var(--cpd-text); font-size:18px; line-height:1.45; max-width:940px; margin:0 0 32px; text-align:left; }
.cpd-page main .section-eyebrow { display:flex; align-items:center; gap:12px; margin:0; color:var(--cpd-purple); font-size:13px; letter-spacing:.1em; }
.cpd-page main .section-eyebrow::before { content:""; flex:none; width:28px; height:2px; background:var(--cpd-gold); }

/* ── Hero: the site photo hero (geometry and overlay of edu / corporate / membership) over the CPD photo.
   This photo is far lighter than the others, so one more layer darkens the text side:
   white copy keeps a contrast above 4.5:1 while the staircase still reads on the right. ── */
.cpd-page .cpd-hero { padding:72px 0;
  background:
    radial-gradient(circle at 80% 20%,rgba(192,165,130,.3) 0%,transparent 60%),
    linear-gradient(90deg,rgba(19,5,38,.74) 0%,rgba(19,5,38,.62) 42%,rgba(19,5,38,.18) 78%,rgba(19,5,38,.06) 100%),
    linear-gradient(135deg,rgba(19,5,38,.45) 0%,rgba(30,9,56,.45) 50%,rgba(54,17,99,.55) 100%),
    url('../img/hero-art/cpd-career-hero.webp') center / cover no-repeat; }
.cpd-page .cpd-hero .section-eyebrow { font-size:13px; letter-spacing:.1em; }
.cpd-page .hero-title { font-size:40px; line-height:1.2; margin:18px 0; white-space:pre-line; }
.cpd-hero-note { margin:22px 0 0; color:rgba(255,255,255,.78); font-size:15px; line-height:1.5; }
/* The shared dark badge card, a little tighter: it also carries the three steps of the path. */
.cpd-page .cpd-journey-card .badge-header { margin-bottom:20px; padding-bottom:18px; }
.cpd-page .cpd-journey-card .hero-card-art { height:92px; margin:0 0 16px; }
.cpd-page .cpd-journey-card .badge-value { margin:0 0 20px; font-size:22px; line-height:1.3; letter-spacing:-.01em; white-space:pre-line; }
.cpd-journey-list { display:grid; gap:14px; margin:0; padding:0; list-style:none; }
.cpd-journey-list li { display:flex; align-items:flex-start; gap:14px; }
.cpd-list-number { flex:none; padding:2px 0 5px; border-bottom:2px solid var(--cpd-gold); color:var(--cpd-gold); font-size:13px; font-weight:700; }
.cpd-journey-list strong { color:#ffffff; font-size:15px; }
.cpd-journey-list p { margin:3px 0 0; color:rgba(255,255,255,.78); font-size:15px; line-height:1.45; }

/* ── Buttons on the light sections (the hero keeps the site gold / outline pair) ── */
.cpd-page main .btn { min-height:46px; justify-content:flex-start; font-size:15px; line-height:1.1; letter-spacing:0; text-align:left; white-space:nowrap; }
.cpd-page main .btn-primary { background:var(--cpd-purple) !important; color:#ffffff !important; border-color:var(--cpd-purple) !important; padding:13px 20px !important; }
.cpd-page main .btn-primary:hover { background:var(--cpd-purple) !important; color:#ffffff !important; box-shadow:0 6px 16px rgba(54,17,99,.18) !important; }
.cpd-page main :is(.btn-secondary,.btn-outline) { background:#ffffff !important; color:var(--cpd-purple) !important; border:1px solid var(--cpd-purple) !important; padding:13px 20px !important; }
.cpd-page main :is(.btn-secondary,.btn-outline):hover { background:var(--cpd-pale) !important; color:var(--cpd-purple) !important; }

/* ── Cards ─────────────────────────────────────────────────────────────── */
.cpd-history-card, .cpd-cycle-step, .cpd-tool-card, .cpd-activity-card { position:relative; min-width:0; border:1px solid var(--cpd-line); border-top:3px solid var(--cpd-gold); border-radius:14px; background:#ffffff; text-align:left;
  transition:transform .35s var(--cpd-out),border-color .3s,box-shadow .35s; }
:is(.cpd-history-card,.cpd-cycle-step,.cpd-tool-card,.cpd-activity-card):hover, .cpd-history-card:focus-within { border-color:var(--cpd-gold); box-shadow:0 14px 28px rgba(54,17,99,.1); transform:translateY(-4px); }
/* Icon and title share one row; the tile swaps its colours when the card is hovered. */
.cpd-card-head { display:flex; align-items:flex-start; gap:14px; min-width:0; }
.cpd-icon { flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:10px; background:var(--cpd-purple); color:var(--cpd-gold); transition:background-color .35s,color .35s; }
.cpd-icon svg { width:22px; height:22px; stroke-width:2.5; }
:is(.cpd-history-card,.cpd-tool-card,.cpd-activity-card):hover .cpd-icon { background:var(--cpd-gold); color:var(--cpd-purple); }

/* «Ваш опыт»: three cards, rows shared through subgrid. */
.cpd-history-grid, .cpd-tools-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
/* A subgrid card inherits the row gap of its grid; its own rows carry their spacing as margins instead. */
.cpd-history-card { display:grid; grid-template-rows:subgrid; grid-row:span 3; row-gap:0; padding:26px; }
.cpd-history-card h3 { margin:0; padding-top:9px; color:var(--cpd-purple); font-size:20px; font-weight:700; line-height:1.3; }
.cpd-history-card p { margin:14px 0 22px; color:var(--cpd-text); font-size:15px; line-height:1.55; }
.cpd-text-link { align-self:end; justify-self:start; display:inline-flex; align-items:center; gap:8px; min-height:24px; color:var(--cpd-purple); font-size:14px; font-weight:700; line-height:1.4; text-decoration:underline transparent; text-underline-offset:5px; transition:text-decoration-color .3s; }
.cpd-text-link span { transition:translate .3s var(--cpd-out); }
.cpd-text-link:hover { text-decoration-color:var(--cpd-gold); }
.cpd-history-card:hover .cpd-text-link span { translate:4px 0; }

/* Cycle: three numbered steps with an arrow in each gap, then the note that the cycle repeats. */
.cpd-page #cpd-cycle-section, .cpd-page #cpd-planner-section { background:var(--cpd-pale); }
.cpd-page #cpd-learning-section, .cpd-page #cpd-activities-section { background:#ffffff; }
.cpd-cycle-flow { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px 32px; }
.cpd-cycle-step { display:grid; grid-template-rows:subgrid; grid-row:span 4; row-gap:0; padding:26px; }
.cpd-cycle-step + .cpd-cycle-step::before { content:""; position:absolute; top:50%; left:-29px; width:24px; height:24px; margin-top:-12px; border:1px solid var(--cpd-gold); border-radius:50%;
  background:#ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23361163' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / 12px no-repeat; }
.cpd-cycle-num { position:absolute; top:16px; right:22px; color:transparent; font-size:52px; font-weight:700; line-height:1; letter-spacing:-.02em; -webkit-text-stroke:1px var(--cpd-gold); pointer-events:none; }
.cpd-cycle-tag { display:inline-flex; align-items:center; gap:8px; color:var(--cpd-purple); font-size:13px; font-weight:700; line-height:1.4; letter-spacing:.08em; text-transform:uppercase; }
.cpd-cycle-question { margin:18px 0 6px; padding-right:56px; color:var(--cpd-purple); font-size:20px; font-weight:700; line-height:1.3; }
.cpd-cycle-original { color:var(--cpd-text); font-size:14px; line-height:1.4; }
.cpd-cycle-method { margin:14px 0 0; color:var(--cpd-text); font-size:15px; line-height:1.55; }
.cpd-cycle-loop-back { grid-column:1 / -1; justify-self:start; display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border:1px solid var(--cpd-line); border-left:3px solid var(--cpd-gold); border-radius:0 10px 10px 0; background:#ffffff; color:var(--cpd-purple); font-size:15px; font-weight:600; line-height:1.4; }
.cpd-cycle-loop-back svg { flex:none; color:var(--cpd-gold); stroke-width:2.5; }
.cpd-toolkit { margin-top:44px; }
.cpd-toolkit-title { margin:0 0 6px; color:var(--cpd-purple); font-size:20px; font-weight:700; line-height:1.3; }
.cpd-toolkit-lead { max-width:760px; margin:0 0 20px; color:var(--cpd-text); font-size:15px; line-height:1.55; }
.cpd-tool-card { display:grid; grid-template-rows:subgrid; grid-row:span 2; row-gap:0; padding:22px 24px; }
.cpd-tool-card .cpd-card-head { align-items:center; }
.cpd-page .cpd-tool-title { margin:0; color:var(--cpd-purple); font-size:18px; font-weight:700; line-height:1.3; }
.cpd-tool-desc { margin:12px 0 0; color:var(--cpd-text); font-size:15px; line-height:1.55; }

/* Activities: ten cards as an even 5×2 grid; a click opens the example. */
.cpd-activities-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; }
.cpd-activity-card { display:grid; grid-template-rows:subgrid; grid-row:span 5; row-gap:0; padding:20px; color:var(--cpd-text); font:inherit; cursor:pointer; }
.cpd-activity-card > span { display:block; min-width:0; }
.cpd-activity-card .cpd-card-head { display:flex; align-items:center; gap:10px; }
.cpd-activity-card .cpd-icon { width:36px; height:36px; border-radius:8px; }
.cpd-activity-card .cpd-icon svg { width:18px; height:18px; }
.cpd-activity-cat { min-width:0; color:var(--cpd-text); font-size:12px; font-weight:700; line-height:1.35; letter-spacing:.03em; text-transform:uppercase; }
.cpd-activity-title { margin:16px 0 8px; color:var(--cpd-purple); font-size:17px; font-weight:700; line-height:1.3; }
.cpd-activity-desc, .cpd-activity-example { font-size:15px; line-height:1.5; }
.cpd-activity-card .cpd-activity-example { display:none; margin-top:14px; padding-top:14px; border-top:1px solid var(--cpd-line); color:var(--cpd-purple); }
.cpd-activity-card.is-open .cpd-activity-example { display:block; }
.cpd-activity-card .cpd-activity-toggle { align-self:end; display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:18px; padding-top:12px; border-top:1px solid var(--cpd-line); color:var(--cpd-purple); font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.cpd-activity-toggle svg { flex:none; stroke-width:2.5; transition:rotate .35s var(--cpd-out); }
.cpd-activity-card.is-open { border-color:var(--cpd-gold); }
.cpd-activity-card.is-open .cpd-activity-toggle svg { rotate:45deg; }

/* ── CPD and the membership grades: a dark band, three steps on a gold line ── */
.cpd-page #cpd-grade-roadmap-section { background:var(--cpd-deep); }
.cpd-page #cpd-grade-roadmap-section .section-eyebrow { color:var(--cpd-gold); }
.cpd-page #cpd-grade-roadmap-section .section-title { color:#ffffff; }
.cpd-page #cpd-grade-roadmap-section .section-subtitle { color:var(--cpd-on-dark); }
.cpd-roadmap-flow { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; padding-top:44px; }
.cpd-roadmap-flow::before { content:""; position:absolute; top:8px; left:0; right:0; height:2px; background:var(--cpd-hair); }
.cpd-page .cpd-grade { position:relative; display:grid; grid-template-rows:subgrid; grid-row:span 7; row-gap:0; padding:28px; border:1px solid var(--cpd-hair); border-top:3px solid var(--cpd-gold); border-radius:14px; background:var(--cpd-ink); color:var(--cpd-on-dark); text-decoration:none;
  transition:transform .35s var(--cpd-out),border-color .3s,box-shadow .35s; }
.cpd-page .cpd-grade:hover, .cpd-page .cpd-grade:focus-visible { border-color:var(--cpd-gold); box-shadow:0 18px 32px rgba(6,1,16,.5); transform:translateY(-4px); }
/* The node of the step on the line, with a stem down to its card. */
.cpd-grade-node { position:absolute; top:-46px; left:28px; width:18px; height:18px; border:2px solid var(--cpd-gold); border-radius:50%; background:var(--cpd-deep); transition:background-color .35s; }
.cpd-grade-node::after { content:""; position:absolute; top:100%; left:50%; width:1px; height:27px; margin-left:-.5px; background:var(--cpd-hair); }
.cpd-grade:hover .cpd-grade-node, .cpd-grade:focus-visible .cpd-grade-node, .cpd-grade-top .cpd-grade-node { background:var(--cpd-gold); }
.cpd-grade-num { position:absolute; top:20px; right:24px; color:transparent; font-size:64px; font-weight:700; line-height:1; letter-spacing:-.02em; -webkit-text-stroke:1px rgba(192,165,130,.45); pointer-events:none; }
.cpd-grade-tag { color:var(--cpd-gold); font-size:12px; font-weight:700; line-height:1.4; letter-spacing:.12em; text-transform:uppercase; }
.cpd-grade-code { margin-top:14px; color:#ffffff; font-size:40px; font-weight:700; line-height:1.1; letter-spacing:-.02em; }
.cpd-grade-top .cpd-grade-code { color:var(--cpd-gold); }
.cpd-grade-name { margin-top:6px; color:var(--cpd-on-dark); font-size:13px; font-weight:700; line-height:1.4; letter-spacing:.1em; }
.cpd-page .cpd-grade-title { margin:20px 0 0; padding-top:20px; border-top:1px solid var(--cpd-hair); color:#ffffff; font-size:18px; font-weight:700; line-height:1.3; overflow-wrap:anywhere; }
.cpd-grade-label { margin-top:18px; color:var(--cpd-gold); font-size:13px; font-weight:700; line-height:1.4; }
.cpd-grade-note { margin-top:8px; color:var(--cpd-on-dark); font-size:15px; line-height:1.55; }
.cpd-grade-more { align-self:end; display:inline-flex; align-items:center; gap:10px; margin-top:24px; color:#ffffff; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.cpd-grade-more svg { color:var(--cpd-gold); stroke-width:2.5; transition:translate .3s var(--cpd-out); }
.cpd-grade:hover .cpd-grade-more svg { translate:4px 0; }

/* ── Planner ───────────────────────────────────────────────────────────── */
.cpd-storage-note, .cpd-save-status { color:var(--cpd-text); font-size:14px; line-height:1.45; }
.cpd-storage-note { margin:-12px 0 24px; max-width:940px; }
.cpd-page .flowchart-card { max-width:none; padding:32px; border:1px solid var(--cpd-line); border-top:3px solid var(--cpd-gold); border-radius:14px; background:#ffffff; color:var(--cpd-text); box-shadow:0 14px 28px rgba(54,17,99,.06); }
.cpd-save-status { margin:0 0 16px; }
.cpd-page .wizard-header { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; border-bottom:1px solid var(--cpd-line); padding-bottom:16px; margin-bottom:24px; }
.cpd-page .wizard-header.hidden { display:none; }
.cpd-page .wizard-question-text { font-size:24px; font-weight:700; line-height:1.3; color:var(--cpd-purple); text-align:left; margin-bottom:20px; }
.cpd-field-hint { font-size:14px; font-weight:400; color:var(--cpd-text); }
.cpd-chip, .cpd-planner-crumb { border:1px solid var(--cpd-gold); border-radius:6px; padding:9px 12px; font-size:14px; text-align:left; line-height:1.35; color:var(--cpd-purple); background:#ffffff; transition:background-color .3s,color .3s,border-color .3s; }
.cpd-chip:hover { background:var(--cpd-purple); border-color:var(--cpd-purple); color:#ffffff; }
/* An answer: a round marker on the left, purple frame on hover, purple bar when chosen. */
.cpd-choice-card { position:relative; display:block; width:100%; padding:14px 18px 14px 50px; border:1px solid var(--cpd-line); border-radius:10px; background:#ffffff; color:var(--cpd-purple); font-size:15px; line-height:1.45; text-align:left; transition:border-color .3s,background-color .3s,box-shadow .3s; }
.cpd-choice-card::before { content:""; position:absolute; top:50%; left:18px; width:18px; height:18px; margin-top:-9px; border:2px solid var(--cpd-gold); border-radius:50%; background:#ffffff; transition:border-color .3s,background-color .3s,box-shadow .3s; }
.cpd-choice-card:hover { border-color:var(--cpd-purple); background:var(--cpd-pale); }
.cpd-choice-card[aria-pressed="true"] { border-color:var(--cpd-purple); background:var(--cpd-pale); box-shadow:inset 3px 0 0 var(--cpd-purple); }
.cpd-choice-card[aria-pressed="true"]::before { border-color:var(--cpd-purple); background:var(--cpd-purple); box-shadow:inset 0 0 0 3px #ffffff; }
.cpd-chip-row { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.cpd-page .cpd-textarea { width:100%; display:block; font-size:15px; line-height:1.5; color:var(--cpd-text); background:#ffffff; border:1px solid var(--cpd-gold); border-radius:10px; padding:14px; resize:vertical; min-height:110px; }
.cpd-textarea::placeholder { color:var(--cpd-text); }
.cpd-step-next { margin-top:20px; }
.cpd-methods-grid, .cpd-year-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.cpd-method-check { display:flex; align-items:flex-start; gap:10px; padding:14px; border:1px solid var(--cpd-line); border-radius:10px; font-size:15px; line-height:1.5; color:var(--cpd-text); cursor:pointer; transition:border-color .3s,background-color .3s; }
.cpd-method-check:hover { border-color:var(--cpd-purple); }
.cpd-method-check:has(input:checked) { border-color:var(--cpd-purple); background:var(--cpd-pale); }
.cpd-method-check input { margin-top:4px; accent-color:var(--cpd-purple); }
.cpd-field-label { display:block; color:var(--cpd-purple); font-size:15px; font-weight:700; margin-bottom:10px; }
.cpd-page .flowchart-result-wrapper { background:none; border:0; padding:0; margin:0; max-width:none; text-align:left; }
.cpd-result-disclaimer { display:flex; align-items:flex-start; gap:10px; color:var(--cpd-text); font-size:14px; line-height:1.5; margin-bottom:20px; }
.cpd-result-disclaimer svg { flex-shrink:0; margin-top:3px; }
.cpd-result-row { display:grid; grid-template-columns:220px minmax(0,1fr); gap:20px; padding:16px 0; border-top:1px solid var(--cpd-line); }
.cpd-result-label { color:var(--cpd-purple); font-size:15px; font-weight:700; }
.cpd-result-value { color:var(--cpd-text); font-size:15px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
.cpd-result-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }

.cpd-page :is(a,button,textarea,input):focus-visible { outline:3px solid var(--cpd-purple); outline-offset:3px; }
.cpd-page :is(.cpd-hero,#cpd-grade-roadmap-section) :is(a,button):focus-visible { outline-color:var(--cpd-gold); }

@media (max-width:1024px) {
  /* One column: the copy runs across the whole photo, so the extra darkening is even, not left to right. */
  .cpd-page .cpd-hero { background:
      linear-gradient(rgba(19,5,38,.5),rgba(19,5,38,.5)),
      linear-gradient(135deg,rgba(19,5,38,.45) 0%,rgba(30,9,56,.45) 50%,rgba(54,17,99,.55) 100%),
      url('../img/hero-art/cpd-career-hero.webp') 65% center / cover no-repeat; }
}
@media (max-width:1279px) {
  /* Narrower columns: the icon goes above the category, so the longest category still fits. */
  .cpd-activity-card .cpd-card-head { flex-direction:column; align-items:flex-start; }
}
@media (max-width:1099px) {
  .cpd-activities-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cpd-activity-card .cpd-card-head { flex-direction:row; align-items:center; }
}
@media (max-width:899px) {
  /* Steps and grades stack; the arrow turns down and the gold line runs down the left edge. */
  .cpd-cycle-flow { grid-template-columns:1fr; gap:32px; }
  .cpd-cycle-step + .cpd-cycle-step::before { top:-28px; left:26px; margin-top:0; rotate:90deg; }
  .cpd-roadmap-flow { grid-template-columns:1fr; padding:0 0 0 34px; }
  .cpd-roadmap-flow::before { top:0; right:auto; bottom:0; left:8px; width:2px; height:auto; }
  .cpd-grade-node { top:28px; left:-36px; }
  .cpd-grade-node::after { top:50%; left:100%; width:18px; height:1px; margin:-.5px 0 0; }
}
@media (max-width:767px) {
  .cpd-page main section { padding:48px 0; }
  .cpd-page .container { padding:0 20px; }
  .cpd-page .cpd-hero { padding:40px 0; }
  .cpd-page .hero-title { font-size:32px; }
  .cpd-page .section-title { font-size:28px; }
  .cpd-history-grid, .cpd-tools-grid, .cpd-methods-grid, .cpd-year-grid { grid-template-columns:1fr; }
  .cpd-history-card, .cpd-cycle-step, .cpd-page .cpd-grade { padding:22px; }
  .cpd-page .wizard-question-text { font-size:22px; }
  .cpd-page .flowchart-card { padding:20px; }
  .cpd-result-row { grid-template-columns:1fr; gap:8px; }
  .cpd-grade-code { font-size:34px; }
  .cpd-grade-num { font-size:52px; }
}
@media (max-width:479px) {
  .cpd-activities-grid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  .cpd-page main :is(a,button,div,span,svg) { transition:none !important; }
  :is(.cpd-history-card,.cpd-cycle-step,.cpd-tool-card,.cpd-activity-card):hover, .cpd-page .cpd-grade:hover { transform:none; }
}