/*
 * WParaby elements (counter, countdown, breadcrumb, slider, tabs).
 * Shared by the blocks and the Elementor widgets; tokens only (--wpa-*).
 * Buttons use two-class selectors so Elementor's kit button styles do not apply.
 */

.wpa-el { --wpa-justify: flex-start; }
.wpa-el.has-text-align-center, .has-text-align-center > .wpa-el { --wpa-justify: center; }
.wpa-el.has-text-align-left { --wpa-justify: left; }
.wpa-el.has-text-align-right { --wpa-justify: right; }

/* Counter: defaults sit on the wrapper (low specificity) so block typography and Elementor
   typography controls, which also target the wrapper, override them. */
:where(.wpa-el-counter) {
	font-family: var(--wpa-font-heading, inherit);
	font-size: 2.75rem;
	font-weight: 800;
	line-height: 1.2;
}
.wpa-counter { margin: 0; font-variant-numeric: tabular-nums; }

/* Countdown */
:where(.wpa-el-countdown) { font-family: var(--wpa-font-heading, inherit); }
.wpa-countdown {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--wpa-justify);
	gap: var(--wpa-space-20, 0.75rem);
}
.wpa-countdown__item {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 4.5em;
	padding: 0.75em 0.5em;
	background: var(--wpa-countdown-box);
	border-radius: var(--wpa-radius-md, 12px);
	text-align: center;
}
.wpa-countdown__value {
	font-size: 2em;
	font-weight: 800;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}
.wpa-countdown__label { font-size: 0.8125em; opacity: 0.8; }
.wpa-countdown__expired { flex-basis: 100%; margin: 0; }
.wpa-countdown__expired[hidden] { display: none; }

/* Breadcrumb */
.wpa-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--wpa-justify);
	align-items: center;
	gap: 0.5em;
	margin: 0;
	padding: 0;
	list-style: none;
}
.wpa-breadcrumb a { color: inherit; text-decoration: none; }
.wpa-breadcrumb a:hover, .wpa-breadcrumb a:focus-visible { text-decoration: underline; }
.wpa-breadcrumb__sep { opacity: 0.5; }
.wpa-breadcrumb [aria-current] { opacity: 0.75; }

/* Slider */
.wpa-slider { --_per: var(--wpa-slider-per, 3); position: relative; }
@media (max-width: 1024px) { .wpa-slider { --_per: var(--wpa-slider-per-t, 2); } }
@media (max-width: 781px) { .wpa-slider { --_per: var(--wpa-slider-per-m, 1); } }

.wpa-slider__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--_per) - 1) * var(--wpa-slider-gap)) / var(--_per));
	gap: var(--wpa-slider-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}
.wpa-slider__track::-webkit-scrollbar { display: none; }
.wpa-slider__track:focus-visible { outline: 2px solid var(--wpa-color-accent, currentColor); outline-offset: 4px; }
.wpa-slider__slide { min-width: 0; scroll-snap-align: start; }

.wpa-slider__img { display: block; max-width: 100%; height: auto; }

.wpa-slider__card {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--wpa-space-30, 1rem);
	height: 100%;
	margin: 0;
	padding: var(--wpa-space-40, 1.5rem);
	background: var(--wpa-slider-card);
	border-radius: var(--wpa-radius-md, 12px);
}
.wpa-slider__text { margin: 0; flex: 1; }
.wpa-slider__text p { margin: 0; }
.wpa-slider__author { display: flex; align-items: center; gap: 0.75em; }
.wpa-slider__avatar { width: 48px; height: 48px; flex: none; border-radius: 50%; object-fit: cover; }
.wpa-slider__name { display: block; font-weight: 700; }
.wpa-slider__meta { display: block; font-size: 0.875em; opacity: 0.75; }

.is-type-logo .wpa-slider__slide {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--wpa-logo-height, 72px);
}
.is-type-logo .wpa-slider__img { max-height: 100%; object-fit: contain; }

.wpa-slider__figure { margin: 0; }
.is-type-image .wpa-slider__img,
.is-type-card .wpa-slider__img {
	width: 100%;
	aspect-ratio: var(--wpa-slider-ratio, 4/3);
	object-fit: cover;
}
.is-type-image .wpa-slider__img { border-radius: var(--wpa-radius-md, 12px); }
.wpa-slider__caption { margin-top: 0.5em; font-size: 0.875em; }
.is-type-card .wpa-slider__card { padding: 0; gap: 0; overflow: hidden; }
.wpa-slider__body { padding: var(--wpa-space-30, 1rem); }
/* Two classes: theme and Elementor kit heading styles must not resize card titles. */
.wpa-slider .wpa-slider__title { margin: 0; font-family: var(--wpa-font-heading, inherit); font-size: 1.25em; font-weight: 700; line-height: 1.3; color: inherit; }
.wpa-slider__body .wpa-slider__text { margin-top: 0.5em; opacity: 0.85; }

.wpa-slider__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wpa-space-20, 0.75rem);
	margin-top: var(--wpa-space-30, 1rem);
}
.wpa-slider .wpa-slider__arrow {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	color: var(--wpa-color-contrast, currentColor);
	background: var(--wpa-color-base, transparent);
	border: 1px solid var(--wpa-color-border, currentColor);
	border-radius: 50%;
	box-shadow: none;
	cursor: pointer;
}
.wpa-slider .wpa-slider__arrow:hover { border-color: var(--wpa-color-primary, currentColor); color: var(--wpa-color-primary, currentColor); background: var(--wpa-color-base, transparent); }
.wpa-slider .wpa-slider__arrow[disabled] { opacity: 0.4; cursor: default; }
/* The chevron points "back"; flip the forward arrow for the reading direction. */
.wpa-slider__arrow.is-prev:dir(rtl) svg, .wpa-slider__arrow.is-next:dir(ltr) svg { transform: scaleX(-1); }
.wpa-slider__dots { display: flex; gap: 6px; }
.wpa-slider .wpa-slider__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	background: var(--wpa-color-border, currentColor);
	border: 0;
	border-radius: 4px;
	box-shadow: none;
	cursor: pointer;
	transition: width 0.2s ease;
}
.wpa-slider .wpa-slider__dot.is-active { width: 20px; background: var(--wpa-color-primary, currentColor); }
.wpa-slider .wpa-slider__dot[hidden] { display: none; }
.wpa-slider :is(.wpa-slider__arrow, .wpa-slider__dot):focus-visible { outline: 2px solid var(--wpa-color-accent, currentColor); outline-offset: 2px; }

/* Tabs */
.wpa-tabs__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--wpa-justify);
	gap: var(--wpa-space-10, 0.5rem);
	margin-bottom: var(--wpa-space-30, 1rem);
}
.wpa-tabs .wpa-tabs__tab {
	padding: 0.6em 1.25em;
	font: inherit;
	font-weight: 600;
	line-height: 1.4;
	color: var(--wpa-color-contrast, currentColor);
	background: var(--wpa-color-base-2, transparent);
	border: 0;
	border-radius: var(--wpa-radius-sm, 6px);
	box-shadow: none;
	cursor: pointer;
}
.wpa-tabs .wpa-tabs__tab:hover { color: var(--wpa-color-contrast, currentColor); background: var(--wpa-color-border, transparent); }
.wpa-tabs .wpa-tabs__tab.is-active { color: var(--wpa-color-base, #fff); background: var(--wpa-tabs-active); }
.wpa-tabs .wpa-tabs__tab:focus-visible { outline: 2px solid var(--wpa-color-accent, currentColor); outline-offset: 2px; }
.wpa-tabs__panel > * { margin-block: 0; }
.wpa-tabs__panel > * + * { margin-block-start: var(--wpa-space-20, 0.75rem); }
.wpa-tabs__panel:focus-visible { outline: 2px solid var(--wpa-color-accent, currentColor); outline-offset: 4px; }
.wpa-tabs__panel[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
	.wpa-slider__track { scroll-behavior: auto; }
	.wpa-slider .wpa-slider__dot { transition: none; }
}
