/* PhotoGalleryV11 — co-located module CSS.

   Holds the <ScrollNavProgress /> rail skin (Figma "Walk the Property" controls row,
   node 18637:20362). Scoped under .pht.v11 while the treatment settles; promote to a
   shared /assets/css/tools/scrolling-list-progress.css once a second variation wants it.
   Row show/hide, parked-arrow dimming and the pager count all come from the global
   scrolling-list.css — only the bordered square, the rail and the tag are new here. */

.pht.v11 {

	@media screen and (min-width:1280px) {
      ul {
         padding-right: calc(2.78rem + var(--grd-sp-dyn));
      }
   }

	/* Trailing slack that lets the LAST card reach the left edge (one stop per card).
	   .grd hands every child `flex: 1 0 var(--itm-w)`, so the basis must be overridden
	   outright. It carries no scroll-snap-align (that rule is scoped to
	   [data-role="item"]), so it is never itself a snap target. Width measured in init.js.
	   This is deliberately a flex child, NOT padding on the ul: padding would inflate the
	   list's offsetWidth, which feeds availSize in calculatePages() and skews visibleCount. */
	.stp-tail {
		flex: 0 0 var(--sl-tail, 0px);
	}

	.stp {
		gap: 0.875rem; /* Figma: card itemSpacing 14 */
	}

	.stp picture {
		position: relative;
	}

	/* One pseudo carries both photo treatments: the always-on vignette, plus the
	   70% dim that every card plays EXCEPT the one SnapList marks .s-active. */
	.stp picture::after {
		content: '';
		position: absolute;
		inset: 0;
		pointer-events: none;
		box-shadow: inset 0 0 5.625rem 0.75rem hsl(from var(--black) h s l / 0.75);
		background-color: transparent;
		transition: background-color var(--g-trn-sp) var(--g-trn-tf) 0s;
	}

	[data-role="item"]:not(.s-active) picture::after {
		background-color: hsl(from var(--black) h s l / 0.7);
	}

	/* Caption row: hairline accent rule, title left, stop count right, baselines shared. */
	.stp-cap {
		padding-block-start: 0.75rem; /* Figma: 12 */
		border-block-start: 1px solid hsl(from var(--accent) h s l / 0.3);
		font-size: var(--fnt-t-2-s); /* 1.5rem — Figma caption title */
	}

	.stp-tag {
		margin-inline-start: auto; /* holds the count right even when a row has no title */
		color: var(--accent);
		white-space: nowrap;
	}

	/* The section is shf-r, so .mn_wd runs off the right edge — the cards are meant to
	   bleed but the rail is not. Figma pins the controls row at 1216 of a 1600 container. */
	.scrl-nav-prg {
		gap: 1.5rem; /* Figma: itemSpacing 24 */
		max-width: min(100%, 76rem);
	}

	/* Figma "Nav Button" 18566:6883 — 44x44, 3px accent rule, 3px radius. */
	.scrl-nav-prg button:is([data-action="Prev"], [data-action="Next"]) {
		flex: 0 0 auto;
		width: 2.75rem;
		height: 2.75rem;
		border: 3px solid hsl(from var(--accent) h s l / 0.3);
		border-radius: 0.1875rem;
		color: var(--accent);
		transition: opacity var(--g-trn-sp) var(--g-trn-tf) 0s,
		            border-color var(--g-trn-sp) var(--g-trn-tf) 0s;
	}

	.scrl-nav-prg button:is([data-action="Prev"], [data-action="Next"]):is(:hover, :focus-visible) {
		border-color: var(--accent);
	}

	.scrl-nav-prg button svg.icn {
		font-size: 1.5rem; /* 24px glyph in the 44px square */
	}

	/* The rail takes the slack between the buttons and the count. */
	.prg-trk {
		flex: 1 1 auto;
		height: 3px;
		border-radius: 1.5px;
		background-color: hsl(from var(--text-color) h s l / 0.2);
		overflow: hidden;
	}

	/* --sl-prg is the 1-based page fraction, published by this module's init.js.
	   Absent (JS blocked/failed), the rail renders as an empty track rather than breaking. */
	.prg-fll {
		display: block;
		height: 100%;
		border-radius: inherit;
		background-color: var(--accent);
		inline-size: calc(var(--sl-prg, 0) * 100%);
		transition: inline-size var(--g-trn-sp) var(--g-trn-tf) 0s;
	}

	/* Design reads "1 OF 5" in the tag face, not scrolling-list.css's "1 / N" body copy. */
	.scrl-nav-prg [data-role="paging"] {
		flex: 0 0 auto;
		gap: 0.25rem;
		font-family: var(--tag-ff);
		font-size: var(--tag-s);
		font-weight: var(--tag-w);
		letter-spacing: var(--tag-ls);
		text-transform: uppercase;
		color: hsl(from var(--text-color) h s l / 0.8);
	}


	@media screen and (max-width:1279px) {
		& {
			.asp_3-4  :where(img, video, .imap, iframe) { aspect-ratio: 5 / 4; }
		}
	}
}