/* #### IMPORTANT ####
 *
 * Mit content-box werden die slidesPerView nicht alle kpl. angezeigt.
 * Der Letzte rechte Slide scheint abgeschnitten und ragt über die VW
 * Ausserdem explizit height: auto; damit alle slides die gleiche Höhe
 * einnehmen.
 */
.swiper-slide {
	box-sizing: border-box !important;
	height: auto !important; /* alternativ initial oder unset (inherit n.i.O.) */
}
/* Problem beim dyn. slider dass slides nicht zentriert erscheinen */
.swiper-wrapper.wp-block-post-template {
	margin-left: 0 !important;
	margin-right: 0 !important;
}
/* Problem dass der erste slide einen leichten versatz nach oben hat */
[class*='sawasdee-swiper-'] .swiper-wrapper .swiper-slide {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* ==========================================================================
   SAWASDEE SLIDER ALLGEMEIN CLASS[^='sawasdee-swiper-']
   ========================================================================== */

/* root variablen und andere grundeinstellungen */
[class*='sawasdee-swiper-'] /* beinhaltet */ {
	--swiper-theme-color: var(--wp--preset--color--primary) !important;
	--swiper-navigation-size: 48px;
	--swiper-pagination-bullet-horizontal-gap: 4px;
	--swiper-navigation-sides-offset: 32px;
	--swiper-navigation-color: color-mix(
		in srgb,
		var(--swiper-theme-color),
		transparent 50%
	);
}
/* navigation svg */
[class*='sawasdee-swiper-'] .swiper-button-prev svg,
[class*='sawasdee-swiper-'] .swiper-button-next svg {
	/* padding: 10px; */
	width: auto !important;
	height: auto !important;
}

/* navigation buttons */
[class*='sawasdee-swiper-'] .swiper-button-prev,
[class*='sawasdee-swiper-'] .swiper-button-next {
	border-radius: 50%;
	border: 1px solid
		/* color-mix(in srgb, var(--wp--preset--color--primary), transparent 70%) !important */;
	background-color: color-mix(
		in srgb,
		var(--wp--preset--color--base-alt),
		transparent 0%
	) !important;
	outline: none !important;
	scale: 1;
	/* transition: scale 0.1s ease; */
	transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}
[class*='sawasdee-swiper-'] .swiper-button-prev:hover,
[class*='sawasdee-swiper-'] .swiper-button-next:hover {
	scale: 1.1;
}

/* pagination bullets */
[class*='sawasdee-swiper-'] .swiper-pagination-bullet {
	width: 12px !important;
	height: 12px !important;
	opacity: 0.2 !important;
	margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px) !important;
}
[class*='sawasdee-swiper-'] .swiper-pagination-bullet-active {
	opacity: 1 !important;
}
[class*='sawasdee-swiper-'] .swiper-pagination-bullet:hover {
	opacity: 0.5 !important;
}
/* ==========================================================================
   SAWASDEE SLIDER TESTIMONIALS HOMEPAGE
   ========================================================================== */

/* Grundzustand: Alle Slides sind leicht transparent */
.sawasdee-swiper-testimonials .swiper-slide {
	opacity: 0.3;
	transition: opacity 0.6s ease-in-out; /* Sanfter Übergang */
	pointer-events: none; /* Optional: Verhindert Klicks auf inaktive Slides */
}

/* Der aktive Slide: Volle Deckkraft */
.sawasdee-swiper-testimonials .swiper-slide-active {
	opacity: 1;
	pointer-events: auto; /* Klicks auf dem aktiven Slide erlauben */
}

/* Navigation ausblenden */
.sawasdee-swiper-testimonials .swiper-button-prev,
.sawasdee-swiper-testimonials .swiper-button-next {
	display: none;
}

/* ==========================================================================
   SAWASDEE SLIDER PORTFOLIO (bzw. CPT SERVICES) HOMEPAGE
   ========================================================================== */
/* variablen überschreiben (spezifischer) */
.sawasdee-swiper-portfolio {
	--swiper-navigation-color: white;
}
.sawasdee-swiper-portfolio .swiper-button-prev,
.sawasdee-swiper-portfolio .swiper-button-next {
	border: 1px solid white;
	background-color: color-mix(
		in srgb,
		var(--wp--preset--color--base-alt),
		transparent 70%
	) !important;

	/* grundzustand vor hover */
	opacity: 0;
	visibility: hidden;
}

/* Buttons nach AUẞEN schieben (grundzustand vor hover) */
.sawasdee-swiper-portfolio .swiper-button-prev {
	transform: translateX(-40px) scale(1);
}
.sawasdee-swiper-portfolio .swiper-button-next {
	transform: translateX(40px) scale(1);
}
/* Hover-Effekt: Wenn über den PORTFOLIO-Wrapper gehovert wird... */
.sawasdee-swiper-portfolio:hover .swiper-button-prev,
.sawasdee-swiper-portfolio:hover .swiper-button-next {
	opacity: 1;
	visibility: visible;
	transform: translateX(0) scale(1) !important; /* Ziel: Normalposition & Größe */
}
.sawasdee-swiper-portfolio .swiper-button-prev:hover,
.sawasdee-swiper-portfolio .swiper-button-next:hover {
	/* Wichtig: translateX(0) beibehalten, damit der Button nicht wegspringt */
	transform: translateX(0) scale(1.1) !important;
}

/* ==========================================================================
   SAWASDEE SLIDER PAGE SWIPER
   ========================================================================== */
/* aktuell ohne spezifische einstellungen */

/* ==========================================================================
   SAWASDEE CAROUSEL STATIC PAGE SWIPER
   ========================================================================== */

.sawasdee-swiper-static {
	overflow: visible !important; /* nur wegen anmiation anheben */
}
.sawasdee-swiper-static .swiper-pagination {
	bottom: unset !important; /* wegen overflow visible */
}

.sawasdee-swiper-static .swiper-slide {
	/* Form und Ecken */
	border-radius: 32px;

	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1),
		0 4px 4px rgba(0, 0, 0, 0.1), 0 7px 7px rgba(0, 0, 0, 0.1),
		0 11px 11px rgba(0, 0, 0, 0.1);

	/* Vorbereitung für die Animation */
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	border: 1px solid rgba(0, 0, 0, 0.05);
	transform: rotate(0deg);
}

.sawasdee-swiper-static .swiper-slide:hover {
	/* Leichte Neigung und Anheben */
	transform: translateY(-10px) rotate(0.5deg);
}

.sawasdee-swiper-static .wp-block-cover .wp-block-cover__image-background {
	border-radius: 16px !important;
	overflow: hidden !important;
}
.sawasdee-swiper-static .swiper-slide .wp-block-cover__background {
	opacity: 0.2 !important;
	transition: all 0.3s ease;
}

.sawasdee-swiper-static
	.swiper-slide
	.wp-block-cover:hover
	.wp-block-cover__background {
	border-radius: 16px !important;
	opacity: 0.8 !important; /* dadurch overlay stark sichtbar (aufhellen oder abdunkeln) */
}

.sawasdee-swiper-static
	.swiper-slide
	.wp-block-cover__inner-container
	.wp-block-buttons {
	opacity: 0 !important;
	transition: all 0.3s ease;
	translate: 80px 80px;
}

.sawasdee-swiper-static .swiper-slide .wp-block-cover:hover .wp-block-buttons {
	opacity: 1 !important;
	translate: 0 0;
}

.sawasdee-swiper-static
	.swiper-slide
	.wp-block-cover:hover
	.wp-block-cover__inner-container
	:is(h2, p) {
	opacity: 1 !important;
	transition: all 0.3s ease;
}

.sawasdee-swiper-static
	.swiper-slide
	.wp-block-cover:hover
	.wp-block-cover__inner-container
	:is(h2, p) {
	opacity: 0 !important;
}

/* ==========================================================================
   SAWASDEE CAROUSEL DYNAMIC PAGE SWIPER
   ========================================================================== */

/* Container & Basis-Card */
.sawasdee-swiper-dynamic .swiper-slide {
	border-radius: 32px;
	padding: 10px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1),
		0 4px 4px rgba(0, 0, 0, 0.1), 0 7px 7px rgba(0, 0, 0, 0.1),
		0 11px 11px rgba(0, 0, 0, 0.1);
	border: 1px solid rgba(0, 0, 0, 0.05);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	/* display: flex !important; */
	/* flex-direction: column; */
	/* justify-content: space-between; */
	/* height: auto; */
}

/* Hover-Effekt für die ganze Card */
.sawasdee-swiper-dynamic .swiper-slide:hover {
	transform: translateY(-8px);
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
	border-color: #d1d1d1;
}

/* Bild-Styling */
.sawasdee-swiper-dynamic .wp-block-post-featured-image {
	margin: 0 0 1.5rem 0 !important;
	overflow: hidden;
	border-radius: 15px;
}

.sawasdee-swiper-dynamic .wp-block-post-featured-image img {
	transition: transform 0.5s ease;
	aspect-ratio: 4/5; /* Einheitliches Format für alle Bilder */
	width: 100%;
	object-fit: cover;
}

.sawasdee-swiper-dynamic .swiper-slide:hover .wp-block-post-featured-image img {
	transform: scale(1.05);
}

.sawasdee-swiper-dynamic .wp-block-post-terms a {
	background: #f0f4f8;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
/*------------------------------------------------------------------------------*/