/**
 * Категории com_content: flip-сетка. Селекторы привязаны к .news-flipping-items, без обязательного .items-leading.
 */

/* Родитель flex из template — только там, где реально лежит блок новостей */
.items-leading:has(.news-flipping-items) {
	display: block !important;
	justify-content: initial;
	flex-wrap: initial;
	width: 100%;
	box-sizing: border-box;
}

.realty_items .items-leading:has(.news-flipping-items),
.auto_items .items-leading:has(.news-flipping-items) {
	display: block !important;
}

/* Обёртка: Phoenix даёт margin:-0.625rem и ломает расчёт ширины */
.g-flippingcards-wrapper.news-flipping-items {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	margin: 0 0 1rem 0 !important;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.g-flippingcards-wrapper.news-flipping-items .g-flippingcards-row {
	display: flex;
	flex-flow: row wrap;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	gap: 1rem;
	align-content: flex-end;
	align-items: stretch;
}

/* Реклама между рядами: раньше user_custom / size-100 / вложенный .padding в PHP */
.g-flippingcards-wrapper.news-flipping-items > .flip-category-ad-row {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	border: 1px solid #eee;
	margin-bottom: 7px;
}

.g-flippingcards-wrapper.news-flipping-items > .flip-category-ad-row:hover {
	transition: 0.5s;
	box-shadow: 0 0 10px 0 rgb(50 50 50 / 10%);
}

.g-flippingcards-wrapper.news-flipping-items > .flip-category-ad-row .moduletable {
	margin: 0;
}

.g-flippingcards-wrapper.news-flipping-items > .flip-category-ad-row.flip-category-ad-row--inset {
	background: #fff;
	padding: 15px;
}

/*
 * Карточка в строке: на мобиле без роста по flex; на ПК (columns-3) три колонки и выравнивание по высоте
 * самой высокой карточки в ряду (как particle: flex-row + align-items: stretch).
 */
.g-flippingcards-wrapper.news-flipping-items .g-flippingcards-row > .g-flippingcard.flip-category-card {
	/* из flip.js: меньше inline на корне карточки */
	position: relative;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	border: 0;
	padding: 0;
	margin: 0 !important;
	background: transparent;
	box-sizing: border-box;
	min-width: 0;
	width: 100%;
	max-width: 100%;
	align-self: stretch;
	display: block !important;
	flex: none !important;
}

@media only all and (min-width: 51rem) {
	/*
	 * Grid из трёх колонок: неполный последний ряд (1–2 карточки) не растягивается на всю ширину,
	 * в отличие от flex-grow на дочерних flex-элементах.
	 */
	.g-flippingcards-wrapper.news-flipping-items.g-flippingcards-columns-3 .g-flippingcards-row {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 1rem;
		row-gap: 0;
		align-items: stretch;
		justify-items: stretch;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		margin: 10px 0 !important;
	}

	.g-flippingcards-wrapper.news-flipping-items.g-flippingcards-columns-3
		.g-flippingcards-row
		> .g-flippingcard.flip-category-card {
		min-width: 0 !important;
		width: 100% !important;
		height: auto !important;
		max-width: none !important;
		align-self: stretch !important;
	}

	/*
	 * Лицо не обрезает заголовок: колонка flex, превью сжимается (object-fit: cover),
	 * блок заголовка не участвует в сжатии.
	 */
	.g-flippingcards-wrapper.news-flipping-items .g-flippingcards-front {
		display: flex;
		flex-direction: column;
		min-height: 0;
		box-sizing: border-box;
		padding: 1rem;
		overflow: hidden;
	}

	/* Прямые блоки превью (ссылка с img, заглушка, вакансии-камера) отдают вертикальное место под заголовок */
	.g-flippingcards-wrapper.news-flipping-items .g-flippingcards-front > a.preloader_link,
	.g-flippingcards-wrapper.news-flipping-items .g-flippingcards-front > .g-news-flip-nophoto {
		flex: 1 1 auto;
		min-height: 0;
		overflow: hidden;
	}

	.g-flippingcards-wrapper.news-flipping-items .g-flippingcards-front > a.preloader_link {
		display: block;
	}

	.g-flippingcards-wrapper.news-flipping-items .g-flippingcards-front > a.g-vakansii-flip-nophoto {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.g-flippingcards-wrapper.news-flipping-items .g-flippingcards-front .g-news-flip-thumb {
		width: 100%;
		height: 100%;
		min-height: 0;
		object-fit: cover;
	}

	/*
	 * В общих стилях у заглушек min-height: 12rem — в узкой колонке выбивает заголовок за overflow.
	 */
	.g-flippingcards-wrapper.news-flipping-items .g-flippingcards-front > .g-news-flip-nophoto,
	.g-flippingcards-wrapper.news-flipping-items .g-flippingcards-front > a.g-vakansii-flip-nophoto {
		min-height: 4.5rem;
	}

	.g-flippingcards-wrapper.news-flipping-items .g-flippingcards-front .flip-category-front-poisk-tags {
		flex: 0 0 auto;
		min-width: 0;
	}

	.g-flippingcards-wrapper.news-flipping-items .g-flippingcards-front .g-flippingcards-title {
		flex: 0 0 auto;
		font-size: clamp(0.8125rem, 0.26vw + 0.74rem, 0.9375rem);
		line-height: 1.28;
		margin-top: 0.45rem;
		margin-bottom: 0.35rem;
		overflow: visible;
		overflow-wrap: anywhere;
		word-break: break-word;
		hyphens: auto;
	}

	.g-flippingcards-wrapper.news-flipping-items .g-flippingcards-front .g-flippingcards-title a {
		display: block;
	}
}

/* Оборот карточки: без kat_item / list — нейтральная оболочка + опциональный корень записи */
.g-flippingcards-wrapper.news-flipping-items .flip-category-back-inner {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
}

/*
 * Обе стороны участвуют в расчёте высоты; содержимое оборота не прокручивается отдельно.
 */
.g-flippingcards-wrapper.news-flipping-items .g-flippingcard.flip-category-card .g-flippingcards-back {
	overflow: visible;
}

.g-flippingcards-wrapper.news-flipping-items .flip-category-back-inner h4 {
	margin-top: 0;
	line-height: 1.2em;
	margin-bottom: 0.1em;
}

.g-flippingcards-wrapper.news-flipping-items .flip-category-back-inner .items_tag ul {
	margin: 0;
}

.g-flippingcards-wrapper.news-flipping-items .flip-category-back-intro {
	line-height: 1.2em;
}

.g-flippingcards-wrapper.news-flipping-items .g-flippingcard.flip-category-card .info_service,
.g-flippingcards-wrapper.news-flipping-items .g-flippingcard.flip-category-card .price_service {
	display: block;
	width: 100%;
}

.g-flippingcards-wrapper.news-flipping-items .flip-cat-back {
	position: relative;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.g-flippingcards-wrapper.news-flipping-items .flip-cat-back h4 {
	margin-top: 0;
}

.g-flippingcards-wrapper.news-flipping-items .g-news-flip-thumb {
	width: 100%;
	height: auto;
	display: block;
}

.g-flippingcards-wrapper.news-flipping-items .g-news-flip-nophoto {
	min-height: 12rem;
	background: #ececec;
	border-radius: 0.3rem;
}

.g-flippingcards-wrapper.news-flipping-items .g-vakansii-flip-nophoto {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 12rem;
	background: #ececec;
	border-radius: 0.3rem;
	color: rgba(0, 0, 0, 0.22);
	text-decoration: none;
}

.g-flippingcards-wrapper.news-flipping-items .g-flippingcards-back a.g-flippingcards-button {
	color: #fff;
	text-decoration: none;
	display: inline-block;
}

.g-flippingcards-wrapper.news-flipping-items .g-flippingcards-back .ic_cat a,
.g-flippingcards-wrapper.news-flipping-items .g-flippingcards-back .items_tag a,
.g-flippingcards-wrapper.news-flipping-items .g-flippingcards-back .mini_icons a {
	color: #fff;
}

.g-flippingcards-wrapper.news-flipping-items .g-flippingcards-back .link_category {
	color: rgba(255, 255, 255, 0.85);
}

/*
 * Тема задаёт заголовку на лице color:#000 на фоне #242f3d — заголовок почти не виден.
 */
.g-flippingcards-wrapper.news-flipping-items .g-flippingcards-front .g-flippingcards-title,
.g-flippingcards-wrapper.news-flipping-items .g-flippingcards-front .g-flippingcards-title a {
	color: #fff;
	text-decoration: none;
}

.g-flippingcards-wrapper.news-flipping-items .g-flippingcards-front .g-flippingcards-title a:hover,
.g-flippingcards-wrapper.news-flipping-items .g-flippingcards-front .g-flippingcards-title a:focus {
	color: #f6c167;
	text-decoration: none;
}

/* Заголовок поверх возможных наложений от превью */
.g-flippingcards-wrapper.news-flipping-items .g-flippingcards-front .g-flippingcards-title {
	position: relative;
	z-index: 2;
}

/*
 * === МОБИЛЬНЫЙ БЛОК (должен быть последним) ===
 *
 * Tap-to-flip: flip.init.js на мобиле передаёт trigger='click' + autoSize=false и
 * чистит inline position:absolute на лицах. Оба лица кладём в одну grid-ячейку —
 * высота карточки становится max(front-height, back-height), 3D-flip продолжает
 * работать за счёт perspective/transform-style на самой карточке.
 *
 * Блок намеренно расположен в конце файла, чтобы перекрыть desktop-правила без
 * `!important`-войн (`display: block !important` и `overflow-y: auto` на back).
 */
@media (max-width: 50.99rem) {
	.g-flippingcards-wrapper.news-flipping-items {
		gap: 1rem;
	}

	.g-flippingcards-wrapper.news-flipping-items .g-flippingcards-row {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		align-content: flex-start !important;
		gap: 1rem;
	}

	.g-flippingcards-wrapper.news-flipping-items .g-flippingcards-row > .g-flippingcard.flip-category-card {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		grid-template-rows: auto !important;
		flex: 0 0 auto !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		cursor: pointer;
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
	}

	.g-flippingcards-wrapper.news-flipping-items
		.g-flippingcards-row
		> .g-flippingcard.flip-category-card
		> .g-flippingcards-front,
	.g-flippingcards-wrapper.news-flipping-items
		.g-flippingcards-row
		> .g-flippingcard.flip-category-card
		> .g-flippingcards-back {
		grid-column: 1 / 2 !important;
		grid-row: 1 / 2 !important;
		position: relative !important;
		top: auto !important;
		left: auto !important;
		width: auto !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		min-width: 0;
		box-sizing: border-box;
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
	}

	.g-flippingcards-wrapper.news-flipping-items
		.g-flippingcards-row
		> .g-flippingcard.flip-category-card
		> .g-flippingcards-back {
		overflow-x: hidden !important;
		overflow-y: visible !important;
	}

	.g-flippingcards-wrapper.news-flipping-items
		.g-flippingcards-row
		> .g-flippingcard.flip-category-card
		.g-news-flip-thumb {
		height: auto !important;
		max-height: 14rem;
		object-fit: cover;
	}
}