/* style.css — стили ТОЛЬКО страницы «Цены» */

/* Фон страницы белый, как на «Услугах»: таблицы читаются спокойнее на белом,
   чем на общем кремовом var(--color-bg). */
body { background: var(--color-surface); }

.page-hero {
    padding: 48px 0 28px;
    background: var(--color-surface);
}
/* Золотая черта слева от h1 — тот же приём, что на «Услугах» и «Программах» */
.page-hero .container { position: relative; padding-left: 74px; }
.page-hero .container::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 25px;
    width: 38px;
    height: 2px;
    background: var(--color-gold);
}
.page-hero__lead { max-width: 70ch; color: var(--color-text-soft); }

/* Подпись к таблице нужна скринридеру, но на экране дублировала бы заголовок
   раздела прямо над ней, поэтому убираем её визуально, а не через display:none
   (display:none скрыл бы её и от скринридера тоже). */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.prices__group {
    margin: 40px 0 14px;
    font-size: 1.25rem;
}
.prices__group:first-of-type { margin-top: 8px; }

.price-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
}
.price-table th,
.price-table td {
    padding: 14px 16px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--color-border-soft);
}
.price-table thead th {
    background: var(--color-bg);
    font-size: .875rem;
    font-weight: 600;
    color: var(--color-text-soft);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.price-table tbody tr:last-child th,
.price-table tbody tr:last-child td { border-bottom: 0; }
.price-table tbody th { font-weight: 600; }
.price-table tbody th a { color: var(--color-text); text-decoration: none; border-bottom: 1px solid var(--color-gold-light); }
.price-table tbody th a:hover { color: var(--color-gold); border-bottom-color: var(--color-gold); }
.price-table tbody tr:hover { background: var(--color-bg); }
/* Вторая колонка — сама цена, её и выделяем */
.price-table tbody td:first-of-type { font-weight: 600; white-space: nowrap; }
.price-table--programs tbody td:first-of-type { font-weight: 400; white-space: normal; }
.price-table--programs tbody td:last-child { font-weight: 600; }

.prices__note {
    margin: 36px 0 0;
    padding: 20px 22px;
    background: var(--color-bg);
    border-radius: var(--radius-card);
    max-width: 80ch;
}
.prices__note p { margin: 0 0 12px; }
.prices__note p:last-child { margin-bottom: 0; }
.prices__warning { color: var(--color-text-soft); font-size: .9375rem; }

.prices__cta { margin-top: 40px; }
.prices__cta h2 { margin-bottom: 8px; }
.prices__cta p { margin: 0 0 18px; color: var(--color-text-soft); max-width: 60ch; }

/* На узком экране таблица превращается в список карточек: заголовок строки
   сверху, значения под ним с подписями из data-label. Горизонтальной прокрутки
   на телефоне быть не должно. */
@media (max-width: 640px) {
    .page-hero .container { padding-left: 20px; }
    .page-hero .container::before { display: none; }

    .price-table thead { display: none; }
    .price-table,
    .price-table tbody,
    .price-table tr,
    .price-table th,
    .price-table td { display: block; width: 100%; }
    .price-table tr {
        border-bottom: 1px solid var(--color-border);
        padding: 6px 0;
    }
    .price-table tbody tr:last-child { border-bottom: 0; }
    .price-table th,
    .price-table td { border-bottom: 0; padding: 6px 16px; }
    .price-table tbody th { padding-top: 14px; font-size: 1.0625rem; }
    .price-table td::before {
        content: attr(data-label) ": ";
        color: var(--color-text-soft);
        font-weight: 400;
    }
    .price-table tbody td:first-of-type { white-space: normal; }
}

/* Секция с таблицами идёт сразу за хиро, и общий отступ .section (56px)
   вместе с отступом хиро давал провал почти в сто пикселей. */
.prices { padding-top: 20px; }