/* Курсові сторінки (.course-page) — спільна сітка відступів.
   8-px база: 4·8·16·24·32·48·64 (+56 для брейкпойнтів).
   Між секціями ритм 96 (desktop) / 64 (mobile) = 48+48 / 32+32. */

/* Перша секція (hero): під меню — повний відступ зверху (calc від --nav-h),
   знизу — 48, щоб разом із FAQ дати 96. */
body.course-page .main-section-article:first-of-type{
  padding-bottom: 48px !important;
}

/* Hero курсової: текстова колонка ліворуч + фото праворуч.
   bundle.min.css задає .col-lg-4{width:33%} без float/flex і не має .col-lg-6,
   тому без цього правила колонки падають вертикально. Flexbox це перекриває. */
body.course-page .main-section-article .row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin-left: 0;
  margin-right: 0;
  margin-top: 48px;
}
body.course-page .main-section-article .row > .col-lg-1{ display: none; }
body.course-page .main-section-article .row > .col-lg-4{
  flex: 1 1 340px;
  width: auto;
  max-width: 440px;
}
body.course-page .main-section-article .row > .col-lg-6{
  flex: 0 1 520px;
  width: auto;
  max-width: 100%;
}
body.course-page .main-section-article figure.test{ margin: 0; }
body.course-page .main-section-article .bl-img-fluid{
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}
@media (max-width: 768px){
  body.course-page .main-section-article .row{ gap: 24px; margin-top: 32px; }
  body.course-page .main-section-article .row > .col-lg-4,
  body.course-page .main-section-article .row > .col-lg-6{
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* Service-list — параграфи за шкалою */
body.course-page .service-list-col2 p{
  font-size: var(--fs-base);
  color: var(--c-text-secondary);
  margin: 8px 0;
  line-height: var(--lh-base);
}

/* Контентний блок (унікальний SEO-текст) */
body.course-page .bl-content{
  max-width: 820px;
  margin: 0 auto;
  padding: 48px 16px;
  color: var(--c-text);
}
body.course-page .bl-content h2{
  font-size: var(--fs-h2, 32px);
  margin: 32px 0 16px;
  line-height: 1.25;
  color: var(--c-text);
}
body.course-page .bl-content h2:first-child{ margin-top: 0; }
body.course-page .bl-content h3{
  font-size: var(--fs-h3, 24px);
  margin: 24px 0 16px;
  line-height: 1.3;
  color: var(--c-text);
}
body.course-page .bl-content p{
  margin: 16px 0;
  line-height: var(--lh-base);
  color: var(--c-text-secondary);
}
body.course-page .bl-content ul{
  margin: 16px 0 24px 24px;
  padding: 0;
  color: var(--c-text-secondary);
}
body.course-page .bl-content ul li{
  margin: 8px 0;
  line-height: var(--lh-base);
}
body.course-page .bl-content a{ color: var(--c-primary); }

/* FAQ блок: full-width сірий, симетричні 48 зверху/знизу */
body.course-page .be-faq-wrap{
  background: var(--c-surface);
  width: 100%;
  margin: 0;
  padding: 48px 0;
}
body.course-page .be-faq-wrap > .container{ max-width: 1140px; }
body.course-page .be-faq-wrap h2{
  text-align: center;
  margin: 0 0 32px;
}
body.course-page .faq-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}
body.course-page .faq-card{
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 24px;
}
body.course-page .faq-card .faq-q{
  display: block;
  color: var(--c-primary);
  font-weight: 700;
  font-size: var(--fs-base);
  margin-bottom: 16px;
  line-height: 1.35;
}
body.course-page .faq-card .faq-a{
  display: block;
  color: var(--c-text-secondary);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}
body.course-page .faq-card .faq-a a{ color: var(--c-primary); }

/* Крослінки — обгортка */
body.course-page .bl-crosslinks-wrap{
  max-width: 1140px;
  margin: 48px auto;
  padding: 0 24px;
}
body.course-page .bl-crosslinks-wrap h2{
  text-align: center;
  margin: 0 0 32px;
}
body.course-page .bl-crosslinks{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}
body.course-page .bl-crosslinks a{
  display: block;
  padding: 24px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  text-decoration: none;
  color: var(--c-text-secondary);
}
body.course-page .bl-crosslinks a strong{
  display: block;
  color: var(--c-primary);
  font-size: var(--fs-lg);
  margin-bottom: 8px;
}
body.course-page .bl-crosslinks a span{
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

/* CTA блок — 48 зверху, 96 знизу (запас над фіксованим футером) */
body.course-page .be-cta-wrap{
  text-align: center;
  margin: 0;
  padding: 48px 16px 96px;
}
body.course-page .be-cta-wrap h2{
  margin: 0 0 24px;
}

/* Мобайл — половина шкали 32/16 + footer запас 64 */
@media (max-width: 768px){
  body.course-page .main-section-article:first-of-type{
    padding-bottom: 32px !important;
  }
  body.course-page .bl-content{ padding: 32px 16px; }
  body.course-page .bl-content h2{ margin: 24px 0 16px; }
  body.course-page .bl-content h2:first-child{ margin-top: 0; }
  body.course-page .bl-content h3{ margin: 16px 0 8px; }
  body.course-page .be-faq-wrap{ padding: 32px 0; }
  body.course-page .be-faq-wrap h2{ margin: 0 0 24px; }
  body.course-page .faq-grid{ gap: 16px; }
  body.course-page .faq-card{ padding: 20px; }
  body.course-page .bl-crosslinks-wrap{ margin: 32px auto; padding: 0 16px; }
  body.course-page .bl-crosslinks-wrap h2{ margin: 0 0 24px; }
  body.course-page .bl-crosslinks{ gap: 16px; }
  body.course-page .be-cta-wrap{ padding: 32px 16px 64px; }
  body.course-page .be-cta-wrap h2{ margin: 0 0 16px; }
}