/**
 * KISS CoverFlow Slider — THEME layer (cosmetics only).
 *
 * Color, shadow, type treatment and motion. Nothing here is load-bearing: switch it off
 * under Coverflow → Help & Settings and the slider still lays out correctly, just unstyled.
 * That is the intended starting point for a project that wants to write all of its own CSS.
 *
 * Colors default to the site's Elementor globals so the slider inherits the brand with
 * zero configuration, and fall back to neutrals when Elementor globals aren't defined.
 * Typography inherits from the theme — no font families are hard-coded anywhere.
 *
 * To override from your own stylesheet, use the two-class selector so you beat this file:
 *
 *   .elementor-widget-kiss_coverflow .kiss-coverflow {
 *       --kiss-accent: #f5a623;
 *   }
 */

.kiss-coverflow {
	--kiss-accent:     var(--e-global-color-accent, #f5a623);
	--kiss-fg:         var(--e-global-color-text, #1b1b1b);
	--kiss-surface:    var(--e-global-color-primary, #14202b);
	--kiss-tab-idle:   currentColor;
	--kiss-tab-active: var(--kiss-accent);
	--kiss-tab-idle-opacity: 0.55;
	--kiss-tab-rule-color: var(--kiss-accent);
	--kiss-arrow-bg:   #ffffff;
	--kiss-arrow-fg:   var(--kiss-fg);
	--kiss-cap-color:  #ffffff;

	/* The two cosmetics that get switched off most often, each held twice: the live token
	   and an untouched copy of its default. The Style tab's Drop shadow / Caption scrim
	   controls set the live one to `none` to switch it off, or back to the -default token
	   to switch it on somewhere the layout had opted out — a grid, say. Without the copy
	   there would be nothing for "On" to name. */
	--kiss-shadow-default: 0 24px 60px rgba(0, 0, 0, 0.28);
	--kiss-shadow:     var(--kiss-shadow-default);
	--kiss-cap-scrim-default: linear-gradient(to top, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0));
	--kiss-cap-scrim:  var(--kiss-cap-scrim-default);
	--kiss-dot-color:  currentColor;
	--kiss-dot-active: var(--kiss-accent);
	--kiss-focus:      var(--kiss-accent);

	color: var(--kiss-fg);
}

/* ---- Filter tabs ---- */

/* Scoped to match the scaffold's (0,2,1); a bare `.kiss-filter` would lose to a kit's
   `.elementor-kit-N button` exactly as the unscoped reset did. */
.kiss-coverflow button.kiss-filter {
	color: var(--kiss-tab-idle);
	opacity: var(--kiss-tab-idle-opacity);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: opacity 0.2s ease, color 0.2s ease;
}

.kiss-coverflow button.kiss-filter:hover {
	opacity: 0.9;
}

.kiss-coverflow button.kiss-filter[aria-pressed="true"] {
	color: var(--kiss-tab-active);
	opacity: 1;
}

.kiss-coverflow button.kiss-filter::after {
	transition: transform 0.25s ease;
}

/* ---- Slide ---- */

.kiss-coverflow .kiss-swiper .swiper-slide {
	transition: opacity 0.4s ease;
}

/* The scaffold blanks background and shadow on a button frame to fend off global button
   styling, so the button variant has to be named here too — same weight, but this file
   loads second, so the intended cosmetics win. */
.kiss-frame,
.kiss-coverflow button.kiss-frame {
	background: var(--kiss-surface);
	box-shadow: var(--kiss-shadow);
}

/* The default shadow is a 60px blur sized for a slider, where a slide has a whole stage
   around it. In a grid the tiles sit a few pixels apart, so that blur lands in the gaps
   instead of under the tile and the gallery reads as dimmed. The grid therefore opts out.

   This has to redefine the TOKEN, not set `box-shadow: none` on the frame. Setting the
   property would be (0,2,0) and would beat the Style tab's own `--kiss-shadow` at
   (0,2,0)-but-on-the-root, leaving Drop shadow → On with no effect in a grid. Redefining
   the token at (0,1,0) keeps it a default that any control can outrank. */
.kiss-coverflow--grid {
	--kiss-shadow: none;
}

/* ---- Caption ---- */

/* Color is named on the spans as well as the figcaption, and scoped past (0,1,0), for the
   same reason the viewer's text is: a color that is merely inherited loses to any rule
   matching the element directly, so a kit's `figcaption` or `span` rule would repaint the
   caption regardless of what this file says. `.kiss-coverflow .kiss-cap` is (0,2,0). */
.kiss-coverflow .kiss-cap,
.kiss-coverflow .kiss-cap .kiss-cap-title,
.kiss-coverflow .kiss-cap .kiss-cap-sub {
	color: var(--kiss-cap-color);
}

.kiss-cap {
	background: var(--kiss-cap-scrim);
	font-size: 15px;
	line-height: 1.35;
	transition: opacity 0.35s ease;
}

.kiss-cap-title {
	font-weight: 700;
}

.kiss-cap-sub {
	opacity: 0.85;
	font-size: 0.9em;
}

.kiss-cap-title + .kiss-cap-sub {
	margin-top: 4px;
}

/* ---- Arrows ---- */

.kiss-stage .kiss-nav {
	background: var(--kiss-arrow-bg);
	color: var(--kiss-arrow-fg);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
	transition: background 0.2s ease, color 0.2s ease;
}

.kiss-stage .kiss-nav:hover {
	background: var(--kiss-accent);
	color: var(--kiss-arrow-bg);
}

.kiss-stage .kiss-nav::after {
	font-weight: 800;
}

/* ---- Dots ---- */

.kiss-coverflow .kiss-dots .swiper-pagination-bullet {
	background: var(--kiss-dot-color);
	opacity: 0.3;
	transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.kiss-coverflow .kiss-dots .swiper-pagination-bullet-active {
	background: var(--kiss-dot-active);
	opacity: 1;
	transform: scale(1.25);
}

/* ---- Load more ---- */

/* Scoped to match the scaffold's (0,2,1): the reset there names the element and the class
   together to clear a kit's `.elementor-kit-N button`, and a bare `.kiss-more-btn` here at
   (0,1,0) would lose to that kit rule exactly as the unscoped reset did. */
.kiss-coverflow button.kiss-more-btn {
	background: var(--kiss-more-bg, var(--kiss-accent));
	color: var(--kiss-more-fg, #ffffff);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: opacity 0.2s ease, color 0.2s ease;
}

.kiss-coverflow button.kiss-more-btn:hover {
	opacity: 0.85;
}

/* The link variant inherits the tab treatment rather than the button one — on a light
   page it is usually the same accent as the active filter tab. Equal weight to the rule
   above, so it must stay after it. */
.kiss-coverflow button.kiss-more-btn--link {
	background: none;
	color: var(--kiss-more-link-color, var(--kiss-accent));
	text-decoration: none;
}

/* ---- No results ---- */

.kiss-noresults {
	opacity: 0.7;
}

/* ---- Lightbox ----
   Scoped to .kiss-lightbox, not .kiss-coverflow: the overlay is appended to <body>,
   so widget-scoped properties never reach it. */

.kiss-lightbox {
	--kiss-lb-bg:       rgba(8, 14, 20, 0.94);
	--kiss-lb-fg:       #ffffff;
	--kiss-lb-close-bg: rgba(255, 255, 255, 0.12);
	--kiss-lb-focus:    #ffffff;

	/* Swiper reads this for its own arrow glyphs, across 5 → 11. */
	--swiper-navigation-color: var(--kiss-lb-fg);

	color: var(--kiss-lb-fg);
}

.kiss-lightbox button.kiss-lb-close {
	background: var(--kiss-lb-close-bg);
	color: var(--kiss-lb-fg);
	transition: background 0.2s ease;
}

.kiss-lightbox button.kiss-lb-close:hover {
	background: rgba(255, 255, 255, 0.24);
}

.kiss-lb-cap {
	font-size: 15px;
	line-height: 1.4;
}

.kiss-lb-cap .kiss-cap-sub {
	opacity: 0.8;
}

.kiss-lb-counter {
	font-size: 13px;
	letter-spacing: 0.06em;
	opacity: 0.75;
}

.kiss-lb-hint {
	font-size: 12px;
	letter-spacing: 0.04em;
	opacity: 0.55;
	transition: opacity 0.3s ease;
}

.kiss-lightbox .kiss-lb-nav {
	color: var(--kiss-lb-fg);
}

/* ---- Motion preferences ----
   Honor the OS setting: kill our decorative transitions and stop Swiper from
   auto-advancing (the JS reads the same query and disables autoplay). */
@media (prefers-reduced-motion: reduce) {
	.kiss-coverflow .kiss-swiper .swiper-slide,
	.kiss-cap,
	.kiss-coverflow button.kiss-filter,
	.kiss-coverflow button.kiss-filter::after,
	.kiss-stage .kiss-nav,
	.kiss-coverflow .kiss-dots .swiper-pagination-bullet,
	.kiss-lightbox button.kiss-lb-close,
	.kiss-lb-hint,
	.kiss-more,
	.kiss-coverflow button.kiss-more-btn {
		transition: none;
	}
}