/* ==========================================================================
   Tentrend lightbox — gedeeld door de inspiratiepagina en de productpagina
   (single product). Spiegelt het .tt-cart-popup patroon uit mini-cart.css.
   De class-namen houden het tt-inspiratie- prefix waar ze vandaan komen.
   ========================================================================== */

/* ==========================================================================
   04. Lightbox shell (spiegelt .tt-cart-popup)
   ========================================================================== */

body.tt-inspiratie-open {
	overflow: hidden;
}

.tt-inspiratie-lightbox {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.tt-inspiratie-lightbox[aria-hidden="true"] {
	visibility: hidden;
}

.tt-inspiratie-lightbox[aria-hidden="false"] {
	visibility: visible;
	pointer-events: auto;
}

.tt-inspiratie-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(34, 24, 16, 0.72);
	backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity 320ms ease;
}

.tt-inspiratie-lightbox[aria-hidden="false"] .tt-inspiratie-lightbox__backdrop {
	opacity: 1;
}

.tt-inspiratie-lightbox__panel {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	padding: 0 clamp(16px, 6vw, 88px);
	opacity: 0;
	transform: scale(0.96);
	transition: opacity 320ms ease, transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
	/* Klikken naast de foto valt door naar de backdrop en sluit dus ook. */
	pointer-events: none;
}

.tt-inspiratie-lightbox__panel > * {
	pointer-events: auto;
}

.tt-inspiratie-lightbox[aria-hidden="false"] .tt-inspiratie-lightbox__panel {
	opacity: 1;
	transform: scale(1);
}

/* Twee classes: op /product/ zet WooCommerce's .woocommerce img (0,1,1) anders
   max-width: 100% over de max-width hieronder. */
.tt-inspiratie-lightbox .tt-inspiratie-lightbox__image {
	display: block;
	/* Houdt aan beide kanten ruimte vrij voor de pijlen (28px + 46px + marge). */
	max-width: min(1400px, calc(100vw - 180px));
	max-height: 88vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var(--tt-inspiratie-radius, 16px);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
	cursor: zoom-out;
}

/* ==========================================================================
   05. Lightbox knoppen
   ========================================================================== */

/* Ook hier twee classes: anders kleurt button:focus uit de parent-theme reset
   het kruisje en de pijlen roze zodra je ze aanklikt. */
.tt-inspiratie-lightbox .tt-inspiratie-lightbox__close,
.tt-inspiratie-lightbox .tt-inspiratie-lightbox__nav,
.tt-inspiratie-lightbox .tt-inspiratie-lightbox__close:hover,
.tt-inspiratie-lightbox .tt-inspiratie-lightbox__nav:hover,
.tt-inspiratie-lightbox .tt-inspiratie-lightbox__close:focus,
.tt-inspiratie-lightbox .tt-inspiratie-lightbox__nav:focus,
.tt-inspiratie-lightbox .tt-inspiratie-lightbox__close:active,
.tt-inspiratie-lightbox .tt-inspiratie-lightbox__nav:active {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid rgba(252, 248, 245, 0.35);
	border-radius: 50%;
	background: rgba(35, 23, 4, 0.55);
	color: var(--tt-cream, #fcf8f5);
	cursor: pointer;
	appearance: none;
	transition: background 240ms ease, border-color 240ms ease;
}

.tt-inspiratie-lightbox .tt-inspiratie-lightbox__close:hover,
.tt-inspiratie-lightbox .tt-inspiratie-lightbox__nav:hover {
	background: var(--tt-gold, #997a38);
	border-color: var(--tt-gold, #997a38);
	color: var(--tt-cream, #fcf8f5);
}

.tt-inspiratie-lightbox .tt-inspiratie-lightbox__close:focus-visible,
.tt-inspiratie-lightbox .tt-inspiratie-lightbox__nav:focus-visible {
	outline: 2px solid var(--tt-gold-soft, #c7a976);
	outline-offset: 3px;
}

/* In de viewporthoek: blijft ook bij een 88vh hoge foto altijd bereikbaar. */
.tt-inspiratie-lightbox .tt-inspiratie-lightbox__close {
	top: clamp(16px, 3vh, 28px);
	right: clamp(16px, 3vw, 28px);
}

.tt-inspiratie-lightbox__close::before,
.tt-inspiratie-lightbox__close::after {
	content: "";
	position: absolute;
	width: 16px;
	height: 1.5px;
	background: currentColor;
}

.tt-inspiratie-lightbox__close::before {
	transform: rotate(45deg);
}

.tt-inspiratie-lightbox__close::after {
	transform: rotate(-45deg);
}

/* Aan de viewportranden, niet aan de foto: die heeft bij het openen nog geen
   breedte (niet geladen) en wisselt per foto van formaat, waardoor de pijlen
   eerst in het midden stonden en onder de muis wegsprongen. De knoppen staan
   buiten het panel, dus absolute is hier gelijk aan de viewport. */
.tt-inspiratie-lightbox .tt-inspiratie-lightbox__nav {
	top: 50%;
	transform: translateY(-50%);
}

.tt-inspiratie-lightbox .tt-inspiratie-lightbox__nav--prev {
	left: clamp(16px, 3vw, 28px);
}

.tt-inspiratie-lightbox .tt-inspiratie-lightbox__nav--next {
	right: clamp(16px, 3vw, 28px);
}

.tt-inspiratie-lightbox__nav::before {
	content: "";
	width: 11px;
	height: 11px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
}

.tt-inspiratie-lightbox__nav--prev::before {
	transform: rotate(-135deg);
	margin-left: 4px;
}

.tt-inspiratie-lightbox__nav--next::before {
	transform: rotate(45deg);
	margin-right: 4px;
}

/* Het [hidden]-attribuut (gezet door de JS bij één enkele foto) moet display winnen. */
.tt-inspiratie-lightbox .tt-inspiratie-lightbox__nav[hidden] {
	display: none;
}

@media (max-width: 639px) {
	.tt-inspiratie-lightbox__panel {
		padding: 0 12px;
	}

	/* Pijlen staan hier onderaan, dus de foto mag de volle breedte gebruiken. */
	.tt-inspiratie-lightbox .tt-inspiratie-lightbox__image {
		max-width: 92vw;
		max-height: 76vh;
	}

	/* Pijlen naast elkaar onderaan de viewport, weg van de foto. */
	.tt-inspiratie-lightbox .tt-inspiratie-lightbox__nav {
		top: auto;
		bottom: clamp(16px, 4vh, 32px);
		transform: none;
	}

	.tt-inspiratie-lightbox .tt-inspiratie-lightbox__nav--prev {
		left: 50%;
		margin-left: -56px;
	}

	.tt-inspiratie-lightbox .tt-inspiratie-lightbox__nav--next {
		right: 50%;
		margin-right: -56px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tt-inspiratie-lightbox__backdrop,
	.tt-inspiratie-lightbox__panel {
		transition: none;
	}

	.tt-inspiratie-lightbox__panel {
		transform: none;
	}
}