/**
 * Truffle Posts Carousel – Carousel-Chrome + Karten-Defaults.
 *
 * Die Karten selbst nutzen die Nectarblocks-Post-Grid-Styles
 * (.nectar-blocks-post-grid__item*). Hier setzen wir die benötigten
 * CSS-Variablen (die sonst die Nectar-Dynamik-CSS liefert) auf sinnvolle
 * Defaults und stylen das Swiper-Chrome (Pfeile/Pagination/Slides).
 */

.truffle-posts-carousel {
	--background-color: transparent;
	--text-color: inherit;
	--content-gap: 10px;
	--content-padding: 16px 0 0;
	--hover-duration: 0.5s;
	--hover-cubic-bezier: cubic-bezier(0.2, 0.6, 0.4, 1);
	--accentPrimary: #111;
	--tpc-arrow-size: 44px;
	--tpc-arrow-bg: #ffffff;
	--tpc-arrow-color: #111111;
	--tpc-arrow-border: rgba(0, 0, 0, 0.12);
	--tpc-bullet: #111111;
	--tpc-bullet-active: #111111;
	position: relative;
}

.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet::after,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet::before {
  background-color: #333 !important; 
}




/* ---- Swiper-Grundgerüst ------------------------------------------------- */
.truffle-posts-carousel__inner {
	max-width: 100%;
	position: relative;
}

.truffle-posts-carousel .tpc-swiper {
	position: relative;
	width: 100%;
	overflow: hidden; /* geboxt: an der Spaltenkante clippen */
}

/* Edge-Peek (wie Uncode/Owl): Overflow sichtbar, damit die nächste Karte rechts
   herausschaut. Geclippt wird erst am Viewport-Rand durch das Theme
   (body { overflow-x: hidden }). */
.truffle-posts-carousel.tpc-edge .tpc-swiper {
	overflow: visible;
}

.truffle-posts-carousel .swiper-wrapper {
	box-sizing: border-box;
}

/* Vor der Initialisierung (und ohne JS / im Editor) als einfache Flex-Reihe
   anzeigen, damit nichts unsichtbar bleibt. */
.truffle-posts-carousel .tpc-swiper:not(.swiper-initialized) .swiper-wrapper {
	display: flex;
	gap: var(--tpc-fallback-gap, 30px);
	overflow: hidden;
}

.truffle-posts-carousel .tpc-swiper:not(.swiper-initialized) .swiper-slide {
	flex: 0 0 calc((100% - 2 * var(--tpc-fallback-gap, 30px)) / 3);
}

.truffle-posts-carousel .swiper-slide {
	height: auto;
	display: block; /* Block statt Flex: Inhalt füllt exakt die Slide-Breite (kein shrink-to-fit) */
	min-width: 0;
	box-sizing: border-box;
}

/* Inhalt strikt auf Slide-Breite klemmen, damit kein Bild über die Slide-Box
   hinausragt und die Abstände (spaceBetween) verfälscht. */
.truffle-posts-carousel .swiper-slide > .nectar-blocks-post-grid__item,
.truffle-posts-carousel .nectar-blocks-post-grid__item__inner,
.truffle-posts-carousel .nectar-blocks-post-grid__item__featured-media {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

/* ---- Karten-Layout (content-under) ------------------------------------- */
.truffle-posts-carousel .nectar-blocks-post-grid__item__inner {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0;
}

.truffle-posts-carousel .nectar-blocks-post-grid__item__content {
	padding: var(--content-padding);
}

.truffle-posts-carousel .nectar-blocks-post-grid__item__title .nectar-blocks-title__text {
	margin: 0;
}

/* Titel/Content auf Slide-Breite begrenzen und lange Wörter umbrechen,
   damit nichts über den Container hinausragt. */
.truffle-posts-carousel .nectar-blocks-post-grid__item__content,
.truffle-posts-carousel .nectar-blocks-post-grid__item__content__inner,
.truffle-posts-carousel .nectar-blocks-post-grid__item__title {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.truffle-posts-carousel .nectar-blocks-post-grid__item__title,
.truffle-posts-carousel .nectar-blocks-post-grid__item__title .nectar-blocks-title__text,
.truffle-posts-carousel .nectar-blocks-post-grid__item__title a {
	white-space: normal;
	overflow-wrap: break-word;
	word-break: break-word;
	hyphens: auto;
}

/* Default-Titelgröße nur, wenn KEINE optische Klasse h1–h6 gewählt wurde.
   Bei gewählter Klasse stylen die Theme-Klassen .h1–.h6 (Uncode/Nectar). */
.truffle-posts-carousel .nectar-blocks-post-grid__item__title .nectar-blocks-title__text.tpc-title--default {
	font-size: 0.938rem;
	line-height: 1.125;
	opacity:0.5;
}

.truffle-posts-carousel .nectar-blocks-post-grid__item__inline-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	opacity: 0.8;
	font-size: 0.85rem;
}

.truffle-posts-carousel .nectar-blocks-post-grid__item__author .has-gravatar {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.truffle-posts-carousel .nectar-blocks-post-grid__item__author img {
	width: 24px;
	height: 24px;
	border-radius: 50%;
}

/* ---- Bild-Seitenverhältnisse ------------------------------------------- */
.truffle-posts-carousel .nectar-blocks-post-grid__item__featured-media {
	position: relative;
	overflow: hidden;
	width: 100%;
}

.truffle-posts-carousel .nectar-blocks-post-grid__item__featured-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.truffle-posts-carousel.tpc-ratio-4x3 .nectar-blocks-post-grid__item__featured-media { aspect-ratio: 4 / 3; }
.truffle-posts-carousel.tpc-ratio-3x2 .nectar-blocks-post-grid__item__featured-media { aspect-ratio: 3 / 2; }
.truffle-posts-carousel.tpc-ratio-16x9 .nectar-blocks-post-grid__item__featured-media { aspect-ratio: 16 / 9; }
.truffle-posts-carousel.tpc-ratio-1x1 .nectar-blocks-post-grid__item__featured-media { aspect-ratio: 1 / 1; }
.truffle-posts-carousel.tpc-ratio-3x4 .nectar-blocks-post-grid__item__featured-media { aspect-ratio: 3 / 4; }
.truffle-posts-carousel.tpc-ratio-5x7 .nectar-blocks-post-grid__item__featured-media { aspect-ratio: 5 / 7; }
.truffle-posts-carousel.tpc-ratio-auto .nectar-blocks-post-grid__item__featured-media { aspect-ratio: auto; }

.truffle-posts-carousel .tpc-no-image {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 180px;
	background: linear-gradient(135deg, #f2f2f2, #e2e2e2);
}

/* ---- V13: Schwarzes Logo-Overlay über dem Vorschaubild ----------------- */
.truffle-posts-carousel .tpc-logo-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16%;
	box-sizing: border-box;
	background: rgba(0, 0, 0, var(--tpc-logo-opacity, 0.7));
	pointer-events: none; /* Klicks gehen an den Bild-Link darunter */
}

.truffle-posts-carousel .tpc-logo-overlay__logo {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
	height: 32px;
	max-height: 32%;
}

/* Logos (SVG oder PNG) immer weiß einfärben, damit sie auf Schwarz sichtbar sind.
   Einheitliche Höhe statt einheitlicher Bounding-Box, damit breite Wortmarken
   (z.B. HANSAINVEST, The Pioneer) nicht kleiner wirken als quadratischere
   Logos (z.B. V-CHECK). max-width bleibt als Sicherheitsnetz gegen Überlauf. */
.truffle-posts-carousel .tpc-logo-overlay__logo img,
.truffle-posts-carousel .tpc-logo-overlay__logo svg {
	display: block;
	width: auto;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
	object-position: center bottom;
	filter: brightness(0) invert(1);
}

.truffle-posts-carousel .tpc-logo-overlay__logo svg,
.truffle-posts-carousel .tpc-logo-overlay__logo svg * {
	fill: #fff !important;
	color: #fff !important;
}

/* ---- Taxonomie-Badges --------------------------------------------------- */
.truffle-posts-carousel .nectar-blocks-post-grid__item__taxonomies {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 5;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.truffle-posts-carousel .nectar-blocks-post-grid__item__taxonomies .style--button {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--tpc-arrow-bg);
	color: var(--tpc-arrow-color);
	font-size: 0.72rem;
	line-height: 1.2;
	text-decoration: none;
}

/* ---- Pfeile ------------------------------------------------------------- */
.truffle-posts-carousel .swiper-button-wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	pointer-events: none;
}

.truffle-posts-carousel .swiper-button-prev,
.truffle-posts-carousel .swiper-button-next {
	position: relative;
	top: auto;
	left: auto;
	right: auto;
	margin: 0;
	pointer-events: all;
	width: var(--tpc-arrow-size);
	height: var(--tpc-arrow-size);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--tpc-arrow-border);
	border-radius: 50%;
	background: var(--tpc-arrow-bg);
	color: var(--tpc-arrow-color);
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
	transition: transform 0.25s ease, opacity 0.25s ease, background 0.25s ease;
	align-self: center;
}

.truffle-posts-carousel .swiper-button-prev:hover,
.truffle-posts-carousel .swiper-button-next:hover {
	transform: scale(1.08);
}

.truffle-posts-carousel .swiper-button-prev::after,
.truffle-posts-carousel .swiper-button-next::after {
	content: none;
}

.truffle-posts-carousel .swiper-button-disabled {
	opacity: 0.35;
	cursor: default;
}

.truffle-posts-carousel .swiper-button-prev { margin-left: 8px; }
.truffle-posts-carousel .swiper-button-next { margin-right: 8px; }

/* ---- Pagination (Owl-Style: außerhalb, unterhalb, linksbündig) ---------- */
.truffle-posts-carousel .swiper-pagination-wrap {
	position: static;
	display: flex;
	justify-content: flex-start; /* linksbündig wie .owl-dots-align-left */
	width: 100%;
	margin-top: 22px;
	padding: 0;
	pointer-events: auto;
}

.truffle-posts-carousel .swiper-pagination {
	position: static;
	display: inline-flex;
	align-items: center;
	width: auto;
	transform: none;
	left: auto;
	bottom: auto;
}

.truffle-posts-carousel .swiper-pagination .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	margin: 0 6px;
	border-radius: 50%;
	background: var(--tpc-bullet, #ccc) !important;
	opacity: 0.5;
	transform: scale(0.8);
	transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out, background 0.2s ease-in-out;
}

.truffle-posts-carousel .swiper-pagination .swiper-pagination-bullet:first-child {
	margin-left: 0;
}

.truffle-posts-carousel .swiper-pagination .swiper-pagination-bullet-active,
.truffle-posts-carousel .swiper-pagination .swiper-pagination-bullet:hover {
	opacity: 1;
	transform: scale(1);
	background: var(--tpc-bullet-active, #ccc);
}

/* ---- Hover-Zoom (1:1 wie Uncode tmb-image-anim) ------------------------ */
/* Referenz: das Bild zoomt beim Hover auf scale(1.05) mit
   cubic-bezier(.57,.21,.69,1) über 0.3s, geclippt durch overflow:hidden.
   Da hier zusätzlich ein schwarzes Logo-Overlay über dem Bild liegt, zoomt die
   gesamte Kachel (Bild + Overlay + Logo) gemeinsam, damit die Bewegung – wie in
   der Referenz – sichtbar bleibt. */
.truffle-posts-carousel.tpc-hover-zoom .nectar-blocks-post-grid__item__featured-media {
	overflow: hidden;
}

.truffle-posts-carousel.tpc-hover-zoom .nectar-blocks-post-grid__item__featured-media img,
.truffle-posts-carousel.tpc-hover-zoom .nectar-blocks-post-grid__item__featured-media .tpc-logo-overlay {
	transition: transform 0.3s cubic-bezier(0.57, 0.21, 0.69, 1);
	will-change: transform;
	backface-visibility: hidden;
	transform-origin: center center;
}

.truffle-posts-carousel.tpc-hover-zoom .nectar-blocks-post-grid__item__featured-media:hover img,
.truffle-posts-carousel.tpc-hover-zoom .nectar-blocks-post-grid__item__featured-media:hover .tpc-logo-overlay {
	transform: scale(1.05);
}

/* ---- Cursor-Zustände & Dimming (wie Uncode-Referenz) ------------------- */

/* Slide-Übergang für Opazität sanft. */
.truffle-posts-carousel .swiper-slide {
	transition: opacity 0.35s cubic-bezier(0.2, 0.6, 0.4, 1);
}

/* Sichtbare (in der Spalte sitzende) Slides: voll sichtbar, Zeiger-Cursor. */
.truffle-posts-carousel .swiper-slide-visible {
	opacity: 1;
}

/* V10 – Dimming: Slides außerhalb der Spalte abdunkeln. */
.truffle-posts-carousel.tpc-dim .swiper-slide:not(.swiper-slide-visible) {
	opacity: 0.35;
}

/* V11 – Titel/Meta nur auf sichtbaren (in der Spalte sitzenden) Slides. */
.truffle-posts-carousel .nectar-blocks-post-grid__item__content {
	transition: opacity 0.35s cubic-bezier(0.2, 0.6, 0.4, 1);
}

.truffle-posts-carousel .swiper-slide:not(.swiper-slide-visible) .nectar-blocks-post-grid__item__content {
	opacity: 0;
}

/* V9 – Edge-/nicht-sichtbare Slides per Hand-Cursor als ziehbar markieren. */
.truffle-posts-carousel .swiper-slide:not(.swiper-slide-visible),
.truffle-posts-carousel .swiper-slide:not(.swiper-slide-visible) a {
	cursor: grab;
}

.truffle-posts-carousel .tpc-swiper.swiper-grabbing .swiper-slide:not(.swiper-slide-visible),
.truffle-posts-carousel .tpc-swiper.swiper-grabbing .swiper-slide:not(.swiper-slide-visible) a {
	cursor: grabbing;
}

/* Sichtbare Slides: nativer Zeiger-Cursor auf dem Bild-Link. */
.truffle-posts-carousel .swiper-slide-visible .nectar-blocks-post-grid__item__featured-media__inner {
	cursor: pointer;
}

/* V8 – Custom-Cursor-Follower: Kreis mit „+", folgt der Maus, skaliert über
   sichtbaren Slides hoch. */
.truffle-posts-carousel .tpc-cursor {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2147483000;
	/* Werte 1:1 aus der Referenz (.in-content span): 90px Kreis, #515151, opacity .95 */
	width: var(--tpc-cursor-size, 90px);
	height: var(--tpc-cursor-size, 90px);
	margin: 0;
	border-radius: 50%;
	background: var(--tpc-cursor-bg, rgb(81, 81, 81));
	pointer-events: none;
	transform: translate(-50%, -50%) scale(0.4);
	opacity: 0;
	transition: transform 0.3s cubic-bezier(0.57, 0.21, 0.69, 1), opacity 0.3s cubic-bezier(0.57, 0.21, 0.69, 1);
	display: flex;
	align-items: center;
	justify-content: center;
	will-change: transform, left, top;
}

.truffle-posts-carousel .tpc-cursor.is-active {
	transform: translate(-50%, -50%) scale(1);
	opacity: var(--tpc-cursor-opacity, 0.8);
}

.truffle-posts-carousel .tpc-cursor__plus {
	position: relative;
	width: 16px;
	height: 16px;
	display: block;
}

.truffle-posts-carousel .tpc-cursor__plus::before,
.truffle-posts-carousel .tpc-cursor__plus::after {
	content: "";
	position: absolute;
	background: #fff;
}

.truffle-posts-carousel .tpc-cursor__plus::before {
	left: 50%;
	top: 0;
	width: 1px;
	height: 100%;
	transform: translateX(-50%);
}

.truffle-posts-carousel .tpc-cursor__plus::after {
	top: 50%;
	left: 0;
	height: 1px;
	width: 100%;
	transform: translateY(-50%);
}

/* Touch-Geräte: kein Follower. */
@media ( hover: none ), ( pointer: coarse ) {
	.truffle-posts-carousel .tpc-cursor {
		display: none;
	}
}

/* ---- Editor-Vorschau ---------------------------------------------------- */
.truffle-posts-carousel--empty {
	padding: 24px;
	border: 1px dashed rgba(0, 0, 0, 0.2);
	border-radius: 8px;
	text-align: center;
	opacity: 0.7;
}

/* Reduzierte Bewegung respektieren. */
@media ( prefers-reduced-motion: reduce ) {
	.truffle-posts-carousel .swiper-wrapper {
		transition: none !important;
	}
}