/* Lijfrente Awards: prijzen met het uiltje, medaillespiegel en stand per scenario. Tokens uit basics.css. */

.awards {
	--aw-uil-blauw: #00ACED;
	--aw-uil-donker: #1B75BA;
	--aw-uil-oranje: #F7941D;
	--aw-goud: #a87a0c;
	--aw-goud-bg: #f6ecd0;
	--aw-zilver: #5f6b7d;
	--aw-zilver-bg: #e7eaf0;
	--aw-brons: #94532a;
	--aw-brons-bg: #f1e2d6;
	--aw-cel: #f3f5f9;
	padding-bottom: 3rem;
}

	.awards .container {
		display: flex;
		flex-direction: column;
		gap: 2.5rem;
	}

		/* de brede tabellen scrollen binnen hun blok in plaats van de pagina op te rekken */
		.awards .container > * {
			min-width: 0;
			max-width: 100%;
		}

	.awards h1 {
		margin: 0.3rem 0 0.8rem;
		color: var(--primary-blue);
		font-family: var(--font-bold);
		font-size: clamp(2rem, 5vw, 3.2rem);
		line-height: 1.05;
	}

	.awards h2 {
		margin: 0 0 0.4rem;
		color: var(--primary-blue);
		font-family: var(--font-bold);
		font-size: var(--font-size-h2);
	}

	.awards p {
		margin: 0 0 0.6rem;
		line-height: 1.55;
	}

/* Kop: tekst links, het uiltje met de trofee rechts */
.awards-kop {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: end;
	gap: 24px;
	padding: 32px 32px 0;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--very-light-blue);
}

	.awards-kop::after {
		content: "";
		position: absolute;
		inset: auto 0 0;
		height: 6px;
		background: linear-gradient(90deg, var(--primary-blue) 0 60%, var(--aw-uil-oranje) 60% 80%, var(--color-green) 80%);
	}

.awards-kop-tekst {
	padding-bottom: 32px;
}

.awards .awards-label {
	margin: 0;
	color: var(--mw-orange);
	font-family: var(--font-bold);
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.awards .awards-intro {
	max-width: 60ch;
	color: var(--mw-ink);
	font-size: 1.1rem;
}

.awards-feiten {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

	.awards-feiten li {
		padding: 6px 14px;
		border-radius: 999px;
		background: var(--mw-card);
		box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
		font-size: 0.95rem;
	}

	.awards-feiten strong {
		color: var(--primary-blue);
		font-family: var(--font-bold);
	}

.awards-uil {
	display: block;
	width: 270px;
	height: auto;
	margin-bottom: 6px;
	transform-origin: 40% 100%;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.awards-kop:hover .awards-uil {
		animation: awards-juich 0.9s ease-in-out;
	}
}

@keyframes awards-juich {
	0%, 100% { transform: rotate(0) translateY(0); }
	25% { transform: rotate(-4deg) translateY(-6px); }
	50% { transform: rotate(3deg) translateY(0); }
	75% { transform: rotate(-2deg) translateY(-3px); }
}

/* Prijzen: witte kaarten met de rozet */
.awards-prijzen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: 20px;
}

.awards-prijs {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px 22px 22px;
	border: 1px solid var(--gray-dark);
	border-top: 6px solid var(--primary-blue);
	border-radius: var(--radius);
	background: var(--mw-card);
	box-shadow: var(--shadow);
}

	.awards-prijs h2 {
		margin: 0;
		padding-right: 64px;
		color: var(--mw-ink);
		font-size: 1.7rem;
		line-height: 1.1;
	}

	.awards .awards-prijs p {
		margin: 0;
	}

.awards-medaille {
	position: absolute;
	top: -14px;
	right: 16px;
	width: 58px;
	height: auto;
	transform: rotate(8deg);
	filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.15));
}

.awards .awards-prijs .awards-categorie {
	padding-right: 64px;
	color: var(--mw-orange);
	font-family: var(--font-bold);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.awards .awards-prijs .awards-product {
	margin-top: -6px;
	color: var(--mw-muted);
	font-size: 0.9rem;
}

.awards-prijs ul {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 4px 0 0;
	padding: 0;
	font-size: 0.95rem;
	line-height: 1.45;
	list-style: none;
}

	.awards-prijs li {
		position: relative;
		padding-left: 22px;
	}

		.awards-prijs li::before {
			content: "";
			position: absolute;
			top: 0.45em;
			left: 2px;
			width: 7px;
			height: 11px;
			border: solid var(--color-green);
			border-width: 0 3px 3px 0;
			transform: rotate(45deg);
		}

/* Blokken met tabellen */
.awards-blok {
	padding: 24px;
	border: 1px solid var(--gray-dark);
	border-radius: var(--radius);
	background: var(--mw-card);
}

	.awards-blok > p {
		max-width: 70ch;
		color: var(--mw-muted);
	}

.awards-scroll {
	position: relative;
	margin-top: 14px;
	overflow-x: auto;
}

.awards table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.awards-medailles th,
.awards-medailles td {
	padding: 10px;
	border-bottom: 1px solid var(--gray-dark);
	text-align: right;
	white-space: nowrap;
}

.awards-medailles th {
	color: var(--mw-muted);
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

	.awards-medailles th:nth-child(2),
	.awards-medailles td:nth-child(2) {
		text-align: left;
	}

.awards-medailles td:first-child {
	width: 28px;
	color: var(--mw-muted);
}

.awards-medailles tr.winnaar td {
	background: var(--very-light-blue);
}

	.awards-medailles tr.winnaar td:nth-child(2) {
		color: var(--primary-blue);
		font-family: var(--font-bold);
	}

.medaille {
	display: inline-grid;
	place-items: center;
	min-width: 30px;
	height: 26px;
	border-radius: 13px;
	font-family: var(--font-bold);
	font-size: 0.85rem;
}

	.medaille.goud { background: var(--aw-goud-bg); color: var(--aw-goud); }
	.medaille.zilver { background: var(--aw-zilver-bg); color: var(--aw-zilver); }
	.medaille.brons { background: var(--aw-brons-bg); color: var(--aw-brons); }
	.medaille.geen { color: var(--mw-muted); opacity: 0.5; }

.awards-tag {
	margin-left: 8px;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--mw-orange);
	color: var(--text-light);
	font-size: 0.65rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	vertical-align: 2px;
}

/* Filter */
.awards-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

	.awards-filter button {
		padding: 8px 14px;
		border: 1px solid var(--gray-medium);
		border-radius: 999px;
		background: var(--mw-card);
		color: var(--mw-ink);
		font-family: var(--font-bold);
		font-size: 0.85rem;
		cursor: pointer;
	}

		.awards-filter button[aria-pressed="true"] {
			border-color: var(--primary-blue);
			background: var(--primary-blue);
			color: var(--text-light);
		}

		.awards-filter button:focus-visible {
			outline: 2px solid var(--mw-orange);
			outline-offset: 2px;
		}

/* Stand per scenario */
.awards-stand {
	font-size: 0.8rem;
}

	.awards-stand th,
	.awards-stand td {
		padding: 0;
		border: 2px solid var(--mw-card);
		text-align: center;
	}

	.awards-stand thead th {
		min-width: 46px;
		padding: 6px 4px;
		color: var(--mw-muted);
		font-weight: normal;
		vertical-align: bottom;
		white-space: nowrap;
	}

	.awards-stand thead tr.groep th {
		border-bottom: 2px solid var(--gray-dark);
		color: var(--primary-blue);
		font-family: var(--font-bold);
		font-size: 0.72rem;
		text-transform: uppercase;
	}

	.awards-stand tbody th {
		position: sticky;
		left: 0;
		z-index: 1;
		padding: 6px 12px 6px 0;
		background: var(--mw-card);
		color: var(--mw-muted);
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
	}

	.awards-stand tr.winnaar th {
		color: var(--primary-blue);
		font-family: var(--font-bold);
	}

	.awards-stand tbody td {
		height: 34px;
		background: var(--aw-cel);
		color: var(--mw-muted);
		font-family: var(--font-bold);
	}

		.awards-stand tbody td.p1 { background: var(--aw-goud-bg); color: var(--aw-goud); }
		.awards-stand tbody td.p2 { background: var(--aw-zilver-bg); color: var(--aw-zilver); }
		.awards-stand tbody td.p3 { background: var(--aw-brons-bg); color: var(--aw-brons); }
		.awards-stand tbody td.nvt { background: transparent; }

	.awards-stand [hidden] {
		display: none;
	}

.awards-legenda {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 12px 0 0;
	padding: 0;
	color: var(--mw-muted);
	font-size: 0.85rem;
	list-style: none;
}

	.awards-legenda li {
		display: inline-flex;
		align-items: center;
		gap: 6px;
	}

	.awards-legenda i {
		display: inline-block;
		width: 14px;
		height: 14px;
		border-radius: 3px;
		background: var(--aw-cel);
	}

		.awards-legenda i.p1 { background: var(--aw-goud-bg); }
		.awards-legenda i.p2 { background: var(--aw-zilver-bg); }
		.awards-legenda i.p3 { background: var(--aw-brons-bg); }
		.awards-legenda i.nvt { background: transparent; border: 1px dashed var(--gray-medium); }

/* Bron en productknop */
.awards-bron {
	padding-top: 16px;
	border-top: 1px solid var(--gray-dark);
	color: var(--mw-muted);
	font-size: 0.9rem;
}

	.awards-bron a {
		color: var(--color-link);
	}

.awards-actie {
	padding: 24px;
	border-radius: var(--radius);
	background: var(--very-light-blue);
}

	.awards-actie a {
		display: inline-block;
		margin-top: 6px;
		padding: 10px 18px;
		border-radius: var(--border-radius);
		background: var(--color-green);
		color: var(--text-light);
		font-family: var(--font-bold);
		text-decoration: none;
	}

@media (max-width: 700px) {
	.awards-kop {
		grid-template-columns: 1fr;
		padding: 24px 18px 0;
	}

	.awards-kop-tekst {
		padding-bottom: 0;
	}

	.awards-uil {
		width: 200px;
		justify-self: end;
		margin-top: -12px;
	}

	.awards-blok {
		padding: 16px 12px;
	}

	.awards-prijs h2 {
		font-size: 1.5rem;
	}
}