/**
 * Content Image Carousel – saját stílus.
 *
 * Szándékosan minimális és alacsony specificitású, hogy Bricks Custom CSS-ből
 * könnyen felül lehessen írni. Nincs !important. A finomhangolható értékek
 * CSS custom property-ként a .cic-carousel gyökéren érhetők el.
 *
 * @package ContentImageCarousel
 */

.cic-carousel {
	--cic-gap: 16px;
	--cic-radius: 8px;
	--cic-img-height: 260px;
	--cic-img-fit: cover;
	--cic-accent: #1f2937;
	--cic-accent-contrast: #ffffff;
	--cic-arrow-size: 40px;

	position: relative;
	width: 100%;
	margin: 1.5rem 0;
}

.cic-carousel__swiper {
	position: relative;
	width: 100%;
	/* A Swiper navigáció/lapozó helyének biztosítása alul. */
	padding-bottom: 2.25rem;
}

.cic-carousel__slide {
	height: auto;
	box-sizing: border-box;
}

.cic-carousel__link {
	display: block;
	overflow: hidden;
	border-radius: var(--cic-radius);
	line-height: 0;
	text-decoration: none;
}

.cic-carousel__img {
	display: block;
	width: 100%;
	height: var(--cic-img-height);
	object-fit: var(--cic-img-fit);
	border-radius: var(--cic-radius);
	transition: transform 0.3s ease;
}

.cic-carousel__link:hover .cic-carousel__img,
.cic-carousel__link:focus-visible .cic-carousel__img {
	transform: scale(1.03);
}

.cic-carousel__link:focus-visible {
	outline: 2px solid var(--cic-accent);
	outline-offset: 2px;
}

/* Navigációs nyilak. A Swiper alap stílusát finoman felülírjuk, alacsony specificitással. */
.cic-carousel__nav {
	width: var(--cic-arrow-size);
	height: var(--cic-arrow-size);
	margin: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--cic-accent);
	color: var(--cic-accent-contrast);
	cursor: pointer;
}

.cic-carousel__nav::after {
	font-size: calc(var(--cic-arrow-size) / 2.5);
}

.cic-carousel__nav.swiper-button-disabled {
	opacity: 0.35;
}

/* Lapozó (pagination) pöttyök. */
.cic-carousel__pagination {
	bottom: 0;
}

.cic-carousel__pagination .swiper-pagination-bullet-active {
	background-color: var(--cic-accent);
}