/* plate_suites — Inhaltselement „Unterkunft: Galerie"
 * (CType atomicplan_suitegallery, Darstellungen Raster / Slider / Mosaik).
 *
 * Farben, Linien, Radien und Abstände NUR über var(--ls-*, <fallback>) — ein
 * Projekt-Theme skinnt das Element über die Tokens; ohne Theme greifen die
 * neutralen Fallbacks.
 *
 * HARTE REGEL — Frame-System: hier steht KEIN Sektions-Hintergrund und KEIN
 * vertikales Sektions-Padding. Beides kommt ausschließlich aus den generischen
 * Frame-Feldern am Element (background_color_class, background_image,
 * space_before/after_class, frame_layout_inner_*). Ebenso KEINE Container-Breite
 * (kein max-width/margin:auto/Seiten-Padding auf dem Wrapper) — die kommt vom
 * generischen `.frame-container`.
 */

/* ---------- Raster ---------- */
.frame-type-atomicplan_suitegallery .ls-gallery--grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--ls-gallery-min, 18rem), 1fr));
	gap: var(--ls-gap, clamp(0.8rem, 2vw, 1.5rem));
}

.frame-type-atomicplan_suitegallery .ls-gallery__tile {
	margin: 0;
	overflow: hidden;
	border-radius: var(--ls-radius, 0.25rem);
}

/* Der Zuschnitt kommt aus der cropVariant „default" (4:3) im Backend — das
   aspect-ratio hält nur das Raster ruhig, solange die Bilder laden, und ist
   KEIN Ersatz-Zuschnitt. Im Mosaik gilt es bewusst NICHT: dort ist die
   unterschiedliche Höhe der Punkt. */
.frame-type-atomicplan_suitegallery .ls-gallery--grid .ls-gallery__tile {
	aspect-ratio: 4 / 3;
}

.frame-type-atomicplan_suitegallery .ls-gallery__tile img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.frame-type-atomicplan_suitegallery .ls-gallery__caption {
	margin: 0.4rem 0 0;
	font-size: 0.82rem;
	line-height: 1.4;
	color: var(--ls-muted, rgba(45, 45, 45, 0.62));
}

/* Im Raster liegt die Bildunterschrift IM Kachel-Rahmen und würde vom
   aspect-ratio abgeschnitten — dort wird sie deshalb nicht angezeigt. Mosaik
   und Slider haben Platz dafür. */
.frame-type-atomicplan_suitegallery .ls-gallery--grid .ls-gallery__caption {
	display: none;
}

/* ---------- Mosaik ----------
   CSS-Columns. `atomic-masonry` setzt column-count und column-gap INLINE am
   Ziel-Element (Ziel-Modus). Diese Regeln sind zweierlei:
     1. der Zustand OHNE JavaScript (die Komponente kann fehlschlagen),
     2. die schmalen Breiten — eine Inline-Angabe schlägt jede normale Regel,
        deshalb hier ausnahmsweise `!important`. Es überschreibt nichts, was ein
        Theme legitim setzen wollte, sondern eine feste Zahl aus fremdem JS. */
.frame-type-atomicplan_suitegallery .ls-gallery--mosaic {
	column-count: 3;
	column-gap: var(--ls-gap, clamp(0.8rem, 2vw, 1.5rem));
}

.frame-type-atomicplan_suitegallery .ls-gallery--mosaic .ls-gallery__tile {
	break-inside: avoid;
	margin-bottom: var(--ls-gap, clamp(0.8rem, 2vw, 1.5rem));
}

@media (max-width: 60rem) {
	.frame-type-atomicplan_suitegallery .ls-gallery--mosaic {
		column-count: 2 !important;
	}
}

@media (max-width: 36rem) {
	.frame-type-atomicplan_suitegallery .ls-gallery--mosaic {
		column-count: 1 !important;
	}
}

/* ---------- Slider ---------- */
.frame-type-atomicplan_suitegallery .ls-gallery--slider {
	--atomic-slider-navdots-bottom: 0.5rem;
	display: block;
	border-radius: var(--ls-radius, 0.25rem);
	overflow: hidden;
}

.frame-type-atomicplan_suitegallery .ls-gallery__slide {
	margin: 0;
}

.frame-type-atomicplan_suitegallery .ls-gallery__slide img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.frame-type-atomicplan_suitegallery .ls-gallery__slide .ls-gallery__caption {
	position: absolute;
	inset: auto 0 0 0;
	margin: 0;
	padding: 0.6rem 1rem 1.6rem;
	color: #fff;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
}

.frame-type-atomicplan_suitegallery .ls-gallery__slide {
	position: relative;
}

/* Die Steuerung der Komponente liegt in ihrem Shadow-DOM; von außen bleibt nur
   das Host-Element. Ohne JavaScript rendert sie nichts (`:host{display:none}`
   bis `initialized`) — deshalb wird der Slider nur bei mehr als einem Bild
   angeboten, sonst greift das Raster. */