/* Карточка каталога программ — макет «Страница программ», вариант 1a.
   Название под фото, ниже описание, внизу разделитель: цена «от» слева,
   кнопка справа. Правки касаются только карточек: быстрая навигация
   разделов (.vs_cat_legend) и сетка секций не трогаются. */

.as_cat_girl {
	display: flex; flex-direction: column; height: 100%; margin-bottom: 0;
	background: #fff; border-radius: 16px; overflow: hidden;
	box-shadow: 0 1px 2px rgba(24,24,24,.06);
}
/* Селекторы с .dt-archive-posts — инлайн-<style> в category-1.php идёт после
   этого файла и задаёт секции display:flow-root; при равной специфичности
   побеждал бы он. 
/* Секция раскладывается гридом, а не bootstrap-флоатами: при флоатах карточки
   с описанием разной длины (2-4 строки) имели разную высоту и следующий ряд
   съезжал вбок. В гриде ячейки ряда всегда равной высоты.
   Быстрой навигации разделов (.vs_cat_legend) это не касается — она вне секций. */
.dt-archive-posts .vs_cat_section { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.dt-archive-posts .vs_cat_section > .clearfix { display: none; }
.dt-archive-posts .vs_cat_section > a:not([class]) { grid-column: 1 / -1; }

.as_cat_girls,
.dt-archive-posts .as_cat_girls {
	height: auto; width: auto; float: none; padding-left: 0; padding-right: 0;
}

@media (min-width: 992px) {
	.dt-archive-posts .vs_cat_section { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
}


/* Файлы фото 800x640 (5:4), макет просит 4:3 — держим пропорцию макета,
   лишнее подрезаем по центру, чтобы карточки в ряду были одной высоты. */
/* padding-bottom вместо aspect-ratio: у <img> проставлены HTML-атрибуты
   width/height, и он распирал контейнер до своей пропорции 5:4. */
.as_card_media { position: relative; display: block; height: 0; padding-bottom: 75%; background: #E1E1E1; line-height: 0; overflow: hidden; }
.as_card_media img.wp-post-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.as_cat_girl_bottom { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 24px; }

/* Название лежит на фото. Затемнение снизу обязательно: снимки разные по
   яркости, на светлых кадрах белый текст без него теряется. */
.as_card_scrim {
	position: absolute; left: 0; right: 0; bottom: 0; height: 62%;
	background: linear-gradient(to top, rgba(8,8,9,.92) 0%, rgba(8,8,9,.72) 32%, rgba(8,8,9,.3) 62%, rgba(8,8,9,0) 100%);
	pointer-events: none;
}
.as_card_title {
	position: absolute; left: 20px; right: 20px; bottom: 16px; margin: 0;
	font-family: Roboto, sans-serif; font-weight: 500; font-size: 25px;
	line-height: 1.15; letter-spacing: -.01em; color: #fff;
	text-shadow: 0 1px 12px rgba(0,0,0,.5);
}

.as_proga_excerpt { margin: 0 0 20px; font-size: 14.5px; line-height: 1.6; color: rgba(24,24,24,.6); text-wrap: pretty; }

/* margin-top:auto прижимает подвал к низу — карточки в ряду выравниваются
   по кнопке даже при описаниях разной длины. */
.as_card_foot {
	display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
	margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(24,24,24,.09);
}
.as_card_price { display: flex; flex-direction: column; gap: 1px; }
.as_card_price_label { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(24,24,24,.4); white-space: nowrap; }
.as_card_price_value { font-size: 19px; font-weight: 500; color: #181818; white-space: nowrap; }

.as_cat_girl .as_card_btn {
	display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 22px;
	border-radius: 100px; background: #E5197F; color: #fff;
	font-family: 'Jost', sans-serif; font-size: 13.5px; font-weight: 500; line-height: 1;
	text-decoration: none; white-space: nowrap; transition: background .15s;
}
.as_cat_girl .as_card_btn:hover { background: #B01167; color: #fff; }

@media (max-width: 767px) {
	.as_cat_girl { border-radius: 14px; }
	.as_cat_girl_bottom { padding: 16px 16px 18px; }
	.as_card_title { left: 16px; right: 16px; bottom: 13px; font-size: 21px; }
	.as_proga_excerpt { margin: 0 0 16px; font-size: 14px; }
	.as_card_foot { padding-top: 14px; gap: 12px; }
	.as_card_price_value { font-size: 18px; }
	.as_cat_girl .as_card_btn { height: 42px; padding: 0 18px; font-size: 13px; }
}

/* ===== Блок «Подарочный сертификат» — макет «Сертификат - блок», вариант 2a.
   Мобильная раскладка — вариант 3a из того же файла (одна колонка). ===== */
.tsr-cert { padding: 40px 0 8px; }
.tsr-cert__card {
	display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
	background: #F1F1F1; border-radius: 20px; padding: 52px 56px;
}
.tsr-cert__media {
	position: relative; width: 100%; max-width: 470px; aspect-ratio: 1.62;
	border-radius: 16px; overflow: hidden; box-shadow: 0 22px 44px -18px rgba(24,24,24,.6), 0 4px 10px rgba(24,24,24,.16);
}
.tsr-cert__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tsr-cert__body { display: flex; flex-direction: column; gap: 20px; }
/* точка-маркер надзаголовка — как у секций в макете */
.tsr-cert__eyebrow {
	display: flex; align-items: center; gap: 10px;
	font: 400 11px/1 'Jost', sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #B01167;
}
.tsr-cert__eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #E5197F; flex: none; }
.tsr-cert__title { margin: 0; font: 400 42px/1.1 'Playfair Display', serif; letter-spacing: -.01em; color: #181818; }
.tsr-cert__lead { margin: 0; font: 300 16px/1.65 'Jost', sans-serif; color: rgba(24,24,24,.6); max-width: 44ch; text-wrap: pretty; }

.tsr-cert__list { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.tsr-cert__list li {
	display: flex; align-items: baseline; gap: 12px;
	font: 400 15px/1.4 'Jost', sans-serif; color: #181818;
}
.tsr-cert__list li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #E5197F; flex: none; transform: translateY(-3px); }

.tsr-cert__foot {
	display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
	margin-top: 14px; padding-top: 18px; border-top: 1px solid rgba(24,24,24,.12);
}
.tsr-cert__price { display: flex; flex-direction: column; gap: 2px; }
.tsr-cert__price-label { font: 400 10px/1 'Jost', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgba(24,24,24,.4); }
.tsr-cert__price-value { font: 500 20px/1 'Jost', sans-serif; color: #181818; }

.tsr-cert .tsr-cert__btn {
	display: inline-flex; align-items: center; gap: 9px; height: 52px; padding: 0 30px;
	border-radius: 100px; background: #E5197F; color: #fff; text-decoration: none;
	font: 500 14px/1 'Jost', sans-serif; white-space: nowrap;
	transition: background .18s, transform .18s;
}
.tsr-cert .tsr-cert__btn:hover { background: #B01167; color: #fff; transform: translateY(-2px); }

@media (max-width: 991px) {
	.tsr-cert__card { grid-template-columns: 1fr; gap: 18px; padding: 20px 20px 24px; border-radius: 18px; }
	.tsr-cert__media { max-width: none; border-radius: 14px; box-shadow: 0 16px 32px -14px rgba(24,24,24,.6), 0 3px 8px rgba(24,24,24,.16); }
	.tsr-cert__body { gap: 14px; }
	.tsr-cert__title { font-size: 30px; line-height: 1.12; }
	.tsr-cert__lead { font-size: 15px; line-height: 1.6; max-width: none; }
	.tsr-cert__list { gap: 9px; padding-top: 4px; }
	.tsr-cert__list li { font-size: 14px; }
	.tsr-cert__foot { margin-top: 0; padding-top: 14px; align-items: stretch; flex-direction: column; gap: 12px; }
	/* Секции карточек на этой ширине сдвинуты цветной полоской слева
	   (border 4px + padding 14px); повторяем отступ, чтобы края совпали. */
	.tsr-cert { padding-left: 18px; }
	/* на мобильной кнопка во всю ширину — тач-таргет 54px, как в макете 3a */
	.tsr-cert .tsr-cert__btn { height: 54px; justify-content: center; font-size: 15px; }
}

/* ===== Кнопка формы на странице «Подарочный сертификат» =====
   Её собственные стили лежат в контенте страницы (инлайновый <style> в тексте
   поста). Править контент нельзя: при сохранении WordPress прогоняет его через
   свои фильтры и разрушает блок <style> — CSS вываливается текстом на страницу.
   Поэтому переопределяем отсюда, с чуть большей специфичностью (лишний body),
   так как инлайновый стиль идёт ниже по документу. */
body .tsr-cert-page .wpcf7-submit {
	width: 100%; height: 52px; padding: 0 30px;
	background: #E5197F; border: none; border-radius: 100px;
	color: #fff; font-family: 'Jost', sans-serif; font-size: 14px; font-weight: 500;
	line-height: 1; letter-spacing: normal; text-transform: none;
	/* тема вешает белую тень — под белым текстом она давала ореол */
	text-shadow: none; box-shadow: none;
	margin-top: 24px; cursor: pointer;
	transition: background .18s, transform .18s;
}
body .tsr-cert-page .wpcf7-submit:hover,
body .tsr-cert-page .wpcf7-submit:focus,
body .tsr-cert-page .wpcf7-submit:active {
	background: #B01167; color: #fff; box-shadow: none; outline: none;
}
body .tsr-cert-page .wpcf7-submit:hover { transform: translateY(-2px); }

/* ===== Сворачиваемый SEO-текст категории =====
   Общий каталог и подкатегории показывают его одинаково — внизу страницы, под
   кнопкой. Правила переехали сюда из инлайнового <style> в category-1.php,
   чтобы archive.php мог их переиспользовать. */
.vs_seo_wrap { padding: 0 0 40px; }
.vs_seo_toggle {
	display: flex; align-items: center; gap: 10px;
	background: none; border: 1px solid rgba(0, 0, 0, .12); border-radius: 40px;
	padding: 10px 24px; cursor: pointer;
	font-family: Roboto, sans-serif; font-size: 13px; color: #666; letter-spacing: .05em;
	transition: all .2s;
}
.vs_seo_toggle:hover { border-color: #e2208a; color: #e2208a; }
.vs_seo_toggle_icon { transition: transform .3s; font-size: 16px; }
.vs_seo_wrap.open .vs_seo_toggle_icon { transform: rotate(180deg); }
/* Раскрытие анимируется сеткой, а не max-height: тексты категорий занимают
   11–13 тысяч пикселей, и любой фиксированный лимит либо обрезал бы их, либо
   делал переход рывком (скорость перехода считается от заданного предела, а не
   от реальной высоты). Строка 0fr→1fr всегда равна фактической высоте текста. */
.vs_seo_content {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .45s ease;
}
.vs_seo_inner { min-height: 0; overflow: hidden; } /* без min-height:0 грид не даст строке сжаться */
.vs_seo_wrap.open .vs_seo_content { grid-template-rows: 1fr; }

/* Старым браузерам без анимации grid-строк оставляем мгновенное раскрытие. */
@supports not (grid-template-rows: 1fr) {
	.vs_seo_content { display: block; max-height: 0; overflow: hidden; }
	.vs_seo_wrap.open .vs_seo_content { max-height: none; }
}