/* Slider family — slider-1up / slider-3up / slider-fade
 *
 * Layout goals (mirroring aaronhinaus.fi / Trustindex):
 *   - Arrows are dark circular buttons OVERLAPPING the slider edges
 *   - 4-up on desktop, 2-up on tablet, 1-up on mobile (for slider-3up)
 *   - Cards have uniform height regardless of text length
 *   - Track scrolls with snap; no JS transforms — pure CSS overflow
 *
 * Customisation tokens (override on the widget root, or via builder UI):
 *   --kgr-arrow-bg        arrow button background        (default #1f2328)
 *   --kgr-arrow-color     arrow icon colour              (default #fff)
 *   --kgr-arrow-size      arrow button width/height (px) (default 38)
 *   --kgr-dot-bg          inactive dot background        (default #d4d7dc)
 *   --kgr-dot-active      active dot background          (default #1f2328)
 *
 * Categorical chrome variants (data attributes on the widget root):
 *   data-arrow-shape="circle|square|pill"
 *   data-dot-shape="pill|dot"
 */

/* Token defaults — defined on the widget so that custom-property overrides
   via inline `style="--kgr-arrow-bg:#..."` from PHP take precedence. */
.kgr-widget.kgr-cat-slider {
	--kgr-arrow-bg:    #1f2328;
	--kgr-arrow-color: #ffffff;
	--kgr-arrow-size:  38px;
	--kgr-dot-bg:      #d4d7dc;
	--kgr-dot-active:  #1f2328;
}

.kgr-widget.kgr-cat-slider .kgr-slider {
	position: relative;
	margin: 0 8px;   /* leave room for arrows to extend past viewport edge */
	max-width: calc(100% - 16px);
}
.kgr-widget.kgr-cat-slider .kgr-slider-viewport {
	overflow: hidden;
	border-radius: var(--kgr-radius);
	padding: 2px 0 4px;      /* room for shadow */
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}
.kgr-widget.kgr-cat-slider .kgr-slider-track {
	display: flex;
	gap: var(--kgr-sp-4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-ms-overflow-style: none; scrollbar-width: none;
	padding: 4px 4px;        /* keep the focus ring visible */
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}
.kgr-widget.kgr-cat-slider .kgr-slider-track::-webkit-scrollbar { display: none; }

.kgr-widget.kgr-cat-slider .kgr-card {
	scroll-snap-align: start;
	display: flex; flex-direction: column;
}

/* Per-style: how many cards visible at a time -------------------------- */
.kgr-widget.kgr-style-slider-1up .kgr-card { flex: 0 0 calc(100% - 8px); }

.kgr-widget.kgr-style-slider-3up .kgr-card {
	flex: 0 0 calc((100% - (3 * var(--kgr-sp-4))) / 4);
	min-width: 240px;
}
@media (max-width: 1024px) {
	.kgr-widget.kgr-style-slider-3up .kgr-card {
		flex: 0 0 calc((100% - var(--kgr-sp-4)) / 2);
		min-width: 0;
	}
}
@media (max-width: 640px) {
	/* Each card fills the entire viewport width but the track keeps a gap
	   between cards. The gap is invisible at-rest (because only one card is
	   shown), but becomes visible during the slide transition — cards
	   separate cleanly instead of touching edge-to-edge. */
	.kgr-widget.kgr-cat-slider .kgr-slider {
		margin: 0;
		max-width: 100%;
	}
	.kgr-widget.kgr-cat-slider .kgr-slider-track {
		gap: 16px;                /* visible during slide transitions */
		padding: 4px 0;
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}
	.kgr-widget.kgr-style-slider-3up .kgr-card,
	.kgr-widget.kgr-style-slider-1up .kgr-card {
		flex: 0 0 100%;
		max-width: 100%;
		width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}
}

/* Fade variant: stack absolutely + crossfade ------------------------------ */
.kgr-widget.kgr-variant-fade .kgr-slider-viewport {
	position: relative; min-height: 200px;
}
.kgr-widget.kgr-variant-fade .kgr-slider-track {
	display: block; overflow: hidden; padding: 0;
	position: relative;
}
.kgr-widget.kgr-variant-fade .kgr-card {
	position: absolute; inset: 0;
	opacity: 0; visibility: hidden;
	transition: opacity .5s ease;
	flex: 1; max-width: 100%;
}
.kgr-widget.kgr-variant-fade .kgr-card.kgr-active {
	opacity: 1; visibility: visible;
}

/* Arrows ----------------------------------------------------------------- */
.kgr-widget.kgr-cat-slider .kgr-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;

	background: var(--kgr-arrow-bg);
	color:      var(--kgr-arrow-color);
	border: 0;
	border-radius: 50%;
	width:  var(--kgr-arrow-size);
	height: var(--kgr-arrow-size);
	line-height: 0;          /* prevent text baseline shift on icon-only buttons */
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(15,20,30,.18);
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0;
	transition: transform .15s ease, background-color .15s ease, color .15s ease, filter .15s ease;
}
.kgr-widget.kgr-cat-slider .kgr-arrow svg {
	display: block;          /* removes baseline gap that would push the icon down a pixel */
}
.kgr-widget.kgr-cat-slider .kgr-arrow:hover {
	transform: translateY(-50%) scale(1.06);
	filter: brightness(.92);
}
.kgr-widget.kgr-cat-slider .kgr-arrow:active {
	transform: translateY(-50%) scale(.95);
}
.kgr-widget.kgr-cat-slider .kgr-arrow-prev { left: -14px; }
.kgr-widget.kgr-cat-slider .kgr-arrow-next { right: -14px; }

/* Arrow shapes ----------------------------------------------------------- */
.kgr-widget[data-arrow-shape="square"].kgr-cat-slider .kgr-arrow {
	border-radius: 6px;
}
.kgr-widget[data-arrow-shape="pill"].kgr-cat-slider .kgr-arrow {
	border-radius: 999px;
	width: calc(var(--kgr-arrow-size) * 1.4);
}

@media (max-width: 640px) {
	/* Hide arrows on mobile — let users swipe */
	.kgr-widget.kgr-cat-slider .kgr-arrow { display: none; }
}

/* Dots ------------------------------------------------------------------- */
.kgr-widget.kgr-cat-slider .kgr-dots {
	display: flex; justify-content: center;
	gap: 8px;
	margin-top: var(--kgr-sp-4);
}
.kgr-widget.kgr-cat-slider .kgr-dot {
	width: 28px; height: 4px;
	border-radius: 999px;
	background: var(--kgr-dot-bg);
	border: 0; padding: 0; cursor: pointer;
	transition: background-color .15s ease, width .15s ease, transform .15s ease;
}
.kgr-widget.kgr-cat-slider .kgr-dot.kgr-active {
	background: var(--kgr-dot-active);
	width: 36px;
}

/* Round-dot variant */
.kgr-widget[data-dot-shape="dot"].kgr-cat-slider .kgr-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
}
.kgr-widget[data-dot-shape="dot"].kgr-cat-slider .kgr-dot.kgr-active {
	width: 10px; height: 10px;
	transform: scale(1.15);
}