/*!
 * WP-ImmoMakler static-hero gallery preset.
 *
 * Single full-width image with a "View all N photos" button overlay,
 * bottom-right. Clicking either opens the lightbox at the first image.
 *
 * Vanilla CSS, no Bootstrap. All visual knobs are exposed as CSS custom
 * properties on the gallery wrapper. Defaults match the WP-ImmoMakler
 * default skin (link color = primary). Override via custom CSS or
 * theme-builder per-instance inline `<style>` blocks.
 */

.immomakler-gallery--static_hero {

	/* Layout */
	--immomakler-gallery-main-aspect: 16 / 9;

	/* 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;

	position: relative;
	width: 100%;
	max-width: 100%;
}

.immomakler-gallery--static_hero .immomakler-gallery__static-hero {
	position: relative;
	width: 100%;
	aspect-ratio: var(--immomakler-gallery-main-aspect);
	overflow: hidden;

	/* `--immomakler-gallery-border-radius` is the customer-configurable
	 * image corner-rounding (default 0). The hero is one image, so the
	 * value applies directly to the visible container regardless of the
	 * "per-image" vs "wrapper" mode that the multi-image static presets
	 * distinguish. */
	border-radius: var(--immomakler-gallery-border-radius, 0);
}

.immomakler-gallery--static_hero .immomakler-gallery__static-hero-image {
	display: block;
	width: 100%;
	height: 100%;
	cursor: zoom-in;
	color: inherit;
	text-decoration: none;
}

.immomakler-gallery--static_hero .immomakler-gallery__static-hero-image .immomakler-gallery__image,
.immomakler-gallery--static_hero .immomakler-gallery__static-hero-image picture > .immomakler-gallery__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;

	/* Base transitions for the hover-animation modifiers — see
	 * preset-static-compact.css for the full rationale. */
	transition: transform 200ms linear, filter 200ms linear;
	transform-origin: center;
}

.immomakler-gallery--hover-zoom-in.immomakler-gallery--static_hero .immomakler-gallery__static-hero-image:hover .immomakler-gallery__image,
.immomakler-gallery--hover-zoom-in.immomakler-gallery--static_hero .immomakler-gallery__static-hero-image:focus-visible .immomakler-gallery__image {
	transform: scale(1.005);
}

.immomakler-gallery--hover-brighten.immomakler-gallery--static_hero .immomakler-gallery__static-hero-image:hover .immomakler-gallery__image,
.immomakler-gallery--hover-brighten.immomakler-gallery--static_hero .immomakler-gallery__static-hero-image:focus-visible .immomakler-gallery__image {
	filter: brightness(1.08);
}

/* ---------- Controls overlay (bottom-right "Alle N Fotos anzeigen" + future items) ----------
 *
 * Same `.immomakler-gallery__controls` overlay pattern that static_fullwidth
 * uses. Single set of rules styles both presets — see the matching block in
 * preset-static-fullwidth.css for the full rationale. Duplicated here so
 * this file stays self-contained even if a future enqueue path loads only
 * the hero stylesheet (today both are always enqueued together, but the
 * rule duplication is cheap and removes a fragile dependency).
 */

.immomakler-gallery--static_hero .immomakler-gallery__controls {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 2;
	display: flex;
	gap: 8px;
	pointer-events: none;
}

.immomakler-gallery--static_hero .immomakler-gallery__controls-item {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 14px 20px;
	background-color: rgba(255, 255, 255, 0.95);
	color: #1a1a1a;
	border: 0;

	/* Pill shape — 21px is half the button's natural height, so the
	 * border-radius fully rounds the ends. Browsers cap border-radius at
	 * half the smaller dimension, so the same value stays pill-shaped on
	 * mobile where the button is smaller. */
	border-radius: 21px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 150ms ease;
}

/* No underline, no `transform`-driven movement — the visual feedback is the
 * background-color shift to lightgrey alone. */
.immomakler-gallery--static_hero .immomakler-gallery__controls-item:hover,
.immomakler-gallery--static_hero .immomakler-gallery__controls-item:focus-visible {
	background-color: #e5e5e5;
	text-decoration: none;
}

.immomakler-gallery--static_hero .immomakler-gallery__controls-item-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.immomakler-gallery--static_hero .immomakler-gallery__controls-item-icon svg {
	display: block;
	width: 18px;
	height: 18px;
}

@media (max-width: 768px) {

	.immomakler-gallery--static_hero .immomakler-gallery__controls {
		right: 8px;
		bottom: 8px;
	}

	.immomakler-gallery--static_hero .immomakler-gallery__controls-item {
		padding: 10px 16px;
		font-size: 13px;
	}
}