/**
 * Artikel (single blog post) — template styles.
 *
 * Every rule is scoped under .lct-artikel, so this file cannot affect the
 * Publicaties listing, the Case Study architecture, or any other template.
 * The related-cards block reuses .lct-publications markup and therefore
 * inherits publications.css unchanged — nothing here restyles a card.
 *
 * Values measured from ARTIKEL.png at 1440:
 *   sidebar boxes  416 wide, 32px padding, 50px apart
 *   cream fill     #fbf3ec      navy box  #03224e
 *   bullets/arrows #d78135
 *   box heading    ~24px bold navy
 *   list text      ~16/26 grey
 */

.lct-artikel {
	--lct-art-navy: var( --e-global-color-brand_navy, #03224e );
	--lct-art-orange: var( --e-global-color-brand_orange, #d78135 );
	--lct-art-grey: var( --e-global-color-brand_body_grey, #5a5a60 );
	--lct-art-cream: #fbf3ec;
	--lct-art-radius: 8px;
}

/* ------------------------------------------------------------------
 * Box heading — shared by all three sidebar blocks
 * ------------------------------------------------------------------ */

.lct-artikel .lct-artikel__heading {
	margin: 0 0 22px;
	color: var( --lct-art-navy );
	font-size: 24px;
	line-height: 1.25;
	font-weight: 700;
}

/* ------------------------------------------------------------------
 * Lists — orange bullet, grey label
 * ------------------------------------------------------------------ */

.lct-artikel .lct-artikel__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lct-artikel .lct-artikel__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 0 0 20px;
	margin: 0 0 14px;
	line-height: 26px;
}

.lct-artikel .lct-artikel__item:last-child {
	margin-bottom: 0;
}

/* The bullet is drawn rather than a list-style marker so its colour and size
   are controllable and it aligns with the first text line. */
.lct-artikel .lct-artikel__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var( --lct-art-orange );
}

.lct-artikel .lct-artikel__link {
	color: var( --lct-art-grey );
	font-size: 16px;
	line-height: 26px;
	text-decoration: none;
	transition: color .2s ease;
}

.lct-artikel .lct-artikel__link:hover,
.lct-artikel .lct-artikel__link:focus-visible {
	color: var( --lct-art-navy );
	text-decoration: underline;
}

.lct-artikel .lct-artikel__arrow {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	color: var( --lct-art-orange );
	transition: transform .2s ease;
}

.lct-artikel .lct-artikel__item:hover .lct-artikel__arrow {
	transform: translateX( 3px );
}

/* A per-term colour, when an editor sets one, tints that row's bullet so the
   Thema colour is visible without inventing a palette the design lacks. */
.lct-artikel .lct-artikel__term {
	--lct-term-bg: #eaf2fb;
	--lct-term-fg: #03224e;
}

.lct-artikel .lct-artikel__list--terms .lct-artikel__item:has( .lct-artikel__term[style*="--lct-term-bg"] )::before {
	background-color: var( --lct-art-orange );
}

.lct-artikel .lct-artikel__empty {
	margin: 0;
	color: var( --lct-art-grey );
	font-size: 16px;
}

/* ------------------------------------------------------------------
 * "Verder lezen" — the related grid reuses .lct-publications entirely.
 * Only the outer spacing belongs here.
 * ------------------------------------------------------------------ */

.lct-artikel--cards .lct-publications--related .lct-pub-grid {
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 50px 34px;
}

/* ------------------------------------------------------------------
 * Hero chips — type chip is cream, Thema chips inherit the term colour
 * ------------------------------------------------------------------ */

.lct-artikel-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.lct-artikel-chip {
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	padding: 0 18px;
	border-radius: var( --lct-art-radius, 8px );
	background-color: #eaf2fb;
	color: #03224e;
	font-size: 15px;
	line-height: 1.2;
	text-decoration: none;
	transition: filter .2s ease;
}

.lct-artikel-chip--type {
	background-color: #fbf3ec;
}

a.lct-artikel-chip:hover {
	filter: brightness( .96 );
}

/* ------------------------------------------------------------------
 * Responsive — existing Elementor breakpoints only (mobile 767,
 * mobile_extra 880, tablet 1024, tablet_extra 1200, laptop 1366).
 * No new breakpoint is introduced.
 * ------------------------------------------------------------------ */

@media ( max-width: 1024px ) {
	.lct-artikel--cards .lct-publications--related .lct-pub-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 40px 26px;
	}

	.lct-artikel .lct-artikel__heading {
		font-size: 22px;
		margin-bottom: 18px;
	}
}

@media ( max-width: 767px ) {
	.lct-artikel--cards .lct-publications--related .lct-pub-grid {
		grid-template-columns: minmax( 0, 1fr );
		gap: 26px;
	}

	.lct-artikel .lct-artikel__link {
		font-size: 15px;
	}

	.lct-artikel-chip {
		min-height: 38px;
		padding: 0 14px;
		font-size: 14px;
	}

	.lct-artikel-chips {
		gap: 10px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.lct-artikel .lct-artikel__arrow,
	.lct-artikel .lct-artikel__link,
	.lct-artikel-chip {
		transition: none;
	}
}