/*!
 * WP-ImmoMakler static-compact gallery preset.
 *
 * Layout: large main image on top, customer-configurable rows × cols grid of
 * secondary thumbs below.
 * Vanilla CSS Grid, no Bootstrap. The last visible thumb shows a "+ N"
 * overlay when there are more images than visible slots; clicking any
 * image (main or thumb) opens the lightbox at its index.
 *
 * All visual knobs are exposed as CSS custom properties on the gallery
 * wrapper. Defaults match the WP-ImmoMakler default skin.
 */

.immomakler-gallery--static_compact {

	/* `position: relative` makes the wrapper the positioning context for
	 * the absolutely-positioned `.immomakler-gallery__controls` overlay
	 * (bottom-right, see further down). Required for the show-all button
	 * (when `overflow_action=button`) and for any future items pushed in
	 * via the `immomakler_gallery_static_controls_items` filter. Same
	 * pattern Static_Fullwidth uses on its wrapper. */
	position: relative;

	/* Layout */
	--immomakler-gallery-gap: 6px;

	/* Default matches the Customizer's `gallery_static_main_aspect`
	 * registered default (3/2). The preset emits an inline-style
	 * override based on the customer's saved value; this fallback only
	 * kicks in for callers that bypass the customizer entirely. */
	--immomakler-gallery-main-aspect: 3 / 2;
	--immomakler-gallery-thumb-aspect: 16 / 9;

	/* Thumb-grid dimensions. Defaults match the registered customizer
	 * defaults for `gallery_static_compact_thumb_rows` / `_cols`
	 * (1 row × 4 columns — the long-standing flat four-thumb strip).
	 * Preset emits an inline-style override based on the customer's
	 * saved values; this fallback only kicks in for callers that bypass
	 * the customizer entirely. */
	--immomakler-gallery-static-rows: 1;
	--immomakler-gallery-static-cols: 4;

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

	display: flex;
	flex-direction: column;
	gap: var(--immomakler-gallery-gap);
	width: 100%;
	max-width: 100%;
}

/* ---------- Main image (top) ---------- */

.immomakler-gallery--static_compact .immomakler-gallery__static-main {
	display: block;
	width: 100%;
	aspect-ratio: var(--immomakler-gallery-main-aspect);
	overflow: hidden;
	border-radius: var(--immomakler-gallery-border-radius, 0);
	cursor: zoom-in;
	color: inherit;
	text-decoration: none;
}

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

	/* Both transitions live on the image regardless of the active
	 * hover-animation modifier (`--hover-zoom-in` / `--hover-brighten`
	 * / `--hover-none`). The "wrong" property in any given mode is
	 * a no-op — there's nothing to transition unless the matching
	 * :hover rule below sets a value. `transform-origin: center`
	 * applies only when transform is set; otherwise inert. */
	transition: transform 200ms linear, filter 200ms linear;
	transform-origin: center;
}

/* ---------- Hover animation: zoom-in (default) ----------
 *
 * Slight scale-in on hover. The wrapper's `overflow: hidden` clips
 * the bleed cleanly. Smaller scale on the main image than on the
 * thumbs (1.005 vs 1.0075) — the main image is much larger, so a
 * percentage scale translates to noticeably more pixel travel.
 * Going a shade smaller here keeps the perceived "lift" roughly
 * consistent with the thumb hover.
 */
.immomakler-gallery--hover-zoom-in.immomakler-gallery--static_compact .immomakler-gallery__static-main:hover .immomakler-gallery__image,
.immomakler-gallery--hover-zoom-in.immomakler-gallery--static_compact .immomakler-gallery__static-main:focus-visible .immomakler-gallery__image {
	transform: scale(1.005);
}

/* ---------- Hover animation: brighten ----------
 *
 * `filter: brightness(1.08)` lifts the image without scaling. 8 % is
 * subtle enough not to clip highlights on already-bright property
 * photos, but visible enough to register as feedback. Pure CSS
 * filter — no GPU surprises, the wrapper still clips nothing.
 */
.immomakler-gallery--hover-brighten.immomakler-gallery--static_compact .immomakler-gallery__static-main:hover .immomakler-gallery__image,
.immomakler-gallery--hover-brighten.immomakler-gallery--static_compact .immomakler-gallery__static-main:focus-visible .immomakler-gallery__image {
	filter: brightness(1.08);
}

/* `.immomakler-gallery--hover-none` intentionally has no rule — the
 * base transitions above are inert without a matching :hover value,
 * so the image renders perfectly still on hover. */

/* ---------- Secondary thumbs row ---------- */

.immomakler-gallery--static_compact .immomakler-gallery__static-thumbs {
	display: grid;

	/* Explicit column count drives row wrapping: with N columns and
	 * (rows × cols) items, the items auto-flow into `rows` implicit
	 * rows. Don't add a `grid-template-rows: repeat(N, ...)` rule on
	 * top — explicit row tracks with `auto` interact with the thumb's
	 * own `aspect-ratio` rule in some browsers to keep all items on a
	 * single shrunken row instead of wrapping. The thumb count itself
	 * is rows-aware (Static_Compact_Preset renders `rows × cols`
	 * thumbs), so the visible-row count is implicit from the items. */
	grid-template-columns: repeat(var(--immomakler-gallery-static-cols, 4), minmax(0, 1fr));
	gap: var(--immomakler-gallery-gap);
}

.immomakler-gallery--static_compact .immomakler-gallery__static-thumb {
	position: relative;
	display: block;
	aspect-ratio: var(--immomakler-gallery-thumb-aspect);
	overflow: hidden;
	border-radius: var(--immomakler-gallery-border-radius, 0);

	/* `zoom-in` matches the main image's cursor — every clickable
	 * tile in the static gallery opens the lightbox at that image,
	 * so the cursor signals that consistently. */
	cursor: zoom-in;
	color: inherit;
	text-decoration: none;
	min-width: 0;
}

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

	/* Base transitions for the thumb hover-animation modifiers — see
	 * the main image rule above for the rationale. */
	transition: transform 200ms linear, filter 200ms linear;
	transform-origin: center;
}

.immomakler-gallery--hover-zoom-in.immomakler-gallery--static_compact .immomakler-gallery__static-thumb:hover .immomakler-gallery__image,
.immomakler-gallery--hover-zoom-in.immomakler-gallery--static_compact .immomakler-gallery__static-thumb:focus-visible .immomakler-gallery__image {
	transform: scale(1.0075);
}

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

/* ---------- "+ N more" overlay on the last thumb ---------- */

.immomakler-gallery--static_compact .immomakler-gallery__static-thumb--more {

	/* The overlay covers the thumb's full area. */
	opacity: 1;
}

.immomakler-gallery--static_compact .immomakler-gallery__static-thumb-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: clamp(16px, 4vw, 24px);
	font-weight: 700;
	pointer-events: none;
}

/* ---------- "Wrapper rounded" modifier ----------
 *
 * Customer-facing option: when the Customizer's "Rundung anwenden auf"
 * setting is "Gesamtgalerie" (the whole-wrapper mode), the skin adds the
 * `--rounded-wrapper` extra class. In that mode the wrapper itself has
 * `overflow: hidden` + the configured radius — so only the OUTER corners
 * of the gallery are rounded (top of the main image, bottom of the corner
 * thumbs). Per-image rounding is cancelled.
 *
 * In the default "Jedes Bild einzeln" mode this class is absent and the
 * baseline rules above apply per-image rounding from
 * `--immomakler-gallery-border-radius`.
 */
.immomakler-gallery--static_compact.immomakler-gallery--rounded-wrapper {
	border-radius: var(--immomakler-gallery-border-radius, 0);
	overflow: hidden;
}

.immomakler-gallery--static_compact.immomakler-gallery--rounded-wrapper .immomakler-gallery__static-main,
.immomakler-gallery--static_compact.immomakler-gallery--rounded-wrapper .immomakler-gallery__static-thumb {
	border-radius: 0;
}

/* ---------- Controls overlay (button mode + extension items) ----------
 *
 * Mirrors the `.immomakler-gallery__controls` block in
 * preset-static-fullwidth.css — same shape, same hover behaviour, same pill
 * styling — so a customer's mental model of the "Alle N Fotos anzeigen"
 * affordance carries between the two static layouts, and so any callers that
 * extend the overlay via the `immomakler_gallery_static_controls_items`
 * filter get the same surface rendered identically across presets.
 *
 * Bottom-right of the whole wrapper — matches the Fullwidth pattern. In
 * compact mode the bottom-right lands inside the thumb-row area, which
 * shows the button OVER the rightmost thumb. That's intentional: the
 * button is opt-in (the customer picked `overflow_action=button` instead
 * of the default "+ N" overlay) and the rightmost thumb in compact mode
 * is the same row of thumbnails the lightbox already lets them browse,
 * so partial coverage isn't a hidden-content problem.
 */

.immomakler-gallery--static_compact .immomakler-gallery__controls {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 2;
	display: flex;
	gap: 8px;

	/* `pointer-events: none` on the overlay itself so the "empty" space
	 * around the button(s) doesn't intercept clicks meant for the thumbs
	 * underneath; each `__controls-item` re-enables pointer-events for
	 * its own click target below. */
	pointer-events: none;
}

.immomakler-gallery--static_compact .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;
	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;
}

.immomakler-gallery--static_compact .immomakler-gallery__controls-item:hover,
.immomakler-gallery--static_compact .immomakler-gallery__controls-item:focus-visible {
	background-color: #e5e5e5;
	text-decoration: none;
}

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

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

/* ---------- Mobile: collapse thumbs at 768px ---------- */

@media (max-width: 768px) {

	.immomakler-gallery--static_compact .immomakler-gallery__static-thumbs {
		display: none;
	}

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

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