/* ----------------------------------------------------------------------
   layout.css — container, section spacing, 60/40 & 55/45 two-col grids
---------------------------------------------------------------------- */

.container {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 0 var(--s-32);
}
@media (max-width: 767px) {
	.container { padding: 0 var(--s-16); }
}

/* Section spacing */
.section {
	padding: var(--s-96) 0;
	position: relative;
}
.section--compact { padding: var(--s-64) 0; }
.section--tight   { padding: var(--s-48) 0; }
.section--special {
	background: var(--c-special);
	padding: var(--s-80) 0;
}
.section--surface {
	background: var(--c-surface);
}

/* Adjacent sections: collapse one of the paddings to avoid 192px gaps */
.section + .section { padding-top: var(--s-64); }
.section--special + .section { padding-top: var(--s-96); }
.section + .section--special { padding-top: var(--s-80); }

/* ---------- Grids ---------- */
.grid-2 {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-48);
}
.grid-3 {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-32);
}
.grid-4 {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-24);
}
@media (min-width: 768px) {
	.grid-2 { grid-template-columns: 1fr 1fr; }
	.grid-3 { 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); }
}

/* 60/40 two-column (text/image-plate) */
.grid-60-40 {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-48);
	align-items: start;
}
@media (min-width: 768px) {
	.grid-60-40 { grid-template-columns: 60% 40%; gap: var(--s-56); }
}

/* 55/45 */
.grid-55-45 {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-48);
	align-items: start;
}
@media (min-width: 768px) {
	.grid-55-45 { grid-template-columns: 55% 45%; gap: var(--s-56); }
}

/* flipped — image left / text right */
.grid-60-40--flip,
.grid-55-45--flip {
	direction: ltr;
}
@media (min-width: 768px) {
	.grid-60-40--flip > *:first-child { order: 2; }
	.grid-60-40--flip > *:last-child  { order: 1; }
	.grid-55-45--flip > *:first-child { order: 2; }
	.grid-55-45--flip > *:last-child  { order: 1; }
}

/* ---------- Section head — kicker + heading ---------- */
.section__head {
	margin-bottom: var(--s-48);
	max-width: 820px;
}
.section__head .kicker { margin-bottom: var(--s-16); }
.section__head h2 {
	margin-bottom: var(--s-16);
}
.section__head p {
	font-size: 1.0625rem;
	color: var(--c-text);
	max-width: 640px;
}

.section__footer {
	margin-top: var(--s-56);
	display: flex;
	gap: var(--s-16);
	flex-wrap: wrap;
	align-items: center;
}