/*
Ability Esports — Utility classes.
Small, single-purpose helpers only. Component-level utility classes
(.ae-title--clamp-2's future siblings, etc.) are added as real components
need them, not speculatively here.
*/

.ae-container {
	width: 100%;
	max-width: var(--ae-container-content);
	margin-inline: auto;
	padding-inline: var(--ae-gutter-mobile);
}

@media (min-width: 768px) {
	.ae-container {
		padding-inline: var(--ae-gutter-tablet);
	}
}

@media (min-width: 1024px) {
	.ae-container {
		padding-inline: var(--ae-gutter-desktop);
	}
}

.ae-container--wide {
	max-width: var(--ae-container-wide);
}

.ae-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;
}

.ae-skip-link {
	position: absolute;
	top: -100%;
	left: var(--ae-space-md);
	z-index: var(--ae-z-toast);
	background: var(--ae-color-brand-primary);
	color: var(--ae-color-text-inverse);
	padding: var(--ae-space-sm) var(--ae-space-md);
	border-radius: var(--ae-radius-sm);
	font-family: var(--ae-font-body);
	font-weight: var(--ae-weight-medium);
	text-decoration: none;
	transition: top var(--ae-duration-fast) var(--ae-ease-standard);
}

.ae-skip-link:focus {
	top: var(--ae-space-md);
}

.ae-title--clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Divider primitive — /docs/UI-PATTERN-LIBRARY.md §3. A single hairline rule. */
.ae-divider {
	border: none;
	border-top: var(--ae-border-subtle);
	margin-block: var(--ae-space-lg);
}