/*
 * Hotspot-hero + detailmodal.
 * Gebaseerd op "Product Hotspot Modal" (Osmo Supply).
 *
 * Aangepast t.o.v. het origineel: de hotspot-area is van een liggende 4:3-foto
 * naar een staand product gegaan, met een tekstkolom ernaast. De statusnamen,
 * data-attributen en animatiecurves zijn ongewijzigd.
 */

/*
 * box-sizing expliciet zetten. De oorspronkelijke code komt uit Webflow, dat
 * globaal border-box toepast; WordPress doet dat niet voor eigen classes.
 * Zonder dit telt padding bovenop width:100% en steken knoppen buiten de kaart.
 */
.hotspot-hero,
.hotspot-hero *,
.hotspot-hero *::before,
.hotspot-hero *::after,
.hotspot-modal,
.hotspot-modal *,
.hotspot-modal *::before,
.hotspot-modal *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------- de hero */

.hotspot-hero {
	background-color: var(--wp--preset--color--cream, #f3f1dd);
	color: var(--wp--preset--color--ink, #1a1614);
	padding: var(--wp--preset--spacing--60, 6rem) var(--wp--preset--spacing--30, 1.5rem);
	overflow: hidden;
}

/* Alleen als eerste sectie onder de zwevende balk: dan extra bovenruimte. */
.is-bleed-hero .hotspot-hero {
	padding-top: 9em;
}

.hotspot-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
	max-width: 72rem;
	margin-inline: auto;
}

.hotspot-hero__h1 {
	font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--wine, #70041c);
	margin: 0 0 0.6em;
}

.hotspot-hero__lead {
	font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
	color: var(--wp--preset--color--ink-muted, #5c534e);
	max-width: 34ch;
	margin: 0 0 2em;
}

.hotspot-hero__cta {
	display: inline-block;
	background-color: var(--wp--preset--color--ink, #1b0b09);
	color: var(--wp--preset--color--ink, #1b0b09);
	font-weight: 700;
	font-size: 1.125rem;
	text-decoration: none;
	padding: 0.875em 1.75em;
	border-radius: 0.375rem;
	transition: background-color 0.25s cubic-bezier(0.38, 0.005, 0.215, 1);
}

.hotspot-hero__cta:hover,
.hotspot-hero__cta:focus-visible {
	background-color: var(--wp--preset--color--wine, #70041c);
	color: var(--wp--preset--color--base, #fff);
}

.hotspot-hero__fijndruk {
	font-size: 0.875rem;
	color: var(--wp--preset--color--ink-muted, #5c534e);
	margin: 1em 0 0;
}

.hotspot-hero__hint {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--wp--preset--color--wine, #70041c);
	margin: 2.5em 0 0;
	display: flex;
	align-items: center;
	gap: 0.6em;
}

.hotspot-hero__hint::before {
	content: '';
	width: 0.75em;
	height: 0.75em;
	border-radius: 50%;
	background: var(--wp--preset--color--wine, #70041c);
	flex: none;
	animation: vino2-pols 2.4s ease-in-out infinite;
}

@keyframes vino2-pols {
	0%, 100% { transform: scale(1); opacity: 1; }
	50%      { transform: scale(1.35); opacity: 0.55; }
}

/* --------------------------------------------------------- hotspot-gebied */

.hotspot-area {
	position: relative;
	aspect-ratio: 672 / 1536;
	width: 100%;
	max-width: 20rem;
	max-height: 34rem;
	margin-inline: auto;
}

.hotspot-area__media,
.hotspot-area__collection,
.hotspot-area__list {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Twee classes in de selector: WooCommerce zet op productpagina's
   `.woocommerce-page img { height: auto }` (0,1,1) en won daarmee van één class —
   de foto liep dan 34% uit zijn kader en de plusjes stonden op de verkeerde plek. */
.hotspot-area__media .hotspot-area__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.hotspot-area__collection {
	pointer-events: none;
}

.hotspot-area__item {
	pointer-events: auto;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	transform: translate(-50%, -50%);
}

.hotspot-plus-btn {
	cursor: pointer;
	appearance: none;
	background-color: var(--wp--preset--color--base, #fff);
	color: var(--wp--preset--color--wine, #70041c);
	border: 0;
	border-radius: 50em;
	box-shadow: 0 2px 10px rgba(26, 22, 20, 0.18);
	justify-content: center;
	align-items: center;
	width: 2.75em;
	height: 2.75em;
	margin: 0;
	padding: 0.85em;
	display: flex;
	transition: transform 0.3s cubic-bezier(0.38, 0.005, 0.215, 1),
		background-color 0.3s cubic-bezier(0.38, 0.005, 0.215, 1),
		color 0.3s cubic-bezier(0.38, 0.005, 0.215, 1);
	transform: scale(1) rotate(-45deg);
}

.hotspot-plus-btn:hover,
.hotspot-area__item:hover .hotspot-plus-btn,
.hotspot-plus-btn[data-hotspot-status="active"] {
	transform: scale(1.1) rotate(45deg);
}

.hotspot-plus-btn[data-hotspot-status="active"] {
	background-color: var(--wp--preset--color--ink, #1b0b09);
	color: var(--wp--preset--color--base, #f8f5f1); /* wit kruisje op nacht */
}

/* ------------------------------------------- labels naast de plusjes (desktop) */
/* Links van het plusje met een lijntje ernaartoe: daar is ruimte (kolomtussenruimte);
   rechts loopt een label op smallere schermen de sectie uit. Klik op het label =
   klik op het plusje (hotspot.js). Onder 900px (één kolom) verborgen. */
.hotspot-area__label {
	position: absolute;
	right: calc(100% + 1.1em);
	top: 50%;
	display: flex;
	align-items: center;
	gap: 0.4em;
	white-space: nowrap;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--ink, #1b0b09);
	background-color: var(--wp--preset--color--base, #f8f5f1);
	padding: 0.6em 0.95em;
	border-radius: 2em;
	box-shadow: 0 2px 10px rgba(26, 22, 20, 0.12);
	cursor: pointer;
	transform: translateY(-50%);
	transition: background-color 0.3s ease, color 0.3s ease;
}

.hotspot-area__label::after { /* lijntje naar het plusje */
	content: '';
	position: absolute;
	left: 100%;
	top: 50%;
	width: 1.1em;
	height: 1px;
	background-color: var(--wp--preset--color--ink-muted, #6b5a52);
}

.hotspot-area__label svg {
	width: 0.9em;
	height: 0.9em;
	flex: none;
}

.hotspot-area__label.is--video {
	color: var(--wp--preset--color--wine, #70041c);
}

.hotspot-area__item:has(.hotspot-plus-btn[data-hotspot-status="active"]) .hotspot-area__label {
	background-color: var(--wp--preset--color--ink, #1b0b09);
	color: var(--wp--preset--color--base, #f8f5f1);
}

/* Verschijnen na elkaar zodra de sectie in beeld komt (hotspot.js: is--wacht → is--zichtbaar).
   Animatie i.p.v. transition, zodat de vertraging de hoverkleur niet ophoudt. */
.hotspot-area.is--wacht .hotspot-area__label {
	opacity: 0;
}

.hotspot-area.is--zichtbaar .hotspot-area__label {
	animation: vino2-label-in 0.5s cubic-bezier(0.38, 0.005, 0.215, 1) both;
	animation-delay: calc(var(--i, 0) * 150ms + 300ms);
}

@keyframes vino2-label-in {
	from { opacity: 0; transform: translate(0.6em, -50%); }
	to   { opacity: 1; transform: translateY(-50%); }
}

/* ------------------------------------------------ knop "Bekijk hoe het werkt" */
.hotspot-hero__knop {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	margin: 0.25em 0 0;
	padding: 0.85em 1.5em;
	border: 1px solid var(--wp--preset--color--ink, #1b0b09);
	border-radius: 2.5em;
	background-color: transparent;
	color: var(--wp--preset--color--ink, #1b0b09);
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.hotspot-hero__knop svg {
	width: 1em;
	height: 1em;
	flex: none;
}

.hotspot-hero__knop:hover,
.hotspot-hero__knop:focus-visible,
.hotspot-hero__knop[data-hotspot-status="active"] {
	background-color: var(--wp--preset--color--wine, #70041c);
	border-color: var(--wp--preset--color--wine, #70041c);
	color: var(--wp--preset--color--cream, #ebe0d6);
}

.hotspot-hero__knop + .hotspot-hero__hint {
	margin-top: 1.75em;
}

/* ----------------------------------------------------------------- modal */

.hotspot-modal {
	z-index: 400;
	pointer-events: none;
	position: fixed;
	inset: 0;
	overflow: hidden;
}

.hotspot-modal__side {
	align-items: center;
	width: 100%;
	max-width: 32em;
	height: 100%;
	padding: 2.5em;
	display: flex;
	position: absolute;
	top: 0;
	right: 0;
	transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
	transform: translateX(100%) rotate(0.001deg);
}

[data-hotspot-modal-status="active"] .hotspot-modal__side {
	transform: translateX(0%) rotate(0.001deg);
}

.hotspot-modal__tile {
	pointer-events: auto;
	background-color: var(--wp--preset--color--base, #fff);
	border-radius: 1.5em;
	box-shadow: 0 8px 40px rgba(26, 22, 20, 0.18);
	flex-flow: column;
	flex: 1;
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 46em;
	display: flex;
	position: relative;
	overflow: auto;
}

.hotspot-modal__collection {
	flex: 1;
	position: relative;
	overflow: hidden;
}

.hotspot-modal__list {
	grid-template-rows: auto;
	grid-template-columns: 1fr;
	width: 100%;
	height: 100%;
	display: grid;
	position: relative;
}

.hotspot-modal__item {
	flex-flow: column;
	grid-area: 1 / 1;
	padding: 0.75em 0.75em 0;
	display: flex;
	position: relative;
}

[data-hotspot-name] {
	transition: opacity 0.6s cubic-bezier(0.625, 0.05, 0, 1),
		transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

[data-hotspot-name][data-hotspot-status="not-active"] {
	opacity: 0;
	visibility: hidden;
	transform: translateX(0em) rotate(0.001deg);
}

[data-hotspot-name][data-hotspot-status="active"] {
	opacity: 1;
	visibility: visible;
	transform: translateX(0em) rotate(0.001deg);
}

[data-hotspot-name][data-hotspot-status="transition-in-right"] {
	opacity: 0;
	visibility: visible;
	transform: translateX(1em) rotate(0.001deg);
	transition: none;
}

[data-hotspot-name][data-hotspot-status="transition-in-left"] {
	opacity: 0;
	visibility: visible;
	transform: translateX(-1em) rotate(0.001deg);
	transition: none;
}

[data-hotspot-name][data-hotspot-status="transition-out-right"] {
	opacity: 0;
	visibility: visible;
	transform: translateX(1em) rotate(0.001deg);
}

[data-hotspot-name][data-hotspot-status="transition-out-left"] {
	opacity: 0;
	visibility: visible;
	transform: translateX(-1em) rotate(0.001deg);
}

.hotspot-modal__top {
	z-index: 1;
	pointer-events: none;
	justify-content: flex-end;
	width: 100%;
	height: 0%;
	padding-inline: 1.5em;
	display: flex;
	position: sticky;
	top: 1.5em;
}

/* Nacht met licht kruis (zoals het actieve plusje): Osmo's witte knop viel op mobiel
   weg tegen de lichte delen van de close-up (15-09, Victor). */
.hotspot-close-btn {
	pointer-events: auto;
	color: var(--wp--preset--color--base, #f8f5f1);
	cursor: pointer;
	appearance: none;
	background-color: var(--wp--preset--color--ink, #1b0b09);
	border: 0;
	border-radius: 50em;
	box-shadow: 0 2px 10px rgba(26, 22, 20, 0.25);
	justify-content: center;
	align-items: center;
	width: 2.75em;
	height: 2.75em;
	margin: 0;
	padding: 0.8625em;
	display: flex;
}

.hotspot-modal__media {
	aspect-ratio: 4 / 3;
	border-radius: 1em;
	background-color: var(--wp--preset--color--cream, #f3f1dd);
	position: relative;
	overflow: hidden;
}

.hotspot-modal__media .hotspot-modal__image { /* twee classes: valkuil 11 (WooCommerce img height) */
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(2.2);
}

/* Eigen close-upfoto per hotspot (zie 'foto' in vino2_hotspots): geen zoom. */
.hotspot-modal__media .hotspot-modal__image.is--eigen {
	transform: none;
	object-position: center;
}

/* Video per hotspot ('video' = bestandsnaam op Bunny, map video/): vult het 4:3-kader. */
.hotspot-modal__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	background-color: inherit;
}

.hotspot-modal__info {
	row-gap: 1.25em;
	flex-flow: column;
	flex: 1;
	justify-content: flex-start;
	padding: 2em 1.25em;
	display: flex;
}

.hotspot-modal__h {
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--wine, #70041c);
	margin: 0;
	font-size: 1.875em;
	font-weight: 700;
	line-height: 1.05;
}

.hotspot-modal__p {
	margin: 0;
	font-size: 1em;
	color: var(--wp--preset--color--ink-muted, #5c534e);
}

.hotspot-modal__bottom {
	width: 100%;
	padding: 0 1.5em 1.5em;
	position: relative;
}

.hotspot-modal__controls {
	justify-content: space-between;
	align-items: center;
	display: flex;
}

.hotspot-arrow-btn {
	color: var(--wp--preset--color--base, #fff);
	cursor: pointer;
	appearance: none;
	background-color: var(--wp--preset--color--wine, #70041c);
	border: 0;
	border-radius: 50em;
	justify-content: center;
	align-items: center;
	width: 2.75em;
	height: 2.75em;
	margin: 0;
	padding: 0.8625em;
	display: flex;
}

.hotspot-arrow-btn.is--prev {
	color: var(--wp--preset--color--wine, #70041c);
	background-color: var(--wp--preset--color--cream, #f3f1dd);
	transform: scaleX(-1);
}

.hotspot-modal__dots {
	justify-content: center;
	align-items: center;
	gap: 0.35em;
	display: flex;
}

.hotspot-dot {
	color: var(--wp--preset--color--line, #ddd8cb);
	cursor: pointer;
	appearance: none;
	background-color: currentColor;
	border: 0;
	border-radius: 50em;
	width: 0.6em;
	height: 0.6em;
	margin: 0;
	padding: 0;
	display: block;
	position: relative;
	transition: color 0.3s ease, transform 0.3s ease;
}

.hotspot-dot[data-hotspot-control-status="active"] {
	color: var(--wp--preset--color--wine, #70041c);
	transform: scale(1.2);
}

/* ------------------------------------------------------------ responsief */

@media screen and (max-width: 900px) {
	.hotspot-hero__inner {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.hotspot-area__label {
		display: none;
	}

	.hotspot-hero__text {
		order: 1;
	}

	.hotspot-area {
		order: 2;
		max-width: 15rem;
	}

	.hotspot-hero__lead {
		max-width: none;
	}
}

@media screen and (max-width: 767px) {
	.is-bleed-hero .hotspot-hero {
		padding-top: 7em;
	}

	.hotspot-modal__side {
		max-width: none;
		padding: 0.75em;
	}

	/* Op kleine schermen mag de kaart scrollen i.p.v. de tekst afknippen; het kruisje
	   blijft door zijn sticky positie in beeld. */
	.hotspot-modal__collection {
		flex: 1 0 auto;
		overflow: visible;
	}

	.hotspot-plus-btn {
		width: 2.25em;
		height: 2.25em;
		padding: 0.7em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hotspot-hero__hint::before,
	.hotspot-area.is--zichtbaar .hotspot-area__label {
		animation: none;
	}
}