/* ============================================================
   Lay Theme Integral
   ============================================================ */

/* Menu container: no margin/padding by default (the Customizer "Abstand"
   options add margin around the whole menu when set). */
.lay-integral {
	margin: 0;
	padding: 0;
}

/* ---- Category filter bar (above the menu) ----
   A flowing inline row of clickable category names. Colours (default / hover /
   active) come from the backend options (emitted as #lay-integral-filter-css);
   spacing above/below comes from the Customizer. */
.lay-integral-filter {
	line-height: inherit;
}

.lay-integral-filter-item {
	display: inline;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
	text-transform: inherit;
	cursor: pointer;
	transition: opacity 0.2s ease, color 0.2s ease;
}

.lay-integral-filter-sep {
	display: inline;
}

/* Filtered-out entries are removed from the flowing menu. For fade/slide the JS
   first sets .is-filtering-out (animated) and then .is-filtered-out (removed). */
.lay-integral-entry.is-filtered-out {
	display: none;
}

.lay-integral[data-filter-transform="fade"] .lay-integral-entry,
.lay-integral[data-filter-transform="slide"] .lay-integral-entry {
	transition: opacity var(--lay-integral-filter-dur, 300ms) ease, transform var(--lay-integral-filter-dur, 300ms) ease;
}
.lay-integral[data-filter-transform="fade"] .lay-integral-entry.is-filtering-out {
	opacity: 0;
}
.lay-integral[data-filter-transform="slide"] .lay-integral-entry.is-filtering-out {
	opacity: 0;
	transform: translateY(-6px);
}

/* ---- Menu index (flowing inline text) ----
   Entries flow inline and wrap like text. The default alignment is left;
   the Customizer "Ausrichtung" option overrides text-align here. */

.lay-integral-index {
	line-height: inherit;
	text-align: left;
}

.lay-integral-entry {
	display: inline;
	transition: opacity 0.25s ease;
}

.lay-integral.has-active .lay-integral-entry:not(.is-active) {
	opacity: 0.5;
}

.lay-integral.has-active .lay-integral-entry.is-active {
	opacity: 1;
}

/* ---- Row (the clickable inline unit) ---- */

.lay-integral-row {
	display: inline-flex;
	align-items: baseline;
	gap: 0 0.4em;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	vertical-align: baseline;
}

.lay-integral-entry.is-active .lay-integral-row {
	font-weight: inherit;
}

/* ---- Title ---- */

.lay-integral-title {
	white-space: nowrap;
	text-transform: inherit;
	text-decoration: inherit;
}

.lay-integral-location {
	font-weight: normal;
	text-transform: none;
	margin-left: 0.3em;
	letter-spacing: 0;
}

/* Date keeps a normal weight + dimmed look by default. */
.lay-integral-date {
	font-weight: normal;
	letter-spacing: 0;
	opacity: 0.65;
	margin-left: 0.3em;
}

.lay-integral-date,
.lay-integral-categories,
.lay-integral-tags {
	text-transform: none;
}

/* Categories/Tags inherit colour/spacing fully from the Customizer / Text
   Format; no hardcoded dimming and NO margins — the only gap between title,
   category and tag is the fixed   separator. */
.lay-integral-categories,
.lay-integral-tags {
	letter-spacing: inherit;
	color: inherit;
	opacity: 1;
	margin: 0;
}

/* Separator between title/category/tag is always a single  . */
.lay-integral-meta-sep {
	display: inline;
}

/* ---- Inline thumbnails ---- */

.lay-integral-thumbnails {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: nowrap;
	gap: 2px;
	vertical-align: baseline;
}

/* Mobile: let the inline thumbnail row wrap onto multiple lines instead of
   overflowing the viewport horizontally when there are many/large thumbnails.
   (The inline-flex box respects the available line width and wraps — verified.) */
@media (max-width: 600px) {
	.lay-integral-thumbnails {
		flex-wrap: wrap;
	}
}

/* Configurable separator between the title and the thumbnails (Settings ->
   "Thumbnail Separator"). No padding/margin of its own on either side: it
   cancels the row's flex gap on both sides so it sits flush against the
   title and the thumbnails, with only its own glyph providing any space. */
.lay-integral-thumb-sep {
	display: inline;
	padding: 0;
	margin-left: -0.4em;
	margin-right: -0.4em;
}

.lay-integral-thumb {
	display: inline-block;
	height: 1.35em;
	width: auto;
	object-fit: cover;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

/* Thumbnails double as slideshow indicators: dim the inactive ones
   while a panel is open and highlight the current slide. */
.lay-integral-entry.is-active .lay-integral-thumb {
	opacity: 0.45;
}

.lay-integral-entry.is-active .lay-integral-thumb.is-current {
	opacity: 1;
}

/* ---- Separator ---- */

.lay-integral-separator {
	display: inline;
}

/* ---- Description trigger ---- */

.lay-integral-desc-trigger {
	display: inline;
	opacity: 0.55;
	cursor: pointer;
}

/* ---- Panel (dropdown opening directly under the menu entry) ---- */

.lay-integral-panel {
	display: none;
	/* No explicit width: as an auto-width block it fills the row, and the
	   "Abstand" negative margins can expand it out of the padding on BOTH
	   sides (a fixed width:100% would only let the left side break out). */
	margin: 0.6em 0 1em;
}

.lay-integral-panel.is-open {
	display: block;
}

/* Full project page loaded (via Ajax) inline in the dropdown. */
.lay-integral-page {
	width: 100%;
}

/* Uniform carousel presentation inside an open dropdown, no matter which size
   mode the carousel was authored in (Carousel Addon: fixedHeight /
   useCustomAspectRatio / aspectRatioOfFirstElement).

   Collision-safety with the Carousel Addon + per-post settings:
   - The addon sets the height either as `height:calc(...)` in the grid-frame
     <style> (fixedHeight mode) or as an inline `padding-bottom:%` aspect trick
     on `.lay-carousel` (aspect modes). We override BOTH: `!important` beats the
     addon's non-important grid-frame rule, and `padding-bottom:0` neutralises
     the aspect trick. Different property (height vs the addon's), so no cascade
     fight beyond the intended override.
   - Swiper (transition "sliding") writes an inline per-slide `width` derived
     from the image aspect ratio. Our `!important` slide width overrides that for
     layout, and because this CSS is loaded BEFORE Swiper initialises, Swiper
     measures the width from the start — its slidesSizesGrid matches, so
     paging/snapping stays exact (verified: 4 slides → translate 4×(480+16)). */

/* Shared (all breakpoints): slides fill their box, images cover it. */
.lay-integral-page .lay-carousel .slide-inner {
	width: 100% !important;
	height: 100% !important;
}

.lay-integral-page .lay-carousel .carousel-img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

/* Desktop (>600px): fixed 50svh height for a consistent dropdown viewport. */
@media (min-width: 601px) {
	.lay-integral-page .lay-carousel {
		height: 50svh !important;
		padding-bottom: 0 !important;
	}
}

/* Tablet (601–1024px): FORCE each image into a 4:3 landscape tile. The slide box
   is pinned to both a definite height (50svh) and a 4:3 aspect (width follows),
   so `object-fit:cover` on the image crops it to 4:3 no matter what the carousel
   was authored as. Pinning the slide HEIGHT (not just the width) is what makes
   the box a real 4:3 rectangle even when Swiper doesn't stretch the slide. */
@media (min-width: 601px) and (max-width: 1024px) {
	.lay-integral-page .lay-carousel .lay-carousel-slide {
		height: 50svh !important;
		width: calc(50svh * 4 / 3) !important;
	}
}

/* Large screens (≥1025px): the forced 4:3 ratio is lifted for ALL instances —
   slides keep their natural authored aspect (width follows the image at the 50svh
   height), so the images render as they were loaded into the carousel. */
@media (min-width: 1025px) {
	.lay-integral-page .lay-carousel .lay-carousel-slide {
		width: auto !important;
	}
}

/* Mobile (≤600px): FORCE every carousel into a full-width 4:3 landscape,
   regardless of any per-post "Eigene Höhe für Phone". The container height
   follows the full-bleed width via aspect-ratio, the single full-width slide
   fills it, and `object-fit:cover` crops the image to 4:3. Applied to ALL
   carousels (no `.lay-integral-mobile-h` gate) so per-post phone heights can't
   leave portrait images uncropped. */
@media (max-width: 600px) {
	.lay-integral-page .lay-carousel {
		height: auto !important;
		aspect-ratio: 4 / 3 !important;
		padding-bottom: 0 !important;
	}

	.lay-integral-page .lay-carousel .lay-carousel-slide {
		width: 100% !important;
		height: 100% !important;
	}
}

/* ---- Referenzen (instance 3): plain text list, no thumbnails, no dropdown -- */
/* Each entry is its own block. Title + year + parent-grouped categories all flow
   INLINE on one continuous run and wrap across lines as needed (no forced break
   between the title and the meta). */
.lay-integral-instance-3 .lay-integral-entry {
	display: block;
}

/* Filtered-out entries must collapse (no gap). The block rule above has the same
   specificity as the base `.lay-integral-entry.is-filtered-out` but comes later,
   so it would otherwise win and keep the hidden entry in flow — re-assert the
   removal at higher specificity so filtered posts slide up instead of leaving
   a gap. */
.lay-integral-instance-3 .lay-integral-entry.is-filtered-out {
	display: none;
}

.lay-integral-instance-3 .lay-integral-row {
	display: block;
	text-decoration: none;
	cursor: default; /* Referenzen entries are not links */
}

/* Title flows INLINE so the year and meta continue on the same run; formatting
   comes from the backend-selected Text Format. white-space:normal lets it wrap. */
.lay-integral-instance-3 .lay-integral-title,
.lay-integral-instance-3 .lay-integral-title-text {
	display: inline;
	white-space: normal;
}

/* Ort + Land ("Ort, Land"), shown right after the title with no labels. */
.lay-integral-instance-3 .lay-integral-ref-location {
	white-space: normal;
}

/* Meta flows inline right after the year — no line break before it. */
.lay-integral-instance-3 .lay-integral-meta {
	display: inline;
}

/* Each group ("<strong>Parent</strong> value, value") stays together; a trailing
   space (in the markup) separates groups. */
.lay-integral-instance-3 .lay-integral-meta-group {
	display: inline;
}

/* Parent label = bold; the value list keeps its Text Format's weight. */
.lay-integral-instance-3 .lay-integral-meta-parent {
	font-weight: 700;
}

/* Show a subtle loading hint only when an OPEN panel is still loading
   (prefetching while hidden stays invisible). */
.lay-integral-panel.is-open.is-loading {
	min-height: 1.5em;
}

.lay-integral-panel.is-open.is-loading::before {
	content: "…";
	display: block;
	opacity: 0.5;
}

/* Dropdown open transform (Settings -> "Dropdown Transform"). */
.lay-integral[data-dropdown-transform="fade"] .lay-integral-panel.is-open {
	animation: lay-integral-fade 0.3s ease;
}

.lay-integral[data-dropdown-transform="slide"] .lay-integral-panel.is-open {
	animation: lay-integral-slide 0.3s ease;
}

@keyframes lay-integral-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes lay-integral-slide {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: none; }
}

/* ---- Mobile (≤600px): break anywhere ----
   On the smallest screens the whole title line may break at EVERY space, to
   avoid overflow: between the title/categories/tags groups, between individual
   categories and tags, AND between the individual WORDS of the title and each
   name. `white-space` is inherited, so setting the title to `normal` (and NOT
   re-asserting `nowrap` on the title text / terms) lets every child wrap at its
   word spaces. (Breaks happen at spaces only — a single long word is not split.) */
@media (max-width: 600px) {
	.lay-integral-title {
		white-space: normal;
	}
}

/* ---- Tablet (601–1024px): allow word-level wrapping in title + categories ----
   Unlike ≤600px (which only breaks BETWEEN the title/categories/tags), in the
   601–1024px range the project title and category names may also break AFTER A
   SPACE between their own words. Set the title group + category terms to
   `white-space: normal`; tag names stay intact (`nowrap`) since only title and
   categories were requested. */
@media (min-width: 601px) and (max-width: 1024px) {
	.lay-integral-title,
	.lay-integral-title-text,
	.lay-integral-categories .lay-integral-term {
		white-space: normal;
	}
	.lay-integral-tags .lay-integral-term {
		white-space: nowrap;
	}
}

/* ============================================================
   Instance 4: "Projektinfos" (ACF field groups)
   Rendered inside a post's content by [integral_projektinfos id-N].
   The label/value items flow inline one after another and wrap like
   text (between words after spaces) at every width. All typography
   (Text Format + colour) comes from the backend controls — nothing
   is hard-styled here, only the inline flow. Order = ACF field order.
   ============================================================ */
.lay-integral-projektinfos {
	margin: 0;
	white-space: normal;
}

/* Each field is one inline item; the markup already carries a normal space
   between label and value and after each item, so everything wraps like text. */
.lay-integral-pi-item,
.lay-integral-pi-label,
.lay-integral-pi-value,
.lay-integral-pi-group,
.lay-integral-pi-repeater,
.lay-integral-pi-repeater-row,
.lay-integral-pi-flexible,
.lay-integral-pi-flex-row {
	display: inline;
}

/* Inline media (image/gallery fields) stays inline with the text flow. */
.lay-integral-pi-image {
	display: inline-block;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}
.lay-integral-projektinfos .lay-integral-pi-value img + img {
	margin-left: 0.4em;
}