/*!
 * 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 {

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

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

@media (max-width: 768px) {

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