/* Страница «Репетиторство». Шаги — из school.css, мини-таблица и люди — из detail.css */

/* ---------- Доска «Цель 80+» на первом экране ---------- */
.tutor-board {
  position: relative;
  width: min(100%, 480px);
  margin-left: auto;
  padding: 32px;
  border-radius: 36px;
  background: var(--c-white);
  box-shadow: 0 30px 60px rgba(12, 53, 50, .12);
  rotate: 1.5deg;
}
.tutor-board__title { font-size: 52px; color: var(--c-dark); margin-bottom: 20px; }
.tutor-board__title span { color: var(--c-teal); }
.tutor-board__els { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.tutor-board__els .mini-el { padding: 10px 6px 12px; border-radius: 12px; }
.tutor-board__els .mini-el b { font-size: 32px; }
.tutor-board__els .mini-el span { font-size: 10px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tutor-board__piece { position: absolute; right: -28px; top: -40px; width: 96px; color: var(--c-yellow); rotate: 16deg; filter: var(--shadow-piece); }

/* ---------- Предметы строками ---------- */
.subject-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px var(--tile-gap); }
.subject-rows > li { display: flex; }
.subject-row {
  flex: 1;
  display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; column-gap: 18px; align-items: center;
  padding: 14px 20px 14px 14px;
  border-radius: 20px;
  background: var(--c-white);
  transition: transform .2s var(--ease-out), box-shadow .2s;
}
.subject-row:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(12, 53, 50, .1); }
.subject-row__sym {
  grid-row: span 2;
  display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 16px;
  background: var(--g-bg); color: var(--g-ink);
  font-family: var(--f-display); font-weight: 700; font-size: 34px;
}
.subject-row__name { font-size: 18px; font-weight: 600; color: var(--c-dark); }
.subject-row__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.subject-row__tags i {
  padding: 3px 9px; border-radius: 99px;
  background: var(--c-bg);
  font-style: normal; font-size: 12px; font-weight: 500; color: var(--c-text);
}

/* ---------- Форматы и цены ---------- */
.formats__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tile-gap); }
.format {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: 32px;
  border-radius: var(--radius-tile);
  background: var(--c-green-800);
  color: var(--c-mint-line);
  font-size: 15px; line-height: 1.5;
}
.format__icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: rgba(255, 255, 255, .1); color: var(--c-yellow); }
.format__icon svg { width: 30px; height: 30px; }
.format__name { margin-top: 12px; font-size: 40px; color: var(--c-white); }
.format__price { margin-top: auto; padding-top: 16px; font-size: 64px; color: var(--c-white); }
.format__price small { font-family: var(--f-text); font-size: 18px; font-weight: 500; text-transform: none; color: var(--c-mint-line); }
.format--free { background: var(--c-yellow); color: var(--c-dark); }
.format--free .format__icon { background: rgba(12, 53, 50, .1); color: var(--c-dark); }
.format--free .format__name, .format--free .format__price { color: var(--c-dark); }

@media (max-width: 1100px) {
  .tutor-board { margin: 0 auto; }
  .subject-rows { grid-template-columns: 1fr; }
  .formats__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .tutor-board { padding: 22px; border-radius: 28px; }
  .tutor-board__title { font-size: 40px; }
  .tutor-board__els { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tutor-board__els .mini-el { padding: 8px 4px 10px; }
  .tutor-board__els .mini-el b { font-size: 24px; }
  .tutor-board__els .mini-el span { display: none; }
  .tutor-board__piece { width: 64px; right: -6px; top: -30px; }
  .subject-row { grid-template-columns: 52px 1fr; padding: 12px; }
  .subject-row__sym { width: 52px; height: 52px; font-size: 28px; }
  .subject-row__name { font-size: 16px; }
  .format { padding: 24px; }
  .format__price { font-size: 52px; }
}