/* ==========================================================================
   Uitgelichte punten op een foto
   Een foto met plusjes erop. Klik een plusje aan en het detail klapt open.
   Op een breed scherm zweeft het detail naast het punt, op een telefoon komt
   het onder de foto te staan: daar is geen ruimte om overheen te leggen.
   ========================================================================== */

.stc-hs {
	--hs-navy: #00394d;
	--hs-teal: #00b7be;
	--hs-grey: #f1f2f4;
	margin: var(--mediumlarge, 40px) 0;
}

.stc-hs__kop {
	margin: 0 0 6px;
}

.stc-hs__intro {
	margin: 0 0 var(--medium, 24px);
	color: rgba(0, 57, 77, 0.72);
	max-width: 70ch;
}

.stc-hs__frame {
	position: relative;
	/* Bij een staande foto zet het blok zelf een maximale breedte, zodat de
	   afbeelding niet loodrecht hoog wordt. Bij een liggende foto staat er
	   niets en blijft het kader gewoon zo breed als de kolom. */
	max-width: var(--hs-kader, 100%);
	margin-left: auto;
	margin-right: auto;
}

/* De foto zelf, met de plusjes eroverheen. Losgehouden van het detail, zodat
   een openklappend detail de punten niet verschuift. */
.stc-hs__beeld {
	position: relative;
	border-radius: 15px;
	overflow: hidden;
	background: var(--hs-grey);
}

.stc-hs__foto {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------- De plusjes ---------- */

.stc-hs__punt {
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(-50%, -50%);
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--hs-navy);
	color: #ffffff;
	box-shadow: 0 2px 12px rgba(0, 22, 30, 0.3);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font: inherit;
	line-height: 1;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
	z-index: 2;
}

.stc-hs__punt::before,
.stc-hs__punt::after {
	content: "";
	position: absolute;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.2s ease;
}

.stc-hs__punt::before {
	width: 17px;
	height: 2.5px;
}

.stc-hs__punt::after {
	width: 2.5px;
	height: 17px;
}

.stc-hs__punt:hover,
.stc-hs__punt:focus-visible {
	background: var(--hs-teal);
	color: #ffffff;
	transform: translate(-50%, -50%) scale(1.12);
	outline: none;
}

.stc-hs__punt:focus-visible {
	box-shadow: 0 0 0 3px rgba(0, 183, 190, 0.45), 0 2px 10px rgba(0, 22, 30, 0.28);
}

/* Het geopende punt blijft onder het ballonnetje: anders staat de marker
   midden in de tekst. Sluiten kan met het kruisje in het ballonnetje, ergens
   anders klikken of Escape. */
.stc-hs__punt.is-open {
	background: var(--hs-teal);
	color: #ffffff;
}

/* Open staat: het plusje draait naar een kruisje om te sluiten. Beide streepjes
   45 graden: de horizontale komt op 45, de verticale op 135. */
.stc-hs__punt.is-open::before,
.stc-hs__punt.is-open::after {
	transform: rotate(45deg);
}

/* Een rustige puls, zodat een bezoeker ziet dat er iets te klikken valt. */
.stc-hs__ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var(--hs-navy);
	opacity: 0;
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
	.stc-hs__punt:not(.is-open) .stc-hs__ring {
		animation: stc-hs-puls 2.8s ease-out infinite;
		animation-delay: var(--vertraging, 0s);
	}
}

@keyframes stc-hs-puls {
	0% {
		transform: scale(1);
		opacity: 0.7;
	}
	70%,
	100% {
		transform: scale(1.9);
		opacity: 0;
	}
}

/* ---------- Het detail ---------- */

/* Een klein ballonnetje naast het punt: kop en een of twee zinnen. */
.stc-hs__detail {
	position: absolute;
	z-index: 3;
	width: max-content;
	max-width: min(250px, 74%);
	border-radius: 12px;
	overflow: hidden;
	background: #ffffff;
	box-shadow: 0 8px 24px rgba(0, 22, 30, 0.24);
	color: var(--hs-navy);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

/* Met een foto erin krijgt het ballonnetje een vaste breedte; anders zou het
   zo breed worden als de foto zelf. */
.stc-hs__detail--met-foto {
	width: min(290px, 78%);
	max-width: min(290px, 78%);
}

.stc-hs__detail--met-foto .stc-hs__sluit {
	background: rgba(255, 255, 255, 0.92);
	color: var(--hs-navy);
	box-shadow: 0 1px 4px rgba(0, 22, 30, 0.2);
}

/* De detailfoto bovenin het ballonnetje, met de tekst als apart blok eronder. */
.stc-hs__detail-beeld {
	margin: 0;
	aspect-ratio: 16 / 10;
	background: var(--hs-grey);
	border-bottom: 1px solid rgba(0, 57, 77, 0.08);
	overflow: hidden;
}

/* Het thema heeft eigen afbeeldingsregels met meer gewicht; daarom hier de
   volledige keten, anders vult de foto het vlak niet. */
.stc-hs .stc-hs__detail .stc-hs__detail-beeld img.stc-hs__detail-foto {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border-radius: 0;
}

.stc-hs__detail-body {
	padding: 12px 14px;
}

.stc-hs__detail.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.stc-hs__detail-nr {
	display: block;
	margin-bottom: 2px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.16em;
	color: var(--hs-teal);
}

.stc-hs__detail-titel {
	margin: 0 0 4px;
	padding-right: 14px;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.25;
}

.stc-hs__detail-tekst {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.45;
	color: rgba(0, 57, 77, 0.75);
}

.stc-hs__sluit {
	position: absolute;
	top: 4px;
	right: 4px;
	z-index: 2;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: rgba(0, 57, 77, 0.7);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.stc-hs__sluit:hover {
	background: var(--hs-grey);
	color: var(--hs-navy);
}

/* ---------- Onderschrift ---------- */

.stc-hs__hint {
	margin: var(--small, 14px) 0 0;
	color: rgba(0, 57, 77, 0.6);
	font-size: 14px;
}

/* ---------- Mobiel ----------
   Het ballonnetje blijft ook hier op de foto staan; het is klein genoeg. */

@media (max-width: 767px) {
	.stc-hs__punt {
		width: 32px;
		height: 32px;
	}

	.stc-hs__punt::before {
		width: 13px;
		height: 2px;
	}

	.stc-hs__punt::after {
		width: 2px;
		height: 13px;
	}

	/* Smal genoeg om naast het punt te passen in plaats van eroverheen. */
	.stc-hs__detail {
		max-width: 62%;
	}

	.stc-hs__detail--met-foto {
		width: 78%;
		max-width: 78%;
	}

	/* Iets lager dan 16:10, zodat het ballonnetje binnen de overzichtsfoto
	   blijft passen. */
	.stc-hs__detail-beeld {
		aspect-ratio: auto;
		height: 100px;
	}

	.stc-hs__detail-body {
		padding: 10px 12px;
	}

	.stc-hs__detail-titel {
		font-size: 14px;
	}

	.stc-hs__detail-tekst {
		font-size: 13px;
	}
}


/* ---------- Groot scherm ----------
   Op een telefoon vult de foto het scherm en is het ballonnetje bijna zo breed
   als de foto. Op een desktop viel datzelfde ballonnetje weg op een foto van
   bijna duizend pixels. Hier krijgt het blok dus meer ruimte: de foto komt iets
   buiten de tekstkolom en het ballonnetje en de plusjes groeien mee.
   ---------------------------------------------------------------------- */

@media (min-width: 992px) {
	.stc-hs {
		margin: var(--large, 60px) 0;
	}

	.stc-hs__intro {
		font-size: 1.05rem;
	}

	.stc-hs__punt {
		width: 48px;
		height: 48px;
	}

	.stc-hs__punt::before {
		width: 19px;
	}

	.stc-hs__punt::after {
		height: 19px;
	}

	.stc-hs__detail {
		max-width: min(360px, 48%);
		border-radius: 14px;
	}

	.stc-hs__detail--met-foto {
		width: min(400px, 52%);
		max-width: min(400px, 52%);
	}

	.stc-hs__detail-body {
		padding: 16px 18px 18px;
	}

	.stc-hs__detail-nr {
		margin-bottom: 4px;
		font-size: 11px;
	}

	.stc-hs__detail-titel {
		margin-bottom: 6px;
		padding-right: 18px;
		font-size: 18px;
	}

	.stc-hs__detail-tekst {
		font-size: 15px;
		line-height: 1.5;
	}

	.stc-hs__sluit {
		top: 8px;
		right: 8px;
		width: 26px;
		height: 26px;
		font-size: 18px;
	}

	.stc-hs__hint {
		font-size: 15px;
	}
}

/* Alleen bij een liggende foto; een staande foto houdt zijn eigen kader. */
@media (min-width: 1200px) {
	.stc-hs__frame--breed {
		width: calc(100% + 120px);
		max-width: none;
		margin-left: -60px;
		margin-right: -60px;
	}
}