/*
 * Секции страницы «Курсы» (шаблон page-courses). Грузится после base.css.
 *
 * @package easy-peasy
 */

/* ===========================================================================
   Страница «Курсы» (/courses/)
   Мост к базовой программе · витрина спецкурсов с переключателем языков ·
   пояснение порогового уровня. Per-language акцент — --lang-accent
   (та же карта, что level-explorer/lang-tab на «Программе»).
   =========================================================================== */

/* --- Мост «Базовое обучение по уровням» --- */
.bridge-grid{display:grid;gap:28px;grid-template-columns:1fr}
.bridge-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.bridge-actions .btn{max-width:100%;white-space:normal;text-wrap:balance}
/* Мобильно кнопки тянутся на всю ширину; с планшета — по контенту в ряд. */
@media(max-width:519px){.bridge-actions{flex-direction:column;align-items:stretch}.bridge-actions .btn{width:100%}}
.bridge-facts{display:flex;flex-wrap:wrap;gap:18px 30px;margin-top:24px}
.bridge-fact{display:flex;flex-direction:column;gap:3px}
.bf-num{font-family:var(--font-head);font-weight:800;font-size:1.7rem;line-height:1;color:var(--text);font-variant-numeric:tabular-nums}
.bf-num small{font-size:.9rem;font-weight:700;color:var(--text-muted);margin-left:2px}
.bf-lab{font-size:.8rem;color:var(--text-muted)}
.bridge-ladder{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-md);padding:clamp(20px,3vw,26px)}
.bl-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;margin-bottom:14px}
.bl-head{font-family:var(--font-head);font-weight:700;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
/* Легенда-ключ целей (один раз над лестницей) */
.bl-legend{display:flex;flex-wrap:wrap;align-items:center;gap:4px 9px;font-size:.67rem;line-height:1;color:var(--text-muted)}
.bl-legend-h{font-family:var(--font-head);font-weight:700;font-size:.62rem;letter-spacing:.02em;text-transform:uppercase;color:var(--text-muted)}
.bl-legend-item{display:inline-flex;align-items:center;gap:5px;font-weight:600;color:var(--text);white-space:nowrap}
.bl-legend-dot{flex:none;width:11px;height:11px;border-radius:50%;display:grid;place-items:center}
.bl-legend-dot svg{width:7px;height:7px;color:rgba(0,0,0,.62)}
.bl-legend-item--tour .bl-legend-dot{background:var(--green)}
.bl-legend-item--work .bl-legend-dot{background:var(--blue)}
.bl-legend-item--migr .bl-legend-dot{background:var(--amber)}

.bl-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.bl-step{display:flex;align-items:center;gap:9px;padding:7px 11px;border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--line);min-width:0;margin-left:0}
.bl-dot{flex:none;width:23px;height:23px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);font-family:var(--font-head);font-weight:800;font-size:.75rem;color:var(--text-muted)}
.bl-step .level-badge{flex:none;width:auto;height:auto;padding:3px 8px;font-size:.75rem;border-radius:var(--r-pill)}
/* Название ступени: EN (жирно) над RU-глоссом — компактная ячейка на 1–2 строки.
   Ширины aside/кегля хватает, чтобы длинные «Pre-/Upper-Intermediate N»
   переносились максимум на 2 строки; hyphens:none — без авто-переносов. */
.bl-name{display:flex;flex-direction:column;gap:1px;min-width:0;line-height:1.13}
.bl-name-en{font-family:var(--font-head);font-weight:700;font-size:.78rem;color:var(--text);hyphens:none}
.bl-name-ru{font-size:.66rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Мини-индикатор целей: 3 точки-колонки, выравнены по правому краю */
.bl-goals{flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:6px}
.bl-goal{flex:none;box-sizing:border-box;width:11px;height:11px;border-radius:50%;display:grid;place-items:center;border:1.5px solid color-mix(in srgb,var(--text-muted) 45%,transparent);background:transparent;transition:background .16s ease,border-color .16s ease}
.bl-goal svg{width:6.5px;height:6.5px;color:color-mix(in srgb,var(--text-muted) 70%,transparent)}
.bl-goal.is-on{border-color:transparent}
.bl-goal--tour.is-on{background:var(--green)}
.bl-goal--work.is-on{background:var(--blue)}
.bl-goal--migr.is-on{background:var(--amber)}
.bl-goal--migr.is-on svg{color:rgba(0,0,0,.62)}
.bl-step.is-threshold{background:color-mix(in srgb,var(--amber) 15%,var(--surface));border-color:color-mix(in srgb,var(--amber) 42%,var(--line))}
.bl-note{margin-top:16px;font-size:.82rem;line-height:1.55;color:var(--text-muted)}
.bl-note b{color:var(--text);font-weight:800}
@media(prefers-reduced-motion:reduce){.bl-goal{transition:none}}
@media(min-width:900px){.bridge-grid{grid-template-columns:1.02fr .98fr;gap:40px;align-items:center}}
@media(min-width:1200px){.bridge-grid{grid-template-columns:1.12fr .88fr;gap:48px}}

/* --- Витрина спецкурсов: панели по языку обучения --- */
.spec-panels{--lang-accent:var(--primary)}
.spec-panel{--lang-accent:#DC2647}
.spec-panel[data-lang-panel="english"]{--lang-accent:var(--blue)}
.spec-panel[data-lang-panel="german"]{--lang-accent:#A5730A}
.spec-panel[data-lang-panel="spanish"]{--lang-accent:var(--violet)}
.spec-panel[data-lang-panel="french"]{--lang-accent:var(--green)}
[data-theme="dark"] .spec-panel[data-lang-panel="polish"]{--lang-accent:#FF6B70}
[data-theme="dark"] .spec-panel[data-lang-panel="german"]{--lang-accent:#E0A93C}
.spec-panel[hidden]{display:none}
html:not(.js) .spec-panel[hidden]{display:block}
html:not(.js) .spec-panel{margin-bottom:34px}
.spec-panel-h{font-family:var(--font-head);font-weight:800;font-size:1.16rem;line-height:1.2;color:var(--text);margin:2px 0 18px}

/* Субхед под-группы: eyebrow (ось) + заголовок + пояснение. Две параллельные
   под-оси в панели: «По цели» (спецкурсы) и «По профессии» (проф-курсы). */
.spec-subhead{margin:0 0 20px}
.spec-subhead .spec-panel-h{margin:0 0 8px}
.spec-eyebrow{display:inline-block;font-family:var(--font-head);font-weight:700;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--lang-accent);margin-bottom:9px}
.spec-subhead-desc{font-size:.92rem;line-height:1.55;color:var(--text-muted);max-width:60ch}
/* Вторая под-группа отделяется линией и увеличенным вертикальным ритмом. */
.spec-subhead--pro{margin-top:clamp(30px,5vw,44px);padding-top:clamp(26px,4.2vw,38px);border-top:1px solid var(--line)}

.spec-grid{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:600px){.spec-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.spec-grid{grid-template-columns:repeat(3,1fr)}}

/* --- Карточка спецкурса --- */
.spec-crs{position:relative;display:flex;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-sm);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.spec-crs:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:color-mix(in srgb,var(--lang-accent) 45%,var(--line))}
.spec-crs:focus-within{border-color:color-mix(in srgb,var(--lang-accent) 55%,var(--line))}
.spec-crs-inner{display:flex;flex-direction:column;gap:14px;padding:clamp(18px,2.4vw,22px);width:100%}
.spec-top{display:flex;align-items:center;gap:10px}
.spec-tag{display:inline-flex;align-items:center;gap:9px;flex:1 1 auto;min-width:0;font-family:var(--font-head);font-weight:700;font-size:.73rem;letter-spacing:.02em;text-transform:uppercase;color:var(--text)}
.spec-tag-ic{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--lang-accent) 14%,transparent);color:var(--lang-accent)}
.spec-tag-ic svg{width:19px;height:19px}
.thr{display:inline-flex;align-items:center;gap:7px;flex:none}
.thr-lab{font-size:.72rem;font-weight:600;color:var(--text-muted);white-space:nowrap}
.thr .level-badge{width:auto;height:auto;padding:4px 10px;font-size:.82rem;border-radius:var(--r-pill)}
.spec-body{display:flex;flex-direction:column;gap:8px;flex:1 1 auto}
.spec-title{font-family:var(--font-head);font-weight:800;font-size:1.16rem;line-height:1.22;color:var(--text)}
.spec-offer{font-size:.9rem;line-height:1.55;color:var(--text-muted)}
.spec-meta{display:flex;flex-wrap:wrap;gap:8px}
.spec-m{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;font-weight:600;color:var(--text-muted);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 11px}
.spec-m svg{width:14px;height:14px;color:var(--lang-accent)}
.spec-m--online svg{color:var(--green)}
.spec-cta{display:flex;flex-wrap:wrap;gap:9px;margin-top:2px}
.spec-cta .btn{min-height:42px}
.spec-cta .btn-primary{background:var(--lang-accent);border-color:transparent;color:var(--on-primary);box-shadow:none}
.spec-cta .btn-primary:hover{filter:brightness(.94);transform:none}
@media(max-width:479.98px){.spec-cta{flex-direction:column}.spec-cta .btn{width:100%;justify-content:center}}

/* Флагман — заметнее: акцентный фон, лента, крупнее */
.spec-crs.is-flagship{grid-column:1 / -1;border:1.5px solid color-mix(in srgb,var(--lang-accent) 30%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--lang-accent) 12%,var(--surface)),color-mix(in srgb,var(--lang-accent) 3%,var(--surface)));box-shadow:var(--sh-md)}
.spec-crs.is-flagship .spec-title{font-size:1.42rem}
.spec-crs.is-flagship .spec-offer{font-size:.96rem;color:var(--text);max-width:70ch}
.spec-crs.is-flagship .spec-tag-ic{width:42px;height:42px;background:var(--lang-accent);color:var(--on-primary)}
.spec-crs.is-flagship .spec-tag-ic svg{width:22px;height:22px}
.spec-ribbon{position:absolute;top:0;right:clamp(14px,3vw,26px);transform:translateY(-50%);display:inline-flex;align-items:center;gap:6px;font-family:var(--font-head);font-weight:700;font-size:.68rem;letter-spacing:.03em;text-transform:uppercase;color:var(--on-primary);background:var(--lang-accent);padding:6px 13px;border-radius:var(--r-pill);box-shadow:var(--sh-sm);z-index:2}
.spec-ribbon svg{width:13px;height:13px}
@media(min-width:760px){
  .spec-crs.is-flagship .spec-crs-inner{display:grid;grid-template-columns:1fr auto;grid-template-areas:"top top" "body body" "meta cta";column-gap:28px;row-gap:16px;align-items:center}
  .spec-crs.is-flagship .spec-top{grid-area:top}
  .spec-crs.is-flagship .spec-body{grid-area:body}
  .spec-crs.is-flagship .spec-meta{grid-area:meta;align-self:center}
  .spec-crs.is-flagship .spec-cta{grid-area:cta;justify-content:flex-end;margin-top:0}
}

/* Ghost-карта «Нужен другой формат?» — завершает каждую панель */
.spec-crs--ask{background:var(--surface-2);border:1.5px dashed color-mix(in srgb,var(--lang-accent) 34%,var(--line));box-shadow:none}
.spec-crs--ask .spec-crs-inner{gap:12px;align-items:flex-start}
.spec-ask-ic{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--lang-accent) 14%,transparent);color:var(--lang-accent)}
.spec-ask-ic svg{width:22px;height:22px}
.spec-ask-title{font-family:var(--font-head);font-weight:800;font-size:1.06rem;color:var(--text)}
.spec-ask-desc{font-size:.87rem;line-height:1.55;color:var(--text-muted);flex:1 1 auto}
.spec-crs--ask .btn{margin-top:2px}

/* --- Пояснение «пороговый уровень» --- */
.thr-explain{display:grid;gap:30px;grid-template-columns:1fr}
.thr-explain-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:700;font-size:.76rem;letter-spacing:.01em;color:var(--text);background:color-mix(in srgb,var(--amber) 15%,transparent);padding:7px 14px;border-radius:var(--r-pill);margin-bottom:16px}
.thr-explain-badge svg{width:16px;height:16px;color:var(--amber)}
.thr-explain-lead{font-size:1.02rem;line-height:1.62;color:var(--text)}
.thr-explain-lead b{font-weight:800}
.thr-explain-copy .btn{margin-top:22px;max-width:100%;white-space:normal;text-wrap:balance}
@media(min-width:900px){.thr-explain{grid-template-columns:1fr 1fr;gap:46px;align-items:center}}

@media(prefers-reduced-motion:reduce){
  .spec-crs,.spec-cta .btn-primary{transition:none}
}