/* Scroll gallery (template-parts/home/scroll-gallery.php), converted from the guardrail
   sections/scroll-gallery.liquid stylesheet with the same geometry and the 990px breakpoint.
   Background and text default to the Hagoma dark band (--hg-footer-bg, --hg-nav-color); the
   accent text, focus rings and progress line default to --hg-accent.
   Without .is-pinned (no JavaScript, pinning off, reduced motion, lite devices) the rail is a
   swipeable, keyboard-scrollable scroll-snap row; assets/js/home-scroll-gallery.js adds .is-pinned,
   and .is-live while the pinned section is on screen, which is the only time the rail and the
   progress line are promoted for animation. */

.hg-sgallery {
	position: relative;
	background: var(--hg-sg-bg, var(--hg-footer-bg, #0b0b0b));
	color: var(--hg-sg-text, var(--hg-nav-color, #f2ede4));
}
.hg-sgallery__stage {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--hg-sg-gap-y, 24px);
	padding-block: var(--hg-sg-pad-m, 56px);
}
.hg-sgallery__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px 24px;
	padding-inline: var(--hg-sg-side-m, 20px);
}
.hg-sgallery .hg-sgallery__title {
	min-width: 0;
	margin: 0;
	color: var(--hg-sg-heading, var(--hg-sg-text, var(--hg-nav-color, #f2ede4)));
	font-size: clamp(var(--hg-sg-h-min, 36px), var(--hg-sg-h-fluid, 8vw), var(--hg-sg-h-max, 110px));
	line-height: var(--hg-sg-h-line, 0.95);
	overflow-wrap: anywhere;
}
/* On the default dark band the accent (#b42026) is 3:1, short of AA even for large type, so the
   accent words take the lighter red of the hero eyebrow (#e0474d, 4.9:1). A section with its own
   background keeps the accent unless it sets an accent colour. */
.hg-sgallery__title em {
	color: var(--hg-sg-accent, #e0474d);
	font-style: normal;
}
.hg-sgallery[style*="--hg-sg-bg:"] .hg-sgallery__title em { color: var(--hg-sg-accent, var(--hg-accent)); }
.hg-sgallery .hg-sgallery__sub {
	min-width: 0;
	margin: 0;
	color: inherit;
	font-size: var(--hg-sg-sub-size, 12px);
	font-weight: 700;
	letter-spacing: var(--hg-sg-sub-spacing, 0.22em);
	line-height: 1.6;
	text-transform: uppercase;
	opacity: var(--hg-sg-sub-opacity, 0.7);
	overflow-wrap: anywhere;
}
.hg-sgallery__rail {
	display: flex;
	gap: var(--hg-sg-card-gap, 14px);
	padding-inline: var(--hg-sg-side-m, 20px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.hg-sgallery__rail::-webkit-scrollbar { display: none; }
.hg-sgallery__rail:focus-visible {
	outline: 2px solid var(--hg-sg-accent, var(--hg-accent));
	outline-offset: 4px;
}
.hg-sgallery__card {
	position: relative;
	flex: 0 0 auto;
	width: var(--hg-sg-card-w-m, 72vw);
	aspect-ratio: var(--hg-sg-ratio, 4 / 5);
	overflow: hidden;
	border-radius: var(--hg-sg-radius, 18px);
	background: rgb(255 255 255 / 0.06);
	color: inherit;
	text-decoration: none;
	scroll-snap-align: start;
}
.hg-sgallery__card:hover,
.hg-sgallery__card:active {
	color: inherit;
	text-decoration: none;
}
.hg-sgallery__card:focus-visible {
	outline: 2px solid var(--hg-sg-accent, var(--hg-accent));
	outline-offset: 3px;
}
.hg-sgallery__card img,
.hg-sgallery__placeholder {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	border-radius: 0;
	object-fit: cover;
}
.hg-sgallery__placeholder { opacity: 0.35; }
.hg-sgallery__cap {
	position: absolute;
	inset-inline: 14px;
	inset-block-end: 12px;
	color: #fff;
	font-size: var(--hg-sg-cap-size, 12px);
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1.6;
	text-transform: uppercase;
	text-shadow: 0 1px 8px rgb(0 0 0 / 0.6);
	overflow-wrap: anywhere;
}
.hg-sgallery__bar { display: none; }

/* Pinned: the track is one screen plus the rail's overflow, the stage sticks for its length
   below the sticky header. */
.hg-sgallery.is-pinned .hg-sgallery__track { height: var(--hg-sg-track, 200vh); }
.hg-sgallery.is-pinned .hg-sgallery__stage {
	position: sticky;
	top: var(--hg-sticky-top, 0px);
	box-sizing: border-box;
	height: calc(100svh - var(--hg-sticky-top, 0px));
	overflow: hidden;
	/* clip is not a scroll container, so focusing a card cannot scroll the stage sideways. */
	overflow: clip;
}
.hg-sgallery.is-pinned .hg-sgallery__rail {
	width: max-content;
	overflow: visible;
	scroll-snap-type: none;
}
.hg-sgallery.is-pinned.is-live .hg-sgallery__rail,
.hg-sgallery.is-pinned.is-live .hg-sgallery__bar span { will-change: transform; }
.hg-sgallery.is-pinned .hg-sgallery__card {
	width: auto;
	height: min(var(--hg-sg-h-vh-m, 58svh), var(--hg-sg-h-vw-m, 90vw));
}
.hg-sgallery.is-pinned .hg-sgallery__bar {
	display: block;
	height: 2px;
	margin-inline: var(--hg-sg-side-m, 20px);
	overflow: hidden;
	border-radius: 2px;
	background: var(--hg-sg-bar-track, rgb(255 255 255 / 0.15));
}
.hg-sgallery__bar span {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--hg-sg-bar, var(--hg-accent));
	/* The script writes scaleX(progress) inline. */
	transform: scaleX(0);
	transform-origin: left center;
}
[dir="rtl"] .hg-sgallery__bar span { transform-origin: right center; }
.hg-sgallery__bar span:dir(rtl) { transform-origin: right center; }

@media (min-width: 990px) {
	.hg-sgallery__stage { padding-block: var(--hg-sg-pad, 56px); }
	.hg-sgallery__head,
	.hg-sgallery__rail { padding-inline: var(--hg-sg-side, 48px); }
	.hg-sgallery__card { width: var(--hg-sg-card-w, 26vw); }
	.hg-sgallery.is-pinned .hg-sgallery__card { height: min(var(--hg-sg-h-vh, 62svh), var(--hg-sg-h-vw, 32.5vw)); }
	.hg-sgallery.is-pinned .hg-sgallery__bar { margin-inline: var(--hg-sg-side, 48px); }
}

/* Reduced motion and lite devices (html.hg-lite): the script never pins (and unpins if the
   preference changes), so the swipeable row above is the layout and nothing is promoted. */