/* iq-tune.css — шар покращень поверх портованої теми (не редагуємо оригінальні файли).
 * 1. Гармонізація растрових обкладинок новин під бренд-палітру: приглушення
 *    насиченості + легкий синій тон, щоб кислотні AI-ілюстрації не сперечалися
 *    з дизайном. Згенеровані SVG-обкладинки (.gen-cover) не чіпаємо.
 * 2. Друк/пререндер: reveal-елементи завжди видимі. */

.news-thumb img,
.art-figure img {
	filter: saturate(0.58) contrast(1.04) brightness(0.94);
}

.news-thumb:has(> img)::after,
.art-figure:has(> img)::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(11, 23, 51, 0.14), rgba(11, 23, 51, 0.3));
	mix-blend-mode: multiply;
	pointer-events: none;
	z-index: 1;
}

.news-thumb {
	position: relative;
}

.art-figure {
	position: relative;
}

.news-thumb .news-badge {
	z-index: 2;
}

/* 3. Головна: спрощені картки галузей і обʼєднана секція «Чому IQusion». */

.iqh-ind-title {
	color: inherit;
	text-decoration: none;
}

.iqh-ind-title:hover {
	color: var(--accent-blue-2);
}

/* процес відділений від переваг повітрям і тонкою лінією */
.iqh-proc--joined {
	margin-top: 3.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--line);
}

/* якірний скрол не ховає надзаголовок під фіксованим хедером */
.iqh-sec {
	scroll-margin-top: 84px;
}

/* повітря між картками: щільна сітка читалась як одна плита */
.iqh .iqh-prod-grid,
.iqh .iqh-ind-grid {
	gap: 1.4rem;
}

/* моно-підписи продуктів були на межі читабельності */
.iqh .iqh-prod-label {
	color: #93a5c0;
}

/* бейдж-лічильник у картці галузі: компактний, притиснутий до низу */
.iqh-ind-card .iqh-ind-actions {
	margin-top: auto;
}

.iqh-ind-card .iqh-ind-btn--primary {
	flex: 0 0 auto;
	width: auto;
}

/* 2b. Display-типографіка: e-Ukraine — офіційний шрифт цифрової держави
   (Мінцифри, CC BY 4.0, self-hosted subset). Заголовки отримують український
   характер; тіло лишається на Inter, моно-деталі — на JetBrains Mono. */
@font-face {
	font-family: "e-Ukraine Head";
	src: url("../../fonts/e-UkraineHead-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "e-Ukraine Head";
	src: url("../../fonts/e-UkraineHead-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "e-Ukraine";
	src: url("../../fonts/e-Ukraine-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* e-Ukraine має максимум Bold(700): важчі ваги дали б штучний faux-bold */
h1,
h2,
.iqh-h1 {
	font-family: "e-Ukraine Head", var(--font-sans);
	font-weight: 700;
	letter-spacing: -0.015em;
}

.iqh-statement {
	font-family: "e-Ukraine", var(--font-sans);
	font-weight: 500;
}

/* 3b. Головна: альтернація фонів секцій — межі читаються при швидкому скролі */
#iqh-pain,
#iqh-industries,
#iqh-projects {
	background: linear-gradient(180deg, var(--bg-section) 0%, var(--bg-section-2) 100%);
}

/* нормальний нуль у моноширинних цифрах (слешований читався як артефакт) */
.mono,
.iqh-kick,
.iqh-ind-btn--primary,
.iqh-proj-date,
.news-card-pubdate {
	font-feature-settings: "zero" 0;
}

/* 3c. Головна: оркестрований motion замість суцільного reveal.
   Каскад появи hero на завантаженні; решта секцій видимі одразу. */
@media (prefers-reduced-motion: no-preference) {
	/* fill-mode: backwards (не forwards!) — після завершення анімації елемент
	   повертається до природних стилів і звільняє композитний шар, інакше
	   background-clip:text на H1 (.iqh-ice) перестає рендеритись у Chromium */
	.iqh-hero-content > * {
		animation: iqh-rise 0.65s cubic-bezier(0.4, 0, 0.2, 1) backwards;
	}

	.iqh-hero-content > :nth-child(1) { animation-delay: 0.05s; }
	.iqh-hero-content > :nth-child(2) { animation-delay: 0.18s; }
	.iqh-hero-content > :nth-child(3) { animation-delay: 0.32s; }
	.iqh-hero-content > :nth-child(4) { animation-delay: 0.46s; }

	@keyframes iqh-rise {
		from { opacity: 0; transform: translateY(14px); }
	}
}

/* 3d. Переваги без декоративної нумерації — акцент-риска замість цифри */
.iqh-adv-item--plain .iqh-adv-body {
	border-left: 2px solid;
	border-image: linear-gradient(180deg, var(--accent), var(--accent-blue)) 1;
	padding-left: 1.1rem;
}

/* 3e. «Галузі» — компактний список замість сітки карток */
.iqh-ind-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.7rem 1.4rem;
}

@media (max-width: 860px) {
	.iqh-ind-list {
		grid-template-columns: 1fr;
	}
}

.iqh-ind-row {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.8rem 1.1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, 0.02);
	transition: border-color var(--t-fast), background var(--t-fast);
}

.iqh-ind-row:hover {
	border-color: rgba(94, 228, 212, 0.28);
	background: rgba(94, 228, 212, 0.05);
}

.iqh-ind-row .iqh-ind-ic {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--c-accent-teal, #14B8A6);
}

.iqh-ind-row .iqh-ind-ic svg {
	width: 22px;
	height: 22px;
}

.iqh-ind-rowbody {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.iqh-ind-rowbody .iqh-ind-title {
	font-size: 0.92rem;
	font-weight: 600;
	color: #fff;
}

.iqh-ind-rowdesc {
	font-size: 0.78rem;
	color: #b4c0d2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.iqh-ind-count {
	flex: 0 0 auto;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	font-feature-settings: "zero" 0;
	color: #9fb3d1;
	text-decoration: none;
	border: 1px solid var(--line);
	border-radius: var(--radius-full);
	padding: 0.35rem 0.7rem;
	white-space: nowrap;
	transition: border-color var(--t-fast), color var(--t-fast);
}

.iqh-ind-count:hover {
	border-color: var(--c-accent-blue);
	color: #fff;
}

/* ритм компактного hero: повітря всередині смуги замість мертвої зони під нею */
.hero--compact {
	padding-bottom: 2.2rem;
}

.hero--compact + .section {
	padding-top: 2.6rem;
}

/* контраст лейблів сайдбара: #C70446 на картці давав 2.2:1 — світлішаємо до AA */
.news-sidebar .side-widget .widget-title {
	color: #ff6e9c;
}

/* 5. Стаття: «дек-смуга» — лід і зміст ПОРУЧ (журнальний розворот).
   Зміст видимий і розгорнутий (якорі для Google), тіло статті починається
   одразу під смугою — текст не розривається. */
/* вертикальний ритм шапки статті */
.single-main .art-title {
	margin-bottom: 0.45rem;
}

.single-main .art-deck {
	display: grid;
	/* ширший лід (мірка ~55-60 знаків), скромніший міжколонник */
	grid-template-columns: minmax(0, 1.28fr) minmax(240px, 0.72fr);
	gap: 1.4rem 2.2rem;
	align-items: start;
	margin: 1.1rem 0 2.6rem;
}

/* ліва колонка дека: дата зверху — її рядок у парі з лейблом «У цій статті» */
.art-deck-main {
	min-width: 0;
}

/* (0,3,0 — перебиває базовий .single-main .art-meta з news.css) */
.single-main .art-deck-main .art-meta {
	margin: 0 0 0.95rem;
}

/* H1 без висячих прийменників у рвазі */
.single-main .art-title {
	text-wrap: balance;
}

.single-main .art-deck--solo {
	grid-template-columns: 1fr;
}

.single-main .art-deck .art-lead {
	margin: 0;
}

/* колонка змісту: без важкої картки — акцентна риска + повітря */
.single-main .art-toc--deck {
	background: transparent;
	border: 0;
	border-left: 2px solid;
	border-image: linear-gradient(180deg, var(--nc, var(--c-accent-blue)), transparent) 1;
	border-radius: 0;
	/* верх лейбла — на одній лінії з рядком дати в лівій колонці */
	padding: 0 0 0.15rem 1.25rem;
	margin: 0;
}

/* один акцент на компонент: лейбл, риска й номери — тематичним кольором */
.single-main .art-toc--deck .eyebrow {
	display: block;
	margin-bottom: 0.65rem;
	color: var(--nc, var(--c-accent-blue));
}

.single-main .art-toc--deck ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.single-main .art-toc--deck li {
	display: flex;
	gap: 0.65rem;
	align-items: baseline;
	padding: 0.36rem 0;
	border-bottom: 1px solid var(--c-border);
}

.single-main .art-toc--deck li:last-child {
	border-bottom: 0;
}

.single-main .art-toc--deck .toc-n {
	color: var(--nc, var(--c-accent-blue));
	font-size: 0.7rem;
	font-feature-settings: "zero" 0;
}

.single-main .art-toc--deck a {
	color: var(--c-fg-secondary);
	font-size: 0.86rem;
	line-height: 1.45;
	text-decoration: none;
}

.single-main .art-toc--deck a:hover {
	color: var(--c-accent-blue);
}

@media (max-width: 880px) {
	.single-main .art-deck {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.single-main .art-toc--deck a {
		font-size: 0.9rem;
	}
}

/* 4. Хіро: полірування без перекомпонування (фонові шари не чіпаємо). */

/* мʼяка вінʼєтка за контентом: гасить крапкове зерно під текстом і CTA
   (container має z-index:7, тож ::before з z-index:-1 ляже над фоном) */
.iqh-hero-content::before {
	content: "";
	position: absolute;
	inset: -2.5rem -4rem -2.5rem -3rem;
	z-index: -1;
	background: radial-gradient(closest-side at 38% 46%,
		rgba(5, 8, 16, 0.55), rgba(5, 8, 16, 0.26) 62%, transparent 100%);
	pointer-events: none;
}

/* фірмова дуга праворуч — трохи присутніша */
.iqh-hero .iqh-art {
	opacity: 0.66;
}

/* повітря між підзаголовком і кнопками; ширший підзаголовок без висячих слів */
.iqh-hero .iqh-sub {
	max-width: 560px;
	margin: 0 0 1.9rem;
}

@media print {
	.reveal {
		opacity: 1 !important;
		transform: none !important;
	}
}