/* ==========================================================================
   1.1 — Список матеріалів  (/dovidka/)
   Підключається окремо, main.min.css не змінюється.
   ========================================================================== */

/* --- каркас сторінки -------------------------------------------------- */
/* Контент розтягується на всю вільну висоту, футер — по вмісту (min-content),
   завдяки чому відступ від пагінації до футера завжди однаковий. */

body.dovidka {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	min-height: 100vh;
}

/* width:100% обов'язковий: у флекс-колонці margin:0 auto з .container
   спрацював би як auto-margin флекс-елемента і стиснув би його по вмісту */
body.dovidka > .container {
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	width: 100%;
}

body.dovidka > .container.main-container {
	-ms-flex: 1 0 auto;
	flex: 1 0 auto;
	width: 100%;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
}

/* штатний #footer має жорсткі height:200px і position:sticky —
   на цій сторінці він має займати рівно висоту свого вмісту */
body.dovidka #footer {
	height: -webkit-min-content;
	height: -moz-min-content;
	height: min-content;
	margin-bottom: 0;
	position: relative;
	padding-top: 20px;
}

/* лінія коротша за #footer — вирівнюємо її по внутрішніх відступах
   колонок (.col-footer-left/-right мають padding 20px), а не по краю блоку */
body.dovidka #footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 20px;
	right: 20px;
	height: 1px;
	background-color: #e0e0e0;
}

body.dovidka #main-content {
	-ms-flex: 1 0 auto;
	flex: 1 0 auto;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
}

/* Контентна колонка на цій сторінці керує своїми відступами сама,
   тому гасимо асиметричні паддінги .col-main з main.min.css */
.col-main.big.materials-page {
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
	height: 100%;
	-ms-flex: 1 0 auto;
	flex: 1 0 auto;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
}

/* вільну висоту забирає список, а не проміжок перед футером */
.materials {
	display: block;
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
	padding: 40px 0;
	box-sizing: border-box;
	-ms-flex: 1 0 auto;
	flex: 1 0 auto;
}

.materials .materials-title {
	margin: 0 0 16px;
	font-size: 32px;
	line-height: 36px;
	font-weight: bold;
	color: #000;
}

.materials .materials-intro {
	margin: 0 0 32px;
	font-size: 16px;
	line-height: 24px;
	color: #596376;
}

/* --- список ---------------------------------------------------------- */

/* За макетом картка має власний вертикальний паддінг 10px, а зазор між
   картками — теж 10px (сумарно 30px «повітря» між вмістом сусідніх карток).
   Від'ємні margin-и гасять паддінг крайніх карток, щоб зовнішні відступи
   списку (до вступного абзацу і до пагінації) лишались такими, як у макеті. */
.materials-list {
	margin: -10px 0;
	padding: 0;
	list-style: none;
}

.material-item {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 16px;
	padding: 10px 0;
	margin-bottom: 10px;
}

.material-item:last-child {
	margin-bottom: 0;
}

/* обкладинка */

.material-item .material-cover {
	-ms-flex-negative: 0;
	flex-shrink: 0;
	width: 128px;
	display: block;
}

.material-item .material-cover img {
	display: block;
	width: 100%;
	height: auto;
	-webkit-box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}

.material-item .material-cover:hover {
	border: none;
}

/* текстова частина */

.material-item .material-body {
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	min-width: 0;
}

.material-item .material-title {
	margin: 0 0 16px;
	font-size: 21px;
	line-height: 28px;
	font-weight: bold;
}

.material-item .material-title a {
	color: #000;
	text-decoration: none;
}

.material-item .material-title a:hover {
	color: #41a88a;
	border-bottom: none;
}

.material-item .material-text {
	margin: 0 0 16px;
	font-size: 16px;
	line-height: 16px;
	color: #596376;
}

/* кнопка «Завантажити» */

/* кнопка — самостійний компонент: використовується і в картці, і в героєві 2.1 */
.material-download {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	/* за макетом: паддінги 8/10, висота 34px, підпис 16px з line-height 100% */
	height: 34px;
	padding: 8px 10px;
	border: 1px solid #41a88a;
	background-color: #fff;
	color: #41a88a;
	font-size: 16px;
	line-height: 16px;
	text-decoration: none;
	box-sizing: border-box;
}

/* іконка за макетом 24x24 — вона більша за рядок підпису і виступає
   в паддінги кнопки, тому висоту кнопки (34px) не збільшує */
.material-download .icon {
	-ms-flex-negative: 0;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	margin-right: 8px;
	display: block;
}

.material-download:hover {
	background-color: #41a88a;
	border: 1px solid #41a88a;
	color: #fff;
}

/* --- пагінація --------------------------------------------------------- */
/* Використовується штатний компонент .paginator з main.min.css.
   Тут лише розкладка (щоб відступ до футера був рівно 150px)
   та залита неактивна стрілка за макетом. */

.materials-paginator {
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	margin: 0 0 150px;
	padding: 0 20px;
	box-sizing: border-box;
}

.materials-paginator .pages {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 9px;
	list-style: none;
}

/* .clear::after у флекс-контейнері стає флекс-елементом і ламає висоту рядка */
.materials-paginator .pages:after {
	display: none;
}

/* розмір комірки за макетом — 34x34 (штатний компонент 27x27) */
.materials-paginator .pages li > span,
.materials-paginator .pages li > a {
	width: 34px;
	height: 34px;
	line-height: 33px;
	margin-right: 0;
	margin-bottom: 0;
}

/* неактивна стрілка — залита сірим, як у макеті */
.materials-paginator .pages li.rew > span,
.materials-paginator .pages li.fwd > span {
	background-color: #c8c8c8;
	border-color: #c8c8c8;
	color: #fff;
}

/* ==========================================================================
   2.1 — Сторінка матеріалу  (/dovidka/viditestiv/9/)
   Секція «Дивіться також» — це той самий .materials-list з 1.1,
   тому нижче лише блок-герой, роздільник і заголовок секції.
   ========================================================================== */

/* герой не розтягується — вільну висоту забирає секція «Дивіться також»,
   щоб футер лишався притиснутим донизу */
.material-single {
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
}

.material-hero {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: start;
	align-items: flex-start;
	gap: 30px;
}

.material-hero .material-hero-cover {
	-ms-flex-negative: 0;
	flex-shrink: 0;
	width: 270px;
	display: block;
}

.material-hero .material-hero-cover img {
	display: block;
	width: 100%;
	height: auto;
	-webkit-box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}

.material-hero .material-hero-body {
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	min-width: 0;
}

.material-hero .material-hero-title {
	margin: 0 0 10px;
	font-size: 32px;
	line-height: 36px;
	font-weight: bold;
	color: #000;
}

.material-hero .material-hero-text {
	margin: 0 0 30px;
	font-size: 14px;
	line-height: 18px;
	color: #596376;
}

.material-hero .material-download {
	min-width: 206px;
	min-height: 44px;
	-ms-flex-pack: center;
	justify-content: center;
}

/* роздільник на всю ширину контейнера, а не колонки контенту */
.materials-divider {
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	height: 1px;
	background-color: #e0e0e0;
}

/* Відступ до футера — такий самий, як від пагінації на 1.1.
   Селектор подвійний, щоб не перебивався правилами .materials у медіазапитах. */
.materials.materials-related {
	padding-bottom: 150px;
}

.materials-related-title {
	margin: 0 0 24px;
	font-size: 24px;
	line-height: 32px;
	font-weight: bold;
	color: #000;
}

/* --- планшет: контент на всю ширину ----------------------------------- */

@media screen and (max-width: 768px) {
	.materials {
		max-width: none;
		padding: 40px 20px;
	}

	.materials .materials-title {
		margin-bottom: 14px;
	}
}

/* --- 2.1: герой перебудовується в колонку ------------------------------ */

@media screen and (max-width: 620px) {
	.material-hero {
		-ms-flex-direction: column;
		flex-direction: column;
		gap: 24px;
	}

	.material-hero .material-hero-cover {
		max-width: 100%;
	}

	.material-hero .material-hero-body {
		width: 100%;
	}

	/* кнопка на всю ширину колонки — лише в героєві, картки не чіпаємо */
	.material-hero .material-download {
		display: -ms-flexbox;
		display: flex;
		-ms-flex-pack: center;
		justify-content: center;
		width: 100%;
	}
}

/* роздільник вкорочується лише в смузі 600 — на мобільній він знову на всю ширину */
@media screen and (min-width: 461px) and (max-width: 620px) {
	.materials-divider {
		/* width обов'язковий: auto-margin скасовує розтягування флекс-елемента,
		   і порожній div схлопнувся б у нуль */
		width: 100%;
		max-width: 360px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* --- мобільна ---------------------------------------------------------- */

@media screen and (max-width: 460px) {
	/* бічний відступ за фреймом 360px: контент 340px, отже по 10px з боків */
	.materials {
		padding: 40px 10px;
	}

	.materials-paginator {
		padding: 0 10px;
	}

	/* 8 комірок по 34px не вміщуються в 360px із зазором 9px —
	   зменшуємо зазор, щоб пагінація лишилась в один рядок */
	.materials-paginator .pages {
		gap: 8px;
	}

	.materials .materials-title {
		font-size: 28px;
		line-height: 34px;
	}

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

	.material-item .material-cover {
		width: 110px;
	}

	.material-item .material-cover img {
		height: 156px;
	}

	.material-item .material-title {
		font-size: 16px;
		line-height: 22px;
		margin-bottom: 10px;
	}

	/* за макетом опис на мобільній не показуємо */
	.material-item .material-text {
		display: none;
	}

}