/*
 * happymonday/image-wall — full-width wall of vertically scrolling image
 * columns with a Text Intro–style head in a blurred, see-through box.
 * Tokens only, no hardcoded hex. render.php sets on the section:
 *   --hm-iw-h (vh), --hm-iw-ratio (tile aspect), --hm-iw-box (colour var),
 *   --hm-iw-box-op (box opacity %), --hm-iw-blur (backdrop blur px)
 * and per track: animation-duration / animation-delay.
 */

.hm-image-wall {
	--hm-iw-gap: clamp(0.5rem, 1vw, 1rem);
	position: relative;
	overflow: hidden;
	height: var(--hm-iw-h, 80vh);
	min-height: 28rem;
	display: grid;
	place-items: center;
	background: var(--hm-bg-1);
}

/* ---- the wall --------------------------------------------------------------- */
.hm-image-wall__cols {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--hm-iw-gap);
	padding-inline: var(--hm-iw-gap);
}
.hm-image-wall__col {
	position: relative;
	min-width: 0;
	overflow: hidden;
}
.hm-image-wall__track {
	display: flex;
	flex-direction: column;
	gap: var(--hm-iw-gap);
	will-change: transform;
	animation-name: hm-iw-up;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
/* Interleaved direction: 1st up, 2nd down, 3rd up … */
.hm-image-wall__col:nth-child(even) .hm-image-wall__track {
	animation-name: hm-iw-down;
}
/* The track holds its tiles twice; moving by one copy (half the track plus half
   a gap) lands exactly where it started, so the loop has no seam. */
@keyframes hm-iw-up {
	from { transform: translateY(0); }
	to { transform: translateY(calc(-50% - var(--hm-iw-gap) / 2)); }
}
@keyframes hm-iw-down {
	from { transform: translateY(calc(-50% - var(--hm-iw-gap) / 2)); }
	to { transform: translateY(0); }
}
.hm-image-wall.is-paused .hm-image-wall__track,
.hm-image-wall.is-offscreen .hm-image-wall__track {
	animation-play-state: paused;
}

.hm-image-wall__tile {
	flex: none;
	aspect-ratio: var(--hm-iw-ratio, 3 / 4);
	overflow: hidden;
	background: var(--hm-bg-1-deep);
}
.hm-image-wall--rounded .hm-image-wall__tile {
	border-radius: var(--hm-radius);
}
.hm-image-wall__tile img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Auto shape: each image at full column width, its own height, uncropped (the
   <img> width/height attributes reserve the space before it loads). */
.hm-image-wall--auto .hm-image-wall__tile {
	aspect-ratio: auto;
}
.hm-image-wall--auto .hm-image-wall__tile img {
	height: auto;
	object-fit: initial;
}

/* ---- the head box -------------------------------------------------------- */
.hm-image-wall__box {
	position: relative;
	z-index: 1;
	width: min(40rem, 100% - 2 * var(--hm-sp-2));
	padding: clamp(1.5rem, 4vw, 2.75rem);
	text-align: center;
	color: var(--hm-ink);
	background: color-mix(in srgb, var(--hm-iw-box, var(--hm-bg-1)) var(--hm-iw-box-op, 60%), transparent);
	-webkit-backdrop-filter: blur(var(--hm-iw-blur, 14px));
	backdrop-filter: blur(var(--hm-iw-blur, 14px));
	border-radius: var(--hm-radius-lg);
	box-shadow: 0 20px 50px -20px var(--hm-shadow);
}
.hm-image-wall__box > :first-child { margin-top: 0; }
.hm-image-wall__box > :last-child { margin-bottom: 0; }
.hm-image-wall__title {
	font-size: var(--hm-fs-2xl);
}
.hm-image-wall__sub {
	max-width: 46ch;
	margin-inline: auto;
}
/* Dark box colour → light copy. */
.hm-image-wall.is-dark .hm-image-wall__box,
.hm-image-wall.is-dark .hm-image-wall__box .hm-eyebrow,
.hm-image-wall.is-dark .hm-image-wall__title,
.hm-image-wall.is-dark .hm-image-wall__sub {
	color: var(--hm-bg-1);
}

/* ---- pause / play -------------------------------------------------------- */
.hm-image-wall__toggle {
	position: absolute;
	right: var(--hm-sp-2);
	bottom: var(--hm-sp-2);
	z-index: 2;
	display: inline-grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	color: var(--hm-ink);
	background: color-mix(in srgb, var(--hm-bg-1) 85%, transparent);
	border: 2px solid var(--hm-ink);
	border-radius: 50%;
	cursor: pointer;
}
.hm-image-wall__toggle svg { width: 1.1rem; height: 1.1rem; }
.hm-image-wall__toggle:focus-visible { outline: 3px solid var(--hm-ink); outline-offset: 2px; }
.hm-image-wall__icon-play { display: none; }
.hm-image-wall.is-paused .hm-image-wall__icon-play { display: block; }
.hm-image-wall.is-paused .hm-image-wall__icon-pause { display: none; }

/* ---- small screens: 3 columns ------------------------------------------- */
@media (max-width: 760px) {
	.hm-image-wall__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hm-image-wall__col:nth-child(n + 4) { display: none; }
	.hm-image-wall { height: max(28rem, calc(var(--hm-iw-h, 80vh) * 0.85)); }
}

/* ---- reduced motion: a still collage, no toggle needed ------------------ */
@media (prefers-reduced-motion: reduce) {
	.hm-image-wall__track { animation: none; }
	.hm-image-wall__col:nth-child(even) .hm-image-wall__track { transform: translateY(-25%); }
	.hm-image-wall__toggle { display: none; }
}