/**
 * Featured Items Carousel - frontend styles.
 *
 * Scoped to plugin-specific classes only (no broad element selectors
 * such as img{}, h3{}, button{}) so this stylesheet never leaks into
 * theme or Elementor styling. Configurable values arrive as CSS custom
 * properties set inline per instance by includes/class-renderer.php.
 */

.fic-carousel {
	position: relative;
	box-sizing: border-box;
	background-color: var(--fic-bg-color, transparent);
}

.fic-carousel *,
.fic-carousel *::before,
.fic-carousel *::after {
	box-sizing: border-box;
}

.fic-carousel--breakout {
	width: var(--fic-computed-width, 100%);
	max-width: var(--fic-breakout-max-width, 1600px);
}

/* -------------------------------------------------- */
/* Controls                                            */
/* -------------------------------------------------- */

.fic-carousel__controls {
	display: flex;
	align-items: center;
	gap: var(--fic-arrow-gap, 16px);
	margin-bottom: 16px;
	z-index: 2;
}

.fic-carousel--no-arrows .fic-carousel__controls {
	display: none;
}

/* Position presets. top-* stay in normal flow (above the track, as in
   the reference layout); middle-*/bottom-*/custom overlay the track. */
.fic-carousel[data-arrow-position="top-left"] .fic-carousel__controls { justify-content: flex-start; }
.fic-carousel[data-arrow-position="top-center"] .fic-carousel__controls { justify-content: center; }
.fic-carousel[data-arrow-position="top-right"] .fic-carousel__controls { justify-content: flex-end; }

.fic-carousel[data-arrow-position="middle-left"] .fic-carousel__controls,
.fic-carousel[data-arrow-position="middle-right"] .fic-carousel__controls,
.fic-carousel[data-arrow-position="bottom-left"] .fic-carousel__controls,
.fic-carousel[data-arrow-position="bottom-center"] .fic-carousel__controls,
.fic-carousel[data-arrow-position="bottom-right"] .fic-carousel__controls,
.fic-carousel[data-arrow-position="custom"] .fic-carousel__controls {
	position: absolute;
	margin-bottom: 0;
}

.fic-carousel[data-arrow-position="middle-left"] .fic-carousel__controls { top: 50%; left: 12px; transform: translateY(-50%); }
.fic-carousel[data-arrow-position="middle-right"] .fic-carousel__controls { top: 50%; right: 12px; transform: translateY(-50%); }
.fic-carousel[data-arrow-position="bottom-left"] .fic-carousel__controls { bottom: 12px; left: 12px; }
.fic-carousel[data-arrow-position="bottom-center"] .fic-carousel__controls { bottom: 12px; left: 50%; transform: translateX(-50%); }
.fic-carousel[data-arrow-position="bottom-right"] .fic-carousel__controls { bottom: 12px; right: 12px; }
.fic-carousel[data-arrow-position="custom"] .fic-carousel__controls {
	top: var(--fic-arrow-top, auto);
	right: var(--fic-arrow-right, auto);
	bottom: var(--fic-arrow-bottom, auto);
	left: var(--fic-arrow-left, auto);
}

/* Explicit alignment always wins over the position preset's default
   justify-content when both are set (declared after the rules above). */
.fic-carousel[data-arrow-alignment="start"] .fic-carousel__controls { justify-content: flex-start; }
.fic-carousel[data-arrow-alignment="center"] .fic-carousel__controls { justify-content: center; }
.fic-carousel[data-arrow-alignment="end"] .fic-carousel__controls { justify-content: flex-end; }
.fic-carousel[data-arrow-alignment="space-between"] .fic-carousel__controls { justify-content: space-between; }

/*
 * Arrow buttons are real <button> elements (see the Accessibility section
 * of readme.txt), which is exactly what makes them a target for a host
 * page builder's global button reset: Elementor's Kit CSS ships a
 * `.elementor-kit-<id> button {...}` rule (background, color, border,
 * padding) with specificity (0,1,1) - one class plus the `button` type
 * selector - which beats a bare `.fic-carousel__arrow` at (0,1,0)
 * regardless of stylesheet load order, silently overriding this carousel's
 * "transparent" arrow background/color settings with the site's global
 * button color on any page that doesn't happen to carry its own
 * higher-specificity override. Every rule below is scoped under the
 * carousel wrapper (`.fic-carousel .fic-carousel__arrow`, specificity
 * (0,2,0)) so it reliably wins against that kind of host-theme/page-builder
 * button styling without needing `!important`.
 */
.fic-carousel .fic-carousel__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--fic-arrow-size, var(--fic-arrow-size-desktop, 24px)) + (var(--fic-arrow-padding, 4px) * 2));
	height: calc(var(--fic-arrow-size, var(--fic-arrow-size-desktop, 24px)) + (var(--fic-arrow-padding, 4px) * 2));
	padding: var(--fic-arrow-padding, 4px);
	margin: 0;
	border: var(--fic-arrow-border-width, 0) solid var(--fic-arrow-border-color, transparent);
	border-radius: var(--fic-arrow-border-radius, 0);
	background: var(--fic-arrow-bg, transparent);
	color: var(--fic-arrow-color, #ff7a00);
	cursor: pointer;
	line-height: 0;
	transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.fic-carousel .fic-carousel__arrow:hover:not(:disabled) {
	background: var(--fic-arrow-hover-bg, transparent);
	color: var(--fic-arrow-hover-color, #d95f00);
}

.fic-carousel .fic-carousel__arrow:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.fic-carousel .fic-carousel__arrow:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.fic-carousel .fic-carousel__arrow-icon {
	width: var(--fic-arrow-size, var(--fic-arrow-size-desktop, 24px));
	height: var(--fic-arrow-size, var(--fic-arrow-size-desktop, 24px));
	color: currentColor;
}

/* -------------------------------------------------- */
/* Splide track / slides                               */
/* -------------------------------------------------- */

.fic-carousel__slider {
	position: relative;
	overflow: hidden;
}

/*
 * Slide width = (100% - (gap * whole-slides-per-view)) / items.
 *
 * "whole-slides-per-view" (--fic-gap-count) is floor(items), precomputed
 * in PHP - see the comment on --fic-desktop-gap-count in class-renderer.php
 * for why items - 1 is the wrong multiplier for a fractional peek value.
 */
.fic-carousel__slide {
	flex: 0 0 calc((100% - (var(--fic-gap, 24px) * var(--fic-gap-count, var(--fic-desktop-gap-count, 3)))) / var(--fic-items, var(--fic-desktop-items, 3.25)));
	width: var(--fic-card-width, auto);
}

@media (max-width: 1024px) {
	.fic-carousel {
		--fic-items: var(--fic-tablet-items, 2.25);
		--fic-gap-count: var(--fic-tablet-gap-count, 2);
		/* --fic-arrow-size is only ever assigned inside these @media
		   blocks (see the comment on --fic-arrow-size-desktop in
		   class-renderer.php for why) - without this override, arrow
		   icons default to the desktop size on tablet/mobile too,
		   frequently too small a touch target on a real device even
		   when it reads fine on a desktop-sized preview. */
		--fic-arrow-size: var(--fic-arrow-size-tablet, 28px);
	}
}

@media (max-width: 767px) {
	.fic-carousel {
		--fic-items: var(--fic-mobile-items, 1.15);
		--fic-gap-count: var(--fic-mobile-gap-count, 1);
		--fic-arrow-size: var(--fic-arrow-size-mobile, 34px);
	}
}

/* -------------------------------------------------- */
/* Cards                                               */
/* -------------------------------------------------- */

.fic-card {
	height: 100%;
}

.fic-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.fic-card__media {
	position: relative;
	width: 100%;
	height: var(--fic-image-height, auto);
	overflow: hidden;
	border-radius: var(--fic-card-radius, 4px);
	aspect-ratio: var(--fic-image-ratio, 4 / 5);
	background-color: rgba(0, 0, 0, 0.04);
}

.fic-card__image {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: var(--fic-image-radius, 4px);
	object-fit: var(--fic-image-fit, cover);
	object-position: var(--fic-image-position, center center);
}

.fic-card__content {
	margin-top: var(--fic-title-margin-top, 16px);
}

.fic-card__label {
	display: inline-block;
	margin-bottom: var(--fic-label-margin-bottom, 6px);
	font-size: var(--fic-label-font-size, 13px);
	font-weight: var(--fic-label-font-weight, 400);
	font-family: var(--fic-label-font-family, inherit);
	letter-spacing: var(--fic-label-letter-spacing, 0.04em);
	text-transform: var(--fic-label-text-transform, uppercase);
	color: var(--fic-label-color, #767676);
}

.fic-card__title {
	margin: 0;
	color: var(--fic-title-color, #222222);
	font-size: var(--fic-title-font-size, 24px);
	line-height: var(--fic-title-line-height, 28px);
	font-weight: var(--fic-title-font-weight, 400);
	font-family: var(--fic-title-font-family, inherit);
	text-align: var(--fic-title-align, left);
	transition: color 150ms ease;
}

.fic-carousel--clamp-title .fic-card__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--fic-title-lines, 2);
	overflow: hidden;
}

.fic-card__description {
	margin: 0;
	margin-top: var(--fic-description-margin-top, 8px);
	color: var(--fic-description-color, #555555);
	font-size: var(--fic-description-font-size, 16px);
	line-height: var(--fic-description-line-height, 22px);
}

.fic-carousel--clamp-description .fic-card__description {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--fic-description-lines, 3);
	overflow: hidden;
}

.fic-card__link:hover .fic-card__title,
.fic-card__link:focus-visible .fic-card__title,
.fic-card__cta-link:hover,
.fic-card__cta-link:focus-visible {
	color: var(--fic-title-hover-color, #ff7a00);
}

.fic-card__link:focus-visible {
	outline: 2px solid var(--fic-title-hover-color, #ff7a00);
	outline-offset: 4px;
	border-radius: var(--fic-card-radius, 4px);
}

.fic-card__cta-link {
	display: inline-block;
	margin-top: 8px;
	color: var(--fic-title-color, #222222);
}

/* -------------------------------------------------- */
/* Optional scroll progress indicator                  */
/* -------------------------------------------------- */

.fic-carousel__scrollbar {
	position: relative;
	height: 3px;
	margin-top: 20px;
	background: rgba(0, 0, 0, 0.08);
	border-radius: 2px;
	overflow: hidden;
}

.fic-carousel__scrollbar-thumb {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 25%;
	background: var(--fic-arrow-color, #ff7a00);
	border-radius: inherit;
	transition: transform 200ms ease, width 200ms ease;
	transform: translateX(0);
}

/* -------------------------------------------------- */
/* Empty state (logged-in editors only)                */
/* -------------------------------------------------- */

.fic-carousel__admin-notice {
	padding: 16px;
	border: 1px dashed #c3c4c7;
	border-radius: 4px;
	color: #50575e;
	font-size: 13px;
}

/* -------------------------------------------------- */
/* Reduced motion                                      */
/* -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.fic-carousel .splide__track,
	.fic-carousel .splide__list,
	.fic-carousel__arrow,
	.fic-card__title,
	.fic-carousel__scrollbar-thumb {
		transition-duration: 0ms !important;
		animation-duration: 0ms !important;
	}
}