/*
 * Мобильные стили блоков-компонентов (до 767px). Подключается из include/menu-extra.php, то есть на всех страницах
 * и вне кеша компонентов: разметку компонентов не меняем, правим только вид существующих классов.
 */
@media (max-width: 767px) {
	/* ---------- Блог на главной: карточка статьи ---------- */
	.blog-preview .section-header .title {
		text-align: left;
	}

	.blog-preview .blog-preview-card {
		gap: 0;
		overflow: hidden;
		border: 1px solid rgb(255 255 255 / 16%);
		border-radius: 20px;
		background: rgb(255 255 255 / 5%);
	}

	.blog-preview .blog-preview-card__header {
		border-radius: 0;
	}

	/* заголовок статьи */
	.blog-preview .blog-preview-card .subtitle {
		margin: 20px 20px 0;
		font-family: var(--secondary-font);
		font-size: 17px;
		font-weight: 600;
		line-height: 1.25;
		letter-spacing: -0.01em;
		color: var(--white);
	}

	/* анонс: спокойнее заголовка */
	.blog-preview .blog-preview-card .text {
		margin: 12px 20px 20px;
		font-size: 14.5px;
		line-height: 1.45;
		color: rgb(255 255 255 / 62%);
	}

	/* «Подробнее» — кнопка */
	.blog-preview .blog-preview-card__arrow {
		align-items: center;
		align-self: flex-start;
		gap: 12px;
		margin: auto 20px 20px; /* кнопка прижата к низу карточки, на всех слайдах на одном уровне */
		padding: 12px 20px;
		border-radius: 999px;
		background: var(--primary);
		font-size: 15px;
		line-height: 1;
		color: var(--white);
	}
}