/* ==========================================================================
   Erfesh Post Carousel — stylesheet
   All colors/spacing are driven by CSS custom properties set inline by the
   widget (theme presets + spacing controls), so this file rarely needs
   editing directly — adjust the values in Elementor's Style tab instead.
   ========================================================================== */

.erfesh-carousel {
	--erfesh-items: 3.2;
	--erfesh-gap: 24px;
	--erfesh-radius: 16px;
	--erfesh-image-radius: 16px;
	--erfesh-accent: #C9743C;
	--erfesh-card-bg: #FFFFFF;
	--erfesh-text: #2B2622;
	--erfesh-muted: #7A7168;
	--erfesh-pill-text: #FFFFFF;

	position: relative;
	width: 100%;
}

.erfesh-carousel__viewport {
	overflow: hidden;
	width: 100%;
}

.erfesh-carousel__track {
	display: flex;
	gap: var(--erfesh-gap);
	list-style: none;
	margin: 0;
	padding: 0;
	will-change: transform;
	transition: transform 500ms cubic-bezier(0.25,0.1,0.25,1);
	touch-action: pan-y;
}

.erfesh-carousel[data-transition="fade"] .erfesh-carousel__track,
.erfesh-carousel[data-transition="stack"] .erfesh-carousel__track {
	transition: none;
}

.erfesh-carousel__slide {
	flex: 0 0 calc((100% - (var(--erfesh-items) - 1) * var(--erfesh-gap)) / var(--erfesh-items));
	min-width: 0;
}

/* ---------- Transition style: fade ---------- */
.erfesh-carousel[data-transition="fade"] .erfesh-carousel__track {
	position: relative;
}
.erfesh-carousel[data-transition="fade"] .erfesh-carousel__slide {
	flex: 0 0 100%;
	opacity: 0;
	transition: opacity 400ms ease;
	position: absolute;
	inset: 0;
}
.erfesh-carousel[data-transition="fade"] .erfesh-carousel__slide.is-active {
	position: relative;
	opacity: 1;
}

/* ---------- Transition style: coverflow ---------- */
.erfesh-carousel[data-transition="coverflow"] .erfesh-carousel__slide {
	transform: scale(0.85) rotateY(15deg);
	opacity: 0.6;
	transition: transform 500ms cubic-bezier(0.25,0.1,0.25,1), opacity 500ms ease;
	transform-style: preserve-3d;
}
.erfesh-carousel[data-transition="coverflow"] .erfesh-carousel__slide.is-active {
	transform: scale(1) rotateY(0deg);
	opacity: 1;
}

/* ---------- Transition style: stack ---------- */
.erfesh-carousel[data-transition="stack"] .erfesh-carousel__track {
	position: relative;
	height: auto;
}
.erfesh-carousel[data-transition="stack"] .erfesh-carousel__slide {
	flex: 0 0 100%;
	position: absolute;
	inset: 0;
	transition: transform 400ms ease, box-shadow 400ms ease, opacity 400ms ease;
}
.erfesh-carousel[data-transition="stack"] .erfesh-carousel__slide.is-active {
	position: relative;
	transform: none;
}

/* ---------- Peek affordance ---------- */
.erfesh-carousel[data-peek="true"] .erfesh-carousel__viewport {
	overflow: visible;
	clip-path: inset(-100vw -100vw -100vw 0);
}

/* ---------- Card ---------- */
.erfesh-card {
	display: flex;
	flex-direction: column;
	background: var(--erfesh-card-bg);
	border-radius: var(--erfesh-radius);
	box-shadow: 0 2px 12px rgba(0,0,0,0.06);
	overflow: hidden;
	text-decoration: none;
	color: var(--erfesh-text);
	height: 100%;
	transition: transform 250ms ease, box-shadow 250ms ease;
	outline-offset: 4px;
}

.erfesh-card:focus-visible {
	outline: 2px solid var(--erfesh-accent);
}

/* Hover effect: lift */
.erfesh-card--hover-lift:hover,
.erfesh-card--hover-lift:focus-visible {
	transform: translateY(-8px);
	box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}

/* Hover effect: zoom image */
.erfesh-card--hover-zoom .erfesh-card__image-wrap {
	overflow: hidden;
}
.erfesh-card--hover-zoom .erfesh-card__image {
	transition: transform 400ms ease;
}
.erfesh-card--hover-zoom:hover .erfesh-card__image,
.erfesh-card--hover-zoom:focus-visible .erfesh-card__image {
	transform: scale(1.05);
}

/* Hover effect: reveal overlay */
.erfesh-card--hover-reveal .erfesh-card__image-wrap {
	position: relative;
	overflow: hidden;
}
.erfesh-card--hover-reveal .erfesh-card__excerpt {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 300ms ease, opacity 300ms ease;
}
.erfesh-card--hover-reveal:hover .erfesh-card__excerpt,
.erfesh-card--hover-reveal:focus-visible .erfesh-card__excerpt {
	max-height: 200px;
	opacity: 1;
}
.erfesh-card--hover-reveal:hover .erfesh-card__image,
.erfesh-card--hover-reveal:focus-visible .erfesh-card__image {
	filter: brightness(0.85);
}

.erfesh-card__image-wrap {
	position: relative;
	--erfesh-image-aspect: 4/5;
	aspect-ratio: var(--erfesh-image-aspect);
	overflow: hidden;
	border-radius: var(--erfesh-image-radius) var(--erfesh-image-radius) 0 0;
}

.erfesh-card__image,
.erfesh-card__image--fallback {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.erfesh-card__image--fallback {
	background: linear-gradient(135deg, var(--erfesh-accent), var(--erfesh-card-bg));
}

.erfesh-card__pill {
	position: absolute;
	top: 12px;
	left: 12px;
	background: var(--erfesh-accent);
	color: var(--erfesh-pill-text);
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 4px 10px;
	border-radius: 999px;
}

.erfesh-card__pill--standalone {
	position: static;
	display: inline-block;
	margin: 16px 16px 0;
}

.erfesh-card__body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.erfesh-card__title {
	font-size: 1.1rem;
	font-weight: 600;
	margin: 0;
	line-height: 1.3;
}

.erfesh-card__excerpt {
	font-size: 0.9rem;
	font-weight: 400;
	color: var(--erfesh-muted);
	margin: 0;
}

.erfesh-card__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.8rem;
	color: var(--erfesh-muted);
	margin-top: auto;
}

.erfesh-card__avatar img {
	border-radius: 50%;
	display: block;
}

.erfesh-card__button {
	align-self: flex-start;
	margin-top: 8px;
	padding: 8px 18px;
	border-radius: 999px;
	background: var(--erfesh-accent);
	color: var(--erfesh-pill-text);
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
}

/* ---------- Arrows ---------- */
.erfesh-carousel__arrow {
	position: absolute;
	top: 40%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: rgba(0,0,0,0.05);
	color: var(--erfesh-text);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 200ms ease;
	z-index: 2;
}
.erfesh-carousel__arrow:hover,
.erfesh-carousel__arrow:focus-visible {
	background: rgba(0,0,0,0.1);
}
.erfesh-carousel__arrow--prev { left: -22px; }
.erfesh-carousel__arrow--next { right: -22px; }

@media (max-width: 767px) {
	.erfesh-carousel[data-arrows-hide-mobile="true"] .erfesh-carousel__arrow {
		display: none;
	}
}

/* ---------- Dots ---------- */
.erfesh-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 20px;
}

.erfesh-carousel__dot {
	width: 8px;
	height: 3px;
	border-radius: 2px;
	border: none;
	background: rgba(0,0,0,0.2);
	cursor: pointer;
	transition: width 300ms ease, background 300ms ease;
	padding: 0;
}

.erfesh-carousel__dot.is-active {
	width: 24px;
	background: var(--erfesh-accent);
}

.erfesh-carousel__live {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.erfesh-carousel-empty {
	padding: 24px;
	text-align: center;
	color: var(--erfesh-muted, #7A7168);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.erfesh-carousel__track,
	.erfesh-carousel__slide,
	.erfesh-card,
	.erfesh-card__image,
	.erfesh-card__excerpt {
		transition-duration: 1ms !important;
		animation: none !important;
	}
	.erfesh-carousel[data-transition="coverflow"] .erfesh-carousel__slide,
	.erfesh-carousel[data-transition="stack"] .erfesh-carousel__slide {
		transform: none !important;
		opacity: 1 !important;
	}
	.erfesh-card--hover-lift:hover {
		transform: none;
	}
}

/* ---------- Responsive base ---------- */
@media (max-width: 1199px) {
	.erfesh-carousel__arrow--prev { left: 4px; }
	.erfesh-carousel__arrow--next { right: 4px; }
}