/*
 Theme Name:     XTRA Child
 Theme URI:      https://yourwebsite.com
 Description:    Child Theme for XTRA
 Author:         Dein Name
 Template:       xtra
 Version:        1.0.0
*/






.slider {
	display: grid;
	grid-template-columns: 50px 1fr 50px;
	place-items: center;
	font-family: Montserrat;
	color: rgba(28, 53, 112, 0.98);
	font-size: 1rem;

	.slide {
		display: grid !important;
		place-items: center;
		grid-template-columns: repeat(3, 1fr);
		grid-row: 1;
		grid-column: 2;

		.slide-img {
			grid-column: 2;
			grid-row: 1;
		}


		.slide-list {
			list-style: none;
			grid-row: 1;
			display: grid;
			gap: 1.5rem;
			align-self: start;
			
			margin: 0;

			&:first-of-type {
				grid-column: 1;
				justify-self: start;
			}

			&:last-of-type {
				grid-column: 3;
				justify-self: end;

				li {
					justify-self: end;
					text-align: end;
					span {
						order: -1;
					}
				}
			}

			li {
				display: flex;
				align-items: center;
				gap: 1rem;

				img,
				svg,
				i {
					display: grid;
					place-items: center;
					width: 30px;
					aspect-ratio: 1;
					font-size: 24px;
					color: rgba(0, 183, 255, 0.77);
					fill: rgba(0, 183, 255, 0.77);
				}
			}
		}

		.slide-label {
			grid-column: 1 / -1;
			text-align: center;
			font-size: 22px;
			color: rgb(29, 57, 112);
			font-weight: 700;
			font-family: Arial;
			line-height: 1;
			text-transform: uppercase;
			margin-block-start: 1.5rem;
			
			hr {
				background: rgba(0, 183, 255, 0.77);
				height: 3px;
				width: 150px;
				margin-block: 0.5rem;
			}
			
			span {
				font-weight: 400;
			}
		}

		@media only screen and (max-width: 992px) {

			grid-template-columns: repeat(2, 1fr);

			.slide-img {
				grid-column: 1 / -1;
				grid-row: 1;
			}

			.slide-list {
				grid-row: 2;

				&:first-of-type {
					grid-column: 1;
				}

				&:last-of-type {
					grid-column: 2;
				}
			}
		}

		@media only screen and (max-width: 768px) {

			grid-template-columns: repeat(2, 1fr);

			.slide-list {
				grid-row: 2;

				&:first-of-type,
				&:last-of-type {
					grid-column: 1 / -1;
					justify-self: start;
				}

				&:last-of-type {
					grid-row: 3;
					margin-block-start: 1.5rem;

					li {
						justify-self: start;
						text-align: start;
						span {
							order: 1;
						}
					}
				}
			}
		}
	}

	.slide-button-prev,
	.slide-button-next {
		grid-row: 1;
		justify-self: stretch;
		align-self: stretch;
		display: grid;
		place-items: center;
		cursor: pointer;
		font-size: 42px;
		color: rgb(29, 57, 112);
		background: transparent;
	}

	.slide-button-prev {
		grid-column: 1;
	}

	.slide-button-next {
		grid-column: 3;
	}

	.slide-pagination {
		grid-column: 1 / -1;
		display: flex;
		gap: 1rem;
		margin-block-start: 3rem;

		.pagination-item {
			width: 12px;
			height: 12px;
			border-radius: 50%;
			cursor: pointer;
			transition: background-color 0.3s;
		}

		.pagination-item.active {
			background-color: rgb(29, 57, 112);
		}
	}
}

/* Fade Effekt nur wenn Bewegung erlaubt ist */
@media (prefers-reduced-motion: no-preference) {
	.slide[aria-hidden="true"] {
		opacity: 0;
		transition: opacity 0.6s ease;
		pointer-events: none;
	}
	
	.slide[aria-hidden="false"] {
		opacity: 1;
		transition: opacity 0.6s ease;
	}
}

/* Wenn Bewegungen reduziert werden sollen, kein Übergang */
@media (prefers-reduced-motion: reduce) {
	
	.slide[aria-hidden="true"] {
		opacity: 0;
		transition: none !important;
		pointer-events: none;
	}
	
	.slide[aria-hidden="false"] {
		opacity: 1;
		transition: none !important;
	}
}