/* Главная страница: курсы и карточка срока. Цвета и кнопки — из style.css. */
body.home { padding-bottom: env(safe-area-inset-bottom); }

.home-top, .home-main, .home-foot {
  max-width: 960px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}
.home-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: calc(14px + env(safe-area-inset-top));
  padding-bottom: 6px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.1rem; }
.brand img { border-radius: 9px; }

.hero { padding: 18px 0 8px; }
.hero h1 { font-size: clamp(1.6rem, 5vw, 2.4rem); line-height: 1.15; margin: 0 0 10px; }
.hero p { color: var(--muted); font-size: 1.05rem; max-width: 640px; margin: 0 0 14px; }
.perks { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.perks li { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: .9rem; }

.section-title { font-size: 1.2rem; margin: 26px 0 12px; }

.courses {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 12px;
}
.course {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.course h3 { margin: 0 0 4px; font-size: 1.15rem; }
.course p { margin: 0; }
.course-head { display: flex; gap: 12px; align-items: flex-start; }
.course-ico { border-radius: 14px; flex: none; }
.course-emoji { font-size: 2.6rem; line-height: 1; flex: none; width: 56px; text-align: center; }
.course.soon { opacity: .75; }
.course .btn { text-decoration: none; }
.course.soon .btn { align-self: flex-start; pointer-events: none; color: var(--muted); }

/* Курс-флагман занимает всю ширину сетки. */
.course-main { grid-column: 1 / -1; border-color: var(--blow); box-shadow: 0 6px 24px rgba(232, 116, 42, .12); }
.course-link { position: absolute; inset: 0; border-radius: inherit; z-index: 0; }
.course-main > :not(.course-link), .course-main .variant > * { position: relative; z-index: 1; pointer-events: none; } /* .variant — display: contents, поэтому поднимаем его детей отдельно, иначе кнопки варианта остаются под ссылкой-оверлеем */
.course-main .course-actions, .course-main .dur-seg, .course-main .course-variants { pointer-events: auto; }

/* Карточка с вариантами (уровни предмета, варианты инструмента): переключатель сверху, один вариант виден,
   блок срока общий. .variant не создаёт своего бокса, чтобы порядок «заголовок → срок → кнопки» сохранился. */
.course-variants { order: -1; align-self: flex-start; flex-wrap: nowrap; }
/* «Сначала рекомендуется» под описанием курса; ссылки кликабельны поверх ссылки-карточки. */
.course .rec { margin: 6px 0 0; font-size: .85rem; color: var(--muted); }
.course .rec a { pointer-events: auto; position: relative; z-index: 2; }
.course-variants button { padding: 7px 12px; font-size: .9rem; white-space: nowrap; }
/* Не влезли в одну строку — кнопки прячутся, вместо них выпадающий список (решает js/home.js). */
.course-variants button.overflow { display: none; }
.course-variants.all-hidden { position: absolute; visibility: hidden; pointer-events: none; }
/* Строка переключателя: кнопки, которые влезли, плюс список «Ещё» с остальными. */
.variant-row { order: -1; align-self: flex-start; display: flex; gap: 8px; align-items: stretch; max-width: 100%; }
.variant-row .course-variants { order: 0; }
.course-select { display: none; width: 104px; flex: 0 0 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 7px 28px 7px 10px; font: inherit; font-size: .9rem; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.course-select.on { display: block; }
.course-select.active { background: var(--text); color: var(--bg); }
.course-main .variant-row, .course-main .course-select { pointer-events: auto; position: relative; z-index: 1; }
.variant { display: contents; }
.variant[hidden] { display: none; }
.course-main .course-head { order: 0; }
.course-main .duration { order: 1; }
.course-main .course-actions { order: 2; }

/* Карточка срока курса */
.duration {
  background: linear-gradient(135deg, var(--blow-soft), var(--draw-soft));
  border-radius: 16px;
  padding: 16px;
}
.dur-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.dur-num { font: 800 clamp(2.6rem, 10vw, 3.6rem)/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: -1px; }
.dur-unit { font-size: 1.15rem; font-weight: 700; }
.dur-sub { margin: 6px 0 12px; color: var(--text); opacity: .85; }
.dur-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; max-width: 460px; background: var(--card); }
.dur-seg button { padding: 8px 4px; }
.dur-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.dur-facts span { background: var(--card); border-radius: 8px; padding: 3px 8px; font-size: .85rem; }

.course-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.course-actions .btn { text-decoration: none; display: inline-flex; align-items: center; }

.how-list { padding-left: 20px; margin: 0; }
.how-list li { margin: 6px 0; }

.home-foot { padding-top: 24px; padding-bottom: 24px; font-size: .9rem; }

@media (max-width: 600px) {
  .course-actions .btn { flex: 1 1 100%; justify-content: center; }
  .perks { display: grid; grid-template-columns: 1fr 1fr; }
  .perks li { font-size: .8rem; padding: 6px 10px; }
}

/* Гитара — второй рабочий курс, свой акцент. */
.course-main.guitar-card { border-color: var(--draw); box-shadow: 0 6px 24px rgba(31, 143, 134, .12); }
.guitar-card .duration { background: linear-gradient(135deg, var(--draw-soft), var(--blow-soft)); }
.course-main.beatharp-card { border-color: var(--blow); box-shadow: 0 6px 24px rgba(232, 116, 42, .12); }
.beatharp-card .duration { background: linear-gradient(135deg, var(--blow-soft), var(--draw-soft)); }
.course-main.violin-card { border-color: var(--draw); box-shadow: 0 6px 24px rgba(31, 143, 134, .12); }
.violin-card .duration { background: linear-gradient(135deg, var(--draw-soft), var(--scale)); }
.course-main.ukulele-card { border-color: var(--draw); box-shadow: 0 6px 24px rgba(31, 143, 134, .12); }
.ukulele-card .duration { background: linear-gradient(135deg, var(--draw-soft), var(--blow-soft)); }
.course-main.piano-card { border-color: var(--blow); box-shadow: 0 6px 24px rgba(232, 116, 42, .12); }
.course-main.percussion-card { border-color: var(--draw); box-shadow: 0 6px 24px rgba(31, 143, 134, .12); }
.piano-card .duration { background: linear-gradient(135deg, var(--blow-soft), var(--scale)); }

/* Немузыкальные курсы: школьные предметы, без микрофона. Карточки короче — две в ряд на широком экране. */
.section-sub { color: var(--muted); margin: -6px 0 12px; }
.courses.school .course-main { grid-column: auto; }
.courses.school .course-main.math-card { border-color: var(--blow); box-shadow: 0 6px 24px rgba(232, 116, 42, .12); }
.courses.school .course-main.geometry-card { border-color: var(--draw); box-shadow: 0 6px 24px rgba(31, 143, 134, .12); }
.courses.school .course-main.physics-card { border-color: var(--draw); box-shadow: 0 6px 24px rgba(31, 143, 134, .12); }
.courses.school .course-main.chemistry-card { border-color: var(--blow); box-shadow: 0 6px 24px rgba(232, 116, 42, .12); }
.courses.school .course-main.informatics-card { border-color: var(--draw); box-shadow: 0 6px 24px rgba(31, 143, 134, .12); }
.courses.school .course-main.biology-card { border-color: var(--blow); box-shadow: 0 6px 24px rgba(232, 116, 42, .12); }
.school-card .duration { background: linear-gradient(135deg, var(--scale), var(--draw-soft)); }
.courses.school { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .courses.school { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* Музыкальные курсы — тоже две карточки в ряд на широком экране, одна на телефоне. */
.courses.music .course-main { grid-column: auto; }
.courses.music { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .courses.music { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* Главная шире остальных страниц: карточки с переключателями и сроком должны помещаться в две равные колонки. */
body.home .top, body.home main { max-width: 1240px; }
.course-main { min-width: 0; }

/* Музыкальные курсы скрыты без куки music=1 (js/music-gate.js, решение 0024). */
html:not(.music-on) .music-only { display: none !important; }
html.music-on .school-only { display: none !important; }