/*
 * album-single.css — single-album.php (loaded only there by m6m_template_styles()).
 *
 * 2.4.0 FLOODLIGHT. Replaces every inline style="" the template had.
 * The only per-element value left inline is --m6mas-ar (each photo's
 * width / height), which sizes the justified pair and trio rows.
 *
 * Mobile-first, min-width 560 / 768 / 900 / 1100 / 1440.
 * Shared power-on reveal ([data-floodlight]) lives in style.css.
 */

.m6mas-inner {
	--m6mas-px: 16px;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--wp--custom--layout--max-w-portfolio);
	margin-inline: auto;
	padding-inline: var(--m6mas-px);
}
.m6mas-arrow {
	display: inline-block;
	transition: transform var(--wp--custom--duration--medium) var(--wp--custom--easing--out);
}
.m6mas-vs {
	margin-inline: 0.7em;
	font-weight: 400;
	color: var(--wp--preset--color--text-muted);
}

/* ============================================================
   OPENING FRAME
   ============================================================ */
.m6mas-cover {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-rows: auto 1fr;
	min-height: max(34rem, calc(100svh - 4rem));
	overflow: hidden;
	background: var(--wp--preset--color--bg);
}
.m6mas-cover--bare { min-height: 0; }
.m6mas-cover__frame {
	position: absolute;
	inset: 0;
	z-index: -2;
}
.m6mas-cover__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
}
/* Bottom: the contrast guarantee for the board (≥ ~84% obsidian under
   any text). Top: a short fade so the breadcrumb reads. */
.m6mas-cover::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(
			to bottom,
			color-mix(in srgb, var(--wp--preset--color--bg) 75%, transparent) 0,
			transparent 7rem
		),
		linear-gradient(
			to top,
			var(--wp--preset--color--bg) 0%,
			color-mix(in srgb, var(--wp--preset--color--bg) 94%, transparent) 38%,
			color-mix(in srgb, var(--wp--preset--color--bg) 70%, transparent) 62%,
			transparent 92%
		);
}

.m6mas-crumb {
	padding-top: var(--wp--preset--spacing--sm);
}
.m6mas-crumb a {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	min-height: 44px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text);
}
.m6mas-crumb a:hover { color: var(--wp--preset--color--accent); }

.m6mas-board {
	align-self: end;
	padding-block: var(--wp--preset--spacing--2xl) var(--wp--preset--spacing--xl);
}
.m6mas-kicker {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 var(--wp--preset--spacing--sm);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}
.m6mas-kicker::before {
	content: "";
	width: 2rem;
	height: 1px;
	background: currentColor;
}

.m6mas-h1 {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--xs);
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	color: var(--wp--preset--color--text);
}
.m6mas-teams {
	font-size: var(--wp--preset--font-size--label);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.m6mas-score {
	display: inline-flex;
	align-items: flex-start;
	margin-left: -0.05em;
	font-size: var(--wp--preset--font-size--scoreboard);
	line-height: 0.82;
	letter-spacing: -0.05em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.m6mas-aet {
	margin: 0.35rem 0 0 0.5rem;
	font-size: var(--wp--preset--font-size--label);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.2em;
	text-decoration: none;
	color: var(--wp--preset--color--accent);
}
.m6mas-title {
	max-width: 16ch;
	font-size: var(--wp--preset--font-size--display);
	line-height: 0.92;
	letter-spacing: -0.035em;
	text-wrap: balance;
}
.m6mas-pens,
.m6mas-meta {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--label);
	line-height: 1.6;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text);
}
.m6mas-pens {
	margin-top: var(--wp--preset--spacing--sm);
	font-weight: 700;
}
.m6mas-pens::before {
	content: "";
	display: inline-block;
	width: 0.5em;
	height: 0.5em;
	margin-right: 0.7em;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 50%;
	vertical-align: 0.05em;
}
.m6mas-meta {
	display: flex;
	flex-direction: column; /* phones: one fact per line */
	margin-top: var(--wp--preset--spacing--xs);
}
.m6mas-meta span + span::before {
	content: none;
	margin-inline: 0.8em;
	color: var(--wp--preset--color--text-secondary);
}
.m6mas-jump {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	min-height: 44px;
	margin-top: var(--wp--preset--spacing--md);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--text);
	border-bottom: 1px solid var(--wp--preset--color--accent);
}
.m6mas-jump:hover { color: var(--wp--preset--color--accent); }

/* ---- Match report ------------------------------------------ */
.m6mas-report {
	max-width: calc(var(--wp--custom--layout--max-w-narrow) + 2 * var(--m6mas-px));
	padding-block: var(--wp--preset--spacing--xl) 0;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.8;
	color: var(--wp--preset--color--text-secondary);
}
.m6mas-report > * + * { margin-top: 1em; }
.m6mas-report > p:first-child {
	font-size: var(--wp--preset--font-size--h4);
	line-height: 1.5;
	color: var(--wp--preset--color--text);
}

/* ============================================================
   GALLERY — a paced run. Phones: one column, edge to edge.
   ============================================================ */
.m6mas-gallery {
	padding-block: var(--wp--preset--spacing--xl);
}
.m6mas-gallery__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--sm);
	margin-bottom: var(--wp--preset--spacing--md);
}
.m6mas-h2 {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--h2);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--text);
}
.m6mas-gallery__count {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--text-secondary);
}

.m6mas-row {
	display: grid;
	gap: 6px;
	margin-bottom: 6px;
}
.m6mas-frame {
	margin: 0;
	min-width: 0;
	background: var(--wp--preset--color--surface);
}
.m6mas-frame__link {
	display: block;
	cursor: zoom-in;
}
.m6mas-frame__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}
.m6mas-frame__img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---- Frame counter ----------------------------------------- */
.m6mas-counter {
	position: fixed;
	right: var(--m6mas-counter-x, 16px);
	bottom: 16px;
	z-index: 50;
	display: flex;
	align-items: baseline;
	gap: 0.4em;
	padding: 0.45rem 0.7rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 700;
	letter-spacing: 0.12em;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--text);
	background: color-mix(in srgb, var(--wp--preset--color--bg) 88%, transparent);
	border-right: 1px solid var(--wp--preset--color--accent);
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--wp--custom--duration--slow) var(--wp--custom--easing--out),
		visibility 0s linear var(--wp--custom--duration--slow);
}
.m6mas-counter.is-on {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--wp--custom--duration--slow) var(--wp--custom--easing--out);
}
.m6mas-counter__of { color: var(--wp--preset--color--text-secondary); }

/* ---- Full resolution — one quiet line ---------------------- */
.m6mas-fullres {
	margin: 0;
	border-top: 1px solid var(--wp--preset--color--border);
}
.m6mas-fullres__link {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem var(--wp--preset--spacing--md);
	padding-block: var(--wp--preset--spacing--lg);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--h3);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--text);
}
.m6mas-fullres__dest { color: var(--wp--preset--color--text-secondary); transition: color var(--wp--custom--duration--base) var(--wp--custom--easing--out); }
.m6mas-fullres__link:hover { color: var(--wp--preset--color--text); }
.m6mas-fullres__link:hover .m6mas-fullres__dest { color: var(--wp--preset--color--accent); }
.m6mas-fullres__link:hover .m6mas-arrow,
.m6mas-fullres__link:focus-visible .m6mas-arrow { transform: translateX(0.3em); }

/* ============================================================
   NEXT FIXTURE — half-height preview of the next album
   ============================================================ */
.m6mas-next {
	position: relative;
	isolation: isolate;
	display: grid;
	align-items: end;
	min-height: 50svh;
	overflow: hidden;
	color: var(--wp--preset--color--text);
	background: var(--wp--preset--color--bg);
	border-top: 1px solid var(--wp--preset--color--border);
}
.m6mas-next:hover { color: var(--wp--preset--color--text); }
.m6mas-next__frame {
	position: absolute;
	inset: 0;
	z-index: -2;
}
.m6mas-next__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: var(--wp--custom--exposure--dim);
	transition: filter var(--wp--custom--duration--slow) var(--wp--custom--easing--out);
}
.m6mas-next::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to top,
		var(--wp--preset--color--bg) 0%,
		color-mix(in srgb, var(--wp--preset--color--bg) 92%, transparent) 45%,
		transparent 100%
	);
}
.m6mas-next__board {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	padding-block: var(--wp--preset--spacing--2xl) var(--wp--preset--spacing--xl);
}
.m6mas-next__kicker {
	display: inline-flex;
	gap: 0.6em;
	margin-bottom: 0.25rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}
.m6mas-next__score,
.m6mas-next__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	transition: color var(--wp--custom--duration--base) var(--wp--custom--easing--out);
}
.m6mas-next__score {
	margin-left: -0.04em;
	font-size: var(--wp--preset--font-size--display);
	line-height: 0.82;
	letter-spacing: -0.05em;
	font-variant-numeric: tabular-nums;
}
.m6mas-next__title {
	max-width: 18ch;
	font-size: var(--wp--preset--font-size--h1);
	line-height: 0.95;
	letter-spacing: -0.03em;
	text-wrap: balance;
}
.m6mas-next__teams,
.m6mas-next__meta {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--label);
	line-height: 1.5;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.m6mas-next__teams { font-weight: 700; }
.m6mas-next__meta { color: var(--wp--preset--color--text); } /* over the photo: text colour keeps ≥ 10:1 */

.m6mas-next:hover .m6mas-next__img,
.m6mas-next:focus-visible .m6mas-next__img { filter: var(--wp--custom--exposure--full); }
.m6mas-next:hover .m6mas-next__score,
.m6mas-next:focus-visible .m6mas-next__score,
.m6mas-next:hover .m6mas-next__title,
.m6mas-next:focus-visible .m6mas-next__title { color: var(--wp--preset--color--accent); }
.m6mas-next:hover .m6mas-arrow,
.m6mas-next:focus-visible .m6mas-arrow { transform: translateX(0.35em); }
.m6mas-next:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: -4px;
}
@media (hover: none) {
	.m6mas-next__img { filter: var(--wp--custom--exposure--full); }
}

.m6mas-crumb a:focus-visible,
.m6mas-jump:focus-visible,
.m6mas-fullres__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 4px;
}

/* ============================================================
   ≥ 560
   ============================================================ */
@media (min-width: 560px) {
	.m6mas-inner { --m6mas-px: var(--wp--custom--layout--section-px); }
	.m6mas-meta { flex-direction: row; flex-wrap: wrap; }
	.m6mas-meta span + span::before { content: "·"; }
	.m6mas-counter { --m6mas-counter-x: var(--wp--custom--layout--section-px); bottom: 24px; }
}

/* ============================================================
   ≥ 768 — full-bleed frame · justified pair · justified trio.
   flex-grow = width / height gives every frame in a row the same
   height with nothing cropped.
   ============================================================ */
@media (min-width: 768px) {
	.m6mas-row {
		display: flex;
		gap: clamp(8px, 1vw, 16px);
		margin-bottom: clamp(8px, 1vw, 16px);
		padding-inline: var(--wp--custom--layout--section-px);
		max-width: var(--wp--custom--layout--max-w-portfolio);
		margin-inline: auto;
		box-sizing: border-box;
	}
	.m6mas-row--2 .m6mas-frame,
	.m6mas-row--3 .m6mas-frame { flex: var(--m6mas-ar) 1 0%; }

	/* The full frame breaks out to the viewport edges and gets air.
	   Squarer frames (--tall, under 1.3:1) are held to the screen height
	   and centred on the canvas instead, uncropped. */
	.m6mas-row--1 {
		max-width: none;
		padding-inline: 0;
		margin-block: var(--wp--preset--spacing--xl);
	}
	.m6mas-row--1 .m6mas-frame { flex: 1 1 auto; }
	.m6mas-row--1 .m6mas-frame--tall {
		display: flex;
		justify-content: center;
		background: none;
	}
	.m6mas-row--1 .m6mas-frame--tall .m6mas-frame__img {
		width: auto;
		max-width: 100%;
		height: 92svh;
	}
	.m6mas-gallery__head + .m6mas-row--1 { margin-top: 0; }
}

@media (min-width: 1100px) {
	.m6mas-next { min-height: 56svh; }
}

/* ---- Motion / high contrast -------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.m6mas-next__img { filter: none; transition: none; }
	.m6mas-arrow,
	.m6mas-counter,
	.m6mas-counter.is-on { transition: none; }
}
@media (forced-colors: active) {
	.m6mas-counter { border: 1px solid CanvasText; }
	.m6mas-next:focus-visible,
	.m6mas-frame__link:focus-visible,
	.m6mas-fullres__link:focus-visible { outline: 2px solid Highlight; }
}