/* ============================================================
   SUN KIDS — главная страница
   ============================================================ */

.sk-wrap--narrow { max-width: 820px; }
.sk-sec__foot { text-align: center; margin-top: 34px; }

/* ---------- Hero ---------- */

.sk-hero { overflow: hidden; padding-bottom: clamp(30px, 4vw, 56px); }

.sk-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.sk-hero__text .sk-lead { margin-top: 18px; max-width: 34em; }

.sk-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.sk-hero__media { position: relative; }

.sk-sun { position: absolute; top: -58px; right: -26px; z-index: 0; animation: sk-spin 40s linear infinite; }
@keyframes sk-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sk-sun { animation: none; } }

.sk-framed--light { border-color: rgba(255,255,255,.6); position: relative; z-index: 1; background: rgba(255,255,255,.08); }
.sk-ph--hero { min-height: 330px; background: rgba(255,255,255,.16); color: rgba(255,255,255,.85); }

.sk-badge {
  position: absolute; z-index: 2; right: -8px; bottom: -18px;
  background: var(--sk-coral); color: #fff;
  font-weight: 900; font-size: 14px;
  padding: 13px 20px; border-radius: var(--sk-r-pill);
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
}

/* ---------- Шаги ---------- */

.sk-step {
  display: inline-block;
  font-size: 13px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase;
  color: var(--sk-coral); background: #FDECEB;
  padding: 7px 15px; border-radius: var(--sk-r-pill); margin-bottom: 14px;
}
.sk-step--dark { color: #7A5A00; background: rgba(255,255,255,.5); }

/* ---------- Карточки филиалов ---------- */

.sk-branch { display: block; text-decoration: none; position: relative; padding-top: 28px; }
.sk-branch__pin {
  position: absolute; top: 22px; right: 22px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--sk-yellow); box-shadow: 0 0 0 5px rgba(251,169,25,.2);
}
.sk-branch__title { color: var(--sk-ink); }
.sk-branch__addr { margin-top: 7px; color: var(--sk-ink-soft); font-size: 15px; line-height: 1.5; }
.sk-branch__meta {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--sk-line);
}
.sk-branch__meta span {
  font-size: 12.5px; font-weight: 700; color: var(--sk-blue);
  background: var(--sk-bg); border-radius: var(--sk-r-pill); padding: 5px 11px;
}
.sk-branch__more { display: inline-block; margin-top: 16px; font-weight: 800; font-size: 14px; color: var(--sk-coral); }
.sk-card--link:hover .sk-branch__more { color: var(--sk-coral-dark); }

/* ---------- Форматы дня ---------- */

.sk-format { display: flex; flex-direction: column; text-align: left; }
.sk-format__time { margin-top: 8px; font-size: 21px; font-weight: 900; color: var(--sk-blue); }
.sk-format__note { margin-top: 10px; font-size: 14.5px; line-height: 1.55; color: var(--sk-ink-soft); flex: 1; }
.sk-format__price {
  margin-top: 16px; padding-top: 13px; border-top: 1px dashed var(--sk-line);
  font-size: 13px; font-weight: 800; color: var(--sk-ink-mute);
}

/* ---------- Занятия ---------- */

.sk-acts h3 { margin-bottom: 15px; }
.sk-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sk-chips li { font-size: 14px; font-weight: 700; padding: 8px 14px; border-radius: var(--sk-r-pill); }
.sk-acts--blue  { border-top: 4px solid var(--sk-blue); }
.sk-acts--green { border-top: 4px solid var(--sk-green); }
.sk-acts--lilac { border-top: 4px solid var(--sk-lilac); }
.sk-acts--blue  .sk-chips li { background: var(--sk-bg-alt);     color: var(--sk-blue-dark); }
.sk-acts--green .sk-chips li { background: var(--sk-green-soft); color: #4A7318; }
.sk-acts--lilac .sk-chips li { background: var(--sk-lilac-soft); color: var(--sk-lilac); }

/* ---------- Педагоги ---------- */

.sk-teacher { padding: 14px; text-align: center; }
.sk-teacher__photo { border-radius: var(--sk-r-sm); overflow: hidden; margin-bottom: 14px; }
.sk-teacher__photo img { display: block; width: 100%; height: auto; }
.sk-teacher__photo .sk-ph { min-height: 210px; border-radius: var(--sk-r-sm); }
.sk-teacher h3 { font-size: 17px; }
.sk-teacher__role { margin-top: 5px; font-size: 13.5px; color: var(--sk-ink-soft); }

/* ---------- Отзывы ---------- */

.sk-review {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: none; color: #fff;
  font-size: 15.5px; line-height: 1.62; margin: 0;
}
.sk-review p { color: rgba(255,255,255,.9); }

/* ---------- FAQ ---------- */

.sk-faq {
  background: var(--sk-white); border: 1px solid var(--sk-line);
  border-radius: var(--sk-r-sm); padding: 4px 20px; margin-bottom: 12px;
}
.sk-faq summary {
  cursor: pointer; list-style: none; padding: 16px 30px 16px 0;
  font-weight: 800; font-size: 17px; color: var(--sk-ink); position: relative;
}
.sk-faq summary::-webkit-details-marker { display: none; }
.sk-faq summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-size: 24px; font-weight: 700; color: var(--sk-blue); line-height: 1;
}
.sk-faq[open] summary::after { content: "\2212"; }
.sk-faq p { padding: 0 0 18px; color: var(--sk-ink-soft); line-height: 1.62; font-size: 15.5px; }

/* ---------- Блок записи ---------- */

.sk-cta { background: var(--sk-white); padding-bottom: clamp(56px, 7vw, 96px); }
.sk-cta__box {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 48px); align-items: center;
  background: linear-gradient(135deg, #FFF6E0 0%, #FFF3CC 100%);
  border: 2px dashed var(--sk-yellow);
  border-radius: var(--sk-r-lg);
  padding: clamp(26px, 4vw, 46px);
}
.sk-cta__text .sk-lead { margin-top: 14px; color: #7A5A00; }
.sk-cta__phone {
  display: inline-block; margin-top: 20px;
  font-size: 28px; font-weight: 900; color: var(--sk-ink); letter-spacing: -.01em;
}
.sk-cta__phone:hover { color: var(--sk-coral); }
.sk-cta__form .sk-ph { background: rgba(255,255,255,.7); min-height: 250px; }

/* ---------- Пометки незаполненного контента (видны только вошедшему) ---------- */



/* ---------- Адаптив ---------- */

@media (max-width: 900px) {
  .sk-hero__grid { grid-template-columns: 1fr; }
  .sk-hero__media { max-width: 520px; }
  .sk-sun { width: 130px; height: 130px; top: -44px; right: -10px; }
  .sk-cta__box { grid-template-columns: 1fr; }
}

/* ---------- Фотографии ---------- */

.sk-hero__img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--sk-r);
}

.sk-branch { padding: 14px 14px 22px; }
.sk-branch__photo {
  position: relative;
  margin: 0 0 16px;
  border-radius: var(--sk-r-sm);
  overflow: hidden;
}
.sk-branch__photo img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 10; object-fit: cover;
}
.sk-branch__photo .sk-ph { min-height: 170px; border-radius: 0; }
.sk-branch__pin {
  position: absolute; top: 12px; right: 12px;
  width: 14px; height: 14px;
  background: var(--sk-yellow);
  box-shadow: 0 0 0 5px rgba(255,255,255,.85);
}
.sk-branch__title,
.sk-branch__addr,
.sk-branch__meta,
.sk-branch__more { margin-inline: 8px; }
.sk-branch__meta { margin-inline: 8px; }

.sk-hero__media .sk-sun { z-index: 2; top: -66px; right: -34px; filter: drop-shadow(0 6px 16px rgba(0,0,0,.18)); }

/* ---------- Фото педагогов — квадрат ---------- */
.sk-teacher__photo img,
.sk-teacher__photo .sk-ph {
  width: 100%; height: auto; min-height: 0;
  aspect-ratio: 1 / 1;
  object-fit: cover; object-position: center 30%;
}