/**
 * Layout: 3 Boxes Slide.
 *
 * Section header: assets/css/layout.css (.gm-section-header).
 * Arrows / dots: assets/css/components.css (.gm-carousel-*).
 *
 * Carousel of image boxes: three visible from 1024px, two from 640px, one
 * (with the next one peeking) on phones. Native scroll-snap, so it works
 * with touch, trackpad and keyboard without JS; view.js adds the arrows and
 * dots. Box layers follow 4 Boxes: tone colour · photo · gradient · text.
 *
 * @package GagaMuller
 */

.gm-three-boxes-slide {
	--gm-slide-gap: clamp(1rem, 0.6rem + 1.6vw, 2rem); /* 16 → 32 */
	--gm-slide-h: clamp(24rem, 20.5rem + 12vw, 30rem); /* 384 → 480 */
	--gm-slide-gradient: linear-gradient(180deg, rgb(16 16 16 / 0) 0%, rgb(16 16 16 / 0.35) 45%, var(--gm-color-black) 100%);
	--gm-slide-hover-gradient: linear-gradient(180deg, rgb(114 21 244 / 0.18) 0%, rgb(114 21 244 / 0.55) 55%, rgb(80 15 171 / 0.9) 100%);
	--gm-slide-photo-opacity: 0.7;

	padding-bottom: clamp(var(--gm-space-section), 0.6rem + 8.6vw, 8.375rem);
}

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

.gm-three-boxes-slide__viewport {
	container-type: inline-size;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
	border-radius: var(--gm-radius-card);
}

.gm-three-boxes-slide__viewport::-webkit-scrollbar {
	display: none;
}

.gm-three-boxes-slide__viewport:focus-visible {
	outline: var(--gm-focus-width) solid var(--gm-focus-color);
	outline-offset: var(--gm-focus-offset);
}

.gm-three-boxes-slide__track {
	display: flex;
	gap: var(--gm-slide-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---- Box ------------------------------------------------------------ */

.gm-slide-box {
	position: relative;
	display: flex;
	flex: 0 0 85cqw; /* one + a peek of the next */
	flex-direction: column;
	justify-content: flex-end;
	box-sizing: border-box;
	min-height: var(--gm-slide-h);
	overflow: hidden;
	isolation: isolate;
	border-radius: var(--gm-radius-card);
	background: var(--gm-color-black);
	color: var(--gm-color-white);
	scroll-snap-align: start;
}

@media (min-width: 640px) {
	.gm-slide-box {
		flex-basis: calc((100cqw - var(--gm-slide-gap)) / 2);
	}
}

@media (min-width: 1024px) {
	.gm-slide-box {
		flex-basis: calc((100cqw - 2 * var(--gm-slide-gap)) / 3);
	}
}

.gm-slide-box--purple {
	--gm-slide-photo-opacity: 0.55;

	background: var(--gm-color-purple);
}

.gm-slide-box__media {
	position: absolute;
	z-index: -2;
	inset: 0;
}

.gm-slide-box__media::after {
	position: absolute;
	inset: 0;
	background: var(--gm-slide-gradient);
	content: "";
}

.gm-slide-box__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: var(--gm-slide-photo-opacity);
	transition: transform 900ms var(--gm-ease);
}

.gm-slide-box__body {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--gm-space-14);
	padding: var(--gm-space-28) var(--gm-space-28) var(--gm-space-32);
}

.gm-slide-box__title {
	margin: 0;
	padding-right: 3rem; /* room for the arrow */
	color: var(--gm-color-white);
	font-family: var(--gm-font-heading);
	font-size: clamp(1.25rem, 1.15rem + 0.45vw, 1.6875rem); /* 20 → 27 */
	font-weight: var(--gm-weight-bold);
	line-height: 1.12;
}

.gm-slide-box__text {
	margin: 0;
	color: var(--gm-color-on-dark-strong);
	font-size: var(--gm-text-body-lg);
	line-height: 1.42;
}

/* Small round arrow, top right of the text block (linked boxes only). */
.gm-slide-box__arrow {
	position: absolute;
	top: var(--gm-space-24);
	right: var(--gm-space-24);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 1.5px solid rgb(255 255 255 / 0.6);
	border-radius: var(--gm-radius-round);
	color: var(--gm-color-white);
	transition: background-color 350ms var(--gm-ease), border-color 350ms var(--gm-ease), transform 350ms var(--gm-ease);
}

.gm-slide-box__arrow .gm-icon {
	width: 18px;
	height: 18px;
}

/* ---- Linked box: the title link covers the whole box ---------------- */

.gm-slide-box .gm-slide-box__link,
.gm-slide-box .gm-slide-box__link:visited,
.gm-slide-box .gm-slide-box__link:hover,
.gm-slide-box .gm-slide-box__link:focus {
	color: inherit;
	text-decoration: none;
}

.gm-slide-box__link::after {
	position: absolute;
	z-index: 1;
	inset: 0;
	border-radius: inherit;
	content: "";
}

/* The link sits inside .gm-slide-box__body (position: relative); stretch
 * its overlay to the whole box instead. */
.gm-slide-box--linked .gm-slide-box__body {
	position: static;
}

.gm-slide-box--linked .gm-slide-box__arrow {
	top: auto;
	bottom: calc(100% - var(--gm-space-24) - 2.5rem);
}

.gm-slide-box::before {
	position: absolute;
	z-index: -1;
	inset: 0;
	background: var(--gm-slide-hover-gradient);
	content: "";
	opacity: 0;
	pointer-events: none;
	transition: opacity 350ms var(--gm-ease);
}

.gm-slide-box--linked:hover::before,
.gm-slide-box--linked:focus-within::before {
	opacity: 1;
}

.gm-slide-box--linked:hover .gm-slide-box__image,
.gm-slide-box--linked:focus-within .gm-slide-box__image {
	transform: scale(1.04);
}

.gm-slide-box--linked:hover .gm-slide-box__arrow,
.gm-slide-box--linked:focus-within .gm-slide-box__arrow {
	border-color: var(--gm-color-white);
	background: var(--gm-color-white);
	color: var(--gm-color-purple);
	transform: rotate(45deg);
}

.gm-slide-box--linked:hover .gm-slide-box__title {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.gm-slide-box__link:focus {
	outline: none;
}

.gm-slide-box__link:focus-visible::after {
	outline: var(--gm-focus-width) solid var(--gm-focus-color-on-dark);
	outline-offset: calc(var(--gm-focus-width) * -1);
}

/* ---- Controls: dots left, arrows right (on the white section) ------- */

.gm-three-boxes-slide__controls {
	margin-top: var(--gm-space-32);
	color: var(--gm-color-black);
}

.gm-three-boxes-slide__controls[hidden] {
	display: none;
}

.gm-three-boxes-slide__dots {
	margin-right: auto;
}

/* Shared dots are styled for dark sections; darken them for white. */
.gm-three-boxes-slide .gm-carousel-dot {
	background: rgb(16 16 16 / 0.2);
}

.gm-three-boxes-slide .gm-carousel-dot[aria-current="true"] {
	background: var(--gm-color-purple);
}

.gm-three-boxes-slide .gm-carousel-dot:focus-visible {
	outline-color: var(--gm-focus-color);
}

/* Black background: light arrows and dots. */
.gm-three-boxes-slide.gm-surface--inverse .gm-three-boxes-slide__controls {
	color: var(--gm-color-white);
}

.gm-three-boxes-slide.gm-surface--inverse .gm-carousel-dot {
	background: rgb(255 255 255 / 0.3);
}

.gm-three-boxes-slide.gm-surface--inverse .gm-carousel-dot[aria-current="true"] {
	background: var(--gm-color-light-purple);
}

/* ---- Entrance: the visible boxes rise in, one after another --------- */

@media (prefers-reduced-motion: no-preference) {
	.gm-three-boxes-slide.is-animated .gm-slide-box {
		opacity: 0;
		transform: translateY(24px);
		transition:
			opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
			transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
		transition-delay: calc(var(--gm-box, 0) * 120ms);
	}

	.gm-three-boxes-slide.is-animated.is-visible .gm-slide-box {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gm-three-boxes-slide__viewport {
		scroll-behavior: auto;
	}

	.gm-slide-box::before,
	.gm-slide-box__image,
	.gm-slide-box__arrow {
		transition: none;
	}
}