/*!
 * WP-ImmoMakler static-fullwidth gallery preset.
 *
 * JamesEdition-style layout: large main image on the left, customer-configurable
 * rows × cols grid of secondary thumbs on the right. The preset writes four
 * CSS custom properties on the wrapper element:
 *
 *   --immomakler-gallery-static-rows           — thumb grid rows (1..4)
 *   --immomakler-gallery-static-cols           — thumb grid cols (1..4)
 *   --immomakler-gallery-static-main-aspect    — main image aspect (e.g. `3/2`)
 *   --immomakler-gallery-static-fixed-height   — explicit height (px/vh/svh/lvh/dvh)
 *
 * Plus four modifier classes that flag the layout mode:
 *
 *   --aspect_ratio        — main image's aspect drives the outer height
 *                            (thumbs grid fills the height established by main)
 *   --split_5050          — main + thumbs split the outer width 50/50;
 *                            outer height is whatever the thumb grid produces
 *   --height-fixed        — the outer height is pinned by `--fixed-height`;
 *                            overrides aspect-ratio computation
 *
 * The "Alle N Fotos anzeigen" button (when `overflow_action=button`) and any
 * other action buttons hooked in via the
 * `immomakler_gallery_static_controls_items` PHP filter render into a
 * bottom-right `.immomakler-gallery__controls` overlay — see further
 * below for the styling.
 *
 * Vanilla CSS Grid + aspect-ratio, no Bootstrap. The shared gallery loader
 * wires the lightbox via `[data-immomakler-gallery-lightbox-index]` attrs.
 */

.immomakler-gallery--static_fullwidth {

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

	/* Defaults — overridden by the preset's inline `style` block from the
	 * Customizer settings. Keep them so the gallery renders sensibly when
	 * a caller bypasses the customizer (e.g. theme-builder integrations). */
	--immomakler-gallery-static-rows: 3;
	--immomakler-gallery-static-cols: 2;
	--immomakler-gallery-static-main-aspect: 3 / 2;

	/* Colors */
	--immomakler-gallery-primary-color: #af1615;
	--immomakler-gallery-primary-color-inverted: #fff;

	display: grid;
	gap: var(--immomakler-gallery-gap);
	width: 100%;
	max-width: 100%;

	/* `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
	 * (and any future floorplan/video/tour buttons hooked in via the
	 * `immomakler_gallery_static_controls_items` filter) to anchor to
	 * the gallery corner instead of escaping to the viewport / nearest
	 * ancestor with `position`. */
	position: relative;
}

/*
 * --aspect_ratio mode: the outer column ratio is roughly 2:1 in favour of
 * the main image. Within the right column, the thumb grid has its own
 * rows × cols configuration. With 2 cols (default) each thumb is ~half of
 * that 1/3-of-width column, which lands close to 4:3 visually — matches
 * the JamesEdition reference.
 */
.immomakler-gallery--static_fullwidth.immomakler-gallery--aspect_ratio {
	grid-template-columns: 2fr 1fr;
}

/*
 * --split_5050 mode: main and thumb-grid each get half the outer width.
 *
 * Here the `--main-aspect` variable carries a DIFFERENT meaning than in
 * aspect_ratio mode: instead of describing the shape of the main image
 * alone, it describes the shape of the ENTIRE GALLERY (main + thumbs side
 * by side). So we lift the aspect-ratio property from the main image up
 * to the wrapper itself — gallery height = gallery width × inverse-aspect
 * regardless of the column split. Main image and thumb grid each fill
 * their column's full height via `height: 100%`.
 *
 * Same customer-facing setting (`gallery_static_main_aspect`), two
 * different CSS attachment points depending on `--aspect_ratio` vs
 * `--split_5050`. The Customizer's description makes this dual meaning
 * explicit to the customer.
 *
 * The `:not(.height-fixed)` qualifier on the wrapper aspect-ratio is
 * essential: in fixed-height mode the customer pinned an explicit height,
 * which must win over any aspect-ratio computation.
 */
.immomakler-gallery--static_fullwidth.immomakler-gallery--split_5050 {
	grid-template-columns: 1fr 1fr;
}

.immomakler-gallery--static_fullwidth.immomakler-gallery--split_5050:not(.immomakler-gallery--height-fixed) {
	aspect-ratio: var(--immomakler-gallery-static-main-aspect);
}

.immomakler-gallery--static_fullwidth.immomakler-gallery--split_5050 .immomakler-gallery__static-main {
	aspect-ratio: auto;
	height: 100%;
}

/*
 * Fixed-height mode: customer pins an explicit wrapper height. The main
 * image and thumb grid both fill the row track established by that
 * explicit height — neither uses aspect-ratio in this mode.
 */
.immomakler-gallery--static_fullwidth.immomakler-gallery--height-fixed {
	height: var(--immomakler-gallery-static-fixed-height, 500px);
}

/* ---------- Main image (left) ----------
 *
 * The customer's `--main-aspect` choice belongs on the MAIN IMAGE, not on
 * the outer wrapper — otherwise 3/2 would describe the gallery as a whole
 * (main + thumbs side by side) and the main image itself would end up with
 * a different, narrower shape than the customer asked for.
 *
 * With `aspect-ratio` on the main image element + `width: 100%` of its
 * grid column, the main's computed height = column_width × inverse_aspect.
 * The CSS grid row track adopts that height, the thumb-grid column then
 * fills the same height. No `height: 100%` here — that would create a
 * circular reference against the row track that the main image itself is
 * establishing.
 */
.immomakler-gallery--static_fullwidth .immomakler-gallery__static-main {
	display: block;
	grid-column: 1;
	grid-row: 1;
	width: 100%;
	min-width: 0;
	aspect-ratio: var(--immomakler-gallery-static-main-aspect);
	overflow: hidden;
	border-radius: var(--immomakler-gallery-border-radius, 0);
	cursor: zoom-in;
	color: inherit;
	text-decoration: none;
}

/*
 * In fixed-height mode the wrapper's height is pinned, so the main image
 * has to track that — drop the aspect-ratio (it would fight the pinned
 * height) and use `height: 100%` of the row track instead.
 */
.immomakler-gallery--static_fullwidth.immomakler-gallery--height-fixed .immomakler-gallery__static-main {
	aspect-ratio: auto;
	height: 100%;
}

.immomakler-gallery--static_fullwidth .immomakler-gallery__static-main .immomakler-gallery__image,
.immomakler-gallery--static_fullwidth .immomakler-gallery__static-main 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_fullwidth .immomakler-gallery__static-main:hover .immomakler-gallery__image,
.immomakler-gallery--hover-zoom-in.immomakler-gallery--static_fullwidth .immomakler-gallery__static-main:focus-visible .immomakler-gallery__image {
	transform: scale(1.005);
}

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

/* ---------- Secondary thumbs grid (right) ---------- */

/*
 * The thumbs container occupies the right column of the outer grid and
 * fills that column's row track. Inside, the thumb anchors are laid out
 * in a rows × cols grid driven by the two CSS custom properties — the
 * customer changes the dimensions and `repeat(N, 1fr)` does the rest.
 *
 * `min-height: 0` is essential: without it, the child grid's content
 * would establish a min-content floor that defeats the parent grid's
 * row-track sizing — the gallery would silently grow taller than the
 * main image's aspect dictates.
 */
.immomakler-gallery--static_fullwidth .immomakler-gallery__static-thumbs {
	grid-column: 2;
	grid-row: 1;
	display: grid;
	gap: var(--immomakler-gallery-gap);
	min-width: 0;
	min-height: 0;
	height: 100%;
	grid-template-columns: repeat(var(--immomakler-gallery-static-cols), 1fr);
	grid-template-rows: repeat(var(--immomakler-gallery-static-rows), 1fr);
}

.immomakler-gallery--static_fullwidth .immomakler-gallery__static-thumb {
	position: relative;
	display: block;
	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, so the cursor
	 * stays consistent across main + thumbs. */
	cursor: zoom-in;
	color: inherit;
	text-decoration: none;
	min-width: 0;
	min-height: 0;
}

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

	transition: transform 200ms linear, filter 200ms linear;
	transform-origin: center;
}

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

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

/* ---------- "+ N more" overlay on the last thumb (overflow_action=overlay) ---------- */

.immomakler-gallery--static_fullwidth .immomakler-gallery__static-thumb--more {
	opacity: 1;
}

.immomakler-gallery--static_fullwidth .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(14px, 2vw, 20px);
	font-weight: 700;
	pointer-events: none;
}

/* ---------- Controls overlay (bottom-right, over the gallery) ----------
 *
 * Reusable overlay container for action items that live on top of the
 * gallery. Today only the "Alle N Fotos anzeigen" button is rendered
 * (when `overflow_action=button` AND there are hidden photos); the
 * `immomakler_gallery_static_controls_items` PHP filter lets other code
 * push more items in — e.g. "Grundriss", "Video", "Virtueller Rundgang"
 * links that anchor-jump to dedicated sections of the property page.
 *
 * Layout pattern matches JamesEdition's `je2-top-gallery__controls`:
 * absolute positioned in the bottom-right corner of the gallery, items
 * laid out as a horizontal flex row. Each item is a button-shaped
 * `<a>` with a semi-transparent backdrop so it stays legible over any
 * photo content.
 */

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

.immomakler-gallery--static_fullwidth .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
	 * (14px+14px padding + ~14px line-height = ~42px), so 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. Identical to the rule in
 * preset-static-hero.css; both presets share the same control-button
 * styling. */
.immomakler-gallery--static_fullwidth .immomakler-gallery__controls-item:hover,
.immomakler-gallery--static_fullwidth .immomakler-gallery__controls-item:focus-visible {
	background-color: #e5e5e5;
	text-decoration: none;
}

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

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

/* On mobile (≤ 768px) the thumb-grid hides and the gallery becomes the
 * main image alone. Shrink the controls so the button doesn't dominate
 * the smaller viewport. */
@media (max-width: 768px) {

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

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

/* ---------- "Wrapper rounded" modifier ----------
 *
 * See preset-static-compact.css for the full rationale. Same pattern:
 * wrapper-mode rounds the gallery's outer corners only and cancels the
 * per-image rounding; per-image-mode (default) applies the radius to
 * each individual main + thumb.
 */
.immomakler-gallery--static_fullwidth.immomakler-gallery--rounded-wrapper {
	border-radius: var(--immomakler-gallery-border-radius, 0);
	overflow: hidden;
}

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

/* ---------- Mobile: collapse to single column at 768px ---------- */

@media (max-width: 768px) {

	.immomakler-gallery--static_fullwidth,
	.immomakler-gallery--static_fullwidth.immomakler-gallery--aspect_ratio,
	.immomakler-gallery--static_fullwidth.immomakler-gallery--split_5050 {
		grid-template-columns: 1fr;
		height: auto;
	}

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