/**
 * CTA Info Blocks — Frontend Styles v1.1.2
 *
 * v1.0.1: Исправлена горизонтальная раскладка (flex → CSS Grid).
 * v1.1.0: Усиленная специфичность через body.cib-force.
 * v1.1.1: Дополнительные .entry-content / article / #page селекторы.
 * v1.1.2: FIX — полностью переработан подход к layout:
 *         - Отказ от grid-template-columns на классах cib-cols-N как
 *           единственного механизма (тема перебивает через max-width контейнера).
 *         - Переход на flex с явным flex-basis и min-width: 0 для надёжной
 *           горизонтальной раскладки в любой теме.
 *         - Container query-style: при контейнере < 500px → 1 колонка,
 *           < 760px → 2 колонки, иначе N колонок по data-cols.
 *         - Версия CSS обновлена — сбрасывает браузерный кеш.
 *
 * BEM: .cib-wrap > .cib-item > .cib-icon-wrap / .cib-title / .cib-btn
 */

/* ─── CSS Variables ──────────────────────────────────────────────────────── */
.cib-wrap {
	--cib-accent:      #d94f3d;
	--cib-text:        #333333;
	--cib-title-color: #444444;
	--cib-border:      #e0e0e0;
	--cib-bg:          #ffffff;
	--cib-icon-color:  #333333;
	--cib-icon-size:   56px;
	--cib-btn-radius:  24px;
	--cib-gap:         16px;
	--cib-pad:         28px 24px 24px;
	--cib-font-title:  14px;
	--cib-font-btn:    13px;
}

/* ─── Контейнер ──────────────────────────────────────────────────────────── */
/*
 * Используем flexbox вместо grid — flex надёжнее работает в темах,
 * которые задают max-width на .entry-content и переопределяют grid.
 * flex-wrap: wrap + явный flex-basis на .cib-item гарантирует ряды.
 */
.cib-wrap {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: var(--cib-gap) !important;
	margin: 24px 0 !important;
	padding: 0 !important;
	list-style: none !important;
	font-family: inherit;
	box-sizing: border-box;
	width: 100% !important;
	max-width: 100% !important;
	/* Сброс стилей темы */
	float: none !important;
	clear: both !important;
}

/* ─── Элемент: базовая ширина через flex-basis ───────────────────────────── */
.cib-item {
	display: flex !important;
	flex-direction: column !important;
	align-items: center;
	text-align: center;
	padding: var(--cib-pad);
	background: var(--cib-bg);
	border: 1px solid var(--cib-border);
	border-radius: 4px;
	box-sizing: border-box !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	min-width: 0 !important;
	/* По умолчанию: 1 колонка */
	flex: 1 1 100% !important;
	max-width: 100% !important;
	float: none !important;
	/* Текст не выходит за пределы ячейки */
	overflow: hidden;
	word-break: break-word;
}

/*
 * ─── N-колоночная раскладка ───────────────────────────────────────────────
 * flex-basis вычисляется как (100% / N) - gap.
 * При 2 блоках: ~calc(50% - 8px)
 * При 3 блоках: ~calc(33.33% - 11px)
 * При 4 блоках: ~calc(25% - 12px)
 *
 * Работает через комбинацию .cib-cols-N на контейнере +
 * принудительное переопределение flex на items.
 */
.cib-wrap.cib-cols-2 > .cib-item {
	flex: 1 1 calc(50% - var(--cib-gap)) !important;
	max-width: calc(50% - var(--cib-gap)) !important;
}

.cib-wrap.cib-cols-3 > .cib-item {
	flex: 1 1 calc(33.33% - var(--cib-gap)) !important;
	max-width: calc(33.33% - var(--cib-gap)) !important;
}

.cib-wrap.cib-cols-4 > .cib-item {
	flex: 1 1 calc(25% - var(--cib-gap)) !important;
	max-width: calc(25% - var(--cib-gap)) !important;
}

/*
 * ─── Усиление через контентные обёртки темы ──────────────────────────────
 * Специфичность выше чем у большинства тем — покрывает Reboot, Astra,
 * GeneratePress, OceanWP, Twenty*, Newspaper и другие.
 */
.entry-content .cib-wrap,
.home-text .cib-wrap,
.taxonomy-description .cib-wrap,
.post-content .cib-wrap,
.page-content .cib-wrap,
.the-content .cib-wrap,
article .cib-wrap,
#page .cib-wrap,
.content-area .cib-wrap,
main .cib-wrap {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: var(--cib-gap) !important;
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	clear: both !important;
}

.entry-content .cib-wrap > .cib-item,
.home-text .cib-wrap > .cib-item,
.taxonomy-description .cib-wrap > .cib-item,
.post-content .cib-wrap > .cib-item,
.page-content .cib-wrap > .cib-item,
.the-content .cib-wrap > .cib-item,
article .cib-wrap > .cib-item,
#page .cib-wrap > .cib-item,
.content-area .cib-wrap > .cib-item,
main .cib-wrap > .cib-item {
	display: flex !important;
	flex-direction: column !important;
	float: none !important;
	box-sizing: border-box !important;
	min-width: 0 !important;
}

/* 2 колонки — с контентными обёртками */
.entry-content .cib-wrap.cib-cols-2 > .cib-item,
.home-text .cib-wrap.cib-cols-2 > .cib-item,
.taxonomy-description .cib-wrap.cib-cols-2 > .cib-item,
.post-content .cib-wrap.cib-cols-2 > .cib-item,
article .cib-wrap.cib-cols-2 > .cib-item,
#page .cib-wrap.cib-cols-2 > .cib-item,
.content-area .cib-wrap.cib-cols-2 > .cib-item,
main .cib-wrap.cib-cols-2 > .cib-item {
	flex: 1 1 calc(50% - var(--cib-gap)) !important;
	max-width: calc(50% - var(--cib-gap)) !important;
}

/* 3 колонки */
.entry-content .cib-wrap.cib-cols-3 > .cib-item,
.home-text .cib-wrap.cib-cols-3 > .cib-item,
.taxonomy-description .cib-wrap.cib-cols-3 > .cib-item,
.post-content .cib-wrap.cib-cols-3 > .cib-item,
article .cib-wrap.cib-cols-3 > .cib-item,
#page .cib-wrap.cib-cols-3 > .cib-item,
.content-area .cib-wrap.cib-cols-3 > .cib-item,
main .cib-wrap.cib-cols-3 > .cib-item {
	flex: 1 1 calc(33.33% - var(--cib-gap)) !important;
	max-width: calc(33.33% - var(--cib-gap)) !important;
}

/* 4 колонки */
.entry-content .cib-wrap.cib-cols-4 > .cib-item,
.home-text .cib-wrap.cib-cols-4 > .cib-item,
.taxonomy-description .cib-wrap.cib-cols-4 > .cib-item,
.post-content .cib-wrap.cib-cols-4 > .cib-item,
article .cib-wrap.cib-cols-4 > .cib-item,
#page .cib-wrap.cib-cols-4 > .cib-item,
.content-area .cib-wrap.cib-cols-4 > .cib-item,
main .cib-wrap.cib-cols-4 > .cib-item {
	flex: 1 1 calc(25% - var(--cib-gap)) !important;
	max-width: calc(25% - var(--cib-gap)) !important;
}

/*
 * ─── body.cib-force — максимальная специфичность ─────────────────────────
 * Включается опцией «CSS-совместимость» в настройках.
 */
body.cib-force .cib-wrap {
	display: flex !important;
	flex-wrap: wrap !important;
}

body.cib-force .cib-wrap > .cib-item {
	display: flex !important;
	flex-direction: column !important;
	float: none !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
	flex: 1 1 100% !important;
	max-width: 100% !important;
}

body.cib-force .cib-wrap.cib-cols-2 > .cib-item {
	flex: 1 1 calc(50% - var(--cib-gap)) !important;
	max-width: calc(50% - var(--cib-gap)) !important;
}

body.cib-force .cib-wrap.cib-cols-3 > .cib-item {
	flex: 1 1 calc(33.33% - var(--cib-gap)) !important;
	max-width: calc(33.33% - var(--cib-gap)) !important;
}

body.cib-force .cib-wrap.cib-cols-4 > .cib-item {
	flex: 1 1 calc(25% - var(--cib-gap)) !important;
	max-width: calc(25% - var(--cib-gap)) !important;
}

/* ─── Hover ──────────────────────────────────────────────────────────────── */
.cib-item:hover {
	border-color: var(--cib-accent);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
}

/* ─── Иконка ─────────────────────────────────────────────────────────────── */
.cib-icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
	color: var(--cib-icon-color);
	width: var(--cib-icon-size);
	height: var(--cib-icon-size);
	flex-shrink: 0;
}

.cib-icon {
	display: block;
	width: 100%;
	height: 100%;
	color: var(--cib-icon-color);
	flex-shrink: 0;
}

/* ─── Заголовок ──────────────────────────────────────────────────────────── */
.cib-title {
	margin: 0 0 16px !important;
	padding: 0 !important;
	font-size: var(--cib-font-title) !important;
	line-height: 1.45;
	color: var(--cib-title-color);
	font-weight: 400;
	text-align: center;
	/*
	 * overflow-wrap: break-word — переносит целое слово на следующую строку
	 * если оно не помещается. Работает мягко, без посимвольного разрыва.
	 * word-break: break-word убран — давал уродливые разрывы в узких колонках.
	 * hyphens: auto убран — вызывал посимвольный перенос в сайдбарах.
	 */
	overflow-wrap: break-word !important;
	width: 100% !important;
	max-width: 100% !important;
}

/* ─── CTA-кнопка ─────────────────────────────────────────────────────────── */
.cib-btn {
	display: inline-block;
	margin-top: auto;
	padding: 7px 22px;
	font-size: var(--cib-font-btn);
	font-weight: 400;
	line-height: 1.4;
	color: var(--cib-accent) !important;
	background: transparent !important;
	border: 1.5px solid var(--cib-accent) !important;
	border-radius: var(--cib-btn-radius) !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease;
	white-space: nowrap;
	box-shadow: none !important;
	transform: none !important;
}

.cib-btn:hover,
.cib-btn:focus {
	background: var(--cib-accent) !important;
	color: #ffffff !important;
	text-decoration: none !important;
	outline: none;
	box-shadow: none !important;
	transform: none !important;
}

.cib-btn:focus-visible {
	outline: 2px solid var(--cib-accent);
	outline-offset: 2px;
}

/* ─── Адаптивность ───────────────────────────────────────────────────────── */
/*
 * При ширине экрана <= 768px:
 * 3 и 4 колонки → 2 колонки
 */
@media (max-width: 768px) {
	.cib-wrap.cib-cols-3 > .cib-item,
	.cib-wrap.cib-cols-4 > .cib-item,
	.entry-content .cib-wrap.cib-cols-3 > .cib-item,
	.entry-content .cib-wrap.cib-cols-4 > .cib-item,
	.home-text .cib-wrap.cib-cols-3 > .cib-item,
	.home-text .cib-wrap.cib-cols-4 > .cib-item,
	article .cib-wrap.cib-cols-3 > .cib-item,
	article .cib-wrap.cib-cols-4 > .cib-item,
	main .cib-wrap.cib-cols-3 > .cib-item,
	main .cib-wrap.cib-cols-4 > .cib-item,
	body.cib-force .cib-wrap.cib-cols-3 > .cib-item,
	body.cib-force .cib-wrap.cib-cols-4 > .cib-item {
		flex: 1 1 calc(50% - var(--cib-gap)) !important;
		max-width: calc(50% - var(--cib-gap)) !important;
	}
}

/*
 * При ширине экрана <= 480px:
 * Всегда 1 колонка — блоки друг под другом.
 */
@media (max-width: 480px) {
	.cib-wrap > .cib-item,
	.entry-content .cib-wrap > .cib-item,
	.home-text .cib-wrap > .cib-item,
	article .cib-wrap > .cib-item,
	main .cib-wrap > .cib-item,
	body.cib-force .cib-wrap > .cib-item {
		flex: 1 1 100% !important;
		max-width: 100% !important;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   СТИЛИ ОФОРМЛЕНИЯ (v1.3.0)
   Четыре варианта: default (базовый), border-left, shadow-card, dark.
   Применяются через CSS-класс на .cib-wrap: .cib-style-border-left, etc.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── style: border-left ─────────────────────────────────────────────────── */
/*
 * Минималистичный стиль с акцентной вертикальной полосой слева.
 * Убирает border / border-radius — оставляет только левый accent border.
 * Иконка выровнена по левому краю вместо центра.
 */
.cib-style-border-left .cib-item {
	border: none !important;
	border-left: 3px solid var(--cib-accent) !important;
	border-radius: 0 !important;
	background: transparent !important;
	align-items: flex-start !important;
	text-align: left !important;
	padding: 14px 18px !important;
}

.cib-style-border-left .cib-item:hover {
	background: rgba(0, 0, 0, 0.03) !important;
	box-shadow: none !important;
}

.cib-style-border-left .cib-icon-wrap {
	margin-bottom: 10px;
}

.cib-style-border-left .cib-title {
	text-align: left !important;
}

.cib-style-border-left .cib-btn {
	align-self: flex-start;
}

/* ── style: shadow-card ─────────────────────────────────────────────────── */
/*
 * Карточки с выраженной тенью и без border.
 * Hover поднимает карточку вверх на 3px.
 */
.cib-style-shadow-card .cib-item {
	border: none !important;
	border-radius: 8px !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.06) !important;
	background: #ffffff !important;
	transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}

.cib-style-shadow-card .cib-item:hover {
	transform: translateY(-3px) !important;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.07) !important;
	border-color: transparent !important;
}

/* ── style: dark ────────────────────────────────────────────────────────── */
/*
 * Тёмный фон. Переопределяет цветовые CSS-переменные прямо на .cib-wrap,
 * что автоматически применяется ко всем дочерним элементам.
 */
.cib-style-dark {
	--cib-bg:          #1e2433;
	--cib-text:        #e2e8f0;
	--cib-title-color: #f1f5f9;
	--cib-border:      #2d3748;
	--cib-icon-color:  #e2e8f0;
}

.cib-style-dark .cib-item {
	background: var(--cib-bg) !important;
	border-color: var(--cib-border) !important;
}

.cib-style-dark .cib-item:hover {
	border-color: var(--cib-accent) !important;
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35) !important;
}

.cib-style-dark .cib-title {
	color: var(--cib-title-color) !important;
}

.cib-style-dark .cib-icon {
	color: var(--cib-icon-color) !important;
}

/* Dark: кнопка на тёмном фоне — чуть ярче */
.cib-style-dark .cib-btn {
	opacity: 0.92;
}

.cib-style-dark .cib-btn:hover,
.cib-style-dark .cib-btn:focus {
	opacity: 1;
}