/* HERO ROTATOR */

/* --- Layout --- */
.hero-rotator {
	width: 100vw;
	position: relative;
	height: 80vh;
	/* adjust as needed */
	min-height: 420px;
	overflow: hidden;
	background: #FFF;
	/* fallback color while images load */
}

@media screen and (max-width: 520px) {
	.hero-rotator {
		height: 90vh;
	}
}

.hero-rotator .slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	will-change: transform, opacity;
	opacity: 0;
	/* default hidden; animation will show */
}

/* --- Animations (16s total, 4s per slide) --- */
/* Quick fade in/out; visible for most of its 25% window */
@keyframes fadeWindow {
	0% {
		opacity: 0;
	}

	1% {
		opacity: 1;
	}

	/* quick fade in */
	24% {
		opacity: 1;
	}

	/* stay visible */
	25% {
		opacity: 0;
	}

	/* quick fade out */
	100% {
		opacity: 0;
	}
}

/* Slow zoom while visible */
@keyframes slowZoom {
	0% {
		transform: scale(1);
	}

	25% {
		transform: scale(1.1);
	}

	/* gentle zoom */
	100% {
		transform: scale(1.1);
	}
}

/* Apply both animations; each slide is offset by 4s */
.hero-rotator .slide {
	animation:
		slowZoom 16s linear infinite,
		fadeWindow 16s ease infinite;
}

.hero-rotator .s1 {
	animation-delay: 0s, 0s;
}

.hero-rotator .s2 {
	animation-delay: 4s, 4s;
}

.hero-rotator .s3 {
	animation-delay: 8s, 8s;
}

.hero-rotator .s4 {
	animation-delay: 12s, 12s;
}

/* Optional: content overlay (headline/CTA) */
.hero-rotator .content {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	text-align: center;
	padding: 2rem;
	color: #fff;
	z-index: 2;
	/* above slides */
}

.hero-rotator .content h1 {
	font: 700 2.4rem/1.1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	text-shadow: 0 8px 24px rgba(0, 0, 0, .45);
	margin: 0 0 .6rem;
}

.hero-rotator .content p {
	font-size: 1.1rem;
	max-width: 60ch;
	margin: 0 auto 1rem;
	text-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.hero-rotator .slide {
		animation: none;
		opacity: 1;
	}

	.hero-rotator .s2,
	.hero-rotator .s3,
	.hero-rotator .s4 {
		display: none;
	}
}

/* TOOLTIP */

/* Tooltip element (attached to body via JS) */
.tooltip {
	position: fixed;
	/* fixed helps avoid overflow inside containers */
	z-index: 9999;
	background: var(--tooltip-bg);
	color: var(--tooltip-color);
	padding: var(--tooltip-padding);
	border-radius: var(--tooltip-radius);
	font-size: var(--tooltip-font-size);
	max-width: var(--tooltip-max-width);
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
	transform-origin: center;
	opacity: 0;
	pointer-events: none;
	/* avoid catching pointer events */
	transition:
		opacity var(--transition-time) ease,
		transform var(--transition-time) cubic-bezier(.2, .9, .3, 1);
	will-change: transform, opacity, top, left;
	display: inline-block;
}

/* visible state */
.tooltip.show {
	opacity: 1;
	pointer-events: auto;
	transform: translate3d(var(--tx, 0), var(--ty, 0), 0) scale(1);
}

/* entry pop (slight scale) */
.tooltip[data-placement="top"] {
	transform: translateY(6px) scale(.98);
}

.tooltip[data-placement="bottom"] {
	transform: translateY(-6px) scale(.98);
}

.tooltip[data-placement="left"] {
	transform: translateX(6px) scale(.98);
}

.tooltip[data-placement="right"] {
	transform: translateX(-6px) scale(.98);
}

.tooltip.show[data-placement="top"],
.tooltip.show[data-placement="bottom"],
.tooltip.show[data-placement="left"],
.tooltip.show[data-placement="right"] {
	transform: translate3d(0, 0, 0) scale(1);
}

/* Arrow (CSS triangle using pseudo-element) */
.tooltip::after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
}

/* top: arrow at bottom edge, points downward */
.tooltip[data-placement="top"]::after {
	left: calc(50% - var(--tooltip-arrow-size));
	bottom: calc(-1 * var(--tooltip-arrow-size));
	border-width: var(--tooltip-arrow-size) var(--tooltip-arrow-size) 0 var(--tooltip-arrow-size);
	border-color: var(--tooltip-bg) transparent transparent transparent;
}

/* bottom: arrow at top edge */
.tooltip[data-placement="bottom"]::after {
	left: calc(50% - var(--tooltip-arrow-size));
	top: calc(-1 * var(--tooltip-arrow-size));
	border-width: 0 var(--tooltip-arrow-size) var(--tooltip-arrow-size) var(--tooltip-arrow-size);
	border-color: transparent transparent var(--tooltip-bg) transparent;
}

/* left: arrow at right edge */
.tooltip[data-placement="left"]::after {
	top: calc(50% - var(--tooltip-arrow-size));
	right: calc(-1 * var(--tooltip-arrow-size));
	border-width: var(--tooltip-arrow-size) 0 var(--tooltip-arrow-size) var(--tooltip-arrow-size);
	border-color: transparent transparent transparent var(--tooltip-bg);
}

/* right: arrow at left edge */
.tooltip[data-placement="right"]::after {
	top: calc(50% - var(--tooltip-arrow-size));
	left: calc(-1 * var(--tooltip-arrow-size));
	border-width: var(--tooltip-arrow-size) var(--tooltip-arrow-size) var(--tooltip-arrow-size) 0;
	border-color: transparent var(--tooltip-bg) transparent transparent;
}

/* Accessible focus outline for tooltip targets */
.has-tooltip {
	outline: none;
	position: relative;
	cursor: help;
	display: inline-flex;
	align-items: center;
}

.has-tooltip:focus {
	box-shadow: 0 0 0 3px rgba(0, 123, 88, 0.18);
	border-radius: 6px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {

	.tooltip,
	.tooltip.show {
		transition: none;
		transform: none !important;
	}
}

/* Simple CSS-only fallback tooltip (for browsers without JS) */
.has-tooltip[data-tooltip]:not([data-tooltip=""])::after {
	content: attr(data-tooltip);
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: calc(100% + 10px);
	white-space: normal;
	max-width: 16rem;
	background: var(--tooltip-bg);
	color: var(--tooltip-color);
	padding: 8px 10px;
	border-radius: 6px;
	font-size: 0.85rem;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
	opacity: 0;
	pointer-events: none;
}

/* show CSS-only tooltip on hover/focus when JS not present */
html.no-js .has-tooltip[data-tooltip]:hover::after,
html.no-js .has-tooltip[data-tooltip]:focus::after {
	opacity: 1;
}

/* GALERIA */

/* Lightbox overlay */
.lightbox {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.85);
	display: flex;
	justify-content: center;
	align-items: center;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 1000;
}

.lightbox.active {
	visibility: visible;
	opacity: 1;
}

.lightbox img {
	max-width: 90%;
	max-height: 90%;
	border-radius: 12px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
	cursor: zoom-out;
	animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
	from {
		transform: scale(0.9);
		opacity: 0.5;
	}

	to {
		transform: scale(1);
		opacity: 1;
	}
}