/**
 * Block: Carousel — Styles
 *
 * Front-end and editor styles for the acf/carousel block.
 *
 * @block   acf/carousel
 * @package SociosComponents
 */

/* ─── Base ────────────────────────────────────────────────────────────────── */

.sc-carousel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 48px;
	position: relative;
	overflow: visible;
}

/* ─── Section header ──────────────────────────────────────────────────────── */

.sc-carousel__header {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
	text-align: center;
	max-width: 800px;
}

.sc-carousel__title {
	margin: 0;
}

.sc-carousel__subtitle {
	margin: 0;
}

.sc-carousel__subtitle p:last-child {
	margin-bottom: 0;
}

/* ─── Header layout — Horizontal ────────────────────────────────────── */

.sc-carousel--header-horizontal .sc-carousel__header {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	text-align: left;
	max-width: 100%;
}

/* Keep the eyebrow on its own full-width row above the horizontal headline. */
.sc-carousel--header-horizontal .sc-block-eyebrow {
	flex: 0 0 100%;
}

.sc-carousel--header-horizontal .sc-carousel__title {
	flex: 1 0 0;
	min-width: 280px;
	margin: 0;
}

.sc-carousel--header-horizontal .sc-carousel__subtitle {
	flex: 1 0 0;
}

/* ─── Viewport ────────────────────────────────────────────────────────────── */

/* Wraps the swiper and hosts the navigation arrows. It is NOT clipped, so the
 * arrows can sit outside the slide strip while the swiper below clips the
 * peeking slides. It is the positioning context for the absolute arrows. */
.sc-carousel__viewport {
	position: relative;
	width: 100%;
}

/* ─── Swiper container ────────────────────────────────────────────────────── */

.sc-carousel__swiper {
	width: 100%;
	position: relative;
	overflow: hidden;
	border-radius: 20px;
	padding-bottom: 48px; /* space for pagination */
}

.sc-carousel--no-bullets .sc-carousel__swiper {
	padding-bottom: 0;
}

.sc-carousel--no-bullets .sc-carousel__nav-prev,
.sc-carousel--no-bullets .sc-carousel__nav-next {
	top: 50%; /* no padding offset needed when bullets are hidden */
}

/* ─── Navigation arrows ───────────────────────────────────────────────────── */

.sc-carousel__nav-prev,
.sc-carousel__nav-next {
	position: absolute;
	top: calc(50% - 24px); /* offset by half the swiper padding-bottom to align with .swiper-wrapper centre */
	transform: translateY(-50%);
	z-index: 10;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--light-neutral-0);
	border: 1px solid var(--light-neutral-200, #EDEEEE);
	color: var(--dark-neutral-500);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: opacity 0.2s ease;
	padding: 0;
}

.sc-carousel__nav-prev {
	left: -24px;
}

.sc-carousel__nav-next {
	right: -24px;
}

.sc-carousel__nav-prev svg,
.sc-carousel__nav-next svg {
	width: 20px;
	height: 20px;
}

.sc-carousel__nav-prev.swiper-button-disabled,
.sc-carousel__nav-next.swiper-button-disabled {
	opacity: 0;
}

/* ─── Pagination bullets ──────────────────────────────────────────────────── */

.sc-carousel__pagination {
	position: relative;
	margin-top: 48px;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	gap: 8px;
	z-index: 10;
}

.sc-carousel__pagination .swiper-pagination-bullet {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--light-neutral-800);
	opacity: 1;
	transition: background 0.2s ease;
}

.sc-carousel__pagination .swiper-pagination-bullet-active {
	background: var(--blue-500);
}

/* ─── Slide — base ────────────────────────────────────────────────────────── */

.sc-carousel__swiper .swiper-wrapper {
	align-items: stretch; /* makes all slides equal height */
}

.sc-carousel__slide {
	height: auto;
}

/* ─── Slide — Clickable link ──────────────────────────────────────────────── */

.sc-carousel__slide--linked {
	cursor: pointer;
	transition: transform 0.2s ease;
}

.sc-carousel__slide--linked:hover {
	transform: translateY(-4px);
}

.sc-carousel__slide-link {
	display: block;
	text-decoration: none !important;
	color: inherit;
	width: 100%;
	height: 100%;
}

.sc-carousel__slide--card .sc-carousel__slide-link {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.sc-carousel__slide--media .sc-carousel__slide-link {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ─── Slide — Media template ──────────────────────────────────────────────── */

.sc-carousel__slide--media {
	display: flex;
	align-items: center;
	justify-content: center;
}

.sc-carousel__slide--media .sc-carousel__slide-media {
	width: 100%;
	height: auto;
	display: block;
	object-fit: contain;
	object-position: center;
}

/* ─── Slide — Card template ───────────────────────────────────────────────── */

.sc-carousel__slide--card {
	display: flex;
	flex-direction: column;
	background: var(--light-neutral-0, #fff);
	border-radius: 16px;
	overflow: hidden;
	height: stretch !important;
}

.sc-carousel__slide-media-wrapper {
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	box-sizing: border-box;
	background: var(--sc-carousel-card-media-bg, var(--dark-neutral-300, #555));
}

.sc-carousel__slide-media-wrapper .sc-carousel__slide-media {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
}

.sc-carousel__slide-media-wrapper video.sc-carousel__slide-media {
	object-fit: contain;
}

.sc-carousel__slide--card .sc-carousel__slide-media-wrapper video.sc-carousel__slide-media {
	object-fit: cover;
}

/* Card image object-fit (Admin setting — Card slide template).
 * The extra .sc-carousel__slide--card class raises specificity above the
 * video cover rule so the chosen fit applies to both images and videos. */
.sc-carousel--card-fit-contain .sc-carousel__slide--card .sc-carousel__slide-media-wrapper .sc-carousel__slide-media {
	object-fit: contain;
}

.sc-carousel__slide-content {
	padding: 20px;
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 4px;
}

.sc-carousel__slide-title {
	font-family: var(--font-family-text);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
	color: var(--text-main-enabled);
}

.sc-carousel__slide-description {
	font-family: var(--font-family-text);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--text-main-enabled);
	margin: 0;
}

.sc-carousel__slide-description a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.sc-carousel__slide-description a:hover {
	color: inherit;
	opacity: 0.7;
}

/* ─── CTAs ────────────────────────────────────────────────────────────────── */

.sc-carousel__ctas {
	display: flex;
	justify-content: center;
}

.sc-carousel__primary-cta {
	display: flex;
	padding: 16px 40px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	border-radius: 100px;
	border: 1.5px solid transparent;
	text-align: center;
	font-family: var(--font-family-display);
	text-decoration: none !important;
	font-size: 18px;
	font-weight: 500;
	line-height: 100%;
	letter-spacing: 0.5px;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

/* Primary CTA — Blue */
.sc-carousel__primary-cta--blue {
	background: var(--blue-500);
	color: var(--light-neutral-0);
	border-color: var(--blue-500) !important;
}

.sc-carousel__primary-cta--blue:hover {
	color: var(--light-neutral-0);
	opacity: 0.9;
}

/* Primary CTA — Orange */
.sc-carousel__primary-cta--orange {
	background: var(--orange-500);
	color: var(--light-neutral-0);
	border-color: var(--orange-500) !important;
}

.sc-carousel__primary-cta--orange:hover {
	color: var(--light-neutral-0);
	opacity: 0.9;
}

/* ─── Placeholder (editor only) ───────────────────────────────────────────── */

.sc-carousel__placeholder {
	text-align: center;
	font-style: italic;
	opacity: 0.7;
}

/* ═════════════════════════════════════════════════════════════════════════════
 * Responsive — Tablet: max-width 1024px
 * ═════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
	.sc-carousel {
		gap: 24px;
	}

	.sc-carousel__nav-prev {
		left: -12px;
	}

	.sc-carousel__nav-next {
		right: -12px;
	}
}

/* ═════════════════════════════════════════════════════════════════════════════
 * Responsive — Mobile: max-width 767px
 * ═════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
	.sc-carousel {
		gap: 20px;
	}

	.sc-carousel--header-horizontal .sc-carousel__header {
		flex-direction: column;
		text-align: center;
	}

	.sc-carousel__primary-cta {
		padding: 14px 32px;
		font-size: 16px;
	}

	.sc-carousel__pagination {
		flex-wrap: wrap;
	}

	.sc-carousel__pagination .swiper-pagination-bullet {
		margin: 0px !important;
	}
}