/**
 * FlanFudge — utility classes.
 *
 * Tiny, single-purpose helpers. Used inside template parts so we don't
 * have to author a full BEM block when the styling is just "vertical
 * stack with consistent gap" or "screen-reader-only label".
 *
 * Naming: every utility is prefixed `u-` so it never collides with a
 * component class. Variables are scoped per-utility so the gap can be
 * overridden inline (`style="--ff-stack-gap: 24px"`).
 *
 * Keep this file SHORT. Utilities that are only ever used in one place
 * belong on the component, not here.
 *
 * @package FlanFudge
 */

/* =========================================================================
 * Visibility — accessibility helpers
 * ========================================================================= */

.u-sr-only,
.u-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* When a screen-reader-only element should reappear on focus
   (skip-link pattern). */
.u-sr-only-focusable:focus,
.u-sr-only-focusable:focus-visible {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
}

.u-hidden { display: none; }

/* Hide on small screens / show on small screens. Single breakpoint
   helpers — anything more nuanced should live on the component. */
@media (max-width: 640px) {
	.u-hide-sm { display: none; }
}
@media (min-width: 641px) {
	.u-show-sm { display: none; }
}

/* =========================================================================
 * Layout — stack & cluster (Every Layout patterns)
 * ========================================================================= */

/* Vertical flex column with a consistent gap between children. */
.u-stack {
	display: flex;
	flex-direction: column;
	gap: var(--ff-stack-gap, var(--ff-space-4));
}

/* Horizontal flex row that wraps, with a consistent gap. */
.u-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ff-cluster-gap, var(--ff-space-3));
}

.u-flex      { display: flex; }
.u-grid      { display: grid; }
.u-block     { display: block; }
.u-inline    { display: inline-flex; align-items: center; }

.u-items-center { align-items: center; }
.u-items-start  { align-items: flex-start; }
.u-items-end    { align-items: flex-end; }

.u-justify-center  { justify-content: center; }
.u-justify-between { justify-content: space-between; }
.u-justify-end     { justify-content: flex-end; }

.u-flex-1 { flex: 1 1 0%; }

/* =========================================================================
 * Spacing — top + bottom margin helpers
 *
 * Use sparingly. Components are expected to own their internal spacing,
 * but utilities help when one-off whitespace is needed without inventing
 * a class name.
 * ========================================================================= */

.u-m-0  { margin: 0; }
.u-mt-0 { margin-top: 0; }
.u-mb-0 { margin-bottom: 0; }
.u-mt-1 { margin-top: var(--ff-space-1); }
.u-mt-2 { margin-top: var(--ff-space-2); }
.u-mt-3 { margin-top: var(--ff-space-3); }
.u-mt-4 { margin-top: var(--ff-space-4); }
.u-mt-6 { margin-top: var(--ff-space-6); }
.u-mt-8 { margin-top: var(--ff-space-8); }
.u-mb-1 { margin-bottom: var(--ff-space-1); }
.u-mb-2 { margin-bottom: var(--ff-space-2); }
.u-mb-3 { margin-bottom: var(--ff-space-3); }
.u-mb-4 { margin-bottom: var(--ff-space-4); }
.u-mb-6 { margin-bottom: var(--ff-space-6); }
.u-mb-8 { margin-bottom: var(--ff-space-8); }

/* Section padding — keeps editorial pages consistent with our
   `.ff-section` rhythm without having to remember the clamp formula. */
.u-py-section {
	padding-block: clamp(40px, 6vw, 96px);
}

/* =========================================================================
 * Aspect helpers
 * ========================================================================= */

.u-aspect-square    { aspect-ratio: 1 / 1; }
.u-aspect-portrait  { aspect-ratio: 4 / 5; }
.u-aspect-landscape { aspect-ratio: 16 / 9; }
.u-aspect-card      { aspect-ratio: 4 / 3; }

.u-cover {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* =========================================================================
 * Text alignment + weight helpers
 * ========================================================================= */

.u-text-left   { text-align: left; }
.u-text-center { text-align: center; }
.u-text-right  { text-align: right; }

.u-text-balance { text-wrap: balance; }
.u-text-pretty  { text-wrap: pretty; }

.u-text-muted   { color: var(--ff-muted-fg); }
.u-text-accent  { color: var(--ff-accent); }

.u-font-medium    { font-weight: var(--ff-weight-medium); }
.u-font-semibold  { font-weight: var(--ff-weight-semibold); }
.u-font-bold      { font-weight: var(--ff-weight-bold); }

/* =========================================================================
 * Motion safety
 *
 * Reusable scope for any element we DON'T want animating when the user
 * has `prefers-reduced-motion: reduce` set system-wide. Components can
 * stay simple by adding `class="u-motion-safe"` to their transition root.
 * ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	.u-motion-safe,
	.u-motion-safe * {
		animation: none;
		transition: none;
		scroll-behavior: auto;
	}
}