/**
 * TLLC Fedora 45 preview layout.
 * Badge color stays in badge.css. This file reserves badge space and places the gallery.
 */

.tll-f45 {
	min-height: 6.2rem;
	margin: 0.25rem 0 0.5rem;
}

.tll-f45-badge {
	min-height: 3.1rem;
	box-sizing: border-box;
}

.tll-f45-gallery-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
}

@media (min-width: 760px) {
	.tll-f45-gallery-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.tll-f45-fig {
	margin: 0;
}

.tll-f45-fig img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border-radius: 0.7rem;
	border: 1px solid var(--tll-line, #d8d1c3);
	background: #e9e4d8;
}

.tll-f45-fig figcaption {
	font-family: var(--tll-mono, "IBM Plex Mono", monospace);
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	color: var(--tll-muted, #5c6570);
	margin-top: 0.55rem;
	line-height: 1.5;
}

/**
 * Copy line on the dark distro hero.
 * badge.css paints .tll-f45-copy in a dark muted color meant for light
 * backgrounds. Inside .tll-distro-hero (background about #11151a) that color
 * is nearly invisible. Body text uses rgba(255,255,255,0.82), which passes
 * WCAG AA on #11151a. Links keep the same underline and use a light blue
 * that stays readable on the hero.
 */
.tll-distro-hero .tll-f45-copy {
	color: rgba(255,255,255,0.82);
}

.tll-distro-hero .tll-f45-copy a {
	color: #9cc8f0;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tll-distro-hero .tll-f45-copy a:hover {
	color: #ffffff;
}

.tll-distro-hero .tll-f45-copy a:focus-visible {
	outline: 2px solid #9cc8f0;
}