/**
 * Storm Category Carousel
 *
 * Every selector below is namespaced under .scc (the module root). Nothing here
 * uses a global element selector, so the stylesheet cannot affect the rest of the
 * site or clash with Helix Ultimate / Bootstrap.
 *
 * Typography and colour are deliberately inherited from the template. The only
 * things this file owns are layout, the scroll mechanics and the controls.
 *
 * Customisable custom properties (override them in your child template or in
 * Helix Ultimate -> Custom CSS):
 *
 *   --scc-items         items visible at the current breakpoint (set per instance)
 *   --scc-gap           space between items                      (set per instance)
 *   --scc-ratio         image aspect ratio                       (set per instance)
 *   --scc-radius        corner radius of the image
 *   --scc-media-bg      placeholder colour behind an image while it loads
 *   --scc-dot-size      diameter of the visible navigation dot
 *   --scc-dot-gap       space between dots
 *   --scc-control-color colour of dots, arrows and the play/pause button
 *   --scc-arrow-size    diameter of the arrow buttons
 *   --scc-arrow-top     vertical position of the arrows within the viewport
 *
 * @copyright  (C) 2026 Storm Creative Design
 * @license    GNU General Public License version 2 or later; see LICENSE.txt
 */

.scc {
	--scc-items: 1;
	--scc-gap: 24px;
	--scc-ratio: 4 / 3;
	--scc-radius: 0.5rem;
	--scc-media-bg: rgba(0, 0, 0, 0.05);
	--scc-dot-size: 10px;
	--scc-dot-gap: 0.25rem;
	--scc-control-color: currentColor;
	--scc-arrow-size: 2.5rem;
	--scc-arrow-top: 40%;
	--scc-arrow-inset: 0.5rem;

	position: relative;
}

/* ---------------------------------------------------------------- Viewport */

.scc__viewport {
	position: relative;
}

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

.scc__track {
	display: flex;
	gap: var(--scc-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.scc__track::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

.scc__track:focus-visible {
	outline: 2px solid var(--scc-control-color);
	outline-offset: 4px;
}

/* Snapping is suspended while the script animates the scroll position, then
   restored, so the browser cannot fight the transition. */
.scc__track.is-animating {
	scroll-snap-type: none;
	scroll-behavior: auto;
}

/* -------------------------------------------------------------------- Item */

.scc__item {
	flex: 0 0 calc((100% - (var(--scc-items) - 1) * var(--scc-gap)) / var(--scc-items));
	max-width: calc((100% - (var(--scc-items) - 1) * var(--scc-gap)) / var(--scc-items));
	min-width: 0;
	scroll-snap-align: start;
}

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

.scc__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
}

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

.scc__link:hover,
.scc__link:focus {
	color: inherit;
	text-decoration: none;
}

.scc__link:focus-visible {
	outline: 2px solid var(--scc-control-color);
	outline-offset: 3px;
}

.scc__media {
	display: block;
	overflow: hidden;
	aspect-ratio: var(--scc-ratio);
	background-color: var(--scc-media-bg);
	border-radius: var(--scc-radius);
}

.scc__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.scc__link:hover .scc__image,
.scc__link:focus-visible .scc__image {
	transform: scale(1.04);
}

/* "Original" aspect ratio: let the image keep its own proportions. */
.scc--ratio-auto .scc__media {
	aspect-ratio: auto;
}

.scc--ratio-auto .scc__image {
	height: auto;
	object-fit: fill;
}

.scc__title {
	margin: 0.75rem 0 0;
	line-height: 1.3;
}

.scc__description {
	margin: 0.35rem 0 0;
	font-size: 0.9em;
	opacity: 0.85;
}

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

.scc__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1rem;
}

.scc__dots {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--scc-dot-gap);
}

/* The button is a 24px target (WCAG 2.5.8) with a smaller visible dot. */
.scc__dot {
	position: relative;
	width: 24px;
	height: 24px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.scc__dot::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--scc-dot-size);
	height: var(--scc-dot-size);
	background-color: var(--scc-control-color);
	border-radius: 50%;
	opacity: 0.3;
	transform: translate(-50%, -50%);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.scc__dot:hover::after {
	opacity: 0.6;
}

.scc__dot[aria-current="true"]::after {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1.2);
}

.scc__dot:focus-visible {
	outline: 2px solid var(--scc-control-color);
	outline-offset: 0;
}

.scc__playpause {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	opacity: 0.55;
}

.scc__playpause:hover {
	opacity: 1;
}

.scc__playpause:focus-visible {
	outline: 2px solid var(--scc-control-color);
	outline-offset: 0;
}

/* Pause glyph (two bars) drawn with borders so no icon font is needed. */
.scc__playpause-icon {
	display: block;
	width: 10px;
	height: 12px;
	border-left: 3px solid var(--scc-control-color);
	border-right: 3px solid var(--scc-control-color);
}

/* Play glyph (triangle) when the carousel is paused. */
.scc__playpause[data-scc-state="paused"] .scc__playpause-icon {
	width: 0;
	height: 0;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 10px solid var(--scc-control-color);
	border-right: 0;
	margin-left: 3px;
}

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

.scc__arrow {
	position: absolute;
	top: var(--scc-arrow-top);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--scc-arrow-size);
	height: var(--scc-arrow-size);
	padding: 0;
	background-color: rgba(255, 255, 255, 0.9);
	border: 0;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	transform: translateY(-50%);
	appearance: none;
	-webkit-appearance: none;
}

/* Arrows sit just inside the edges so they never overflow the module box. To hang
   them outside instead, set --scc-arrow-inset to a negative value, e.g. -1.25rem. */
.scc__arrow--prev {
	left: var(--scc-arrow-inset);
}

.scc__arrow--next {
	right: var(--scc-arrow-inset);
}

.scc__arrow[disabled] {
	opacity: 0.35;
	cursor: default;
}

.scc__arrow:focus-visible {
	outline: 2px solid var(--scc-control-color);
	outline-offset: 2px;
}

/* Chevron drawn from two borders. */
.scc__arrow-icon {
	display: block;
	width: 0.6em;
	height: 0.6em;
	border-top: 2px solid #222;
	border-right: 2px solid #222;
}

.scc__arrow--prev .scc__arrow-icon {
	transform: rotate(-135deg);
	margin-left: 0.2em;
}

.scc__arrow--next .scc__arrow-icon {
	transform: rotate(45deg);
	margin-right: 0.2em;
}

/* ---------------------------------------------------------------- Fallback */

/* Bootstrap 5 (and therefore Helix Ultimate) already provides .visually-hidden.
   This scoped copy only exists so the module degrades correctly if it is ever
   used on a template that does not load Bootstrap. */
.scc .visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

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

@media (prefers-reduced-motion: reduce) {
	.scc__image,
	.scc__dot::after {
		transition: none;
	}

	.scc__link:hover .scc__image,
	.scc__link:focus-visible .scc__image {
		transform: none;
	}
}

/* ------------------------------------------------------------------- Print */

@media print {
	.scc__track {
		display: block;
		overflow: visible;
	}

	.scc__item {
		max-width: 100%;
		page-break-inside: avoid;
	}

	.scc__controls,
	.scc__arrow {
		display: none;
	}
}