/**
 * PF Studios — the row of studio logos.
 *
 * Every number worth tuning arrives as a custom property from the block's own
 * sidebar (see render_block() in inc/block.php). Nothing below is a magic value
 * someone is expected to come and edit by hand.
 *
 * There is no Customizer half here, and so no scoping dance: pf-stack has to
 * scope the footer's numbers to `.pf-stack-wrap` because a rule set on an
 * element beats a custom property inherited by it, and the footer would
 * otherwise overrule every block. A block is the only thing that draws studios,
 * so every value below is simply the block's.
 */

.pf-studios {
	display: flex;
	align-items: center;
	gap: var(--pf-studios-gap, 40px);
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: 100%;

	/* When it genuinely will not fit and wrapping is off, it scrolls rather
	   than shrinking the logos below the height that was asked for. */
	overflow-x: auto;
	scrollbar-width: none;
}

.pf-studios::-webkit-scrollbar {
	display: none;
}

.pf-studios-wraps {
	flex-wrap: wrap;
	row-gap: calc(var(--pf-studios-gap, 40px) * 0.6);
	overflow-x: visible;
}

/**
 * A theme has opinions about a `ul` sitting in content, and Kadence's are
 * `.single-content ul{padding-left:2em}` — two classes deep, so it outranks a
 * single class and pushes the whole row right of the text it is meant to line
 * up with. Two classes on the same element beat one class plus a tag, so this
 * wins without an !important and without naming a theme class we do not own.
 * The same fix pf-stack needed, for the same reason.
 */
.pf-studios.pf-studios-block {
	margin: 0;
	padding-left: 0;
	padding-right: 0;
}

.pf-studios-item {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin: 0;
	text-align: center;
	color: var(--pf-studios-rest, #8a8394);

	/* A rest/hover pair, like the colours. Dimming the whole tile rather than
	   just the logo is the point: the name and the period belong to the row,
	   and a row that half lights up reads as two things, not one. */
	opacity: var(--pf-studios-opacity, 1);
	transition:
		color var(--pf-studios-speed, 150ms) ease,
		opacity var(--pf-studios-speed, 150ms) ease;
}

.pf-studios-item:hover,
.pf-studios-item:focus-within {
	color: var(--pf-studios-hover, #b07bd8);
	opacity: var(--pf-studios-opacity-hover, 1);
}

/* A linked row is a link around the whole tile, so the logo and the name are
   one target rather than two. It carries no underline and no link colour —
   the row's own colour already says everything, and hover says the rest. */
.pf-studios-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: inherit;
	color: inherit;
	text-decoration: none;
	box-shadow: none;
}

.pf-studios-link:hover,
.pf-studios-link:focus {
	color: inherit;
	text-decoration: none;
}

.pf-studios-link:focus-visible {
	outline: 2px solid #c8a2e8;
	outline-offset: 4px;
	border-radius: 2px;
}

/**
 * The logo as its studio published it — no mask, no redraw, nothing thrown
 * away. Black and white is a filter applied here, at display time: the same
 * file serves the colour row, and "couleurs" is one class away.
 *
 * Brightness is a control because a studio logo is as likely to be a white
 * wordmark as a near-black one, and this canvas is #14121A.
 *
 * No corner radius, deliberately: the site's 10 px rule is for pictures in a
 * frame (pf-consistency), and a logo is not one. None of that plugin's
 * selectors reach here, and none should.
 */
img.pf-studios-mark {
	display: block;
	height: var(--pf-studios-h, 34px);
	width: auto;
	max-width: none;
	background: none;
	object-fit: contain;
	filter: brightness(calc(var(--pf-studios-lift, 1) * var(--pf-studios-row-lift, 1)));
	transition: filter var(--pf-studios-speed, 150ms) ease;
}

.pf-studios-bw img.pf-studios-mark {
	filter: grayscale(1) brightness(calc(var(--pf-studios-lift, 1) * var(--pf-studios-row-lift, 1)));
}

/* Hover hands the logo its own colours back. Without this a black-and-white
   row has no hover at all — the accent has nothing to paint, because nothing
   here is painted with currentColor. */
.pf-studios-bw.pf-studios-reveals .pf-studios-item:hover img.pf-studios-mark,
.pf-studios-bw.pf-studios-reveals .pf-studios-item:focus-within img.pf-studios-mark {
	filter: grayscale(0) brightness(1);
}

/**
 * One ink: the file is used as a mask and the colour underneath is the row's
 * own currentColor, so the whole line carries one hue and goes accent on hover.
 * A mask has no intrinsic size, which is why each row is printed with its own
 * ratio and the row keeps a single height.
 *
 * Only ever true of a flat shape on transparency. A logo on a white background
 * masks to a solid rectangle — that is what the row's toggle is for.
 */
span.pf-studios-mark {
	display: block;
	height: var(--pf-studios-h, 34px);
	width: calc(var(--pf-studios-h, 34px) * var(--pf-studios-ar, 1));
	background-color: currentColor;
	-webkit-mask: var(--pf-studios-src) no-repeat center / contain;
	mask: var(--pf-studios-src) no-repeat center / contain;
}

/**
 * A row with no logo. The name is set in the box the logos occupy rather than
 * leaving a hole — a small structure often has no mark worth putting at 34 px,
 * and its name is the mark. Sized off the row height so it sits on the same
 * line as the logos beside it whatever that height is.
 */
.pf-studios-wordmark {
	display: flex;
	align-items: center;
	height: var(--pf-studios-h, 34px);
	font-size: calc(var(--pf-studios-h, 34px) * 0.42);
	line-height: 1;
	letter-spacing: 0.02em;
	white-space: nowrap;
	color: currentColor;
}

.pf-studios-name {
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	color: currentColor;
}

/* The period is the quiet half of the label: it never takes the hover colour,
   because two things changing colour at once reads as decoration rather than
   as feedback. */
.pf-studios-years {
	font-size: 10px;
	line-height: 1;
	letter-spacing: 0.04em;
	white-space: nowrap;
	color: var(--global-palette5, #8a8394);
	opacity: 0.85;
}

/* A name beside its logo, for a short list in a column of text. The gap is
   tied to the logo height so it stays proportional at any size. */
.pf-studios-labels-beside .pf-studios-item,
.pf-studios-labels-beside .pf-studios-link {
	flex-direction: row;
	gap: calc(var(--pf-studios-h, 34px) * 0.3);
}

.pf-studios-labels-beside .pf-studios-years {
	margin-left: calc(var(--pf-studios-h, 34px) * 0.2);
}

/**
 * The break between the studios and whatever sits off to the side — school,
 * freelance, a residency. A hairline, not a divider: enough to read as a gap,
 * not enough to read as a second section.
 */
.pf-studios-break {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	/* the gap already sits on both sides, so only make up the difference */
	margin: 0 calc(var(--pf-studios-gap, 40px) * 0.4);
	color: var(--pf-studios-rest, #8a8394);
}

.pf-studios-break::before {
	content: "";
	display: block;
	width: 1px;
	height: var(--pf-studios-h, 34px);
	background: currentColor;
	opacity: 0.28;
}

.pf-studios-sep-dot .pf-studios-break::before {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.5;
}

.pf-studios-sep-none .pf-studios-break::before {
	content: none;
}

/**
 * The optional label above the row — "Studios", "Ils m'ont fait confiance".
 * Muted, small and uppercase: it names the row, it is not a heading competing
 * with the page.
 */
.pf-studios-heading {
	margin: 0 0 0.9em;
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pf-studios-rest, #8a8394);
}

.pf-studios-justify-left {
	justify-content: flex-start;
	text-align: left;
}

.pf-studios-justify-center {
	justify-content: center;
	text-align: center;
}

.pf-studios-justify-right {
	justify-content: flex-end;
	text-align: right;
}

@media (prefers-reduced-motion: reduce) {
	.pf-studios-item,
	img.pf-studios-mark {
		transition: none;
	}
}