/* ==========================================================================
   DORIC · Media extensions
   The video layer and the gallery. Both compose .d-media (components.css)
   rather than replacing it, so aspect ratios, focal points and the CLS
   guarantees behave exactly as they do everywhere else.
   ========================================================================== */

/* ── Video ─────────────────────────────────────────────────────────────────
   Poster-first. The <video> sits over the photograph at opacity 0 and fades
   in only once it is actually playing. A slow network, Save-Data or reduced
   motion simply leaves the photograph where it is.
   ------------------------------------------------------------------------- */

.d-media__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--d-object-position, center);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--d-dur-slow) var(--d-ease-out);
}

.d-media.is-video-ready .d-media__video { opacity: 1; }

.d-media__videotoggle {
	position: absolute;
	right: var(--d-s3);
	bottom: var(--d-s3);
	z-index: 3;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: var(--d-hairline) solid var(--d-border-strong);
	background: rgba(11, 10, 9, .55);
	color: var(--d-ivory);
	transition:
		border-color var(--d-dur-fast) var(--d-ease-out),
		color var(--d-dur-fast) var(--d-ease-out);
}

/* The author display value above would otherwise defeat the hidden attribute. */
.d-media__videotoggle[hidden] { display: none; }

/* 32px drawn, 44px touch target. */
.d-media__videotoggle::after {
	content: "";
	position: absolute;
	inset: -6px;
}

.d-media__videotoggle:hover {
	border-color: var(--d-accent);
	color: var(--d-accent);
}

.d-media__videoicon { display: grid; place-items: center; }

.d-media__videoicon--play,
.d-media__videotoggle[aria-pressed="true"] .d-media__videoicon--pause { display: none; }

.d-media__videotoggle[aria-pressed="true"] .d-media__videoicon--play { display: grid; }

@media (prefers-reduced-motion: reduce) {
	.d-media__video,
	.d-media__videotoggle { display: none; }
}

/* ── Gallery ───────────────────────────────────────────────────────────────
   A swipe rail everywhere below 1024px; optionally a grid above it. Items are
   role-tagged (front, back, side, detail, worn, construction) in the markup,
   so layout decisions never depend on image order alone.
   ------------------------------------------------------------------------- */

.d-gallery { position: relative; }

.d-gallery__track {
	margin: 0;
	padding: 0;
	list-style: none;
	gap: var(--d-s1);
}

.d-gallery--rail .d-gallery__item { width: 100%; }

.d-gallery__count {
	position: absolute;
	left: var(--d-s4);
	bottom: var(--d-s4);
	z-index: 2;
	padding: var(--d-s1) var(--d-s2);
	background: rgba(11, 10, 9, .55);
	font-size: var(--d-fs-micro);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--d-ls-label);
	color: var(--d-ivory);
}

@media (max-width: 1023px) {
	.d-gallery--grid .d-gallery__item { width: 100%; }
}

@media (min-width: 1024px) {
	.d-gallery--grid .d-gallery__track {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--d-s2);
		overflow: visible;
		scroll-snap-type: none;
	}

	/* An odd count leads with one full-width frame instead of leaving a gap. */
	.d-gallery--grid .d-gallery__item:first-child:nth-last-child(odd) { grid-column: 1 / -1; }

	.d-gallery--grid .d-gallery__count { display: none; }
}