.materials-page {
	padding: 40px 0 60px;
}

/* Ширина и отступы контейнера наследуются от .main-container шаблона —
   это обеспечивает выравнивание блока по левому/правому краю меню сайта. */

/* Шапка блока: заголовок + кнопка */
.materials-head {
	position: relative;
	padding-right: 320px;
	margin-bottom: 40px;
}

.materials-head__title {
	font-family: "Futura", Arial, sans-serif;
	font-weight: 400;
	font-size: 42px;
	line-height: 1.17;
	color: #000;
	margin: 0 0 12px;
}

.materials-head__desc {
	font-family: "Futura", Arial, sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.33;
	color: #000;
	/* Как в макете: перенос после «по медицинскому». В макете стоит 767px, но
	   там Futura подменена более широким шрифтом; с настоящей Futura та же
	   разбивка получается около 590px. */
	max-width: 590px;
}

.materials-head__btn {
	position: absolute;
	top: 6px;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 30px;
	background-color: #ff5073;
	border: 1px solid #ff5073;
	border-radius: 1000px;
	font-family: "Futura", Arial, sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 1.15;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s ease, border-color .2s ease;
}

/* Шаблон сайта подчёркивает любую ссылку при наведении — кнопке это не нужно. */
.materials-head__btn:hover,
.materials-head__btn:focus {
	background-color: #e6395c;
	border-color: #e6395c;
	color: #fff;
	text-decoration: none;
}

/* Ряд категорий-иконок: колонки равной ширины на всю ширину контейнера,
   сама иконка при этом остаётся 160px и центрируется в своей колонке. */
.materials-tabs {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 20px;
}

.materials-tabs__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.materials-tabs__icon {
	display: block;
	width: 160px;
	max-width: 100%;
	margin-bottom: 21px;
}

.materials-tabs__icon picture,
.materials-tabs__icon img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

.materials-tabs__name {
	font-family: "Futura", Arial, sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.3;
	color: #000;
}

.materials-tabs__item.active .materials-tabs__name {
	color: #ff5073;
}

/* Поиск + сортировка + фильтры + сетка карточек */
.materials-body {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	margin-top: 40px;
}

.materials-filters {
	flex: 0 0 275px;
	width: 275px;
	border: 1px solid #e6e6e6;
	border-radius: 8px;
	padding: 20px;
	box-sizing: border-box;
}

/* На десктопе заголовка «Фильтры» над сайдбаром нет. Шапку показываем только
   в шторке (до 1200px): там в ней ещё кнопка «назад» и «Сбросить». Прячем всю
   шапку, а не одно слово, иначе остаётся пустой отступ. */
.materials-filters__mobile-head {
	display: none;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}

.materials-filters__title {
	flex: 1 1 auto;
	font-family: "Futura", Arial, sans-serif;
	font-weight: 700;
	font-size: 24px;
	color: #000;
}

.materials-filters__back {
	display: none;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	cursor: pointer;
}

.materials-filters__reset {
	display: none;
	flex: 0 0 auto;
	font-family: "Futura", Arial, sans-serif;
	font-weight: 400;
	font-size: 14px;
	color: #0d2d6e;
	text-decoration: none;
	white-space: nowrap;
}

.materials-filters__chips {
	display: none;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 24px;
}

/* Полноэкранное окно «Показать все» для одной группы фильтра */
.materials-filter-showall {
	display: none;
}

.materials-filter-showall__head {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}

.materials-filter-showall__head .materials-filters__back {
	position: absolute;
	left: 0;
}

.materials-filter-showall__title {
	font-family: "Futura", Arial, sans-serif;
	font-weight: 400;
	font-size: 18px;
	color: #000;
	text-align: center;
}

.materials-filter-showall__search {
	margin-bottom: 20px;
}

.materials-filter-showall__list {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.materials-filters-toggle-input,
.materials-filters-overlay {
	display: none;
}

.materials-filter {
	border-top: 1px solid #e6e6e6;
	padding: 20px 0;
}

.materials-filter:first-of-type {
	border-top: none;
	padding-top: 0;
}

.materials-filter__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	list-style: none;
	cursor: pointer;
	font-family: "Futura", Arial, sans-serif;
	font-weight: 700;
	font-size: 24px;
	color: #000;
}

.materials-filter__head::-webkit-details-marker {
	display: none;
}

.materials-filter__head::after {
	content: "";
	flex: 0 0 auto;
	width: 10px;
	height: 6px;
	margin-left: 10px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23000' stroke-width='1.3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .2s ease;
}

.materials-filter[open] .materials-filter__head::after {
	transform: rotate(180deg);
}

.materials-filter__list {
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin-top: 20px;
}

.materials-filter__more {
	display: inline-block;
	margin-top: 20px;
	font-family: "Futura", Arial, sans-serif;
	font-weight: 400;
	font-size: 15px;
	color: #0d2d6e;
	text-decoration: none;
	cursor: pointer;
}

.materials-filter__more:hover {
	text-decoration: underline;
}

.materials-filter__more-label--open {
	display: none;
}

.materials-filter__expand-toggle {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.materials-filter__expand-toggle:checked~.materials-filter__more--desktop .materials-filter__more-label--closed {
	display: none;
}

.materials-filter__expand-toggle:checked~.materials-filter__more--desktop .materials-filter__more-label--open {
	display: inline;
}

/* Поиск и доп. пункты списка появляются между «Показать все» и «Свернуть».
   По макету поле отбивается от заголовка и от списка одинаково — по 20px. */
.materials-filter__expand-search {
	display: none;
	margin-top: 20px;
	margin-bottom: 20px;
}

.materials-filter__expand-toggle:checked~.materials-filter__expand-search {
	display: block;
}

.materials-filter__expand-search .materials-search__input {
	width: 100%;
	height: 36px;
	background-color: #fafafa;
	border: 1px solid #e6e6e6;
	border-radius: 50px;
	padding: 0 20px;
	box-sizing: border-box;
	font-family: "Futura", Arial, sans-serif;
	font-weight: 400;
	font-size: 14px;
	color: #000;
}

.materials-filter__extra-list {
	display: none;
	flex-direction: column;
	gap: 15px;
	margin-top: 15px;
}

.materials-filter__expand-toggle:checked~.materials-filter__scroll .materials-filter__extra-list {
	display: flex;
}

/* Скролл живёт на обёртке, а не на доп. списке: иначе первые пункты остаются
   на месте, а прокручивается только та часть, что появилась по «Показать все».
   Высота заметно больше свёрнутого списка, иначе раскрытие выглядит как «ничего
   не произошло». */
.materials-filter__expand-toggle:checked~.materials-filter__scroll {
	max-height: 500px;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-right: 8px;
}

/* В раскрытом виде отбивку до списка даёт поле поиска, иначе отступ удвоится.
   Держим её на обёртке, а не внутри скролла, чтобы она не уезжала при прокрутке. */
.materials-filter__expand-toggle:checked~.materials-filter__scroll .materials-filter__list {
	margin-top: 0;
}

.materials-filter__scroll::-webkit-scrollbar {
	width: 6px;
}

.materials-filter__scroll::-webkit-scrollbar-track {
	background: transparent;
}

.materials-filter__scroll::-webkit-scrollbar-thumb {
	background-color: #c9c9c9;
	border-radius: 3px;
}

.materials-filter__more--mobile {
	display: none;
}

.materials-checkbox {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
}

.materials-checkbox input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.materials-checkbox__box {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border: 1px solid #d9d9d9;
	border-radius: 6px;
	background-color: #fff;
	position: relative;
	transition: background-color .15s ease, border-color .15s ease;
}

.materials-checkbox__box::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 46%;
	width: 12px;
	height: 7px;
	margin: -4px 0 0 -6px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg);
	opacity: 0;
}

.materials-checkbox input:checked+.materials-checkbox__box {
	background-color: #0d2d6e;
	border-color: #0d2d6e;
}

.materials-checkbox input:checked+.materials-checkbox__box::after {
	opacity: 1;
}

.materials-checkbox__label {
	font-family: "Futura", Arial, sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 24px;
	color: #4c4c4c;
}

.materials-content {
	flex: 1 1 auto;
	min-width: 0;
}

.materials-toolbar {
	display: flex;
	gap: 20px;
	margin-bottom: 30px;
}

/* Мобильный тулбар: поиск + кнопки «Фильтры»/сортировка */
.materials-toolbar-mobile {
	display: none;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 20px;
}

.materials-toolbar-mobile__row {
	display: flex;
	gap: 10px;
}

.materials-toolbar-mobile__row>label.materials-mobile-btn {
	flex: 1 1 auto;
	justify-content: center;
}

.materials-toolbar-mobile__row>.materials-sort {
	flex: 0 0 auto;
	position: relative;
}

.materials-mobile-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 16px;
	background-color: #fafafa;
	border: 1px solid #e6e6e6;
	border-radius: 50px;
	box-sizing: border-box;
	font-family: "Futura", Arial, sans-serif;
	font-weight: 400;
	font-size: 14px;
	color: #000;
	cursor: pointer;
	list-style: none;
	white-space: nowrap;
}

.materials-mobile-btn::-webkit-details-marker {
	display: none;
}

.materials-mobile-btn__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	background-color: #0d2d6e;
	border-radius: 50%;
	font-family: "Futura", Arial, sans-serif;
	font-size: 12px;
	color: #fff;
}

.materials-search {
	position: relative;
	flex: 1 1 auto;
}

.materials-search__icon {
	position: absolute;
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}

.materials-search__input {
	width: 100%;
	height: 44px;
	background-color: #fafafa;
	border: 1px solid #e6e6e6;
	border-radius: 50px;
	padding: 0 20px 0 48px;
	box-sizing: border-box;
	font-family: "Futura", Arial, sans-serif;
	font-weight: 400;
	font-size: 14px;
	color: #000;
}

/* Только главная строка поиска: те же классы носят мелкие поля внутри групп
   фильтра («Найти») и в полноэкранных списках, их размер не трогаем. */
.materials-search__input[data-main-search] {
	font-size: 18px;
}

.materials-search__input::placeholder {
	color: #a7a7a7;
}

.materials-sort {
	position: relative;
	flex: 0 0 276px;
}

.materials-sort__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 44px;
	background-color: #fafafa;
	border: 1px solid #e6e6e6;
	border-radius: 50px;
	padding: 0 20px;
	box-sizing: border-box;
	font-family: "Futura", Arial, sans-serif;
	font-weight: 400;
	font-size: 20px;
	color: #000;
	cursor: pointer;
	list-style: none;
}

.materials-sort__toggle::-webkit-details-marker {
	display: none;
}

.materials-sort__toggle::after {
	content: "";
	flex: 0 0 auto;
	width: 14px;
	height: 8px;
	margin-left: 10px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%23000' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .2s ease;
}

.materials-sort[open] .materials-sort__toggle::after {
	transform: rotate(180deg);
}

.materials-sort__panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 5;
	width: 100%;
	min-width: 276px;
	background-color: #fff;
	border-radius: 16px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
	padding: 8px 0;
	box-sizing: border-box;
}

.materials-sort__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 20px;
	font-family: "Futura", Arial, sans-serif;
	font-weight: 400;
	font-size: 20px;
	color: #000;
	text-decoration: none;
	white-space: nowrap;
}

.materials-sort__option:hover {
	background-color: #fafafa;
}

.materials-sort__option.is-active {
	color: #0d2d6e;
}

/* Галочка — только у выбранного варианта сортировки */
.materials-sort__check {
	display: none;
	flex: 0 0 auto;
}

.materials-sort__option.is-active .materials-sort__check {
	display: block;
}

.materials-sort__mobile-title,
.materials-sort__apply,
.materials-filters__apply {
	display: none;
}

.materials-sort__radio {
	display: none;
}

/* Чипы активных фильтров */
.materials-active-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 30px;
}

.materials-chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 44px;
	padding: 0 8px 0 15px;
	background-color: #0d2d6e;
	border-radius: 22px;
	font-family: "Futura", Arial, sans-serif;
	font-weight: 400;
	font-size: 14px;
	color: #fff;
	text-decoration: none;
	box-sizing: border-box;
}

.materials-chip__close {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	background-color: #fff;
	border: none;
	border-radius: 50%;
	padding: 0;
	cursor: pointer;
}

.materials-chip--clear {
	background-color: #f4f4f4;
	color: #000;
	cursor: pointer;
}

.materials-chip__close--muted {
	background-color: #d9d9d9;
}

.materials-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

.material-card {
	display: flex;
	flex-direction: column;
	border: 1px solid #e6e6e6;
	padding: 20px;
	box-sizing: border-box;
}

/* Обложка задаёт только размер площадки. Картинка вписывается в неё целиком
   и без подложки: вертикальные обложки не режутся, поля по бокам остаются
   белыми, как фон карточки. */
.material-card__cover {
	position: relative;
	width: 100%;
	aspect-ratio: 233 / 280;
	overflow: hidden;
	margin-bottom: 20px;
}

/* Кнопка воспроизведения поверх обложки видео */
.material-card__play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 66px;
	height: 66px;
	border-radius: 50%;
	background: rgba(13, 45, 110, .72);
	transition: background-color .2s ease;
}

.material-card__play svg {
	margin-left: 5px;
}

.material-card:hover .material-card__play {
	background: #0d2d6e;
}

.material-card__cover picture,
.material-card__cover img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Слой с картинкой: кнопка плей центрируется по самой картинке, а не по блоку. */
.material-card__shot {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

/* Горизонтальные обложки — во всю ширину, высота по пропорции, без обрезки.
   Высота самого блока не меняется, поэтому текст карточек стоит на одном уровне. */
.material-card__cover--wide .material-card__shot {
	height: auto;
}

.material-card__cover--wide picture,
.material-card__cover--wide img {
	height: auto;
	object-fit: contain;
}

/* Тело карточки тянется на всю свободную высоту, чтобы блок действий
   можно было прижать к низу и «Посмотреть/Скачать» стояли на одном
   уровне у всех карточек ряда независимо от длины названия. */
.material-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.material-card__type {
	font-family: "Futura", Arial, sans-serif;
	font-weight: 400;
	font-size: 17px;
	color: #808080;
	margin-bottom: 12px;
}

/* Типографика как у названия товара в листинге каталога (.item-name). */
.material-card__title {
	display: block;
	font-family: "Futura", Arial, sans-serif;
	font-weight: 600;
	font-size: 22px;
	line-height: 28px;
	letter-spacing: -0.3px;
	color: #19147c;
	/* В флекс-теле карточки отступы не схлопываются, поэтому верхний убран:
	   расстояние до типа задаёт его собственный margin-bottom. */
	margin: 0 0 10px;
}

.material-card__direction {
	font-family: "Futura", Arial, sans-serif;
	font-weight: 400;
	font-size: 20px;
	color: #000;
	margin-bottom: 12px;
}

.material-card__meta {
	display: none;
	font-family: "Futura", Arial, sans-serif;
	font-weight: 400;
	font-size: 17px;
	text-transform: lowercase;
	color: #000;
	margin-bottom: 12px;
}

.material-card__meta span {
	margin: 0 4px;
	font-size: 10px;
	color: #000;
}

.material-card__actions {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: auto;
}

.material-card__action {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: "Futura", Arial, sans-serif;
	font-weight: 400;
	font-size: 17px;
	color: #0d2d6e;
	text-decoration: none;
}

.material-card__action:hover {
	text-decoration: underline;
}

.materials-load-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin-top: 40px;
}

.materials-load-more__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 30px;
	background: none;
	border: 1px solid #ff5073;
	border-radius: 1000px;
	font-family: "Futura", Arial, sans-serif;
	font-weight: 400;
	font-size: 20px;
	color: #ff5073;
	cursor: pointer;
	transition: background-color .2s ease;
}

.materials-load-more__btn:hover {
	background-color: rgba(255, 80, 115, .06);
}

.materials-load-more__count {
	font-family: "Futura", Arial, sans-serif;
	font-weight: 400;
	font-size: 16px;
	color: #6b6a6a;
}

/* Планшет: сайдбар с фильтрами перестаёт помещаться рядом с сеткой.
   Убираем его в шторку снизу, как на мобильном, и отдаём всю ширину карточкам. */
@media (max-width: 1200px) {
	.materials-head {
		padding-right: 0;
	}

	.materials-head__btn {
		position: static;
		display: inline-flex;
		margin-top: 20px;
	}

	.materials-toolbar {
		display: none;
	}

	.materials-toolbar-mobile {
		display: flex;
	}

	.materials-filters {
		display: none;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: auto;
		width: 100%;
		max-height: 85vh;
		overflow-y: auto;
		background-color: #fff;
		border: none;
		border-radius: 20px 20px 0 0;
		box-shadow: 0 -8px 30px rgba(0, 0, 0, .15);
		padding: 24px 20px 20px;
		box-sizing: border-box;
		z-index: 1000;
	}

	.materials-filters-toggle-input:checked~.materials-filters {
		display: block;
	}

	.materials-filters-toggle-input:checked~.materials-filters-overlay {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, .4);
		z-index: 999;
	}

	.materials-filters__mobile-head {
		display: flex;
		position: relative;
	}

	.materials-filters__back {
		display: flex;
	}

	.materials-filters__reset {
		display: inline-block;
	}

	.materials-filters__chips {
		display: flex;
	}

	.materials-sort__apply,
	.materials-filters__apply {
		display: block;
		width: 100%;
		margin-top: 20px;
		padding: 12px 30px;
		background-color: #0d2d6e;
		border: none;
		border-radius: 10px;
		font-family: "Futura", Arial, sans-serif;
		font-weight: 400;
		font-size: 20px;
		color: #fff;
		cursor: pointer;
		box-sizing: border-box;
	}

	/* На планшете сортировка остаётся выпадающим списком, «Применить» ей не нужна.
	   Селектор с .materials-sort__panel обязателен: кнопка в шторке фильтров
	   несёт оба класса и по голому .materials-sort__apply тоже пряталась бы. */
	.materials-sort__panel .materials-sort__apply {
		display: none;
	}

	/* «Показать все» открывает полноэкранный список: внутри шторки разворачивать некуда */
	#materialsShowAllDirections:checked~.materials-filter-showall--directions,
	#materialsShowAllCategories:checked~.materials-filter-showall--categories {
		display: flex;
		flex-direction: column;
		position: fixed;
		inset: 0;
		width: 100%;
		height: 100%;
		background-color: #fff;
		padding: 24px 20px 20px;
		box-sizing: border-box;
		z-index: 1100;
		overflow: hidden;
	}

	.materials-filter-showall__head,
	.materials-filter-showall__search {
		flex: 0 0 auto;
	}

	.materials-filter-showall__list {
		flex: 1 1 auto;
		overflow-y: auto;
		margin-bottom: 20px;
	}

	.materials-filter-showall .materials-filters__apply {
		flex: 0 0 auto;
		margin-top: 0;
	}

	.materials-filter__expand-search,
	.materials-filter__extra-list,
	.materials-filter__more--desktop {
		display: none !important;
	}

	/* Флажок «Показать все» мог остаться отмеченным с десктопа — в шторке
	   вложенный скролл не нужен, список и так короткий. */
	.materials-filter__expand-toggle:checked~.materials-filter__scroll {
		max-height: none;
		overflow: visible;
		padding-right: 0;
	}

	.materials-filter__more--mobile {
		display: inline-block;
	}

	.materials-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Шторка на планшете шире мобильной — раскладываем пункты фильтра в колонки,
   иначе один длинный столбец гоняет по вертикали впустую. */
@media (min-width: 768px) and (max-width: 1200px) {

	.materials-filter__list,
	.materials-filter-showall__list {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 15px 20px;
	}
}

@media (min-width: 768px) and (max-width: 900px) {

	.materials-filter__list,
	.materials-filter-showall__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.materials-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 1023px) {
	.materials-tabs {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px 16px;
	}

	.materials-head__title {
		font-size: 32px;
	}
}

/* Мобильная версия — совпадает с брейкпоинтом .main-container (padding 20px) */
@media (max-width: 767px) {
	.materials-page {
		padding: 24px 0 40px;
	}

	.materials-head {
		margin-bottom: 24px;
	}

	.materials-head__title {
		font-size: 24px;
		line-height: 1.17;
		margin-bottom: 10px;
	}

	.materials-head__desc {
		font-size: 14px;
		line-height: 1.4;
		max-width: none;
	}

	/* На мобильном кнопки в шапке нет — по макету */
	.materials-head__btn {
		display: none;
	}

	.materials-tabs {
		gap: 20px 10px;
	}

	.materials-tabs__icon {
		width: 60px;
		margin-bottom: 21px;
	}

	.materials-tabs__name {
		font-size: 12px;
		line-height: 1.3;
	}

	.materials-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Окно сортировки на мобильном — шторка снизу с радиокнопками */
	.materials-sort {
		position: static;
	}

	.materials-sort__panel {
		display: none;
	}

	.materials-sort[open] .materials-sort__panel {
		display: flex;
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: auto;
		width: 100%;
		max-height: 80vh;
		overflow-y: auto;
		border-radius: 20px 20px 0 0;
		padding: 24px 20px 20px;
		box-shadow: 0 -8px 30px rgba(0, 0, 0, .15);
		z-index: 1000;
	}

	.materials-sort[open]::before {
		content: "";
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, .4);
		z-index: 999;
	}

	.materials-sort__mobile-title {
		display: block;
		font-family: "Futura", Arial, sans-serif;
		font-weight: 400;
		font-size: 20px;
		color: #000;
		margin-bottom: 20px;
	}

	.materials-sort__option {
		justify-content: flex-start;
		gap: 15px;
		padding: 10px 0;
		white-space: normal;
	}

	.materials-sort__radio {
		display: block;
		flex: 0 0 auto;
		width: 24px;
		height: 24px;
		border-radius: 50%;
		background-color: #f4f4f4;
		box-sizing: border-box;
	}

	.materials-sort__option.is-active .materials-sort__radio {
		background-color: #fff;
		border: 5px solid #0d2d6e;
	}

	.materials-sort__check {
		display: none;
	}

	/* Здесь сортировка превращается в шторку, поэтому кнопка «Применить» нужна */
	.materials-sort__panel .materials-sort__apply {
		display: block;
	}

	/* Компактные чипы активных фильтров */
	.materials-chip {
		height: 32px;
		padding: 0 6px 0 12px;
		gap: 8px;
		font-size: 13px;
	}

	.materials-chip__close {
		width: 18px;
		height: 18px;
	}

	.materials-chip__close svg {
		width: 8px;
		height: 8px;
	}

	/* Обложка карточки на мобильном — портретная, как на десктопе */
	.material-card__cover {
		aspect-ratio: 233 / 280;
	}

	/* Тип и направление занимают одну строку, остальное идёт с новой.
	   Порядок в разметке другой (тип, название, направление), поэтому
	   переставляем через order, а не правкой шаблона. */
	.material-card__body {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: baseline;
		column-gap: 8px;
		row-gap: 8px;
	}

	.material-card__type {
		order: 1;
		margin-bottom: 0;
	}

	.material-card__direction {
		order: 2;
		margin-bottom: 0;
	}

	/* Точка висит на направлении, а не на типе: если направления нет,
	   разделитель исчезает вместе с ним. */
	.material-card__direction::before {
		content: "•";
		margin-right: 8px;
		font-size: 10px;
		color: #000;
	}

	.material-card__title {
		order: 3;
		flex: 0 0 100%;
		margin: 11px 0 0;
	}

	.material-card__meta {
		order: 4;
		flex: 0 0 100%;
		margin-bottom: 0;
	}

	.material-card__actions {
		order: 5;
		flex: 0 0 100%;
		margin-top: 0;
	}
}

/* ==== Динамика: живой поиск, фильтрация, подгрузка ==== */

/* Скрытые чипы/пункты фильтра/кнопки — hidden должен перебивать display у flex-элементов */
.materials-active-filters[hidden],
.materials-filters__chips[hidden],
.materials-checkbox[hidden],
.materials-load-more[hidden],
.materials-load-more__btn[hidden],
.materials-mobile-btn__badge[hidden] {
	display: none !important;
}

.materials-grid.is-loading {
	opacity: .45;
	pointer-events: none;
	transition: opacity .15s ease;
}

.materials-empty {
	grid-column: 1 / -1;
	padding: 60px 20px;
	text-align: center;
	font-family: "Futura", Arial, sans-serif;
	font-weight: 400;
	font-size: 18px;
	color: #6b6a6a;
}

/* Обложка и заголовок карточки стали ссылками */
a.material-card__cover {
	display: block;
	text-decoration: none;
}

a.material-card__title {
	text-decoration: none;
}

a.material-card__title:hover {
	color: #0d2d6e;
}

.materials-filter-showall__list {
	overscroll-behavior: contain;
}

/* ==== Вкладка «По направлениям»: без сайдбара, с разбивкой по направлениям ==== */

.materials-directions {
	display: flex;
	flex-direction: column;
	gap: 60px;
	margin-top: 50px;
}

.materials-direction__title {
	font-family: "Futura", Arial, sans-serif;
	font-weight: 500;
	font-size: 30px;
	line-height: 1.2;
	color: #000;
	margin: 0 0 25px;
}

.materials-grid--wide {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.materials-direction .materials-load-more {
	margin-top: 30px;
}

@media (max-width: 1400px) {
	.materials-grid--wide {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 1200px) {
	.materials-grid--wide {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.materials-grid--wide {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.materials-directions {
		gap: 40px;
		margin-top: 30px;
	}

	.materials-direction__title {
		font-size: 20px;
		margin-bottom: 20px;
	}

	.materials-grid--wide {
		grid-template-columns: minmax(0, 1fr);
	}
}
/* ==== Ровная сетка карточек (12.11.2026) ====
   Колонки выше заданы как minmax(0, 1fr): обычный 1fr не даёт колонке стать
   уже содержимого, и длинное слово в заголовке («Оториноларингология») или
   широкая картинка расширяли свою колонку. От ширины колонки через
   aspect-ratio зависит высота обложки, поэтому карточки в ряду плыли по высоте,
   а на ноутбуке появлялся горизонтальный скролл. */
.material-card {
	min-width: 0;
}

/* Площадка под картинку одинаковая у всех карточек ряда: ширина = колонка,
   высота = по пропорции 233:280. Картинка вписывается целиком (contain),
   без обрезки, и не может растянуть площадку. */
.material-card__cover {
	min-width: 0;
	max-width: 100%;
	flex: 0 0 auto;
}

.material-card__cover picture,
.material-card__cover img {
	max-width: 100%;
	max-height: 100%;
}

/* Длинные слова в заголовке переносятся по слогам, а не распирают карточку. */
.material-card__title {
	overflow-wrap: break-word;
	-webkit-hyphens: auto;
	hyphens: auto;
}

/* Пагинация убрана 13.11.2026: все материалы выводятся сразу,
   кнопка «Загрузить еще» и счётчик «Показано N из N» не нужны.
   Разметку не удаляем, на неё ссылается materials.js. */
.materials-load-more {
	display: none !important;
}