/**
 * Rode kader blok.
 *
 * Mosaic of red cards over a full-bleed background photo with a thin grid
 * overlay. Self-contained block styles, enqueued via acf_register_block_type()
 * so they load in both the editor preview and on the front end.
 *
 * Layout:
 *  - mobile: 2-column staggered mosaic (Figma 73:2677), flush cards, photo crop.
 *  - >=1024px: 4-column mosaic, no gaps; cards snap via --rk-col / --rk-row.
 */

.hrs-rode-kader {
	position: relative;
	overflow: hidden;
	background-color: #161615;
}

/* Full-bleed background photo. */
.hrs-rode-kader__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.hrs-rode-kader__bg-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Content sits above the photo, constrained to the site container width. */
.hrs-rode-kader__inner {
	position: relative;
	z-index: 1;
}

.hrs-rode-kader__grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 0;
	padding-block: 0;
}

/* Photo-band mode (cards toggled off): the grid is empty, so give it a height —
 * otherwise it collapses onto the absolutely-positioned background photo. */
.hrs-rode-kader--no-cards .hrs-rode-kader__grid {
	min-height: 360px;
}

@media ( max-width: 1023px ) {
	.hrs-rode-kader--no-cards .hrs-rode-kader__grid {
		min-height: 360px;
	}

	.hrs-rode-kader:not( .hrs-rode-kader--no-cards ) .hrs-rode-kader__grid {
		min-height: 924px;
	}

	/* Figma 83:4162 — full-bleed photo crop behind the mobile mosaic. */
	.hrs-rode-kader__bg {
		overflow: hidden;
	}

	.hrs-rode-kader__bg-img {
		position: absolute;
		top: 0;
		left: -241.5%;
		width: 417.76%;
		max-width: none;
		height: 100%;
		object-fit: cover;
	}

	.hrs-rode-kader__card {
		grid-column: var( --rk-m-col, auto );
		grid-row: var( --rk-m-row, auto );
	}

	.hrs-rode-kader__card-title {
		font-size: 22px;
		font-weight: 700;
		line-height: 1.2;
		letter-spacing: -0.02em;
	}

	.hrs-rode-kader__card-desc {
		font-size: 15px;
		line-height: 1.5;
	}
}

@media (min-width: 1024px) {
	.hrs-rode-kader__grid {
		/* Canonical chrome columns (336/360/360/368) so the cards grow/shrink to
		 * the same vertical lines as the footer, header and every other block.
		 * The grid sits inside hrs-container (3rem inset), so these fr widths land
		 * exactly on the chrome columns. See chrome-grid-lines memory. */
		grid-template-columns: 336fr 360fr 360fr 368fr;
		grid-auto-rows: minmax(237px, auto);
		grid-auto-flow: row dense;
		gap: 0;
		padding-block: 0;
	}

	.hrs-rode-kader--no-cards .hrs-rode-kader__grid {
		min-height: 560px;
	}
}

/* Decorative grid lines — centre line on mobile, full grid on desktop. */
.hrs-rode-kader__lines {
	display: none;
}

@media ( max-width: 1023px ) {
	.hrs-rode-kader__lines {
		display: block;
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;
	}

	.hrs-rode-kader__line {
		position: absolute;
		inset-block: 0;
		width: 1px;
		background-color: rgb( 255 255 255 / 0.25 );
	}

	.hrs-rode-kader__line--1 {
		left: 0;
	}

	.hrs-rode-kader__line--2,
	.hrs-rode-kader__line--4 {
		display: none;
	}

	.hrs-rode-kader__line--3 {
		left: 50%;
	}

	.hrs-rode-kader__line--5 {
		right: 0;
	}
}

@media (min-width: 1024px) {
	.hrs-rode-kader__lines {
		display: block;
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;
		/* Vertical lines only — the design (Figma 180:5238) has no horizontal row
		 * dividers. The vertical lines are the canonical chrome columns, drawn as
		 * the spans below. */
	}

	/* Vertical lines on the canonical chrome columns. The grid is the content box
	 * (the centred 1520px minus the 3rem hrs-container insets), so these
	 * content-box percentages equal the theme's 336/360/360/368 columns exactly —
	 * they line up with the header, footer and every block. The card grid above
	 * uses the same fr widths, so card edges sit on these lines. */
	.hrs-rode-kader__line {
		position: absolute;
		inset-block: 0;
		width: 1px;
		background-color: rgba(255, 255, 255, 0.25);
	}

	.hrs-rode-kader__line--1 {
		left: 0;
	}

	.hrs-rode-kader__line--2 {
		left: 23.5955%;
	}

	.hrs-rode-kader__line--3 {
		left: 48.8764%;
	}

	.hrs-rode-kader__line--4 {
		left: 74.1573%;
	}

	.hrs-rode-kader__line--5 {
		right: 0;
	}
}

/* Cards. */
.hrs-rode-kader__card {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 0;
	padding: 24px 16px;
	background-color: #dd1a1e;
	color: #ffffff;
	overflow: hidden;
}

@media ( min-width: 1024px ) {
	.hrs-rode-kader__card {
		grid-column: var( --rk-col, auto );
		grid-row: var( --rk-row, auto );
		min-height: 0;
		padding: 40px;
		gap: 1.5rem;
	}
}

.hrs-rode-kader__card-text {
	display: flex;
	flex-direction: column;
	gap: 10px;
	word-break: break-word;
}

.hrs-rode-kader__card-title {
	margin: 0;
	font-family: "Mundial", sans-serif;
	font-weight: 600;
	font-size: 28px;
	line-height: 0.9;
	letter-spacing: -0.02em;
	color: #ffffff;
}

.hrs-rode-kader__card-desc {
	margin: 0;
	font-family: "Mundial", sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.75);
}

/* CTA — "Onze rol" text link with a circled arrow. */
.hrs-rode-kader__cta {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 8px;
	font-family: "Mundial", sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 1;
	color: #ffffff;
	text-decoration: none;
}

.hrs-rode-kader__cta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: 9999px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.hrs-rode-kader__cta-icon svg {
	width: 16px;
	height: 16px;
	transition: transform 0.2s ease;
}

/* Stretched link: the whole card is clickable when the CTA has a URL. */
a.hrs-rode-kader__cta::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}

/* Hover affordance: clickable cards darken slightly and light up their CTA. */
.hrs-rode-kader__card {
	transition: background-color 0.3s ease;
}

.hrs-rode-kader__card:has( a.hrs-rode-kader__cta ):hover {
	background-color: #c41519;
}

.hrs-rode-kader__card:hover a.hrs-rode-kader__cta .hrs-rode-kader__cta-icon {
	background-color: #ffffff;
	color: #dd1a1e;
}

.hrs-rode-kader__card:hover a.hrs-rode-kader__cta .hrs-rode-kader__cta-icon svg {
	transform: translateX(2px);
}

/* Editor-only empty state. */
.hrs-rode-kader__placeholder {
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 3rem 1.5rem;
	text-align: center;
	color: #ffffff;
	font-family: "Mundial", sans-serif;
}