/**
 * AS Divi5 Custom Tools — Row Slider.
 *
 * Section mit Klasse `row-slider`: die Rows werden clientseitig zu Splide-
 * Slides umgebaut. Pfeile bekommen die AS-Post-Display-Optik (Outline-Circle);
 * Theme dreht nur an `color`/`font-size`. Pagination-Punkte: dezente Defaults.
 */

/* FOUC-Schutz: bis der Slider gemountet ist, nur die erste Row zeigen.
   Die `as-rowslider-pending`-Klasse setzt das JS — laeuft kein JS, greift
   diese Regel nie und alle Rows bleiben sichtbar (graceful degradation). */
.et_pb_section.row-slider.as-rowslider-pending > .et_pb_row ~ .et_pb_row {
	display: none !important;
}

/* Splide-Liste/Slides innerhalb der Section: Reset (Splide-Core-CSS macht
   das meiste, das hier ist Absicherung gegen Divi-/Theme-Listenstyles). */
.et_pb_section.row-slider .as-rowslider .splide__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.et_pb_section.row-slider .as-rowslider .splide__slide {
	list-style: none;
	margin: 0;
}

/* Slider wird zentriert; seine `max-width` setzt row-slider.js per JS auf die
   Breite der Row im Slide — so sitzen die Pfeile an seinen Raendern direkt
   neben dem Row-Inhalt und nicht weit weg am Section-Rand. Die Row im Slide
   fuellt den Slider, behaelt also exakt ihre gewohnte Breite. */
.et_pb_section.row-slider .as-rowslider {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.et_pb_section.row-slider .as-rowslider .splide__slide > .et_pb_row {
	width: 100%;
}

/* Pfeile — eigene Klassen statt `splide__arrow` (siehe `classes` in row-slider.js),
   damit weder Splides Default-Pfeil-CSS noch projektweite `.splide__arrow`-Styles
   das Row-Slider-Layout anfassen. Optik = Outline-Circle + Chevron, identisch zu
   den Pfeilen von AS Post Display (Divi 5): transparenter Button, Border in
   currentColor, `width/height: 1em` (skaliert mit `font-size`), SVG ~50% davon.
   `color`/`font-size` (= Farbe/Groesse) sind die einzigen Knoepfe, an denen das
   Theme dreht: `.row-slider .row-slider-arrow { color: …; font-size: …; }` */
.et_pb_section.row-slider .as-rowslider .row-slider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1em;          /* = font-size */
	height: 1em;
	margin: 0;
	padding: 0;
	border: 0.06em solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: inherit;      /* nimmt die Textfarbe der Section (Divi setzt #fff auf dunklen Sections) */
	font-size: 40px;     /* Fallback-Pfeilgroesse — im Theme ueberschreibbar */
	line-height: 1;
	cursor: pointer;
	opacity: 1;
	transition: opacity 0.2s ease;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
}
.et_pb_section.row-slider .as-rowslider .row-slider-arrow svg {
	width: 0.5em;
	height: 0.5em;
	fill: currentColor;
}
.et_pb_section.row-slider .as-rowslider .row-slider-arrow svg path { fill: currentColor; }
/* Splide flippt das Pfeil-SVG fuer "prev" sonst ueber `.splide__arrow--prev svg`
   — mit der umbenannten Klasse greift das nicht mehr, also hier selber machen. */
.et_pb_section.row-slider .as-rowslider .row-slider-arrow--prev svg { transform: scaleX(-1); }
/* Position: an den Row-Raendern (Slider ist per JS auf Row-Breite gesetzt).
   Auf breiten Screens, wo neben der Row Platz ist, ein Stueck nach aussen
   gerueckt (= nicht direkt auf dem Inhalt). Offset per `font-size` skalierbar,
   im Theme ueberschreibbar via `.row-slider .row-slider-arrow--prev|--next`. */
.et_pb_section.row-slider .as-rowslider .row-slider-arrow--prev { left: 0; }
.et_pb_section.row-slider .as-rowslider .row-slider-arrow--next { right: 0; }
@media (min-width: 1280px) {
	.et_pb_section.row-slider .as-rowslider .row-slider-arrow--prev { left: -2em; }
	.et_pb_section.row-slider .as-rowslider .row-slider-arrow--next { right: -2em; }
}
.et_pb_section.row-slider .as-rowslider .row-slider-arrow:hover:not(:disabled) { opacity: 0.7; }
.et_pb_section.row-slider .as-rowslider .row-slider-arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

/* Pagination-Punkte: dezente Defaults, im Theme ueberschreibbar via
   `.row-slider .splide__pagination__page`. (Punkte unter statt ueber dem
   Inhalt: `.row-slider .splide__pagination { position: static; margin-top: 1.5rem; }`) */
.et_pb_section.row-slider .as-rowslider .splide__pagination__page {
	background: currentColor;
	opacity: .4;
}
.et_pb_section.row-slider .as-rowslider .splide__pagination__page.is-active {
	opacity: 1;
}