/* Подключение дизайн-набора */
@import url('kit/tokens.css');
@import url('kit/kit.css');

/* Основные стили для сайта «Лондон-клуб» */
:root {
  /* Палитра из задания */
  --accent-color: #003366;
  --accent-yellow: #FFD700;
  --light-bg: #F5F5F5;
  --white: #FFFFFF;
  
  /* Используем токены из kit */
  --k-bg: var(--white);
  --k-text: var(--accent-color);
  --k-accent: var(--accent-yellow);
  --k-accent-2: var(--accent-color);
  --k-surface: var(--white);
  --k-tint: var(--light-bg);
}

/* Стили для шапки сайта */
.k-header {
  background: var(--white);
  border-bottom: 1px solid var(--k-line);
  padding-block: var(--k-space-4);
}

.k-logo {
  color: var(--accent-color);
  font-weight: 700;
  font-size: 20px;
  text-decoration: none;
}

.k-nav a {
  color: var(--accent-color);
  text-decoration: none;
  margin-inline: var(--k-space-3);
  font-weight: 500;
  transition: color 0.3s ease;
}

.k-nav a:hover {
  color: var(--accent-yellow);
}

/* Стили для подвала */
.k-footer {
  background: var(--accent-color);
  color: var(--white);
  margin-top: var(--k-section);
}

.k-footer__title {
  color: var(--white);
  font-weight: 700;
  margin-bottom: var(--k-space-3);
}

.k-footer__links a {
  color: var(--white);
  text-decoration: none;
  transition: opacity 0.3s ease;
  display: block;
  margin-bottom: var(--k-space-2);
}

.k-footer__links a:hover {
  opacity: 0.8;
}

/* Стили для основного контента */
main {
  padding-top: var(--k-space-6);
}

/* Стили для hero-блока */
.k-hero {
  background: linear-gradient(135deg, #003366 0%, #002244 100%);
  color: var(--white);
  padding-block: var(--k-section);
}

.k-hero__copy h1 {
  color: var(--white);
}

.k-hero__copy p {
  color: rgba(255, 255, 255, 0.9);
}

.k-hero__actions .k-btn {
  background-color: var(--accent-yellow);
  color: var(--accent-color);
  border: none;
  font-weight: 700;
}

.k-hero__actions .k-btn:hover {
  background-color: #e6c200;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Стили для карточек курсов */
.k-card {
  border-radius: var(--k-radius);
  box-shadow: var(--k-shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.k-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--k-shadow-lg);
}

.k-card__price {
  color: var(--accent-yellow);
  font-weight: 700;
}

.k-card__duration,
.k-card__sessions {
  display: block;
  margin-top: 4px;
  font-size: var(--k-small);
  color: var(--k-muted);
}

.k-field label {
  color: var(--accent-color);
  font-weight: 500;
  margin-bottom: var(--k-space-2);
  display: block;
}

.k-input {
  width: 100%;
  padding: var(--k-space-3);
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius-btn);
  background: var(--white);
  font-size: var(--k-text-base);
  transition: border-color 0.3s ease;
}

.k-input:focus {
  outline: none;
  border-color: var(--accent-yellow);
}

.k-check input {
  margin-right: var(--k-space-2);
}

/* Стили для кнопок */
.k-btn {
  font-weight: 700;
  padding: var(--k-space-3) var(--k-space-5);
  border-radius: var(--k-radius-btn);
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}

.k-btn--lg {
  padding: var(--k-space-4) var(--k-space-6);
  font-size: 18px;
}

.k-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Стили для секций */
.k-section {
  padding-block: var(--k-section);
}

.k-section--tint {
  background-color: var(--light-bg);
}

.k-section-head {
  max-width: 760px;
  margin-bottom: clamp(32px, 5vw, 56px);
  text-align: center;
}

/* Стили для отзывов */
.k-lead {
  color: var(--accent-color);
}

/* Стили для адаптивности */
@media (max-width: 768px) {
  .k-header__in {
    flex-direction: column;
    gap: var(--k-space-4);
  }
  
  .k-nav {
    margin-top: var(--k-space-3);
  }
  
  .k-hero {
    padding-block: var(--k-section);
  }
  
  .k-grid-2 {
    grid-template-columns: 1fr;
    gap: var(--k-space-6);
  }
  
  .k-section {
    padding-block: var(--k-space-6);
  }
}

/* Стили для преподавателей */
.k-teacher-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--k-space-5);
  border-radius: var(--k-radius);
  background: var(--white);
  box-shadow: var(--k-shadow);
  transition: transform 0.3s ease;
}

.k-teacher-card:hover {
  transform: translateY(-5px);
}

.k-teacher-img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: var(--k-space-4);
  border: 3px solid var(--accent-yellow);
}

.k-teacher-name {
  font-weight: 700;
  color: var(--accent-color);
  margin-bottom: var(--k-space-2);
}

.k-teacher-title {
  color: var(--accent-color);
  font-weight: 500;
  margin-bottom: var(--k-space-3);
}

/* Стили для формы записи */
.k-form__row {
  display: flex;
  flex-direction: column;
  gap: var(--k-space-4);
}

.k-form__row .k-field {
  width: 100%;
}

/* Стили для форматирования текста */
p {
  font-size: 16px;
  line-height: 1.6;
}

h1, h2, h3 {
  color: var(--accent-color);
}

h1 {
  font-size: var(--k-h1);
}

h2 {
  font-size: var(--k-h2);
}

/* Дополнительные стили для единообразного оформления */
.k-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--k-space-6);
}

.k-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--k-space-6);
}

.k-card__image {
  width: 100%;
  height: auto;
  border-radius: calc(var(--k-radius) * 0.7);
  margin-bottom: var(--k-space-4);
}

.k-section-head--center {
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
}

.k-section-head--center .k-lead {
  margin-inline: auto;
}

.k-section-head--split {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 16px 40px;
  max-width: none;
}

h3 {
  font-size: var(--k-h3);
}

/* Стили для карточек с курсами (дополнительные) */
.k-course-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--k-radius);
  box-shadow: var(--k-shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: var(--white);
  padding: var(--k-space-5);
}

.k-course-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--k-shadow-lg);
}

.k-course-card__image {
  width: 100%;
  height: auto;
  border-radius: calc(var(--k-radius) * 0.7);
  margin-bottom: var(--k-space-4);
}

.k-course-card__title {
  font-weight: 700;
  color: var(--accent-color);
  margin-bottom: var(--k-space-2);
}

.k-course-card__description {
  color: var(--k-muted);
  margin-bottom: var(--k-space-4);
  flex-grow: 1;
}

.k-course-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--k-line);
  padding-top: var(--k-space-3);
  margin-top: auto;
}

.k-course-card__duration,
.k-course-card__lessons {
  color: var(--k-muted);
  font-size: 14px;
}

/* Стили для отзывов */
.k-testimonial {
  background: var(--white);
  border-radius: var(--k-radius);
  box-shadow: var(--k-shadow);
  padding: var(--k-space-6);
  margin-bottom: var(--k-space-6);
}

.k-testimonial__content {
  color: var(--k-text);
  font-style: italic;
  margin-bottom: var(--k-space-4);
}

.k-testimonial__author {
  display: flex;
  align-items: center;
}

.k-testimonial__avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: var(--k-space-3);
}

.k-testimonial__name {
  font-weight: 700;
  color: var(--accent-color);
}

.k-testimonial__role {
  color: var(--k-muted);
  font-size: 14px;
}

/* Стили для изображений в карточках */
.k-card-image {
  width: 100%;
  height: auto;
  border-radius: calc(var(--k-radius) * 0.7);
  margin-bottom: var(--k-space-4);
}

/* Стили для теста уровня английского */
.k-test-container {
  max-width: 800px;
  margin: 0 auto;
}

.k-test-question {
  margin-bottom: 2rem;
}

.k-test-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

.k-test-actions {
  margin-top: 2rem;
  text-align: center;
}

.k-test-result {
  background-color: var(--k-bg-contrast);
  padding: 2rem;
  border-radius: var(--k-radius);
  margin-top: 2rem;
  text-align: center;
}

.k-test-result p {
  margin-bottom: 1rem;
}