/*!
 * WP-ImmoMakler horizontal-thumbs gallery preset.
 *
 * Layout: full-width main image with a row of thumbnails below.
 * Hover-shows the prev/next buttons.
 *
 * All visual knobs are exposed as CSS custom properties on the gallery
 * wrapper. Defaults are sensible for the WP-ImmoMakler default skin.
 * Override via custom CSS or theme-builder per-instance inline `<style>`.
 */

.immomakler-gallery--horizontal_thumbs {

	/* Layout */
	--immomakler-gallery-gap: 6px;
	--immomakler-gallery-main-aspect: 4 / 3;
	--immomakler-gallery-thumb-aspect: 4 / 3;

	/* Colors — primary color is overridden by the skin from
	 * `ImmoMakler_Options::get('link_color')` via `wp_add_inline_style`. */
	--immomakler-gallery-primary-color: #af1615;
	--immomakler-gallery-primary-color-inverted: #fff;

	/* Opacity */
	--immomakler-gallery-nav-opacity: 0.8;
	--immomakler-gallery-thumb-default-opacity: 0.6;
	--immomakler-gallery-thumb-nav-opacity: 0.5;
	--immomakler-gallery-thumb-nav-opacity-hover: 0.9;

	/* Sizing */
	--immomakler-gallery-nav-button-size: 30px;

	/*
	 * Hit-area width for the main-image prev/next buttons. The visible
	 * round button stays `--immomakler-gallery-nav-button-size`, but the
	 * <button> element itself extends to this width × 100% height — a
	 * wide invisible target that's much easier to land a click on
	 * (Fitts's Law). Reference: riedel-immobilien.de gallery.
	 */
	--immomakler-gallery-nav-clickarea-width: 45px;
	--immomakler-gallery-thumb-nav-width: 20px;

	/*
	 * Thumb size — the bar's perpendicular-to-strip dimension. Drives each
	 * thumb's width; combined with --immomakler-gallery-thumb-aspect, also
	 * fixes the bar height. With Swiper's `slidesPerView: 'auto'`, the
	 * number of thumbs visible at any time adapts to gallery width / this
	 * value automatically. Customers override via the Customizer's
	 * "Größe der Vorschaubilder (px)" option.
	 */
	--immomakler-gallery-thumb-size: 200px;

	/* Swiper-bundle's own variable for nav-button horizontal offset from the
	 * swiper edges. Default is 10px; we bump to 12px to give the round
	 * primary-color buttons a touch more breathing room. */
	--swiper-navigation-sides-offset: 12px;

	display: flex;
	flex-direction: column;
	gap: var(--immomakler-gallery-gap);

	/*
	 * `width: 100%` is required (not just `max-width: 100%`): without it the
	 * flex container shrinks to content, the inner `.swiper` element inherits
	 * an unbounded `width: 100%` from swiper-bundle.css, and Swiper computes
	 * each slide's width from the maxed-out container.
	 */
	width: 100%;
	max-width: 100%;
}

/* ---------- Main swiper ---------- */

.immomakler-gallery--horizontal_thumbs .immomakler-gallery__main {
	position: relative;
	width: 100%;
	min-width: 0;
	aspect-ratio: var(--immomakler-gallery-main-aspect);
	overflow: hidden;
	user-select: none;

	/*
	 * Per-image rounding. Customer-configurable via the Customizer's
	 * "Rundung der Ecken (px)" option (shared with the static gallery
	 * presets). Falls back to 0 when unset — paints nothing visible.
	 * Wrapper-mode (`--rounded-wrapper` class) cancels this at the
	 * bottom of the file in favor of rounding the whole wrapper.
	 */
	border-radius: var(--immomakler-gallery-border-radius, 0);
}

.immomakler-gallery--horizontal_thumbs .immomakler-gallery__main .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: zoom-in;

	/*
	 * Full-width slide for the standard horizontal-thumbs layout.
	 * The carousel modifier (`.immomakler-gallery--carousel`) overrides
	 * `width` to `auto` and uses aspect-ratio + fixed height to produce
	 * the carousel "peek" — see the carousel block at the bottom of this
	 * stylesheet.
	 */
	width: 100%;
}

.immomakler-gallery--horizontal_thumbs .immomakler-gallery__main .swiper-slide img.immomakler-gallery__image,
.immomakler-gallery--horizontal_thumbs .immomakler-gallery__main .swiper-slide picture > img.immomakler-gallery__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---------- Main nav buttons (wide click area + round visible button) ----------
 *
 * The `<button>` element itself is a full-height, 45px-wide invisible click
 * zone flush against the swiper edge — much easier to land a click on than a
 * small round button. The visible round button is rendered via the `::before`
 * pseudo-element, centered vertically inside the click area. Reference for
 * the pattern: riedel-immobilien.de gallery (and most modern image galleries).
 *
 * Hidden by default and revealed when the cursor is anywhere over the
 * gallery wrapper (or when a keyboard user focuses into the gallery).
 * `visibility: hidden` makes both the click zone AND the visible button
 * fully non-interactive when hidden — clicks on the leftmost/rightmost
 * main-image pixels don't accidentally land on an invisible nav button.
 */

.immomakler-gallery--horizontal_thumbs .immomakler-gallery__prev,
.immomakler-gallery--horizontal_thumbs .immomakler-gallery__next {
	width: var(--immomakler-gallery-nav-clickarea-width);
	height: 100%;
	top: 0;
	margin-top: 0;

	/* No visible background — that's the ::before's job. */
	background: transparent;
	border-radius: 0;

	/* Center the SVG icon (and the ::before visible button) inside the
	 * click zone, vertically and horizontally. */
	display: flex;
	align-items: center;
	justify-content: center;

	color: var(--immomakler-gallery-primary-color-inverted);
	visibility: hidden;
}

/* Pin prev/next flush against the swiper edges — overrides swiper-bundle's
 * `left/right: var(--swiper-navigation-sides-offset)` so the click zone
 * starts at the very edge. */
.immomakler-gallery--horizontal_thumbs .immomakler-gallery__prev {
	left: 0;
	right: auto;
}

.immomakler-gallery--horizontal_thumbs .immomakler-gallery__next {
	right: 0;
	left: auto;
}

/* Visible round button — pseudo-element centered in the click area. */
.immomakler-gallery--horizontal_thumbs .immomakler-gallery__prev::before,
.immomakler-gallery--horizontal_thumbs .immomakler-gallery__next::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: var(--immomakler-gallery-nav-button-size);
	height: var(--immomakler-gallery-nav-button-size);
	background-color: var(--immomakler-gallery-primary-color);
	border-radius: 50%;
	opacity: var(--immomakler-gallery-nav-opacity);
	transition: opacity 200ms ease, background-color 200ms ease;
}

/*
 * Swiper 8+ injects an SVG `.swiper-navigation-icon` inside each nav
 * button. Sized to roughly half the visible round button — note this
 * uses the BUTTON-SIZE variable, not 50% of the click area's height
 * (which would balloon the SVG to half the main image's height).
 */
.immomakler-gallery--horizontal_thumbs .swiper-navigation-icon {
	height: calc(var(--immomakler-gallery-nav-button-size) / 2);
	width: auto;

	/* Ensure the SVG sits on top of the ::before circle. */
	position: relative;
	z-index: 1;
}

.immomakler-gallery--horizontal_thumbs .immomakler-gallery__prev.swiper-button-disabled,
.immomakler-gallery--horizontal_thumbs .immomakler-gallery__next.swiper-button-disabled {
	pointer-events: auto;
}

.immomakler-gallery--horizontal_thumbs .immomakler-gallery__prev.swiper-button-disabled::before,
.immomakler-gallery--horizontal_thumbs .immomakler-gallery__next.swiper-button-disabled::before {
	background-color: #666;
}

/*
 * Hover-show the nav buttons on entire-gallery hover.
 *
 * `:has(:focus-visible)` (not `:focus-within`) so a mouse click on a nav
 * button doesn't pin the buttons visible after the cursor leaves.
 * `:focus-visible` matches keyboard focus only — accessibility users
 * still see the buttons; mouse users get the hover-show behaviour.
 */
.immomakler-gallery--horizontal_thumbs:hover .immomakler-gallery__prev,
.immomakler-gallery--horizontal_thumbs:hover .immomakler-gallery__next,
.immomakler-gallery--horizontal_thumbs:has(:focus-visible) .immomakler-gallery__prev,
.immomakler-gallery--horizontal_thumbs:has(:focus-visible) .immomakler-gallery__next {
	visibility: visible;
}

/* ---------- Thumbs row ---------- */

.immomakler-gallery--horizontal_thumbs .immomakler-gallery__thumbs {

	/*
	 * Same belt-and-braces as the main swiper: explicit `width: 100%` plus
	 * `min-width: 0` so the thumbs swiper doesn't inherit an unbounded width
	 * from the flex column's intrinsic-content fallback. Without this, Swiper
	 * measures the maxed container and computes per-thumb widths at
	 * `(2^24 - 3) / slidesPerView`.
	 */
	position: relative;
	width: 100%;
	min-width: 0;
}

/*
 * Thumb slide sizing — fixed width, derived height via aspect-ratio.
 *
 * Each thumb is `--immomakler-gallery-thumb-size` wide with
 * `--immomakler-gallery-thumb-aspect` aspect — height computes
 * automatically (`thumb_size × aspect_inverse`). The thumbs swiper
 * uses `slidesPerView: 'auto'`, so this CSS width drives Swiper's
 * per-slide width directly. Pre-init AND post-init produce the same
 * layout — zero CLS on first paint, no `:not(.swiper-initialized)`
 * scoping needed.
 *
 * `min-height: 0 !important` disables the flex-item min-content floor.
 * See the equivalent rule in preset-vertical-thumbs.css for the full
 * rationale: without this, the image's intrinsic aspect creates a
 * min-content floor that clamps slide heights upward and renders 16:9
 * thumbs at the same height as 3:2.
 */
.immomakler-gallery--horizontal_thumbs .immomakler-gallery__thumbs .swiper-slide {
	width: var(--immomakler-gallery-thumb-size);
	height: auto !important;
	aspect-ratio: var(--immomakler-gallery-thumb-aspect);
	min-height: 0 !important;
	flex-shrink: 0;
	cursor: pointer;
	opacity: var(--immomakler-gallery-thumb-default-opacity);
	transition: opacity 150ms ease;

	/*
	 * Per-image rounding — `overflow: hidden` so the rounded box clips
	 * the contained `<img>` (which has its own intrinsic corners).
	 * Wrapper-mode cancels this at the bottom of the file.
	 */
	overflow: hidden;
	border-radius: var(--immomakler-gallery-border-radius, 0);
}

.immomakler-gallery--horizontal_thumbs .immomakler-gallery__thumbs .swiper-slide:hover,
.immomakler-gallery--horizontal_thumbs .immomakler-gallery__thumbs .swiper-slide-thumb-active {
	opacity: 1;
}

.immomakler-gallery--horizontal_thumbs .immomakler-gallery__thumbs .immomakler-gallery__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- Left/right thumb-nav arrows (opt-out via show_thumb_nav option) ----------
 *
 * Mirrors the up/down arrows in preset-vertical-thumbs.css, but rotated 90°
 * for a horizontal thumb strip: prev sits flush-left, next flush-right of
 * the thumbs row. Hover-show via the wrapper's `:hover` selector.
 */

.immomakler-gallery--horizontal_thumbs .immomakler-gallery__thumbs-prev,
.immomakler-gallery--horizontal_thumbs .immomakler-gallery__thumbs-next {
	position: absolute;
	top: 0;
	height: 100%;
	width: var(--immomakler-gallery-thumb-nav-width);
	z-index: 2;
	color: var(--immomakler-gallery-primary-color-inverted);
	background-color: var(--immomakler-gallery-primary-color);
	opacity: var(--immomakler-gallery-thumb-nav-opacity);
	border: 0;
	margin: 0;
	padding: 0;
	cursor: pointer;
	text-align: center;
	transition: opacity 500ms ease;
	visibility: hidden;
}

.immomakler-gallery--horizontal_thumbs .immomakler-gallery__thumbs-prev::after,
.immomakler-gallery--horizontal_thumbs .immomakler-gallery__thumbs-next::after {
	display: block;
	color: inherit;
	font-size: calc(var(--immomakler-gallery-thumb-nav-width) * 0.6);
	line-height: 1;
}

.immomakler-gallery--horizontal_thumbs .immomakler-gallery__thumbs-prev::after {
	content: "◀";
}

.immomakler-gallery--horizontal_thumbs .immomakler-gallery__thumbs-next::after {
	content: "▶";
}

.immomakler-gallery--horizontal_thumbs .immomakler-gallery__thumbs-prev {
	left: 0;
}

.immomakler-gallery--horizontal_thumbs .immomakler-gallery__thumbs-next {
	right: 0;
}

.immomakler-gallery--horizontal_thumbs .immomakler-gallery__thumbs-prev:hover,
.immomakler-gallery--horizontal_thumbs .immomakler-gallery__thumbs-next:hover {
	opacity: var(--immomakler-gallery-thumb-nav-opacity-hover);
}

/*
 * Disabled state — at the strip's start/end.
 *
 * Two-stage fade animation:
 *   - First the button quickly grays — clear "end reached" cue.
 *   - Then it fades fully transparent — gallery looks clean again.
 *
 * Interaction follows the visual:
 *   - While the button is visible (during the fade), `pointer-events: auto`
 *     so it absorbs clicks. Critical: without this, a user mashing the
 *     arrow toward the end would have their next click fall through to the
 *     underlying thumb, and Swiper's `slideToClickedSlide: true` would
 *     activate the wrong image at the moment the strip stops moving.
 *   - Once fully faded (`opacity: 0`), the animation's last keyframe sets
 *     `pointer-events: none` so the dead zone clears and customers can
 *     deliberately click the corner thumbnail again.
 *
 * `pointer-events` is a discrete (non-interpolating) animatable property
 * in CSS — the value snaps at keyframe boundaries — so this works reliably
 * across modern browsers without needing JS to time the cleanup.
 */
.immomakler-gallery--horizontal_thumbs .immomakler-gallery__thumbs-prev.swiper-button-disabled,
.immomakler-gallery--horizontal_thumbs .immomakler-gallery__thumbs-next.swiper-button-disabled {
	cursor: default;
	animation: immomakler-gallery-thumb-nav-fade 1.5s forwards;
}

@keyframes immomakler-gallery-thumb-nav-fade {

	0% {
		background-color: var(--immomakler-gallery-primary-color);
		opacity: var(--immomakler-gallery-thumb-nav-opacity);
		pointer-events: auto;
	}

	30% {
		background-color: #666;
		opacity: 0.4;
		pointer-events: auto;
	}

	100% {
		background-color: #666;
		opacity: 0;
		pointer-events: none;
	}
}

/*
 * Wrapper-hover reveal for the thumb-nav buttons. Matches the main-nav hover
 * pattern: `:hover` for mouse, `:has(:focus-visible)` so keyboard users see
 * them too without mouse-click focus pinning them on.
 */
.immomakler-gallery--horizontal_thumbs:hover .immomakler-gallery__thumbs-prev,
.immomakler-gallery--horizontal_thumbs:hover .immomakler-gallery__thumbs-next,
.immomakler-gallery--horizontal_thumbs:has(:focus-visible) .immomakler-gallery__thumbs-prev,
.immomakler-gallery--horizontal_thumbs:has(:focus-visible) .immomakler-gallery__thumbs-next {
	visibility: visible;
}

/* ---------- Carousel modifier (.immomakler-gallery--carousel) ----------
 *
 * The skin's carousel layout reuses the horizontal_thumbs preset with
 * `show_thumbs=false` plus an extra wrapper class. These rules layer on
 * top of the base preset rules to:
 *
 *   - replace the aspect-ratio-driven main height with a fixed height
 *     from `--immomakler-gallery-carousel-height` (defaults to 600px);
 *   - default a non-zero peek so neighbors are visible by default;
 *   - fade non-active slides (peek), keeping the active one bright.
 */

/*
 * Defaults for the carousel modifier.
 *
 * Selector intentionally uses ONLY the modifier class (specificity 0,1,0)
 * — not `.immomakler-gallery--horizontal_thumbs.immomakler-gallery--carousel`
 * (specificity 0,2,0). The skin's customer inline-style block sets the
 * same variables on `.immomakler-gallery` (also 0,1,0); a higher-specificity
 * default here would win the cascade and the Customizer values for height
 * and peek would never take effect. With matched 0,1,0 specificity, the
 * later-in-cascade inline-style wins as intended.
 */
.immomakler-gallery--carousel {
	--immomakler-gallery-carousel-height: 600px;
}

.immomakler-gallery--horizontal_thumbs.immomakler-gallery--carousel .immomakler-gallery__main {

	/* Fixed height instead of aspect-ratio on the wrapper. */
	aspect-ratio: auto;
	height: var(--immomakler-gallery-carousel-height);
}

/*
 * In carousel mode, each slide:
 *   - has the carousel's fixed height (via `height: 100%` of the swiper);
 *   - has a width derived from `--immomakler-gallery-main-aspect`. With
 *     a numeric ratio (e.g. `4/3`, `16/9`), slide width = height × aspect.
 *     With `auto` (the "Original" customizer option), slide width is
 *     determined by each image's natural aspect ratio — so different
 *     slides have different visual widths, matching the source photo;
 *   - is faded when not active, bright when active.
 *
 * Override the base preset's `width: calc(100% - 2 * peek)` rule
 * (which only made sense for full-width-slide peek). Carousel peek is
 * implicit: the slide is narrower than the container by virtue of its
 * aspect/height, and `centeredSlides: true` (already set in the preset's
 * Swiper config) shows neighbors on both sides.
 */
.immomakler-gallery--horizontal_thumbs.immomakler-gallery--carousel .immomakler-gallery__main .swiper-slide {
	width: auto;
	height: 100%;
	aspect-ratio: var(--immomakler-gallery-main-aspect);
	opacity: 0.5;
	transition: opacity 300ms ease;
}

.immomakler-gallery--horizontal_thumbs.immomakler-gallery--carousel .immomakler-gallery__main .swiper-slide-active {
	opacity: 1;
}

/*
 * For the "Original" aspect option, the customer-facing CSS variable
 * resolves to `auto`. With `aspect-ratio: auto` on the slide, browsers
 * fall back to the slide's intrinsic aspect (no aspect-ratio applied).
 * The slide's intrinsic aspect comes from its content — the `<img>`'s
 * natural aspect — so width tracks the image. The image fills the
 * slide via `object-fit: cover` already.
 */
.immomakler-gallery--horizontal_thumbs.immomakler-gallery--carousel .immomakler-gallery__main .swiper-slide img.immomakler-gallery__image,
.immomakler-gallery--horizontal_thumbs.immomakler-gallery--carousel .immomakler-gallery__main .swiper-slide picture > img.immomakler-gallery__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- Mobile: hide thumbs at 768px (matches the vertical preset)
 *
 * Default behaviour: thumbs are hidden on narrow screens (≤ 768px) — they're
 * usually too small to be useful on mobile, and giving the main image the full
 * width is a better experience. Customers can opt in to keeping the thumbs
 * visible on mobile via the Customizer's "Vorschaubilder auch auf
 * Mobilgeräten anzeigen" toggle, which adds the
 * `.immomakler-gallery--show-mobile-thumbs` modifier class to the wrapper
 * (see `gallery-swiper.php` for the wiring).
 *
 * The carousel variant is unaffected by this rule because it doesn't render
 * a thumbs row in the first place (skin sets `show_thumbs=false` for it).
 */

@media (max-width: 768px) {

	.immomakler-gallery--horizontal_thumbs .immomakler-gallery__thumbs {
		display: none;
	}

	/* Opt-in: keep thumbs visible on mobile. */
	.immomakler-gallery--horizontal_thumbs.immomakler-gallery--show-mobile-thumbs .immomakler-gallery__thumbs {
		display: block;
	}
}

/* ---------- Pagination dots (over the main image, only when thumbs hidden)
 *
 * Hidden by default. Shown when no thumb strip is visible:
 *
 *   1. `.immomakler-gallery--no-thumbs` — the no_thumbs and carousel
 *      layouts (set by Abstract_Preset when `show_thumbs=false`). Dots
 *      give the customer a "where am I in the set" cue without them.
 *
 *   2. Mobile (≤ 768px) with thumbs hidden by the responsive media query
 *      above. Customers who opt in to `--show-mobile-thumbs` keep their
 *      mobile thumb strip and don't get dots.
 *
 * Dots are styled bottom-centered with a subtle semi-transparent backdrop
 * for legibility over any image content. Active dot uses the primary
 * color; inactive dots are white at low opacity.
 */
.immomakler-gallery--horizontal_thumbs .immomakler-gallery__pagination {
	display: none;
	position: absolute;
	bottom: 8px;
	left: 0;
	right: 0;
	width: 100%;
	text-align: center;
	z-index: 1;
}

.immomakler-gallery--horizontal_thumbs.immomakler-gallery--no-thumbs .immomakler-gallery__pagination {
	display: block;
}

@media (max-width: 768px) {

	.immomakler-gallery--horizontal_thumbs:not(.immomakler-gallery--show-mobile-thumbs) .immomakler-gallery__pagination {
		display: block;
	}
}

.immomakler-gallery--horizontal_thumbs .immomakler-gallery__pagination .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	background: #fff;
	opacity: 0.6;
	margin: 0 4px;
	border-radius: 50%;
	display: inline-block;
	transition: opacity 150ms ease, background-color 150ms ease;
	cursor: pointer;

	/*
	 * Subtle outline so the white dots stay readable on bright images;
	 * cheaper than a backdrop and works with any background. The shadow
	 * is barely visible on dark areas, just enough to keep contrast.
	 */
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

.immomakler-gallery--horizontal_thumbs .immomakler-gallery__pagination .swiper-pagination-bullet-active {
	background: var(--immomakler-gallery-primary-color);
	opacity: 1;
}

/* ---------- "Wrapper rounded" modifier ----------
 *
 * Active when the Customizer's "Rundung anwenden auf" is "Gesamtgalerie".
 * The wrapper itself gets the radius + `overflow: hidden`; the per-image
 * radii on the main image and thumb slides (declared inline in their main
 * rule blocks above) are cancelled — only the OUTER corners of the gallery
 * are rounded.
 *
 * Mirrors the pattern used by the static_compact / static_fullwidth presets
 * (see preset-static-compact.css for the rationale).
 */
.immomakler-gallery--horizontal_thumbs.immomakler-gallery--rounded-wrapper {
	border-radius: var(--immomakler-gallery-border-radius, 0);
	overflow: hidden;
}

.immomakler-gallery--horizontal_thumbs.immomakler-gallery--rounded-wrapper .immomakler-gallery__main,
.immomakler-gallery--horizontal_thumbs.immomakler-gallery--rounded-wrapper .immomakler-gallery__thumbs .swiper-slide {
	border-radius: 0;
}