/* Блок «Методическая основа» (перед вопросами) — три варианта для выбора: /method_1 … /method_3.
   Кегли заголовков и текста берутся из unify.css (--u-*), если страница на общем каркасе. */

.mb{
  --mb-ink: #24243e;
  --mb-text: #4a4d66;
  --mb-mute: #66688a;
  --mb-vio: #6744d4;
  --mb-vio-bg: #f1edfc;
  --mb-line: #e6e1f6;
  scroll-margin-top: 24px;
  padding: 88px 0 80px;
  color: var(--mb-ink);
}
.mb-title{
  font-size: var(--u-h2, 52px); line-height: 1.08; font-weight: 800; letter-spacing: -.04em;
  color: var(--mb-ink); text-wrap: balance;
}
.mb-mk{
  margin-right: -.1em; padding-right: .1em;
  background: linear-gradient(#fbd163, #fbd163) no-repeat 0 88% / 100% .44em;
}
.mb-lead{ margin-top: 18px; font-size: 20px; line-height: 1.45; font-weight: 600; color: var(--mb-text); }
.mb :is(.mb1-act, .mb2-act, .mb3-act){
  font-size: 19px; line-height: 1.4; font-weight: 700; letter-spacing: -.01em; color: var(--mb-ink); text-wrap: pretty;
}
.mb :is(.mb1-basis, .mb2-basis, .mb3-basis){ font-size: 15px; line-height: 1.45; color: var(--mb-mute); text-wrap: pretty; }

/* ───────── 1. Тетрадь и маркер ───────── */
.mb1{ background: linear-gradient(#fff, #f7f5fd 150px, #f7f5fd calc(100% - 150px), #fff); }
.mb1 .mb-in{ display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 64px; align-items: start; }
.mb1-head{ position: sticky; top: 96px; }
.mb1-list{ display: grid; margin: 0; padding: 0; list-style: none; }
.mb1-row{
  display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 20px; row-gap: 8px;
  padding: 26px 0; border-top: 1px solid var(--mb-line);
}
.mb1-row:last-child{ border-bottom: 1px solid var(--mb-line); }
.mb1-num{
  grid-row: span 2; justify-self: start; align-self: start;
  padding: 0 .06em; font-size: 44px; line-height: .95; font-weight: 800; letter-spacing: -.045em; color: var(--mb-ink);
  background: linear-gradient(#fbd163, #fbd163) no-repeat 0 88% / 100% .3em;
}
.mb1-row:nth-child(even) .mb1-num{ background-image: linear-gradient(#f6b0d7, #f6b0d7); }
.mb1-basis{ display: flex; gap: 8px; }
.mb1-basis::before{ content: ""; flex: none; width: 14px; height: 2px; margin-top: .7em; background: var(--mb-vio); border-radius: 2px; }

/* ───────── 2. Карточки ───────── */
.mb2{ background: #fff; }
.mb2 .mb-title, .mb2 .mb-lead{ text-align: center; }
.mb2-grid{ padding: 0; list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.mb2-card{
  grid-column: span 2; display: flex; flex-direction: column; gap: 14px;
  padding: 26px 24px 24px; border: 1px solid var(--mb-line); border-radius: 22px;
  background: #fff; box-shadow: 0 1px 2px #24243e0d, 0 18px 36px -24px #4a33a04d;
}
.mb2-card:nth-child(4){ grid-column: 2 / span 2; }
.mb2-ico{
  width: 52px; height: 52px; padding: 11px; border-radius: 16px;
  fill: none; stroke: var(--mb-vio); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  background: var(--mb-vio-bg);
}
.mb2-c2 .mb2-ico{ stroke: #c4318a; background: #fde9f4; }
.mb2-c3 .mb2-ico{ stroke: #b77a06; background: #fdf2d6; }
.mb2-c4 .mb2-ico{ stroke: #13703a; background: #e1f4e7; }
.mb2-c5 .mb2-ico{ stroke: #1f6fc1; background: #e3effc; }
.mb2-act{ flex: 1; }
.mb2-basis{ padding-top: 14px; border-top: 1px dashed var(--mb-line); font-weight: 600; color: var(--mb-vio) !important; }

/* ───────── 3. Действие и метод ───────── */
.mb3{ background: linear-gradient(#fff, #f7f5fd 150px, #f7f5fd calc(100% - 150px), #fff); }
.mb3-table{
  margin-top: 40px; border-radius: 24px; overflow: hidden; background: #fff;
  border: 1px solid var(--mb-line); box-shadow: 0 18px 40px -28px #4a33a059;
}
.mb3-cap, .mb3-row{ display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); column-gap: 28px; align-items: center; padding: 0 36px; }
.mb3-cap{
  padding-top: 18px; padding-bottom: 18px; background: var(--mb-vio-bg);
  font-size: 13px; line-height: 1.3; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mb-vio);
}
.mb3-cap span:last-child{ grid-column: 3; }
.mb3-row{ padding-top: 24px; padding-bottom: 24px; border-top: 1px solid var(--mb-line); }
.mb3-arrow{ width: 30px; height: 24px; fill: none; stroke: var(--mb-vio); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mb3-basis{
  justify-self: start; padding: 10px 16px; border-radius: 14px; background: var(--mb-vio-bg);
  font-weight: 600; color: #3d2a66 !important;
}

@media (max-width: 1199px){
  .mb1 .mb-in{ column-gap: 40px; }
  .mb2-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mb2-card, .mb2-card:nth-child(4){ grid-column: auto; }
  .mb2-card:nth-child(5){ grid-column: 1 / -1; }
}
@media (max-width: 900px){
  .mb{ padding: 64px 0 60px; }
  .mb1 .mb-in{ grid-template-columns: minmax(0, 1fr); }
  .mb1-head{ position: static; margin-bottom: 28px; }
  .mb3-cap{ display: none; }
  .mb3-row{ grid-template-columns: minmax(0, 1fr); row-gap: 12px; padding: 22px 22px; }
  .mb3-row:first-of-type{ border-top: 0; }
  .mb3-arrow{ display: none; }
}
@media (max-width: 700px){
  .mb{ padding: 52px 0 48px; }
  .mb-lead{ margin-top: 12px; font-size: 18px; }
  .mb :is(.mb1-act, .mb2-act, .mb3-act){ font-size: 17px; }
  .mb1-row{ grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; padding: 20px 0; }
  .mb1-num{ font-size: 34px; }
  .mb2 .mb-title, .mb2 .mb-lead{ text-align: left; }
  .mb2-grid{ grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 28px; }
  .mb2-card:nth-child(5){ grid-column: auto; }
  .mb2-card{ padding: 22px 20px 20px; border-radius: 18px; }
  .mb3-table{ margin-top: 28px; border-radius: 18px; }
  .mb3-row{ padding: 20px 18px; }
}