/*
 cascade.css @ GULA
 Author: SteckDesign
 Author URI: http://www.steckdesign.ch/
 Version: 3.0

 Justified: reines CSS via Seitenverhältnis (--r), kein JS, kein Beschnitt.
 Masonry:   nativ (grid-lanes) wo verfügbar, sonst Vanilla-JS-Packer,
            Fallback = gleichmässiges Grid.
*/

/* ============================================================
   Gemeinsame Defaults
   ============================================================ */
.cascade {
	--cascade-gap-col: 10px; /* horizontal (Spalten) */
	--cascade-gap-row: 10px; /* vertikal (Reihen)    */
	/* padding-left:  calc(var(--size-1, 16px) * 1);
	padding-right: calc(var(--size-1, 16px) * 1); */
}

/* Theme-Margin von <figure> bedingungslos neutralisieren — sonst entsteht in
   den Nicht-JS-Pfaden (grid-lanes / Grid-Fallback) ein zu grosser vertikaler
   Abstand, weil viele Themes figure{margin:0 0 1em} setzen. */
.cascade-item,
.cascade-grid-item {
	margin: 0;
}

.cascade-item img,
.cascade-grid-item img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	transition: opacity .5s ease;
}
.cascade-item:hover img,
.cascade-grid-item:hover img {
	opacity: .8;
}

.cascade-link {
	display: flex;
	justify-content: center;
	align-items: center;
}


/* ============================================================
   JUSTIFIED  (Flexbox — gleich hohe Reihen, echte Proportionen)
   ============================================================ */
.cascade-justified {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cascade-gap-row, 10px) var(--cascade-gap-col, 10px);
	/* Ziel-Reihenhöhe; pro Galerie überschreibbar */
	--cascade-row: 220px;
}
.cascade-justified .cascade-item {
	position: relative;
	margin: 0;
	/* flex-grow + flex-basis proportional zum Seitenverhältnis:
	   Querformate werden breiter, Hochformate schmaler, alle gleich hoch. */
	flex-grow: var(--r, 1);
	flex-basis: calc(var(--r, 1) * var(--cascade-row));
}
/* Hält die letzte, unvollständige Reihe auf Zielhöhe (kein Strecken). */
.cascade-fill {
	flex-grow: 1000;
	flex-basis: 0;
	height: 0;
	margin: 0;
	padding: 0;
}
/* Bild fuellt die (gleich hohe) Reihe buendig -> Hover-Linie sitzt direkt am
   Bildrand, kein vertikaler Spalt durch Sub-Pixel-Rundung der Flex-Hoehen. */
.cascade-justified .cascade-item { overflow: hidden; }
.cascade-justified .cascade-link { width: 100%; height: 100%; }
.cascade-justified .cascade-link img { width: 100%; height: 100%; object-fit: cover; }


/* ============================================================
   MASONRY
   ============================================================ */
.cascade-grid {
	--cascade-cols: 3;
	display: grid;
	grid-template-columns: repeat(var(--cascade-cols), 1fr);
	gap: var(--cascade-gap-row, 10px) var(--cascade-gap-col, 10px);
}
.cascade-grid .cascade-grid-item {
	position: relative;
}

/* JS-Packer aktiv: Items werden absolut positioniert (Breite/Top/Left per JS). */
.cascade-grid.cascade-masonry-ready {
	display: block;
}
.cascade-grid.cascade-masonry-ready .cascade-grid-item {
	margin: 0;
}

/* Native CSS-Masonry, wo verfügbar (links→rechts, Proportionen erhalten).
   Das JS erkennt grid-lanes und überlässt das Layout dann dem Browser. */
@supports (display: grid-lanes) {
	.cascade-grid {
		display: grid-lanes;
		grid-template-columns: repeat(var(--cascade-cols), 1fr);
	}
}

/* Spaltenzahl + Breakpoints (mirror der bisherigen Galerie) */
.cascade-cols-2 { --cascade-cols: 2; }
.cascade-cols-3 { --cascade-cols: 3; }
.cascade-cols-4 { --cascade-cols: 4; }
.cascade-cols-5 { --cascade-cols: 5; }
.cascade-cols-6 { --cascade-cols: 6; }

@media (max-width: 1199px) {
	.cascade-cols-5,
	.cascade-cols-6 { --cascade-cols: 4; }
}
@media (max-width: 991px) {
	.cascade-cols-4,
	.cascade-cols-5,
	.cascade-cols-6 { --cascade-cols: 3; }
}
@media (max-width: 767px) {
	.cascade-grid { --cascade-cols: 2; }
}
@media (max-width: 479px) {
	.cascade-grid { --cascade-cols: 1; }
}


/* ============================================================
   Caption-Overlay (Hover)
   ============================================================ */
.cascade-caption {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	opacity: 0;
	transition: all .5s ease;
}
.cascade-item:hover  .cascade-caption,
.cascade-grid-item:hover .cascade-caption {
	background: rgba(58, 59, 60, 0.7);
	opacity: 1;
	-webkit-user-select: none;
	user-select: none;
}
.cascade-caption-inner {
	color: #fff;
	font-weight: 500;
	padding: 0 20px;
	transform: translate3d(0, 20px, 0);
	opacity: 0;
	transition: all .5s ease;
}
.cascade-item:hover  .cascade-caption-inner,
.cascade-item:focus  .cascade-caption-inner,
.cascade-grid-item:hover .cascade-caption-inner,
.cascade-grid-item:focus .cascade-caption-inner {
	transform: translate3d(0, 0, 0);
	opacity: 1;
}


/* ============================================================
   hborder-Variante (nurLightbox / nurMasonryLightbox)
   ============================================================ */
.cascade-hborder {
	border-bottom: 2px solid transparent;
	transition: all .5s ease;
}
.cascade-hborder:hover {
	border-bottom-color: var(--site_linkhover_color, #c00);
}
.cascade-hborder:hover img {
	filter: grayscale(100%) contrast(150%) blur(2px);
}
/* bei hborder ist der Overlay-Hintergrund transparent */
.cascade-hborder:hover .cascade-caption {
	background: rgba(58, 59, 60, 0);
}