/*
 * Front-end styles for bsm/image-text.
 *
 * Split-блок: картинка + текст бок о бок (grid 2 колонки).
 *
 * Markup: ../render.php
 * Source: ../../files/10_Projects/bsm_company/05_Brand/design/04-library.html (.content-block)
 *
 * Параметры:
 *   - imagePosition: left (default) | right — расположение картинки
 *   - imageRatio:    1/2 (default) | 2/3 | 1/3 — пропорция image/text
 *
 * CSS-пропорции (grid-template-columns):
 *   1/2: 1fr 1fr      (50/50)
 *   2/3: 2fr 1fr      (image 66%, text 33%)
 *   1/3: 1fr 2fr      (image 33%, text 66%)
 *
 * Mobile: всё в одну колонку, картинка сверху (или снизу — для imagePosition=right).
 */

.bsm-image-text {
	margin: 0;
	padding: 0;
	font-family: inherit;
}

.bsm-image-text__grid {
	display: grid;
	gap: 40px;
	align-items: center;
}

.bsm-image-text--image-right .bsm-image-text__grid {
	direction: rtl;       /* визуально меняет порядок колонок (текст-слева, картинка-справа) */
}

.bsm-image-text--image-right .bsm-image-text__grid > * {
	direction: ltr;       /* внутренний текст идёт слева направо */
}

/* ---- Media (картинка) ---- */

.bsm-image-text__media {
	margin: 0;
}

.bsm-image-text__media img {
	display: block;
	width: 100%;
	height: auto;
	background: var(--bg-soft);   /* placeholder пока грузится */
}

/* ---- Body (текст) ---- */

.bsm-image-text__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

/* Eyebrow — pill, как в bsm/cards */
.bsm-image-text__eyebrow {
	display: inline-block;
	align-self: flex-start;
	padding: 4px 10px;
	background: var(--accent-soft);
	color: var(--accent-strong);
	font-size: 11px;
	font-weight: var(--font-weight-bold);
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.bsm-image-text__title {
	margin: 0;
	font-size: 28px;
	font-weight: var(--font-weight-bold);
	color: var(--navy);
	line-height: 1.2;
	letter-spacing: -0.015em;
}

.bsm-image-text__desc {
	margin: 0;
	font-size: 15px;
	color: var(--text-secondary);
	line-height: 1.6;
}

.bsm-image-text__links {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;            /* чуть больше, чем у кнопок — текстовые ссылки визуально легче */
	margin-top: 4px;       /* небольшой отступ от описания */
}

/* Text-link — как .btn-text в 04-library.html. Прозрачный фон, navy-цвет,
 * стрелочка → через ::after (текст ссылки остаётся чистым — редактор
 * вводит только label, декорация отделена).
 *
 * Структура: <a><span class="link-text">label</span></a>. Span нужен, чтобы
 * подчёркивание шло ТОЛЬКО под текстом, а не под стрелочкой ::after —
 * text-decoration на <a> распространяется на ::after, что Олег отметил
 * как некрасивое 21.09.2026. */
.bsm-image-text__link {
	display: inline-flex;
	align-items: center;
	padding: 4px 0;
	font-weight: var(--font-weight-semibold);
	font-size: 14px;
	color: var(--navy);
	text-decoration: none;        /* не на самой <a> — иначе подчеркнётся и стрелка */
	background: transparent;
	border: none;
	cursor: pointer;
	transition: color 0.15s;
}

.bsm-image-text__link-text {
	border-bottom: 1px solid transparent;  /* резервируем место, без видимой линии */
	transition: border-color 0.15s;
}

.bsm-image-text__link::after {
	content: "→";
	display: inline-block;
	margin-left: 6px;
	font-weight: 700;             /* жирная стрелка — Олег 21.09.2026 */
	font-size: 16px;              /* чуть крупнее текста для визуальной плотности */
	line-height: 1;
	position: relative;
	top: -1px;                    /* поднимаем стрелку на 1px — визуально ровнее с текстом (Олег 21.09.2026) */
	transition: transform 0.15s;
}

.bsm-image-text__link:hover,
.bsm-image-text__link:focus-visible {
	color: var(--accent-strong);
	text-decoration: none;        /* перебивает глобальный a:hover underline из base.css (0,0,1,1 < 0,0,2,1) */
}

.bsm-image-text__link:hover .bsm-image-text__link-text,
.bsm-image-text__link:focus-visible .bsm-image-text__link-text {
	border-bottom-color: currentColor;  /* подчёркивание только текста, не стрелки */
}

.bsm-image-text__link:hover::after,
.bsm-image-text__link:focus-visible::after {
	transform: translateX(2px);
}

/* Primary и Secondary рендерятся одинаково (оба text-link). Классы-mодификаторы
 * оставлены для будущих вариантов (например, если Олег захочет визуально
 * различать их цветом или размером). */
.bsm-image-text__link--primary,
.bsm-image-text__link--secondary {
	/* placeholder для будущих модификаторов */
}

/* ---- Responsive ---- */

/* Планшет: уменьшаем gap и шрифты. */
@media (max-width: 1100px) {
	.bsm-image-text__grid {
		gap: 32px;
	}
	.bsm-image-text__title {
		font-size: 24px;
	}
}

/* Мобильный: одна колонка. */
@media (max-width: 700px) {
	.bsm-image-text__grid {
		grid-template-columns: 1fr !important;
		gap: 24px;
		direction: ltr;       /* сбрасываем RTL на мобиле */
	}

	/* Картинка всегда сверху на мобиле, независимо от imagePosition.
	 * На десктопе для imagePosition=right картинка справа за счёт direction:rtl. */
	.bsm-image-text--image-right .bsm-image-text__media {
		order: -1;
	}

	.bsm-image-text__title {
		font-size: 22px;
	}
}