/**
 * Featured carousel.
 *
 * Scrolling is the browser's own: a snapping flex track, so swiping works on
 * touch devices without any script. The arrows and dots are conveniences on
 * top of it.
 *
 * Colours come from Elementor globals where a site defines them, with the
 * Kicks That Give palette as the fallback.
 */

.ktga-carousel {
	max-width: 100%;
	--ktga-carousel-primary: var( --e-global-color-primary, #2b4b9d );
	--ktga-carousel-accent: var( --e-global-color-accent, #ed795a );
	--ktga-carousel-accent-soft: #ffe6df;
	--ktga-carousel-urgent: #b3261e;
	--ktga-carousel-live: #d7261e;
	--ktga-carousel-warning: #b26a00;
	--ktga-carousel-surface: #fff;
	--ktga-carousel-text: var( --e-global-color-text, #1b1b1b );
	--ktga-carousel-muted: #737070;
	--ktga-carousel-border: rgba( 27, 27, 27, 0.08 );
	--ktga-carousel-radius: 14px;
	--ktga-carousel-gap: 20px;
	--ktga-carousel-per-view: 4;
	--ktga-carousel-per-view-tablet: 2;
	--ktga-carousel-per-view-mobile: 1;
	--ktga-carousel-shadow: 0 2px 10px rgba( 27, 27, 27, 0.07 );
	--ktga-carousel-shadow-hover: 0 12px 28px rgba( 27, 27, 27, 0.14 );
	--ktga-carousel-columns: var( --ktga-carousel-per-view );
	position: relative;
	color: var( --ktga-carousel-text );
}

.ktga-carousel__header {
	margin-bottom: 20px;
}

.ktga-carousel__heading {
	margin: 0;
	font-family: var( --e-global-typography-primary-font-family, "Poppins", sans-serif );
	font-weight: 600;
}

.ktga-carousel__subheading {
	margin: 6px 0 0;
	color: var( --ktga-carousel-muted );
}

/* Track ------------------------------------------------------------------ */

.ktga-carousel__viewport {
	position: relative;
}

.ktga-carousel__track {
	display: flex;
	gap: var( --ktga-carousel-gap );
	margin: 0;
	padding: 4px 0 6px;
	overflow-x: auto;
	overflow-y: hidden;
	list-style: none;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior-x: contain;
}

.ktga-carousel__track::-webkit-scrollbar {
	display: none;
}

.ktga-carousel__track:focus-visible {
	outline: 2px solid var( --ktga-carousel-primary );
	outline-offset: 4px;
}

.ktga-carousel__slide {
	flex: 0 0 calc( ( 100% - ( var( --ktga-carousel-columns ) - 1 ) * var( --ktga-carousel-gap ) ) / var( --ktga-carousel-columns ) );
	scroll-snap-align: start;
	display: flex;
	align-items: stretch;
}

/* Card ------------------------------------------------------------------- */

.ktga-carousel__card {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var( --ktga-carousel-surface );
	border: 1px solid var( --ktga-carousel-border );
	border-radius: var( --ktga-carousel-radius );
	box-shadow: var( --ktga-carousel-shadow );
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.ktga-carousel__card:hover,
.ktga-carousel__card:focus-visible {
	box-shadow: var( --ktga-carousel-shadow-hover );
	transform: translateY( -2px );
}

.ktga-carousel__card:focus-visible {
	outline: 2px solid var( --ktga-carousel-primary );
	outline-offset: 2px;
}

.ktga-carousel__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #f5f3ef;
}

.ktga-carousel__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.ktga-carousel__card:hover .ktga-carousel__media img {
	transform: scale( 1.03 );
}

.ktga-carousel__badges {
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	max-width: calc( 100% - 20px );
}

.ktga-carousel__badge {
	display: inline-block;
	padding: 4px 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: #fff;
	color: var( --ktga-carousel-text );
	box-shadow: 0 1px 4px rgba( 27, 27, 27, 0.16 );
}

/* Live is red and carries a pulsing dot, so the state reads at a glance. */
.ktga-carousel__badge--live-auction {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var( --ktga-carousel-live );
	color: #fff;
}

.ktga-carousel__badge--live-auction::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	animation: ktga-carousel-blink 1.6s ease-in-out infinite;
}

@keyframes ktga-carousel-blink {
	50% {
		opacity: 0.25;
	}
}

.ktga-carousel__badge--ending-soon {
	background: var( --ktga-carousel-warning );
	color: #fff;
	animation: ktga-carousel-pulse 2s ease-in-out infinite;
}

/* Finished auctions step back: the result stays, the urgency goes. */
.ktga-carousel__badge--ended,
.ktga-carousel__badge--sold {
	background: var( --ktga-carousel-muted );
	color: #fff;
}

.ktga-carousel__badge--sold {
	background: #2f7d32;
}

.ktga-carousel__badge--buy-now {
	background: var( --ktga-carousel-accent );
	color: #fff;
}

.ktga-carousel__badge--service,
.ktga-carousel__badge--experience {
	background: var( --ktga-carousel-accent-soft );
	color: var( --ktga-carousel-primary );
}

@keyframes ktga-carousel-pulse {
	50% {
		opacity: 0.72;
	}
}

.ktga-carousel__video {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba( 27, 27, 27, 0.6 );
	color: #fff;
}

.ktga-carousel__video svg {
	width: 20px;
	height: 20px;
}

.ktga-carousel__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 6px;
	padding: 14px 16px 16px;
}

/*
 * The price or the opening date, whichever a card has, in one block: the
 * figure keeps the same place on every card, and the button lines up across
 * the row however much wording sits above it.
 */
.ktga-carousel__meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: auto;
	min-height: 2.6em;
	justify-content: flex-end;
}

.ktga-carousel__meta:empty {
	min-height: 0;
}

.ktga-carousel__category {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --ktga-carousel-muted );
}

.ktga-carousel__title {
	font-family: var( --e-global-typography-primary-font-family, "Poppins", sans-serif );
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ktga-carousel__price-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
	margin-top: 2px;
}

.ktga-carousel__price-label {
	flex: 0 0 100%;
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --ktga-carousel-muted );
}

.ktga-carousel__price {
	font-size: 19px;
	font-weight: 700;
	color: var( --ktga-carousel-primary );
}

.ktga-carousel__bids,
.ktga-carousel__buy-now {
	font-size: 12px;
	color: var( --ktga-carousel-muted );
}

.ktga-carousel__countdown {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	color: var( --ktga-carousel-text );
}

.ktga-carousel__countdown svg {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	color: var( --ktga-carousel-muted );
}

.ktga-carousel__countdown-label {
	color: var( --ktga-carousel-muted );
}

.ktga-carousel__countdown time {
	font-weight: 600;
}

.ktga-carousel__countdown.is-urgent,
.ktga-carousel__countdown.is-urgent svg {
	color: var( --ktga-carousel-urgent );
}

.ktga-carousel__slide.is-ended .ktga-carousel__card {
	opacity: 0.72;
}

.ktga-carousel__button {
	margin-top: 8px;
	padding: 9px 14px;
	border-radius: 999px;
	background: var( --ktga-carousel-accent );
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
	transition: background 0.2s ease;
}

.ktga-carousel__card:hover .ktga-carousel__button {
	background: #dc6949;
}

/* Announced or finished: the same shape, visibly not a thing to act on. */
.ktga-carousel__button--soon,
.ktga-carousel__card:hover .ktga-carousel__button--soon,
.ktga-carousel__button--ended,
.ktga-carousel__card:hover .ktga-carousel__button--ended {
	background: transparent;
	box-shadow: inset 0 0 0 1px currentColor;
	color: var( --ktga-carousel-accent );
}

.ktga-carousel__button--ended,
.ktga-carousel__card:hover .ktga-carousel__button--ended {
	color: var( --ktga-carousel-muted );
}

.ktga-carousel--spotlight .ktga-carousel__button--soon,
.ktga-carousel--spotlight .ktga-carousel__card:hover .ktga-carousel__button--soon,
.ktga-carousel--spotlight .ktga-carousel__button--ended,
.ktga-carousel--spotlight .ktga-carousel__card:hover .ktga-carousel__button--ended {
	color: #fff;
	opacity: 0.85;
}

/* Bidding is the action the strip is for. */
.ktga-carousel__button--bid {
	background: var( --ktga-carousel-accent );
	color: #fff;
}

.ktga-carousel__slide.is-ended .ktga-carousel__button--bid {
	background: var( --ktga-carousel-muted );
}

/* Spotlight ---------------------------------------------------------------
 *
 * One tall card with the wording over the photograph and the edge of the next
 * card showing, so it reads as a strip that continues.
 */

.ktga-carousel--spotlight {
	--ktga-carousel-per-view: 1.15;
	--ktga-carousel-per-view-tablet: 1.4;
	--ktga-carousel-per-view-mobile: 1.12;
	--ktga-carousel-radius: 22px;
	/* Upright on a phone, wider on a big screen, where one card spanning the
	   page would otherwise be taller than the window. */
	--ktga-carousel-aspect: 4 / 5;
	--ktga-carousel-max-height: 620px;
}

@media ( min-width: 768px ) {
	.ktga-carousel--spotlight {
		--ktga-carousel-aspect: 16 / 10;
	}
}

.ktga-carousel--spotlight .ktga-carousel__card {
	position: relative;
	border: 0;
	background: #101010;
}

.ktga-carousel--spotlight .ktga-carousel__media {
	aspect-ratio: var( --ktga-carousel-aspect );
	max-height: var( --ktga-carousel-max-height );
	background: #101010;
}

/* The photograph has to carry white text, so it is darkened towards the foot. */
.ktga-carousel--spotlight .ktga-carousel__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( to top, rgba( 8, 8, 8, 0.92 ) 0%, rgba( 8, 8, 8, 0.55 ) 28%, rgba( 8, 8, 8, 0 ) 62% );
}

.ktga-carousel--spotlight .ktga-carousel__body {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	gap: 8px;
	padding: 20px 22px 22px;
	color: #fff;
}

.ktga-carousel--spotlight .ktga-carousel__meta {
	margin-top: 0;
	min-height: 0;
}

/* With the name gone the figure carries the card, so it is given some size. */
.ktga-carousel--spotlight .ktga-carousel__price {
	font-size: 22px;
}

.ktga-carousel--spotlight .ktga-carousel__button {
	margin-top: 4px;
}

.ktga-carousel--spotlight .ktga-carousel__category,
.ktga-carousel--spotlight .ktga-carousel__price-label,
.ktga-carousel--spotlight .ktga-carousel__bids,
.ktga-carousel--spotlight .ktga-carousel__buy-now,
.ktga-carousel--spotlight .ktga-carousel__countdown,
.ktga-carousel--spotlight .ktga-carousel__countdown svg,
.ktga-carousel--spotlight .ktga-carousel__countdown-label {
	color: rgba( 255, 255, 255, 0.82 );
}

.ktga-carousel--spotlight .ktga-carousel__title {
	font-size: 26px;
	line-height: 1.18;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: #fff;
}

.ktga-carousel--spotlight .ktga-carousel__price {
	color: #fff;
}

.ktga-carousel--spotlight .ktga-carousel__badges {
	top: 16px;
	left: 16px;
}

.ktga-carousel--spotlight .ktga-carousel__badge {
	padding: 6px 12px;
	font-size: 12px;
}

.ktga-carousel--spotlight .ktga-carousel__button {
	align-self: flex-start;
	padding: 10px 18px;
}

@media ( max-width: 767px ) {
	.ktga-carousel--spotlight .ktga-carousel__title {
		font-size: 21px;
	}

	.ktga-carousel--spotlight .ktga-carousel__body {
		padding: 16px 18px 18px;
	}
}

/* "Auction coming soon" cards carry the message instead of a price. */
.ktga-carousel__badge--coming-soon {
	background: var( --ktga-carousel-primary );
	color: #fff;
}

.ktga-carousel--spotlight .ktga-carousel__card--coming_soon .ktga-carousel__badge--coming-soon {
	font-size: 13px;
	letter-spacing: 0.08em;
}

/* Arrows and dots ---------------------------------------------------------
 *
 * These are <button> elements, so a theme or an Elementor global button style
 * lands on them (".elementor-kit-9 button" and the like, which outranks a
 * single class). Everything here is written as ".ktga-carousel .ktga-…" to sit
 * above that, and the chrome a global style brings — padding, minimum sizes,
 * uppercase text, gradients — is reset outright. The widget's own Style
 * controls are one step more specific again, so they still win.
 */

.ktga-carousel .ktga-carousel__arrow,
.ktga-carousel .ktga-carousel__dot {
	-webkit-appearance: none !important;
	appearance: none !important;
	box-sizing: border-box !important;
	flex: 0 0 auto;
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	max-height: none !important;
	background-image: none !important;
	font: inherit;
	line-height: 0 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-indent: 0;
	cursor: pointer;
}

.ktga-carousel .ktga-carousel__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	transform: translateY( -50% );
	border: 1px solid var( --ktga-carousel-border );
	border-radius: 50%;
	background-color: #fff;
	color: var( --ktga-carousel-primary );
	box-shadow: 0 4px 14px rgba( 27, 27, 27, 0.14 );
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.ktga-carousel .ktga-carousel__arrow svg {
	display: block;
	width: 22px;
	height: 22px;
	pointer-events: none;
	fill: none;
}

.ktga-carousel .ktga-carousel__arrow:hover {
	background-color: var( --ktga-carousel-primary );
	color: #fff;
}

.ktga-carousel .ktga-carousel__arrow:focus-visible {
	outline: 2px solid var( --ktga-carousel-primary );
	outline-offset: 2px;
}

.ktga-carousel .ktga-carousel__arrow[aria-disabled="true"] {
	opacity: 0.35;
	pointer-events: none;
}

.ktga-carousel .ktga-carousel__arrow--prev {
	left: -18px;
}

.ktga-carousel .ktga-carousel__arrow--next {
	right: -18px;
}

/* On a narrow page the arrows have nowhere to hang, so they sit inside. */
@media ( max-width: 1200px ) {
	.ktga-carousel .ktga-carousel__arrow--prev {
		left: 8px;
	}

	.ktga-carousel .ktga-carousel__arrow--next {
		right: 8px;
	}
}

.ktga-carousel__dots {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
	padding: 0;
	list-style: none;
}

.ktga-carousel__dots:empty {
	display: none;
}

.ktga-carousel .ktga-carousel__dot {
	width: 9px;
	height: 9px;
	border: 0;
	border-radius: 50%;
	background-color: rgba( 27, 27, 27, 0.25 );
	box-shadow: none;
	transition: background-color 0.2s ease, width 0.2s ease;
}

.ktga-carousel .ktga-carousel__dot[aria-current="true"] {
	width: 22px;
	border-radius: 999px;
	background-color: var( --ktga-carousel-primary );
}

.ktga-carousel .ktga-carousel__dot:focus-visible {
	outline: 2px solid var( --ktga-carousel-primary );
	outline-offset: 3px;
}

/* Over a photograph the dots need to read against it. */
.ktga-carousel--spotlight .ktga-carousel__dot {
	background-color: rgba( 27, 27, 27, 0.22 );
}

.ktga-carousel-empty {
	margin: 0;
	color: var( --ktga-carousel-muted, #737070 );
}

/* Glowing call to action --------------------------------------------------
 *
 * Add the CSS class "ktga-glow" to the button (Advanced → CSS Classes) for the
 * slow halo that marks the main action. The class works whether it lands on the
 * widget wrapper, where the button inside it glows rather than the whole box,
 * or straight on a link or button.
 *
 * It lives in this stylesheet because the button it was asked for sits directly
 * below the carousel, so the file is already on that page.
 */

.ktga-glow .elementor-button,
.ktga-glow .wp-block-button__link,
.ktga-glow > a,
.ktga-glow > button,
a.ktga-glow,
button.ktga-glow,
.elementor-button.ktga-glow {
	position: relative;
	z-index: 0;
	animation: ktga-glow-pulse 2.6s ease-in-out infinite;
	will-change: box-shadow;
}

@keyframes ktga-glow-pulse {
	0%,
	100% {
		box-shadow: 0 0 0 0 rgba( 237, 121, 90, 0.5 ), 0 0 16px 2px rgba( 237, 121, 90, 0.35 );
	}

	50% {
		box-shadow: 0 0 0 14px rgba( 237, 121, 90, 0 ), 0 0 34px 10px rgba( 237, 121, 90, 0.55 );
	}
}

/* A halo that never settles is tiring; on hover it holds steady and bright. */
.ktga-glow .elementor-button:hover,
.ktga-glow .wp-block-button__link:hover,
.ktga-glow > a:hover,
.ktga-glow > button:hover,
a.ktga-glow:hover,
button.ktga-glow:hover,
.elementor-button.ktga-glow:hover {
	animation: none;
	box-shadow: 0 0 30px 8px rgba( 237, 121, 90, 0.6 );
}

@media ( prefers-reduced-motion: reduce ) {
	.ktga-glow .elementor-button,
	.ktga-glow .wp-block-button__link,
	.ktga-glow > a,
	.ktga-glow > button,
	a.ktga-glow,
	button.ktga-glow,
	.elementor-button.ktga-glow {
		animation: none;
		box-shadow: 0 0 22px 4px rgba( 237, 121, 90, 0.45 );
	}
}

/* Sheen sweep ------------------------------------------------------------
 *
 * "ktga-shine" runs a soft highlight across the button every few seconds, and
 * again, faster, on hover. Pair it with "ktga-glow" for both, or use either on
 * its own. The button keeps its own colours: these classes only add movement,
 * so the widget's Style tab still decides how it looks.
 */

.ktga-shine .elementor-button,
.ktga-shine .wp-block-button__link,
.ktga-shine > a,
.ktga-shine > button,
a.ktga-shine,
button.ktga-shine,
.elementor-button.ktga-shine {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ktga-shine .elementor-button::after,
.ktga-shine .wp-block-button__link::after,
.ktga-shine > a::after,
.ktga-shine > button::after,
a.ktga-shine::after,
button.ktga-shine::after,
.elementor-button.ktga-shine::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 60%;
	background: linear-gradient( 90deg, transparent, rgba( 255, 255, 255, 0.28 ), transparent );
	transform: translateX( -180% ) skewX( -18deg );
	animation: ktga-shine-sweep 4.5s ease-in-out 1.5s infinite;
	pointer-events: none;
}

.ktga-shine .elementor-button:hover,
.ktga-shine > a:hover,
a.ktga-shine:hover,
button.ktga-shine:hover,
.elementor-button.ktga-shine:hover {
	transform: translateY( -1px );
}

/* Hovering sweeps it again straight away, rather than waiting for the cycle. */
.ktga-shine .elementor-button:hover::after,
.ktga-shine .wp-block-button__link:hover::after,
.ktga-shine > a:hover::after,
.ktga-shine > button:hover::after,
a.ktga-shine:hover::after,
button.ktga-shine:hover::after,
.elementor-button.ktga-shine:hover::after {
	animation-duration: 1.1s;
	animation-delay: 0s;
}

@keyframes ktga-shine-sweep {
	0% {
		transform: translateX( -180% ) skewX( -18deg );
	}

	55%,
	100% {
		transform: translateX( 320% ) skewX( -18deg );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.ktga-shine .elementor-button::after,
	.ktga-shine .wp-block-button__link::after,
	.ktga-shine > a::after,
	.ktga-shine > button::after,
	a.ktga-shine::after,
	button.ktga-shine::after,
	.elementor-button.ktga-shine::after {
		animation: none;
		opacity: 0;
	}

	.ktga-shine .elementor-button:hover,
	a.ktga-shine:hover,
	.elementor-button.ktga-shine:hover {
		transform: none;
	}
}

/* Responsive ------------------------------------------------------------- */

@media ( min-width: 768px ) {
	.ktga-carousel--arrows .ktga-carousel__arrow {
		display: flex;
	}
}

@media ( max-width: 1024px ) {
	.ktga-carousel {
		--ktga-carousel-columns: var( --ktga-carousel-per-view-tablet );
	}
}

@media ( max-width: 767px ) {
	.ktga-carousel {
		--ktga-carousel-columns: var( --ktga-carousel-per-view-mobile );
		--ktga-carousel-gap: 16px;
	}

	/* No negative margins here: on a phone they widen the page and give the
	   whole site a sideways scroll. The gutter is the page container's job. */
	.ktga-carousel__track {
		scroll-padding-inline: 0;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.ktga-carousel__track {
		scroll-behavior: auto;
	}

	.ktga-carousel__card,
	.ktga-carousel__media img,
	.ktga-carousel__arrow,
	.ktga-carousel__dot {
		transition: none;
	}

	.ktga-carousel__card:hover {
		transform: none;
	}

	.ktga-carousel__card:hover .ktga-carousel__media img {
		transform: none;
	}

	.ktga-carousel__badge--ending-soon {
		animation: none;
	}
}

/* Themes usually define this, but the carousel should not depend on it: the
   fixed end date sits beside the ticking figure for screen readers only. */
.ktga-carousel .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}