/* Основные стили для сайта студии йоги «Асана» */
/* Используем палитру из техзадания: #e0f2f1, #00695c, #ffffff */

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

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

.k-logo {
  color: var(--k-accent);
  font-weight: 600;
}

.k-nav a {
  color: var(--k-text);
  transition: color var(--k-dur) var(--k-ease);
}

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

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

/* Стили для хиро-блока */
.k-hero {
  background-color: var(--k-bg);
  padding-block: var(--k-section);
}

.k-hero__copy {
  text-align: center;
  max-width: 800px;
  margin-inline: auto;
}

.k-h1 {
  color: var(--k-accent);
  margin-bottom: var(--k-space-4);
}

.k-lead {
  font-size: clamp(18px, 3vw, 22px);
  line-height: var(--k-leading);
  margin-bottom: var(--k-space-6);
  color: var(--k-text);
}

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

.k-section--tint {
  background-color: #e0f2f1;
}

.k-section-head {
  text-align: center;
  margin-bottom: clamp(40px, 8vw, 72px);
}

.k-section-head h2 {
  color: var(--k-accent);
  margin-bottom: var(--k-space-3);
}

.k-section-head p {
  color: var(--k-muted);
  max-width: 700px;
  margin-inline: auto;
}

/* Стили для преимуществ */
.k-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--k-space-6);
  list-style: none;
}

.k-feature {
  border-top: 2px solid var(--k-accent);
  padding-top: var(--k-space-4);
  text-align: center;
}

.k-feature__icon {
  color: var(--k-accent);
  font-size: 18px;
  letter-spacing: .2em;
  margin-bottom: var(--k-space-3);
}

/* Стили для карточек занятий */
.k-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--k-space-6);
  list-style: none;
}

.k-card {
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius);
  overflow: hidden;
  transition: transform var(--k-dur) var(--k-ease), box-shadow var(--k-dur) var(--k-ease);
}

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

.k-card .k-img {
  width: 100%;
  height: 250px;
  background-size: cover;
  background-position: center;
}

/* Стили для кнопок */
.k-btn {
  background-color: var(--k-accent);
  color: var(--k-on-accent);
  border: none;
  padding: var(--k-space-3) var(--k-space-5);
  font-weight: 500;
  letter-spacing: .02em;
  transition: background-color var(--k-dur) var(--k-ease);
}

.k-btn:hover {
  background-color: #004d40; /* Тёмнее основного цвета */
}

.k-btn--ghost {
  background-color: transparent;
  border: 1px solid var(--k-accent);
  color: var(--k-accent);
}

.k-btn--ghost:hover {
  background-color: var(--k-accent);
  color: var(--k-on-accent);
}

/* Стили для отзывов */
.k-review {
  border-left: 3px solid var(--k-accent);
  padding-left: var(--k-space-4);
  margin-bottom: var(--k-space-5);
}

.k-review__text {
  font-size: clamp(16px, 2vw, 18px);
  font-style: italic;
  color: var(--k-text);
}

/* Стили для футера */
.k-footer {
  background-color: var(--k-bg);
  border-top: 1px solid var(--k-line);
  padding-block: var(--k-space-6);
}

.k-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--k-space-5);
  margin-bottom: var(--k-space-4);
}

.k-footer__title {
  color: var(--k-accent);
  margin-bottom: var(--k-space-3);
}

.k-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.k-footer__links a {
  color: var(--k-text);
  text-decoration: none;
  transition: color var(--k-dur) var(--k-ease);
}

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

/* Стили для форм */
.k-form {
  background-color: var(--k-surface);
  padding: var(--k-space-6);
  border-radius: var(--k-radius);
}

.k-field {
  margin-bottom: var(--k-space-4);
}

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

.k-input {
  width: 100%;
  padding: var(--k-space-3);
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius);
  background-color: var(--k-bg);
  font-size: 16px;
}

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

.k-error {
  color: var(--k-danger);
  font-size: 14px;
  margin-top: var(--k-space-2);
}

/* Адаптивность */
@media (max-width: 768px) {
  .k-section {
    padding-block: calc(var(--k-section) * 0.6);
  }
  
  .k-hero__copy {
    padding-inline: var(--k-space-3);
  }
  
  .k-features,
  .k-cards {
    grid-template-columns: 1fr;
  }
  
  .k-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--k-space-4);
  }
}

/* Стили для таблицы расписания */
.k-schedule-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--k-space-4);
  background-color: var(--k-bg);
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius);
  overflow: hidden;
}

.k-schedule-table thead {
  background-color: #00695c;
  color: white;
}

.k-schedule-table th,
.k-schedule-table td {
  padding: var(--k-space-3);
  text-align: left;
  border-bottom: 1px solid var(--k-line);
}

.k-schedule-table th {
  font-weight: 500;
}

.k-schedule-table tbody tr:hover {
  background-color: #e0f2f1;
}

.k-schedule-table tbody tr:last-child td {
  border-bottom: none;
}

/* Адаптивность для таблицы */
@media (max-width: 768px) {
  .k-schedule-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  
  .k-schedule-table th,
  .k-schedule-table td {
    padding: var(--k-space-2);
    font-size: 14px;
  }
}