/* ─────────────────────────────────────────────────────────────────
 *  Falcon Vision — Layouts
 *  Containers, sections, and the editorial grid system.
 * ───────────────────────────────────────────────────────────────── */

/* ── Containers ───────────────────────────────────────────────── */

.fv-container {
	width: 100%;
	max-width: var(--fv-container-max);
	margin-inline: auto;
	padding-inline: var(--fv-container-x);
}

.fv-container--narrow {
	max-width: 880px;
}

.fv-container--editorial {
	max-width: 1080px;
}

.fv-container--wide {
	max-width: 1600px;
}

.fv-container--full {
	max-width: 100%;
	padding-inline: 0;
}

/* ── Sections ─────────────────────────────────────────────────── */

.fv-section {
	position: relative;
	padding-block: var(--fv-section-y);
}

.fv-section--tight  { padding-block: var(--fv-section-y-tight); }
.fv-section--loose  { padding-block: var(--fv-section-y-loose); }
.fv-section--flush  { padding-block: 0; }
.fv-section--top-0  { padding-top: 0; }
.fv-section--btm-0  { padding-bottom: 0; }

.fv-section--raised { background-color: var(--fv-bg-raised); }
.fv-section--card   { background-color: var(--fv-bg-card); }

.fv-section--bordered-top    { border-top: 1px solid var(--fv-border); }
.fv-section--bordered-bottom { border-bottom: 1px solid var(--fv-border); }

/* Ambient blurred color blobs that float behind hero/intro sections.
 * Kept here because they're a layout primitive — used in multiple places. */
.fv-blob {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	filter: blur(120px);
	opacity: 0.18;
	will-change: transform;
}

.fv-blob--blue   { background: var(--fv-color-blue); }
.fv-blob--accent { background: var(--fv-color-accent); }
.fv-blob--gold   { background: var(--fv-color-gold); opacity: 0.10; }

@media (prefers-reduced-motion: no-preference) {
	.fv-blob--float-a { animation: fv-float-a 14s ease-in-out infinite; }
	.fv-blob--float-b { animation: fv-float-b 17s ease-in-out infinite reverse; }
	.fv-blob--float-c { animation: fv-float-c 12s ease-in-out 2s infinite; }
}

@keyframes fv-float-a {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50%      { transform: translate(-40px, 30px) scale(1.08); }
}
@keyframes fv-float-b {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50%      { transform: translate(30px, -40px) scale(0.94); }
}
@keyframes fv-float-c {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50%      { transform: translate(20px, 30px) scale(1.04); }
}

/* ── Grid primitives ──────────────────────────────────────────── */

.fv-grid {
	display: grid;
	gap: var(--fv-space-6);
}

.fv-grid--gap-0  { gap: 0; }
.fv-grid--gap-2  { gap: var(--fv-space-2); }
.fv-grid--gap-4  { gap: var(--fv-space-4); }
.fv-grid--gap-8  { gap: var(--fv-space-8); }
.fv-grid--gap-12 { gap: var(--fv-space-12); }

/* Common column patterns */
.fv-grid--cols-2 { grid-template-columns: 1fr; }
.fv-grid--cols-3 { grid-template-columns: 1fr; }
.fv-grid--cols-4 { grid-template-columns: 1fr; }

@media (min-width: 640px) {
	.fv-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
	.fv-grid--cols-3 { grid-template-columns: repeat(2, 1fr); }
	.fv-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.fv-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
	.fv-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Editorial split — image on one side, text on the other */
.fv-grid--editorial {
	grid-template-columns: 1fr;
	gap: var(--fv-space-12);
	align-items: center;
}

@media (min-width: 1024px) {
	.fv-grid--editorial {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--fv-space-16);
	}
}

/* Asymmetric editorial — 5/7 split, used on About / Story */
.fv-grid--editorial-5-7 {
	grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
	.fv-grid--editorial-5-7 {
		grid-template-columns: 5fr 7fr;
		gap: var(--fv-space-16);
	}
}

/* ── Stack utility (vertical flex with consistent gap) ────────── */
.fv-stack {
	display: flex;
	flex-direction: column;
	gap: var(--fv-space-4);
}
.fv-stack--gap-2 { gap: var(--fv-space-2); }
.fv-stack--gap-6 { gap: var(--fv-space-6); }
.fv-stack--gap-8 { gap: var(--fv-space-8); }
.fv-stack--gap-12 { gap: var(--fv-space-12); }

/* Horizontal cluster */
.fv-cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fv-space-4);
	align-items: center;
}
.fv-cluster--end { justify-content: flex-end; }
.fv-cluster--between { justify-content: space-between; }
.fv-cluster--center { justify-content: center; }

/* ── Aspect ratio helpers ─────────────────────────────────────── */
.fv-ratio { position: relative; width: 100%; overflow: hidden; }
.fv-ratio > * {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fv-ratio--4x3   { aspect-ratio: 4 / 3; }
.fv-ratio--3x2   { aspect-ratio: 3 / 2; }
.fv-ratio--16x9  { aspect-ratio: 16 / 9; }
.fv-ratio--21x9  { aspect-ratio: 21 / 9; }
.fv-ratio--1x1   { aspect-ratio: 1 / 1; }
.fv-ratio--3x4   { aspect-ratio: 3 / 4; }
.fv-ratio--2x1   { aspect-ratio: 2 / 1; }

/* ── Full-bleed escape (for content inside a max-width container) ── */
.fv-full-bleed {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}