/* Страницы-шаблоны: предмет, занятие, преподаватель (subject.html, activity.html, teacher.html) */

.back {
  display: flex; width: fit-content; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 500; color: var(--c-teal);
}
.back::before { content: "←"; transition: translate .2s var(--ease-out); }
.back:hover::before { translate: -3px 0; }
.page-hero__actions + .back { margin-top: 28px; }   /* ссылка «назад» под кнопками, чтобы метка вверху стояла как на всех страницах */

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.chips li > a, .chips li:not(:has(a)) {
  display: inline-block;
  padding: 9px 16px; border-radius: 99px;
  background: var(--c-white);
  font-size: 14px;
}
.chips a { transition: background-color .2s, color .2s; }
.chips a:hover { background: var(--c-teal); color: var(--c-white); }
.chips b { color: var(--c-teal); font-weight: 600; }
.chips a:hover b { color: var(--c-yellow); }

/* ---------- Визуал справа на первом экране ---------- */
.element-big {
  display: flex; flex-direction: column;
  position: relative;
  width: min(100%, 420px); aspect-ratio: 1;
  margin-left: auto;
  padding: 36px;
  border-radius: 40px;
  background: var(--g-bg);
  rotate: 2deg;
  box-shadow: 0 30px 60px rgba(12, 53, 50, .12);
}
.element-big__no { position: absolute; top: 32px; right: 36px; font-size: 22px; font-weight: 600; color: var(--g-ink); }
.element-big__sym { font-family: var(--f-display); font-weight: 700; font-size: 220px; line-height: .8; color: var(--g-ink); }
.element-big__name { margin-top: auto; font-size: 30px; font-weight: 600; color: var(--c-dark); }
.element-big__group { margin-top: 6px; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--g-ink); }

.activity-visual {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 32px;
  overflow: hidden;
  background: var(--c-green-800);
}
.activity-visual img { width: 100%; height: 100%; object-fit: cover; }
.activity-visual__icon {
  position: absolute; left: 24px; bottom: 24px;
  display: grid; place-items: center;
  width: 96px; height: 96px; border-radius: 28px;
  background: var(--c-yellow); color: var(--c-dark);
}
.activity-visual__icon svg { width: 54px; height: 54px; }
.activity-visual--icon { display: grid; place-items: center; }
.activity-visual--icon .activity-visual__icon { position: static; width: 220px; height: 220px; border-radius: 60px; rotate: -6deg; }
.activity-visual--icon .activity-visual__icon svg { width: 130px; height: 130px; }

.portrait {
  width: min(100%, 460px); aspect-ratio: 4 / 5;
  margin-left: auto;
  border-radius: 32px;
  overflow: hidden;
  rotate: 1.5deg;
  box-shadow: 0 30px 60px rgba(12, 53, 50, .14);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait--soon { display: grid; place-items: center; align-content: center; background: var(--c-mint-cell); }
.portrait--soon .display { font-size: 200px; color: var(--c-teal); opacity: .35; }
.portrait--soon .hand { font-size: 30px; color: var(--c-teal); rotate: -4deg; }

/* ---------- Пункты «как ведём / что даёт» ---------- */
.points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tile-gap); }
.point { padding: 28px; border-radius: var(--radius-tile); background: var(--c-white); font-size: 15px; line-height: 1.55; }
.point__num { font-size: 56px; line-height: .85; color: var(--g-ink, var(--c-teal)); }
.point__title { margin: 20px 0 8px; font-size: 20px; font-weight: 600; color: var(--c-dark); }
.point:nth-child(2) { background: var(--c-teal); color: var(--c-mint-line); }
.point:nth-child(2) .point__num { color: var(--c-yellow); }
.point:nth-child(2) .point__title { color: var(--c-white); }

/* ---------- Карточки людей ---------- */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--tile-gap); }
.people > li { display: flex; }
.person {
  position: relative;
  flex: 1;
  display: flex; align-items: center; gap: 16px;
  padding: 14px 56px 14px 14px;
  border-radius: 22px;
  background: var(--c-white);
  transition: transform .25s var(--ease-out), box-shadow .25s;
}
.person:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(12, 53, 50, .1); }
.person .tile__arrow { top: 50%; margin-top: -15px; background: var(--c-mint-cell); color: var(--c-teal); }
.person__photo { display: grid; place-items: center; flex: none; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: var(--c-mint-cell); }
.person__photo img { width: 100%; height: 100%; object-fit: cover; }
.person__initials { padding-top: .16em; font-size: 30px; color: var(--c-teal); }   /* Yanone: опускаем заглавные к центру круга */
.person__body b { display: block; font-size: 17px; font-weight: 600; color: var(--c-dark); }
.person__body small { display: block; margin-top: 2px; font-size: 13px; color: var(--c-teal); }

/* ---------- Панели ---------- */
.panel {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center;
  padding: 44px;
  border-radius: 32px;
  background: var(--c-teal);
  color: var(--c-mint-line);
  font-size: 17px; line-height: 1.5;
}
.panel--dark { background: var(--c-dark); }
.panel__title { font-size: 52px; color: var(--c-white); margin-bottom: 14px; }
.panel__title .accent { color: var(--c-yellow); }
.panel__big { font-size: 96px; line-height: .85; color: var(--c-yellow); }
.panel__prices { display: flex; gap: 28px; margin-top: 18px; }
.panel__prices b { display: block; font-family: var(--f-display); font-weight: 700; font-size: 48px; line-height: 1; color: var(--c-white); }
.panel__prices span { font-size: 14px; }
.panel a:not(.btn-pill) { color: var(--c-white); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Другие предметы / занятия ---------- */
.mini-els { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }   /* 150px: «Обществознание» влезает целиком */
.mini-el {
  display: flex; flex-direction: column; gap: 6px;
  height: 100%;
  padding: 14px 16px 16px;
  border-radius: 16px;
  background: var(--g-bg);
  transition: background-color .2s, transform .2s var(--ease-out);
}
.mini-el b { font-family: var(--f-display); font-weight: 700; font-size: 40px; line-height: .9; color: var(--g-ink); }
.mini-el span { font-size: 13px; font-weight: 500; color: var(--c-dark); }
.mini-el:hover { background: var(--g-ink); transform: translateY(-3px); }
.mini-el:hover b, .mini-el:hover span { color: var(--c-white); }

/* «Ещё предметы» на странице предмета: крупные плитки, ряды без одинокого хвоста (9 шт.: 5+4 / 3×3 / 2×4 + последняя на всю ширину) */
.mini-els--big { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.mini-els--big .mini-el { position: relative; gap: 10px; padding: 20px 22px 22px; border-radius: 22px; }
.mini-els--big .mini-el b { font-size: 56px; }
.mini-els--big .mini-el span { font-size: 15px; }
.mini-els--big .tile__arrow { background: rgba(255, 255, 255, .6); color: var(--g-ink); }
.mini-els--big .mini-el:hover .tile__arrow { transform: rotate(45deg); background: rgba(255, 255, 255, .2); color: var(--c-white); }

.mini-acts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.mini-act {
  display: grid; grid-template-columns: 48px 1fr; column-gap: 14px; align-items: center;
  padding: 14px;
  border-radius: 18px;
  background: var(--c-white);
  transition: transform .2s var(--ease-out), box-shadow .2s;
}
.mini-act:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(12, 53, 50, .1); }
.mini-act__icon { grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--c-mint-cell); color: var(--c-teal); }
.mini-act__icon svg { width: 26px; height: 26px; }
.mini-act b { font-size: 15px; font-weight: 600; color: var(--c-dark); }
.mini-act small { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-teal); }

/* ---------- Преподаватель: рассказ ---------- */
.bio { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.bio__text p { font-size: 18px; line-height: 1.65; }
.bio__text p + p { margin-top: 16px; }
.approach-card { padding: 32px; border-radius: var(--radius-tile); background: var(--c-yellow); color: var(--c-dark); }
.approach-card__title { font-size: 40px; }
.approach-card ul { display: grid; gap: 12px; margin-top: 18px; font-size: 16px; line-height: 1.5; }
.approach-card li { position: relative; padding-left: 28px; }
.approach-card li::before {
  content: ""; position: absolute; left: 0; top: 3px;
  width: 16px; height: 16px; background: var(--c-dark);
  -webkit-mask: var(--piece-mask) center / contain no-repeat; mask: var(--piece-mask) center / contain no-repeat;
}

.section--tight { padding-top: 0; }

/* ---------- «Скоро»: пустая ячейка и деталь (страница «Тесты») ---------- */
.soon-visual { position: relative; width: min(100%, 420px); aspect-ratio: 1; margin-left: auto; }
.soon-visual__cell {
  position: absolute; right: 0; bottom: 0; width: 64%; aspect-ratio: 1;
  border: 2px dashed var(--c-teal); border-radius: 36px; background: var(--c-mint-cell);
}
.soon-visual__piece { position: absolute; left: 0; top: 6%; width: 52%; color: var(--c-yellow); rotate: -14deg; filter: var(--shadow-piece); }
.soon-visual .hand { position: absolute; left: -10%; bottom: 6%; font-size: 30px; color: var(--c-teal); rotate: -6deg; }

/* ---------- Юридические страницы ---------- */
.section--legal { padding-top: 24px; }
.legal { max-width: calc(820px + var(--gutter) * 2); }
.legal__title { font-size: clamp(44px, 6vw, 72px); color: var(--c-dark); }
.legal__date { margin-top: 12px; font-size: 14px; color: var(--c-teal); }
.legal h2 { margin: 36px 0 12px; font-size: 21px; font-weight: 600; color: var(--c-dark); }
.legal p, .legal li { font-size: 16px; line-height: 1.65; }
.legal p + p { margin-top: 10px; }
.legal ul { display: grid; gap: 6px; padding-left: 20px; list-style: disc; }
.legal a { color: var(--c-teal); text-decoration: underline; text-underline-offset: 3px; }
.draft-note {
  margin-bottom: 28px;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(255, 201, 60, .3);
  font-size: 14px; font-weight: 500;
}

@media (max-width: 1100px) {
  .element-big, .portrait { margin: 0 auto; }
  .points { grid-template-columns: 1fr; }
  .panel { grid-template-columns: 1fr; }
  .bio { grid-template-columns: 1fr; }
  .mini-els--big { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mini-els--big .mini-el { padding: 18px; }
  .mini-els--big .mini-el span { font-size: 14px; }
}
@media (max-width: 600px) {
  .element-big { padding: 26px; border-radius: 30px; }
  .element-big__sym { font-size: 160px; }
  .element-big__name { font-size: 24px; }
  .activity-visual--icon .activity-visual__icon { width: 160px; height: 160px; border-radius: 44px; }
  .activity-visual--icon .activity-visual__icon svg { width: 90px; height: 90px; }
  .point { padding: 22px; }
  .panel { padding: 28px 22px; border-radius: 28px; }
  .panel__title { font-size: 40px; }
  .panel__big { font-size: 72px; }
  .panel__prices b { font-size: 38px; }
  .bio__text p { font-size: 16px; }
  .approach-card { padding: 24px; }
  .approach-card__title { font-size: 34px; }
  .people { grid-template-columns: 1fr; }
  .mini-els--big { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mini-els--big .mini-el { padding: 16px; border-radius: 18px; }
  .mini-els--big .mini-el b { font-size: 44px; }
  .mini-els--big li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}