/* Section rhythm + shared layout primitives */

.section {
	padding-block: var(--section-space);
	position: relative;
}
.section--sm { padding-block: var(--section-space-sm); }
.section--surface { background: var(--c-surface); }
.section--band { background: var(--c-band); }
.section--dark { background: var(--c-dark); color: var(--c-dark-text); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--c-dark-text); }
.section--dark .section-eyebrow { color: var(--c-accent-soft); }
.section--dark .section-sub { color: var(--c-dark-text-soft); }
.section--tight-top { padding-top: var(--sp-6); }
.section--tight-bottom { padding-bottom: var(--sp-6); }

.section-head {
	max-width: 640px;
	margin-bottom: var(--sp-8);
}
.section-head--center { margin-inline: auto; text-align: center; }

.section-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--fs-caption);
	letter-spacing: 0.14em;
	color: var(--c-accent);
	font-weight: 600;
	margin-bottom: var(--sp-4);
}
.section-eyebrow::before {
	content: '';
	width: 28px;
	height: 1px;
	background: currentColor;
}
.section-head--center .section-eyebrow::before { display: none; }

.section-title { margin-bottom: var(--sp-4); }
.section-sub { color: var(--c-text-soft); font-size: var(--fs-lead); margin: 0; }

/* Two-column "image on one side, text on the other" — the reference's
   dominant composition. Order flips per-section via the modifier, and on
   mobile the image always moves above the text (never a shrunk sidebar). */
.split {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-8);
	align-items: center;
}
.split__media { order: -1; }
.split__body { order: 0; }

@media (min-width: 1024px) {
	.split {
		grid-template-columns: 1fr 1fr;
		gap: var(--sp-11);
	}
	.split__media, .split__body { order: 0; }
	.split--media-left .split__media { order: -1; }
	.split--media-right .split__media { order: 1; }
	.split--media-right .split__body { order: -1; }
}

.grid { display: grid; gap: var(--sp-6); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: repeat(2, 1fr); }

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

.stack { display: flex; flex-direction: column; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }

.ratio { position: relative; overflow: hidden; display: block; }
.ratio img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ratio--portrait { aspect-ratio: 4 / 5; }
.ratio--square { aspect-ratio: 1 / 1; }
.ratio--wide { aspect-ratio: 4 / 3; }
.ratio--hero { aspect-ratio: 3 / 4; }
@media (min-width: 1024px) { .ratio--hero { aspect-ratio: 5 / 6; } }

.divider { height: 1px; background: var(--c-border); border: 0; margin: 0; }