/*
 * IHK Testimonials Slider – Frontend-Styles
 * Basiert auf dem Figma-Design: node-id 591:317 "testis"
 * Farben: IHK-Blau #003366, Hellblau #6787c3
 * Fonts:  Korb Bold (headline), Source Sans 3 (body) – muss im Theme geladen sein
 */

/* ------------------------------------------------------------------
   Custom Properties (lokal, überschreibbar per Theme)
   ------------------------------------------------------------------ */
.ihk-ts-section {
	--ihk-blau:          #003366;
	--ihk-blau-light:    #6787c3;
	--ihk-blau-card-bg:  rgba(0, 51, 102, 0.08);
	--ihk-blau-quote-mark: rgba(0, 51, 102, 0.2);

	--ihk-font-head:     KorbBold, "Korb", Georgia, serif;
	--ihk-font-body:     source-sans-3-1, "Source Sans 3", Helvetica, Arial, sans-serif;

	--ihk-radius-card:   8px;
	--ihk-gap:           clamp(16px, 2vw, 28px);

	--ihk-gruen:         #56BD66;
}

/* ------------------------------------------------------------------
   Abschnitts-Wrapper
   ------------------------------------------------------------------ */
.ihk-ts-section {
	background: #ffffff;
	padding-block: clamp(60px, 8vw, 122px);
	overflow: hidden;
}

/* ------------------------------------------------------------------
   Header
   ------------------------------------------------------------------ */
.ihk-ts-header {
	text-align: center;
	max-width: 960px;
	margin-inline: auto;
	padding-inline: clamp(20px, 5vw, 40px);
	margin-bottom: clamp(40px, 6vw, 80px);
}

.ihk-ts-eyebrow {
	font-family:     var(--ihk-font-head);
	font-weight:     700;
	font-size:       clamp(14px, 1.2vw, 18px);
	text-transform:  uppercase;
	letter-spacing:  0.08em;
	color:           var(--ihk-blau-light);
	margin:          0 0 clamp(16px, 2vw, 28px);
	line-height:     1.1;
}

.ihk-ts-heading {
	font-family:     var(--ihk-font-head);
	font-weight:     700;
	font-size:       clamp(28px, 4.5vw, 64px);
	line-height:     1.1;
	letter-spacing:  0.015em;
	color:           var(--ihk-blau);
	margin:          0 0 clamp(16px, 2vw, 28px);
}

.ihk-ts-subtext {
	font-family:  var(--ihk-font-body);
	font-weight:  400;
	font-size:    clamp(16px, 1.6vw, 24px);
	line-height:  1.5;
	color:        var(--ihk-blau);
	margin:       0;
	max-width:    844px;
	margin-inline: auto;
}

/* ------------------------------------------------------------------
   Swiper-Container
   ------------------------------------------------------------------ */
.ihk-ts-swiper {
	position:       relative;
	padding-bottom: clamp(48px, 6vw, 80px); /* Platz für Pagination */
	/* Slides leicht über den Rand hinaus sichtbar machen (Peek-Effekt) */
	padding-inline: clamp(20px, 5vw, 280px);
}

/* ------------------------------------------------------------------
   Slide
   ------------------------------------------------------------------ */
.ihk-ts-slide {
	height: auto; /* Swiper überschreibt mit JS – wichtig für Flex */
}

/* ------------------------------------------------------------------
   Card: Hochformat, Foto als Vollhintergrund mit Gradient-Overlay
   ------------------------------------------------------------------ */
.ihk-ts-card {
	position:         relative;
	display:          flex;
	flex-direction:   column;
	border-radius:    var(--ihk-radius-card);
	overflow:         hidden;
	aspect-ratio:     3 / 4;
	background:       var(--ihk-blau);
}

/* ------------------------------------------------------------------
   Portrait (absolut, füllt die gesamte Karte)
   ------------------------------------------------------------------ */
.ihk-ts-card__portrait {
	position:         absolute;
	inset:            0;
	overflow:         hidden;
}

/* Gradient-Overlay: oben transparent → unten dunkel */
.ihk-ts-card__portrait::after {
	content:          '';
	position:         absolute;
	inset:            0;
	background:       linear-gradient(
		to bottom,
		transparent 25%,
		rgba(0, 10, 30, 0.75) 55%,
		rgba(0, 10, 30, 0.97) 100%
	);
}

.ihk-ts-card__portrait-img {
	display:          block;
	width:            100%;
	height:           100%;
	object-fit:       cover;
	object-position:  top center;
}

/* Play-Button-Overlay */
.ihk-ts-play-btn {
	position:         absolute;
	inset:            0;
	z-index:          1;
	display:          flex;
	align-items:      center;
	justify-content:  center;
	background:       transparent;
	border:           none;
	cursor:           pointer;
	padding:          0;
	transition:       opacity 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
	.ihk-ts-play-btn {
		opacity: 0;
	}
	.ihk-ts-card:hover .ihk-ts-play-btn {
		opacity: 1;
	}
}

.ihk-ts-play-btn svg {
	width:            clamp(60px, 7vw, 93px);
	height:           clamp(60px, 7vw, 93px);
	filter:           drop-shadow(0 4px 16px rgba(0,0,0,0.25));
	transition:       transform 0.2s ease;
}

.ihk-ts-play-btn:hover svg,
.ihk-ts-play-btn:focus-visible svg {
	transform: scale(1.08);
}

.ihk-ts-play-btn:focus-visible {
	outline:       3px solid var(--ihk-gruen);
	outline-offset: 3px;
}

/* ------------------------------------------------------------------
   Content (über dem Foto, am unteren Rand)
   ------------------------------------------------------------------ */
.ihk-ts-card__content {
	position:        relative;
	z-index:         1;
	margin-top:      auto;
	display:         flex;
	flex-direction:  column;
	gap:             clamp(8px, 1.5vw, 14px);
	padding:         clamp(20px, 3vw, 36px) clamp(20px, 3vw, 32px) clamp(20px, 3vw, 32px);
}

/* Anführungszeichen */
.ihk-ts-quote-mark {
	flex-shrink: 0;
	line-height: 0;
}

.ihk-ts-quote-mark svg {
	width:  clamp(28px, 3vw, 40px);
	height: auto;
}

.ihk-ts-quote-mark svg path {
	fill:         var(--ihk-gruen);
	fill-opacity: 1;
}

/* Zitat */
.ihk-ts-section .ihk-ts-quote {
	margin:          0;
	font-family:     var(--ihk-font-head);
	font-weight:     700;
	font-size:       clamp(16px, 1.8vw, 26px);
	line-height:     1.2;
	color:           #ffffff !important;
	border:          none !important;
	border-left:     none !important;
	padding:         0 !important;
	background:      none !important;
}

.ihk-ts-section .ihk-ts-quote p {
	margin: 0;
	color:  #ffffff !important;
}

/* Person */
.ihk-ts-person {
	display:        flex;
	flex-direction: column;
	gap:            2px;
}

.ihk-ts-section .ihk-ts-person__name {
	margin:       0;
	font-family:  var(--ihk-font-head);
	font-weight:  700;
	font-size:    clamp(14px, 1.2vw, 18px);
	line-height:  1.2;
	color:        #ffffff !important;
}

.ihk-ts-section .ihk-ts-person__company {
	margin:       0;
	font-family:  var(--ihk-font-body);
	font-weight:  400;
	font-size:    clamp(13px, 1vw, 15px);
	line-height:  1.4;
	color:        rgba(255, 255, 255, 0.75) !important;
}

/* Rollen-Liste */
.ihk-ts-roles {
	margin:         0;
	padding:        0;
	list-style:     none;
	display:        flex;
	flex-direction: column;
	gap:            0;
}

.ihk-ts-section .ihk-ts-roles li {
	font-family:   var(--ihk-font-body);
	font-weight:   400;
	font-size:     clamp(13px, 1vw, 15px);
	line-height:   1.4;
	color:         rgba(255, 255, 255, 0.75) !important;
	list-style:    none !important;
	padding-left:  0 !important;
	margin-left:   0 !important;
}

/* ------------------------------------------------------------------
   Swiper-Navigation: Pfeile (modern, minimal)
   ------------------------------------------------------------------ */
.ihk-ts-swiper .swiper-button-prev,
.ihk-ts-swiper .swiper-button-next {
	width:            40px;
	height:           40px;
	border-radius:    50%;
	background:       #ffffff;
	border:           none;
	color:            var(--ihk-blau);
	box-shadow:       0 2px 12px rgba(0, 0, 0, 0.12);
	transition:       background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
	top:              50%;
	transform:        translateY(calc(-50% - 20px));
	margin:           0;
}

.ihk-ts-swiper .swiper-button-prev {
	left: clamp(6px, 1.5vw, 16px);
}

.ihk-ts-swiper .swiper-button-next {
	right: clamp(6px, 1.5vw, 16px);
}

.ihk-ts-swiper .swiper-button-prev::after,
.ihk-ts-swiper .swiper-button-next::after {
	font-size:   13px;
	font-weight: 800;
	color:       var(--ihk-blau);
}

.ihk-ts-swiper .swiper-button-prev:hover,
.ihk-ts-swiper .swiper-button-next:hover {
	background:  var(--ihk-blau);
	box-shadow:  0 4px 16px rgba(0, 51, 102, 0.25);
}

.ihk-ts-swiper .swiper-button-prev:hover::after,
.ihk-ts-swiper .swiper-button-next:hover::after {
	color: #ffffff;
}

.ihk-ts-swiper .swiper-button-disabled {
	opacity:        0.3;
	pointer-events: none;
}

.ihk-ts-swiper .swiper-button-prev:focus-visible,
.ihk-ts-swiper .swiper-button-next:focus-visible {
	outline:        3px solid var(--ihk-blau-light);
	outline-offset: 3px;
}

/* ------------------------------------------------------------------
   Swiper-Pagination: Striche statt Punkte
   ------------------------------------------------------------------ */
.ihk-ts-pagination {
	bottom: clamp(12px, 2vw, 20px) !important;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.ihk-ts-swiper .swiper-pagination-bullet {
	width:         20px;
	height:        3px;
	border-radius: 2px;
	background:    var(--ihk-blau);
	opacity:       0.25;
	margin:        0 !important;
	transition:    opacity 0.25s ease, width 0.25s ease, background 0.25s ease;
}

.ihk-ts-swiper .swiper-pagination-bullet-active {
	width:      32px;
	opacity:    1;
	background: var(--ihk-gruen);
}

/* ------------------------------------------------------------------
   Responsive: Mobile First
   ------------------------------------------------------------------ */

/* Mobile: 1 voller Slide, kein Peek */
@media (max-width: 599px) {
	.ihk-ts-swiper {
		padding-inline: 16px;
	}
}

/* Tablet: 1.15 Slides, leichter Peek */
@media (min-width: 600px) and (max-width: 1023px) {
	.ihk-ts-swiper {
		padding-inline: clamp(40px, 5vw, 80px);
	}
}

/* Desktop: 2 Slides nebeneinander (eingestellt via JS) */
@media (min-width: 1024px) {
	.ihk-ts-swiper {
		padding-inline: clamp(80px, 8vw, 200px);
	}
}

/* ------------------------------------------------------------------
   Video-Modal
   ------------------------------------------------------------------ */
.ihk-ts-modal {
	position:   fixed;
	inset:      0;
	z-index:    99999;
	display:    flex;
	align-items: center;
	justify-content: center;
}

.ihk-ts-modal[hidden] {
	display: none;
}

.ihk-ts-modal__backdrop {
	position:   absolute;
	inset:      0;
	background: rgba(0, 0, 0, 0.82);
	cursor:     pointer;
}

.ihk-ts-modal__inner {
	position:    relative;
	z-index:     1;
	width:       min(90vw, 1000px);
	max-height:  90vh;
	display:     flex;
	flex-direction: column;
}

.ihk-ts-modal__close {
	position:   absolute;
	top:        -44px;
	right:      0;
	background: transparent;
	border:     none;
	cursor:     pointer;
	padding:    8px;
	display:    flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s ease;
}

.ihk-ts-modal__close:hover {
	opacity: 0.7;
}

.ihk-ts-modal__close:focus-visible {
	outline:        3px solid var(--ihk-blau-light);
	outline-offset: 3px;
	border-radius:  4px;
}

.ihk-ts-modal__video-wrap {
	position:    relative;
	width:       100%;
	padding-top: 56.25%; /* 16:9 Standard */
	background:  #000;
	border-radius: 4px;
	overflow:    hidden;
}

/* 9:16 Hochformat für YouTube Shorts */
.ihk-ts-modal__video-wrap--portrait {
	/* Breite so berechnen, dass Höhe ≤ 80vh bleibt: w = 80vh × 9/16 */
	width:        min(calc(80vh * 9 / 16), 380px);
	padding-top:  0;          /* 16:9-padding-Hack aufheben        */
	aspect-ratio: 9 / 16;    /* Browser rechnet Höhe automatisch  */
	margin-inline: auto;
}

.ihk-ts-modal__iframe {
	position: absolute;
	inset:    0;
	width:    100%;
	height:   100%;
	border:   none;
}

/* Modal-Animation */
.ihk-ts-modal:not([hidden]) {
	animation: ihk-ts-modal-backdrop-in 200ms ease;
}

@keyframes ihk-ts-modal-backdrop-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Modal Inner – scale + fade, ease-out für Eingang */
.ihk-ts-modal:not([hidden]) .ihk-ts-modal__inner {
	animation: ihk-ts-modal-inner-in 220ms cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes ihk-ts-modal-inner-in {
	from { opacity: 0; transform: scale(0.95) translateY(8px); }
	to   { opacity: 1; transform: scale(1)    translateY(0);   }
}

/* ------------------------------------------------------------------
   Animations (Emil Design Engineering)
   Easing tokens:
     ease-out  cubic-bezier(0.23, 1, 0.32, 1)   → enters, erscheint
     ease-in-out cubic-bezier(0.77, 0, 0.175, 1) → on-screen movement
   ------------------------------------------------------------------ */

/* --- Scroll-Reveal: Header ---------------------------------------- */
.ihk-ts-eyebrow,
.ihk-ts-heading,
.ihk-ts-subtext {
	opacity:    0;
	transform:  translateY(20px);
	transition: opacity 480ms cubic-bezier(0.23, 1, 0.32, 1),
	            transform 480ms cubic-bezier(0.23, 1, 0.32, 1);
}

.ihk-ts-eyebrow.ihk-is-visible {
	opacity:   1;
	transform: translateY(0);
}

.ihk-ts-heading.ihk-is-visible {
	opacity:            1;
	transform:          translateY(0);
	transition-delay:   70ms;
}

.ihk-ts-subtext.ihk-is-visible {
	opacity:            1;
	transform:          translateY(0);
	transition-delay:   140ms;
}

/* --- Scroll-Reveal: Slides ---------------------------------------- */
.ihk-ts-slide {
	opacity:    0;
	transform:  translateY(24px) scale(0.97);
	transition: opacity 420ms cubic-bezier(0.23, 1, 0.32, 1),
	            transform 420ms cubic-bezier(0.23, 1, 0.32, 1);
}

.ihk-ts-slide.ihk-is-visible {
	opacity:   1;
	transform: translateY(0) scale(1);
}

/* --- Card Hover: subtiler Lift ------------------------------------ */
@media (hover: hover) and (pointer: fine) {
	.ihk-ts-card {
		transition: transform 260ms cubic-bezier(0.23, 1, 0.32, 1),
		            box-shadow 260ms cubic-bezier(0.23, 1, 0.32, 1);
	}

	.ihk-ts-card:hover {
		transform:  translateY(-5px);
		box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
	}
}

/* --- Nav-Buttons: Press-Feedback ---------------------------------- */
.ihk-ts-swiper .swiper-button-prev,
.ihk-ts-swiper .swiper-button-next {
	transition: background 180ms ease,
	            box-shadow 180ms ease,
	            opacity    180ms ease,
	            transform  120ms cubic-bezier(0.23, 1, 0.32, 1);
}

.ihk-ts-swiper .swiper-button-prev:active {
	transform: translateY(calc(-50% - 20px)) scale(0.91);
}

.ihk-ts-swiper .swiper-button-next:active {
	transform: translateY(calc(-50% - 20px)) scale(0.91);
}

/* --- prefers-reduced-motion: nur opacity, kein Movement ----------- */
@media (prefers-reduced-motion: reduce) {
	.ihk-ts-eyebrow,
	.ihk-ts-heading,
	.ihk-ts-subtext,
	.ihk-ts-slide {
		opacity:    1;
		transform:  none;
		transition: none;
	}

	.ihk-ts-eyebrow.ihk-is-visible,
	.ihk-ts-heading.ihk-is-visible,
	.ihk-ts-subtext.ihk-is-visible,
	.ihk-ts-slide.ihk-is-visible {
		transition: none;
	}

	.ihk-ts-modal:not([hidden]) .ihk-ts-modal__inner {
		animation: none;
	}

	.ihk-ts-card {
		transition: none;
	}
}