/* =========================================================================
   КУРСЫ ДЛЯ ПЕДАГОГОВ (/courses) + анонс-плашка (_courses_teaser.html)
   ========================================================================= */
@layer sections {
  /* ── Анонс (главная, «Курсы и цены») ── */
  .courses-teaser {
    display: flex; align-items: center; gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: var(--card-radius);
    background:
      radial-gradient(circle at 0% 0%, rgba(184, 165, 217, 0.35), transparent 55%),
      linear-gradient(120deg, var(--lavender-soft), var(--sheet) 70%);
    border: 1px solid rgba(126, 108, 168, 0.22);
    box-shadow: var(--shadow-clay-sm);
    transition: transform var(--dur) var(--ease-clay), box-shadow var(--dur) var(--ease-clay);
  }
  .courses-teaser:hover { transform: translateY(-2px); box-shadow: var(--shadow-clay); }
  .courses-teaser__icon {
    width: 3rem; height: 3rem; flex-shrink: 0;
    display: grid; place-items: center; border-radius: 0.875rem;
    background: linear-gradient(135deg, var(--lavender), var(--lavender-deep));
    color: #fff; font-size: 1.25rem;
    box-shadow: 0 0.5rem 1rem -0.5rem rgba(126, 108, 168, 0.7);
  }
  .courses-teaser__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
  .courses-teaser__badge {
    font-size: 0.65625rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--lavender-deep);
  }
  .courses-teaser__body strong { font-family: var(--font-head); font-size: 1.0625rem; font-weight: 600; line-height: 1.25; }
  .courses-teaser__list { font-size: 0.8125rem; color: var(--ink-soft); line-height: 1.45; }
  .courses-teaser__go {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.375rem;
    font-size: 0.8125rem; font-weight: 700; color: var(--lavender-deep);
    transition: gap var(--dur-fast) var(--ease-soft);
  }
  .courses-teaser:hover .courses-teaser__go { gap: 0.625rem; }
  .pricing-grid + .pricing-note + .courses-teaser,
  .pricing-note + .courses-teaser { margin-bottom: 1.5rem; }

  /* ── Шапка страницы курсов ── */
  .courses-hero {
    position: relative; overflow: hidden;
    padding: 2.25rem 2.5rem;
    margin-bottom: var(--card-gap);
    border-radius: var(--card-radius);
    background:
      radial-gradient(circle at 85% 20%, rgba(224, 164, 88, 0.28), transparent 45%),
      linear-gradient(135deg, #3B2C1F 0%, #2B2117 100%);
    color: #fff;
    box-shadow: var(--shadow-clay-lg);
  }
  .courses-hero__badge {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.3125rem 0.75rem; margin-bottom: 1rem;
    border-radius: 999px;
    background: rgba(245, 224, 184, 0.14);
    color: var(--ochre-soft);
    font-size: 0.71875rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  }
  .courses-hero__title {
    position: relative; z-index: 1;
    max-width: 34rem;
    color: #fff; font-size: clamp(1.625rem, 3vw, 2.25rem); line-height: 1.12;
    margin-bottom: 0.75rem;
    font-variation-settings: "SOFT" 100, "WONK" 1;
  }
  .courses-hero__lead { position: relative; z-index: 1; max-width: 32rem; color: rgba(255, 255, 255, 0.82); line-height: 1.6; margin-bottom: 1.5rem; }
  .courses-hero__actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 0.625rem; }
  .courses-hero__art {
    position: absolute; right: 2rem; top: 50%;
    width: 11rem; height: 11rem;
    transform: translateY(-50%) rotate(-8deg);
    color: var(--ochre);
    opacity: 0.85;
    pointer-events: none;
  }

  /* ── Карточки курсов ── */
  .course-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--card-gap); margin-bottom: var(--card-gap);
  }
  .course-card {
    --tone: var(--terracotta-deep);
    --tone-soft: var(--terracotta-tint);
    display: flex; flex-direction: column; gap: 0.875rem;
    padding: 1.5rem;
    background: var(--sheet);
    border: 1px solid var(--paper-line-soft);
    border-top: 4px solid var(--tone);
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-clay-sm);
  }
  .course-card--teal { --tone: var(--teal-deep); --tone-soft: var(--teal-soft); }
  .course-card__top { display: flex; align-items: center; justify-content: space-between; }
  .course-card__icon {
    width: 3rem; height: 3rem; display: grid; place-items: center;
    border-radius: 0.875rem; background: var(--tone-soft); color: var(--tone); font-size: 1.25rem;
  }
  .course-card__num { font-size: 0.71875rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
  .course-card__title { font-size: 1.3125rem; line-height: 1.25; }
  .course-card__lead { color: var(--ink-soft); font-size: 0.90625rem; }
  .course-card__block { padding: 1rem; border-radius: var(--card-radius-sm); background: var(--paper-2); }
  .course-card__label {
    display: block; margin-bottom: 0.625rem;
    font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tone);
  }
  .course-card .check-list i { color: var(--tone); background: var(--tone-soft); }
  .course-card__foot {
    margin-top: auto;
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap;
    padding-top: 1rem; border-top: 1px dashed var(--paper-line);
  }
  .course-card__price { display: flex; flex-direction: column; }
  .course-card__price span { font-size: 0.71875rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
  .course-card__price strong { font-family: var(--font-head); font-size: 1.125rem; font-weight: 600; }
}

@layer responsive {
  @media (max-width: 900px) {
    .course-grid { grid-template-columns: 1fr; }
    .courses-hero__art { opacity: 0.25; right: -1rem; }
  }
  @media (max-width: 560px) {
    .courses-hero { padding: 1.5rem 1.25rem; }
    .courses-hero__actions .btn { flex: 1 1 100%; }
    .course-card { padding: 1.125rem; }
    .courses-teaser { flex-wrap: wrap; padding: 1rem; }
    .courses-teaser__go { width: 100%; justify-content: flex-end; }
  }
}