/* Etch Carousel — frontend coverflow */

.etch-carousel {
	--etch-card-width: clamp(220px, 30vw, 360px);
	position: relative;
	width: 100%;
	margin: 1.5em 0;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}

.etch-carousel__viewport {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding: 10px 0;
}

.etch-carousel__track {
	position: relative;
	width: 100%;
	min-height: 240px;
	transition: height 300ms ease;
}

/* Cards are absolutely centered; JS sets transform/opacity per position. */
.etch-carousel__card {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--etch-card-width);
	transform: translate(-50%, -50%);
	transform-origin: center center;
	transition-property: transform, opacity;
	transition-duration: 500ms;
	transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform, opacity;
	backface-visibility: hidden;
}

/* Before JS runs, fall back to a readable horizontal row (no-JS / loading). */
.etch-carousel:not(.is-ready) .etch-carousel__track {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	min-height: 0;
}

.etch-carousel:not(.is-ready) .etch-carousel__card {
	position: relative;
	top: auto;
	left: auto;
	transform: none;
	flex: 0 0 var(--etch-card-width);
}

.etch-carousel__card-inner {
	height: 100%;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.etch-carousel__card.is-active .etch-carousel__card-inner {
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
}

.etch-carousel__media {
	margin: 0;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #eceff1;
}

.etch-carousel__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.etch-carousel__body {
	padding: 18px 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 auto;
}

.etch-carousel__heading {
	margin: 0;
	line-height: 1.25;
}

.etch-carousel__link {
	text-decoration: none;
	color: inherit;
}

.etch-carousel__link:hover {
	text-decoration: underline;
}

.etch-carousel__text {
	margin: 0;
	color: #444;
}

.etch-carousel__text p {
	margin: 0 0 0.6em;
}

.etch-carousel__text p:last-child {
	margin-bottom: 0;
}

/* Non-center cards should not steal clicks meant for navigation. */
.etch-carousel.is-ready .etch-carousel__card:not(.is-active) {
	cursor: pointer;
}

/* Arrows ----------------------------------------------------------------- */
.etch-carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	/* Must sit above the cards, which use z-index up to 100, or clicks fall
	   through to the edge card behind the arrow and jump two at a time. */
	z-index: 1000;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(60, 60, 60, 0.45);
	color: #fff;
	cursor: pointer;
	transition: background 200ms ease, opacity 200ms ease, transform 200ms ease;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

.etch-carousel__arrow:hover {
	background: rgba(40, 40, 40, 0.7);
}

.etch-carousel__arrow:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.etch-carousel__arrow svg {
	display: block;
	width: 24px;
	height: 24px;
}

.etch-carousel__arrow--prev {
	left: 12px;
}

.etch-carousel__arrow--next {
	right: 12px;
}

.etch-carousel__arrow[disabled] {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

/* Dots ------------------------------------------------------------------- */
.etch-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 14px;
}

.etch-carousel__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.25);
	cursor: pointer;
	transition: background 200ms ease, transform 200ms ease;
}

.etch-carousel__dot:hover {
	background: rgba(0, 0, 0, 0.45);
}

.etch-carousel__dot.is-active {
	background: rgba(0, 0, 0, 0.75);
	transform: scale(1.25);
}

.etch-carousel__dot:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
}

/* Accessibility helper (matches WP core). */
.etch-carousel .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Smaller screens: shrink cards a touch. */
@media ( max-width: 600px ) {
	.etch-carousel {
		--etch-card-width: clamp(200px, 78vw, 300px);
	}

	.etch-carousel__arrow {
		width: 40px;
		height: 40px;
	}
}

/* Respect reduced-motion: kill animated transitions. */
@media ( prefers-reduced-motion: reduce ) {
	.etch-carousel__card,
	.etch-carousel__track,
	.etch-carousel__arrow,
	.etch-carousel__dot {
		transition: none !important;
	}
}