/*
	Gallery strip — compact horizontal row of featured projects, in the
	spirit of HTML5UP's Parallelism template: fixed-size tiles with
	gutters between them, scrolling sideways, rather than a full-height
	filmstrip (which crops tall portrait renders into unreadable slivers).
	Palette/type ported from the REDI1995.github.io design tokens.
*/

.gallery-strip {
	position: relative;
	width: 100%;
	padding: 3em 0;
	background: #f5f4f0;
}

.gallery-strip-track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 0 3.5em;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

	.gallery-strip-track::-webkit-scrollbar {
		display: none;
	}

.strip-item {
	position: relative;
	flex: 0 0 auto;
	width: 17em;
	height: 21em;
	margin: 0 0.35em;
	display: block;
	overflow: hidden;
	scroll-snap-align: start;
	background-color: #ecEAe4;
	background-size: cover;
	background-position: center;
	box-shadow: 0 1px 3px rgba(26,26,26,0.12);
}

	.strip-item::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 45%;
		background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0));
		opacity: 0;
		transition: opacity 0.35s ease;
		pointer-events: none;
	}

	.strip-item:hover::after,
	.strip-item:focus::after {
		opacity: 1;
	}

.strip-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1.5em 1.25em;
	color: #f5f4f0;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.35s ease, transform 0.35s ease;
	font-family: 'DM Sans', system-ui, sans-serif;
}

	.strip-item:hover .strip-caption,
	.strip-item:focus .strip-caption {
		opacity: 1;
		transform: translateY(0);
	}

	.strip-caption h3 {
		margin: 0 0 0.35em 0;
		font-size: 1.05em;
		font-weight: 500;
		letter-spacing: -0.01em;
		color: #ffffff;
	}

	.strip-caption p {
		margin: 0;
		font-size: 0.8em;
		color: rgba(245,244,240,0.8);
	}

/* Arrows — the template's own line-drawn "scroll" arrow icon
   (assets/css/images/dark-arrow.svg), inverted for a light button and
   rotated to point sideways, instead of a generic glyph. */
.strip-arrow {
	position: absolute;
	top: 50%;
	z-index: 10;
	width: 2.75em;
	height: 2.75em;
	margin-top: -1.375em;
	border-radius: 100%;
	border: solid 1px #d8d5ce;
	background-color: #f5f4f0;
	box-shadow: 0 1px 4px rgba(26,26,26,0.15);
	cursor: pointer;
	padding: 0;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

	.strip-arrow::before {
		content: '';
		position: absolute;
		inset: 0;
		background-image: url('images/dark-arrow.svg');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 32% 32%;
		filter: invert(1);
	}

	.strip-arrow-prev::before {
		transform: rotate(90deg);
	}

	.strip-arrow-next::before {
		transform: rotate(-90deg);
	}

	.strip-arrow:hover {
		background-color: #ffffff;
		border-color: #c8001e;
	}

	.strip-arrow-prev {
		left: 1em;
	}

	.strip-arrow-next {
		right: 1em;
	}

@media screen and (max-width: 980px) {
	.strip-item {
		width: 14em;
		height: 17.5em;
	}
}

@media screen and (max-width: 736px) {
	.gallery-strip {
		padding: 2em 0;
	}

	.gallery-strip-track {
		padding: 0 1.5em;
	}

	.strip-item {
		width: 10em;
		height: 12.5em;
		margin: 0 0.25em;
	}

	.strip-caption {
		opacity: 1;
		transform: none;
		padding: 0.85em 0.7em;
	}

	.strip-caption h3 {
		font-size: 0.95em;
	}

	.strip-caption p {
		font-size: 0.75em;
	}

	.strip-item::after {
		opacity: 1;
	}

	.strip-arrow {
		width: 2.25em;
		height: 2.25em;
		margin-top: -1.125em;
	}
}