/* ==========================================================================
   SK Gallery — component styles (for use WITH developer-global-css)
   ==========================================================================
   The global stylesheet already provides the ac-sasskit paddlenav + dotnav
   modules, the base button reset, and the dark theme. This file adds ONLY the
   pieces the global does not ship:
     - the carousel layout
     - the paddle chevron SVG sizing (ac-sasskit does not size the <svg>)
     - dot-nav centering
   Load this AFTER the global stylesheet. Pair with the Mixin Gallery JS bundle.
   ========================================================================== */

/* ========== Layout ========== */
.sk-gallery {
	--item-width: 100%;
	position: relative;
	width: 100%;
	/* Render slides on whole pixels. The gallery engine scrolls to integer
	   offsets, so a fractional gallery width (e.g. inside a desktop grid
	   column) rests a sub-pixel short and reveals a hairline of the next slide
	   at the rounded right edge. round() forces an integer width; the plain
	   `width: 100%` above is the fallback for browsers without round(). */
	width: round(down, 100%, 1px);
	max-width: 980px;
	margin: 0 auto;
}

.sk-gallery .scroll-container {
	overflow-x: scroll;
	scrollbar-width: none;
	scroll-snap-type: x mandatory;
	border-radius: 18px;
}

.sk-gallery ::-webkit-scrollbar {
	width: 0;
	height: 0;
	background: transparent;
}

.sk-gallery .item-container {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
}

.sk-gallery .gallery-item {
	position: relative;
	flex: 0 0 var(--item-width);
	width: var(--item-width);
	aspect-ratio: 16 / 9;
	scroll-snap-align: center;
}

/* Taken out of flow so a slide's height comes only from the aspect-ratio above,
   never from the image. In flow, `height: 100%` resolves against an auto-height
   flex item and is therefore indefinite, so an image can fall back to its own
   intrinsic height and make its slide a few pixels taller than the others. The
   container then sizes to that tallest slide, and the shorter ones leave a strip
   of background above them that reads as a hard seam against the scroll
   container's rounded corners. Out of flow, every slide is exactly width x 9/16. */
.sk-gallery .gallery-item img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ========== Paddle Chevron Sizing ========== */
/* Required: the ac-sasskit paddlenav module styles only `svg path`; it never
   sizes the <svg>. The button reset is intentionally omitted here because the
   global stylesheet's base reset already zeroes button padding/border. */
.sk-gallery .paddlenav-arrow svg {
	display: block;
	width: var(--sk-paddlenav-diameter);
	height: var(--sk-paddlenav-diameter);
}

/* ========== Dot Nav Centering ========== */
/* The dotnav module sets `width: fit-content`, so center the box itself.
   Overlaid dots are light with a soft per-dot shadow, so they stay legible on
   any artwork (light or dark) without a scrim box behind them. */
.sk-gallery .dotnav {
	position: absolute;
	bottom: 18px;
	left: 50%;
	transform: translateX(-50%);
	--sk-dotnav-background: rgba(255, 255, 255, 0.5);
	--sk-dotnav-background-hover: rgba(255, 255, 255, 0.7);
	--sk-dotnav-background-current: rgba(255, 255, 255, 0.95);
}

.sk-gallery .dotnav .dotnav-link {
	box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.35);
}

/* "Below" variant (data-dots="below"): the dots flow beneath the image on the
   page background, so no shadow is needed and the dots take a solid color —
   dark for light backgrounds, light for dark mode (all dark-mode signals). */
.sk-gallery .dotnav.dotnav-below {
	position: static;
	transform: none;
	margin: 16px auto 0;
	--sk-dotnav-background: rgba(0, 0, 0, 0.42);
	--sk-dotnav-background-hover: rgba(0, 0, 0, 0.54);
	--sk-dotnav-background-current: rgba(0, 0, 0, 0.8);
}

.sk-gallery .dotnav.dotnav-below .dotnav-link {
	box-shadow: none;
}

/* Dark mode is gated on an explicit theme signal, never on prefers-color-scheme
   alone. The site's dark-mode.css is loaded with media="(prefers-color-scheme:
   dark)" *and* scopes every rule to `body.theme-dark`, so the class is what
   actually decides whether a page is dark. Keying off the media query by itself
   flips these dots white on a page that is still rendering light — which makes
   a `below` dotnav disappear against an #fff / #f5f5f7 page background whenever
   the OS happens to be in dark mode. */
body.theme-dark .sk-gallery .dotnav.dotnav-below,
[data-color-scheme="dark"] .sk-gallery .dotnav.dotnav-below {
	--sk-dotnav-background: rgba(255, 255, 255, 0.36);
	--sk-dotnav-background-hover: rgba(255, 255, 255, 0.48);
	--sk-dotnav-background-current: rgba(255, 255, 255, 0.8);
}

/* ========== Dot Nav Square Behind Each Dot ========== */
/* The dot is the round `.dotnav-link`; `.dotnav-item` is only the 8x8 box it is
   positioned inside, and it never needs paint of its own. dark-mode.css does
   paint it anyway:

     html body.theme-dark .dotnav .dotnav-item        {background-color:rgba(134,134,139,0.4)}
     html body.theme-dark .dotnav .dotnav-item:hover  {background-color:rgba(134,134,139,0.6)}
     html body.theme-dark .dotnav .dotnav-item.current{background-color:var(--glyph-gray-secondary)}

   An <li> has no border-radius, so that reads as a square sitting behind each
   round dot. Those are literals on the element rather than --sk-* properties, so
   they can only be outranked, not re-configured — hence the long selectors. The
   engine is what makes the `.current` one match: TabNav.ItemSelector is
   ".dotnav .dotnav-item", so `current` lands on the <li> rather than the link. */
html body .sk-gallery .dotnav .dotnav-items .dotnav-item,
html body .sk-gallery .dotnav .dotnav-items .dotnav-item:hover,
html body .sk-gallery .dotnav .dotnav-items .dotnav-item.current {
	background: none;
}

/* ========== Slide Mode ========== */
/* Applied when the gallery opts into data-transition="slide" or data-loop="true".
   Mixin Gallery's Slide mixin positions the items itself — it translates
   .item-container and sets a transform on each item — so the items leave the flex
   flow and the track carries the aspect ratio instead. Native scrolling and
   scroll snapping are dropped; the container only clips now. This layout is what
   makes looping possible: because Slide owns the item positions it can move the
   neighboring slides around the current one on every change. */
.sk-gallery.sk-gallery-slide .scroll-container {
	overflow: hidden;
	scroll-snap-type: none;
}

.sk-gallery.sk-gallery-slide .item-container {
	display: block;
	position: relative;
	aspect-ratio: 16 / 9;
}

.sk-gallery.sk-gallery-slide .gallery-item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* The track carries the ratio now; the item fills it. Leaving 16/9 here as
	   well would fight Slide's own sizing on non-16/9 galleries. */
	aspect-ratio: auto;
	scroll-snap-align: none;
}

/* ========== Paddles Inside a theme-light Gallery ========== */
/* A gallery marked `theme-light` keeps a light background even when the page is
   in dark mode — used for artwork that is itself light. Dark mode then makes the
   paddles disappear against it, in two separate ways that both need undoing:

     1. `.theme-dark .paddlenav` (global stylesheet) turns the chevron white via
        --sk-paddlenav-arrow-color, which the module paints as `fill` on the svg
        path. Re-declaring the property is enough, at any higher specificity.
     2. `html body.theme-dark .paddlenav .paddlenav-arrow` (dark-mode.css) sets
        `background-color: rgba(0,0,0,0)`, erasing the scrim circle. That one is
        a literal on the button rather than a --sk-* property, so it can only be
        outranked, not re-configured — hence the long selectors below.

   The scrim is restored through var() rather than a literal because dark mode
   never touches --sk-paddlenav-background*: whichever scrim the author asked for
   via data-scrim (alpha, solid, or none) is still the correct value here. Only
   the arrow colors are spelled out, mirroring the light defaults in .paddlenav. */
html body.theme-dark .theme-light .sk-gallery .paddlenav {
	--sk-paddlenav-arrow-color: rgba(0, 0, 0, 0.56);
	--sk-paddlenav-arrow-color-hover: rgba(0, 0, 0, 0.64);
	--sk-paddlenav-arrow-color-active: rgba(0, 0, 0, 0.64);
}

html body.theme-dark .theme-light .sk-gallery .paddlenav .paddlenav-arrow {
	background: var(--sk-paddlenav-background);
}

html body.theme-dark .theme-light .sk-gallery .paddlenav .paddlenav-arrow:hover {
	background: var(--sk-paddlenav-background-hover);
}

html body.theme-dark .theme-light .sk-gallery .paddlenav .paddlenav-arrow:active {
	background: var(--sk-paddlenav-background-active);
}