/**
 * Silver Sword random photo strip.
 *
 * Reproduces the geometry measured on the live core/gallery strips on
 * 2026-08-26: a full-bleed flex container with zero gaps and zero vertical
 * margin, four square tiles across at 600px and up, two across at 599px and
 * down. The 599px breakpoint is the one WordPress core gallery uses.
 *
 * The square comes from aspect-ratio here rather than from the photos being
 * square, so a non-square upload crops to centre instead of breaking the row.
 */

.sss-photo-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	box-sizing: border-box;
	margin-top: 0;
	margin-bottom: 0;
	padding: 0;
	list-style: none;
}

/*
 * Override WordPress global styles that set margin-block-start via the
 * constrained-layout selector `:root :where(.is-layout-constrained) > *`.
 * That rule has specificity 0,1,0 and appears later in the document, winning
 * the source-order tie. A two-class selector (specificity 0,2,0) beats it
 * without !important. The single-class base rule remains as fallback for
 * contexts where alignfull is not applied.
 */
.sss-photo-strip.alignfull {
	margin-block-start: 0;
	margin-block-end: 0;
}

/*
 * Close the 32px navy band that shows between the strip and the footer.
 *
 * Measured live 2026-08-26 (silversword.co.uk/partners): the strip sits in
 * div.sss-photo-strip.alignfull > div.entry-content.wp-block-post-content >
 * div.wp-block-group.is-layout-flow. That outer group carries
 * padding-bottom: 32px from WordPress's global styles, and there is no
 * --wp--style--root--padding-bottom custom property set on this site to
 * override, so the 32px is written here as a literal. body's
 * background-color (rgb(0, 33, 71), Oxford navy) shows through that padding
 * as a band before the cream footer starts. Pulling the strip's own box up
 * by the same 32px makes it cover the padding and meet the footer directly.
 * The same 32px band, from the same wrapper padding, was confirmed live on
 * /events, /membership and /sabrage (the legacy core/gallery strips), so
 * this value is a theme-wide constant, not specific to /partners.
 *
 * Specificity: three classes plus :last-child (0,4,0) beats the
 * .sss-photo-strip.alignfull rule above (0,2,0) for margin-bottom, which is
 * cascade-equivalent to that rule's margin-block-end in this site's
 * horizontal-tb writing mode. No !important needed.
 *
 * Scoped to a direct child of .entry-content so a strip embedded mid-page
 * (not the final block) is never pulled upward into following content.
 *
 * Known limitation: on /membership the strip is followed by a wp:html block
 * (JSON-LD) that renders as a trailing <script>, a real but invisible last
 * child, so :last-child does not match there. Deliberately not widened with
 * a :has()-based "tolerate trailing non-rendering siblings" selector to catch
 * it — that would only cover the one sibling type known today and could
 * silently stop matching if that markup changes. Documenting the gap here
 * instead: when /membership is migrated to this block, either move the
 * JSON-LD html block above the strip, or extend this selector deliberately
 * at that point.
 */
.entry-content > .sss-photo-strip.alignfull:last-child {
	margin-bottom: -32px;
}

.sss-photo-strip__tile {
	flex: 0 0 25%;
	max-width: 25%;
	box-sizing: border-box;
	aspect-ratio: 1 / 1;
	margin: 0;
	padding: 0;
	overflow: hidden;
	position: relative;
}

.sss-photo-strip__img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	object-position: center;
	opacity: 1;
	transition: opacity 600ms ease-in-out;
}

.sss-photo-strip__img.is-fading {
	opacity: 0;
}

@media (max-width: 599px) {
	.sss-photo-strip__tile {
		flex: 0 0 50%;
		max-width: 50%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sss-photo-strip__img {
		transition: none;
	}
}