/**
 * Дополнения к страницам кейсов.
 *
 * Только то, чего нет в собранном style.css:
 *  - подзаголовок раздела «Дополнительный интерфейс»;
 *  - плотная подача нескольких крупных изображений подряд.
 *
 * Базовая типографика и сетка не трогаются — они уже собраны в теме.
 */

/* ---------- подзаголовок раздела ---------- */

/* когда под заголовком есть строка-уточнение, отступ у заголовка меньше */
.additional-interface__title--with-sub {
	margin-bottom: 1.25rem;
}

.additional-interface__subtitle {
	width: 100%;
	margin: 0 0 3.75rem;
	text-align: center;
	font-family: Unbounded, sans-serif;
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #111315;
}

/* ---------- логотип проекта ---------- */

/*
 * Логотип в правой ячейке блока описания был прижат к верху.
 *
 * Причина: его контейнер позиционировался фиксированным отрицательным
 * отступом сверху (top: -3.5rem), подобранным под высоту одного конкретного
 * логотипа. У квадратных логотипов это давало центр случайно, а у широких —
 * например «ДОМАРИКС» с пропорцией 4.4:1 — центр уезжал на 106px вверх.
 *
 * Теперь центр считается геометрически и не зависит от пропорций файла:
 * логотип любой формы стоит по центру рамки, размеры по ширине остаются
 * теми, что задаёт тема на каждом брейкпоинте.
 */
.case-description-logo__icon {
	top: 50%;
	bottom: auto;
	height: auto;
	/* на узких экранах широкий логотип вылезал за рамку — держим в её ширине */
	max-width: 100%;
	-webkit-transform: translateY(-50%);
	    -ms-transform: translateY(-50%);
	        transform: translateY(-50%);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}

.case-description-logo__icon .icon {
	width: 100%;
	height: auto;
}

/* пропорции файла сохраняются, логотип не растягивается */
.case-description-logo__icon .icon img {
	width: 100%;
	height: auto;
	max-height: 100%;
}


/*
 * Ниже 992px у контейнера логотипа задана фиксированная высота, а картинка
 * по умолчанию тянется под неё целиком (object-fit: fill) — широкие логотипы
 * сплющивало. Пропорции сохраняем, логотип остаётся по центру рамки.
 */
.case-description-logo__icon .icon img {
	-o-object-fit: contain;
	   object-fit: contain;
}

/* ---------- несколько крупных изображений подряд ---------- */

/*
 * Секция крупного изображения рассчитана на одиночное появление и держит
 * по 4.375rem сверху и снизу. Когда экраны идут серией, двойной отступ
 * разрывает рассказ — верхний убираем, шаг задаёт нижний отступ соседа.
 */
.case-page-image + .case-page-image {
	padding-top: 0;
}

@media (max-width: 1280px) {
	.additional-interface__subtitle {
		font-size: 1.25rem;
		margin-bottom: 2.5rem;
	}

	.additional-interface__title--with-sub {
		margin-bottom: 1rem;
	}
}

@media (max-width: 992px) {
	.additional-interface__subtitle {
		font-size: 1.125rem;
	}
}

@media (max-width: 576px) {
	.additional-interface__subtitle {
		font-size: 0.875rem;
		margin-bottom: 1.875rem;
		letter-spacing: 0.01em;
	}

	.additional-interface__title--with-sub {
		margin-bottom: 0.625rem;
	}
}

/* ---------- обложка кейса: одна <picture> под все брейкпоинты ---------- */

/* Внутри <picture> картинка снова inline: под ней появлялась строка в 5px
   (descender), и весь блок был выше, чем с прежними <img> прямо во flex-боксе. */
.case-main-image-picture picture {
	display: block;
	width: 100%;
}

.case-main-image-picture img {
	display: block;
}