/**
 * Страница «Обо мне».
 *
 * Файл называется styles.min.css, потому что модуль customs подключает
 * именно такое имя, но содержимое намеренно не минифицировано: собирать
 * SCSS в проекте нечем, а читать и править этот файл придётся руками.
 *
 * Классы с префиксом about — общие имена вроде .intro или .card
 * в теме Knife уже заняты.
 */

/**
 * Ширина.
 *
 * Тема задаёт каждому прямому потомку `.entry-content` ширину 40rem —
 * это её колонка для текста статьи. Для блока «фото слева, текст справа»
 * этого мало, поэтому перебиваем: селектор из двух классов специфичнее
 * темовского `.entry-content > *`.
 *
 * 78rem — та же предельная ширина, что у архивов и заголовков рубрик
 * (`.caption`, `.archive`), чтобы страница не выбивалась из сайта.
 */
.entry-content > .about-section {
	width: 100%;
	max-width: 78rem;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 3.5rem;
}

.about-section__title {
	margin: 0 0 1.5rem;
	font-size: 1.75rem;
	line-height: 1.2;
}

/* ============================================================
   Блок 1. Фото слева, текст справа
   ============================================================ */

.about-intro {
	display: grid;
	/* Текст ограничен 42rem: на всю ширину строка становится
	   слишком длинной, глаз теряет начало следующей. */
	grid-template-columns: minmax(0, 24rem) minmax(0, 42rem);
	gap: 3rem;
	align-items: start;
	justify-content: start;
}

/* Селектор с .entry-content обязателен: тема даёт всем figure внутри
   содержимого отступ сверху 2rem, и фото уезжало ниже заголовка. */
.entry-content .about-intro__photo {
	margin: 0;
	line-height: 0;
}

.about-intro__photo img {
	width: 100%;
	height: auto;
	border-radius: 0.75rem;
}

.about-intro__text {
	font-size: 1.0625rem;
	line-height: 1.6;
}

.about-intro__text h1 {
	margin: 0 0 1rem;
	font-size: 2.5rem;
	line-height: 1.15;
}

.about-intro__text h2 {
	margin-top: 0;
}

.about-intro__text p {
	margin: 0 0 1rem;
}

.about-intro__text p:last-child {
	margin-bottom: 0;
}

/* ============================================================
   Блок 2. Лента дипломов
   ============================================================ */

.about-diplomas {
	position: relative;
}

.about-diplomas__track {
	display: flex;
	gap: 1.25rem;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;

	/* Место под тень карточек, иначе она обрезается при прокрутке. */
	padding: 0.5rem 0 1.25rem;

	/* Полосу прокрутки прячем: листают стрелками и свайпом. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.about-diplomas__track::-webkit-scrollbar {
	display: none;
}

.about-diplomas__item {
	flex: 0 0 16rem;
	scroll-snap-align: start;
	margin: 0;
}

.about-diplomas__item img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0.5rem;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.about-diplomas__caption {
	margin-top: 0.6rem;
	font-size: 0.9375rem;
	line-height: 1.35;
	color: #4a5761;
}

.about-diplomas__nav {
	display: flex;
	gap: 0.75rem;
	justify-content: flex-end;
	margin-top: 0.5rem;
}

.about-diplomas__button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;

	font-size: 1.25rem;
	line-height: 1;
	color: #11769c;

	background-color: #fff;
	border: solid 1px #d5e3f0;
	border-radius: 50%;
	cursor: pointer;

	transition: background-color 0.2s, color 0.2s, opacity 0.2s;
}

.about-diplomas__button:hover:not([disabled]) {
	color: #fff;
	background-color: #11769c;
	border-color: #11769c;
}

.about-diplomas__button[disabled] {
	opacity: 0.35;
	cursor: default;
}

/* ============================================================
   Блок 3. Новости и события
   ============================================================ */

.about-news {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
	gap: 1.5rem;
}

.about-news__item {
	display: flex;
	flex-direction: column;
	padding: 1.5rem;

	background-color: #f1f8ff;
	border-radius: 0.75rem;
}

.about-news__date {
	margin-bottom: 0.5rem;
	font-size: 0.875rem;
	color: #5b6b76;
}

.about-news__title {
	margin: 0 0 0.5rem;
	font-size: 1.125rem;
	line-height: 1.3;
}

.about-news__text {
	margin: 0;
	line-height: 1.5;
	color: #4a5761;
}

/* ============================================================
   Заглушки на время наполнения
   ============================================================ */

.about-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;

	min-height: 12rem;
	padding: 1rem 2rem;

	font-size: 0.9375rem;
	line-height: 1.4;
	text-align: center;
	color: #7c8b96;

	background-color: #eef2f6;
	border: dashed 2px #c8d5de;
	border-radius: 0.75rem;
}

/**
 * Текст внутри заглушки.
 *
 * Обёртки нет намеренно: <span> тема вырезает из содержимого при сохранении
 * (content-filters.php, remove_span), а <br> в flex-контейнере браузеры
 * разбивают на отдельные элементы — строки наезжали друг на друга.
 * Поэтому текст идёт одной строкой и переносится сам по max-width.
 */

.about-intro__photo .about-placeholder {
	min-height: 28rem;
}

.about-diplomas__item .about-placeholder {
	min-height: 14rem;
}

@media screen and (max-width: 1023px) {
	.about-intro {
		grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
		gap: 2rem;
	}
}

@media screen and (max-width: 767px) {
	.about-intro {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.about-intro__text h1 {
		font-size: 2rem;
	}

	.about-intro__photo .about-placeholder {
		min-height: 18rem;
	}

	.about-diplomas__item {
		flex-basis: 13rem;
	}
}