/*
 * Sectie: uitgelichte edities.
 * Wordt alleen geladen op pagina's waar deze sectie gerenderd wordt (zie inc/registry.php, sleutel uitgelichte_edities).
 * Kleuren en radius komen uit de variabelen in base.css.
 *
 * Mobiel: één kolom, eyebrow links. Vanaf 48rem: twee kolommen. Vanaf 64rem: vier kolommen en een gecentreerde kop.
 */

.cp-edities {
	background: var(--cp-color-bg);
	padding-block: 1.5rem 2rem;
}

.cp-edities__inner {
	width: min(100% - 2 * var(--cp-gutter), 80rem);
	margin-inline: auto;
}

.cp-edities__header {
	text-align: start;
}

.cp-edities__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin-block-end: 1rem;
	color: var(--cp-color-primary);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cp-edities__eyebrow::before {
	content: "";
	flex: none;
	width: 2rem;
	height: 2px;
	background: var(--cp-color-primary);
}

.cp-edities__title {
	max-width: 56rem;
	color: var(--cp-color-navy);
	font-size: 2.25rem;
	font-weight: 800;
	line-height: 1.1;
}

.cp-edities__accent,
.cp-edities__name-accent {
	color: var(--cp-color-primary);
}

.cp-edities__text {
	max-width: 56rem;
	margin-block-start: 1rem;
	color: rgb(1 28 56 / 0.72);
	font-size: 1.125rem;
	line-height: 1.5;
}

.cp-edities__list {
	display: grid;
	gap: 1.5rem;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

.cp-edities__card {
	height: 100%;
}

.cp-edities__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--cp-color-border);
	border-radius: var(--cp-radius);
	background: var(--cp-color-bg);
	box-shadow: 0 8px 24px rgb(1 28 56 / 0.06);
	color: inherit;
	text-decoration: none;
}

.cp-edities__link:hover {
	color: inherit;
}

.cp-edities__media {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--cp-color-surface);
}

.cp-edities__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cp-edities__card.is-coming-soon .cp-edities__image {
	filter: blur(3px);
	transform: scale(1.05);
}

.cp-edities__overlay {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 1.5rem;
}

.cp-edities__coming-soon {
	max-width: 16rem;
	padding: 0.6rem 1rem;
	border-radius: var(--cp-radius-button);
	background: rgb(255 255 255 / 0.94);
	box-shadow: 0 8px 24px rgb(1 28 56 / 0.12);
	color: var(--cp-color-navy);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
}

.cp-edities__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.5rem;
}

.cp-edities__name {
	color: var(--cp-color-navy);
	font-size: 1.125rem;
	font-weight: 800;
}

.cp-edities__excerpt {
	color: rgb(1 28 56 / 0.7);
	font-size: 0.875rem;
	line-height: 1.5;
}

.cp-edities__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-block-start: auto;
	padding-block-start: 0.75rem;
	color: var(--cp-color-primary);
	font-size: 0.875rem;
	font-weight: 700;
}

.cp-edities__notice {
	margin-block-start: 3rem;
	color: var(--cp-color-navy);
	font-weight: 600;
}

@media (min-width: 48rem) {
	.cp-edities {
		padding-block: 1.5rem 2.5rem;
	}

	.cp-edities__list {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 64rem) {
	.cp-edities__header {
		text-align: center;
	}

	.cp-edities__title,
	.cp-edities__text {
		margin-inline: auto;
	}

	.cp-edities__title {
		font-size: 3rem;
	}

	.cp-edities__accent {
		display: block;
	}

	.cp-edities__list {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.cp-edities__link,
	.cp-edities__cta .cp-icon {
		transition: transform 0.2s ease, box-shadow 0.2s ease;
	}

	.cp-edities__link:hover {
		transform: translateY(-4px);
		box-shadow: 0 16px 32px rgb(1 28 56 / 0.12);
	}

	.cp-edities__link:hover .cp-icon {
		transform: translateX(0.25rem);
	}
}