/* ═══════════════════════════════════════════════════════════════
   PAULS AUTOSERVICE — Layout (layout.css)
   Grid, containers, responsive sections
   ═══════════════════════════════════════════════════════════════ */

/* 1️⃣ Grid System */
.container {
	max-width: var(--container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-padding);
	padding-right: var(--container-padding);
}

.row {
	display: flex;
	flex-wrap: wrap;
	margin-left: calc(-1 * var(--space-sm));
	margin-right: calc(-1 * var(--space-sm));
}

.col {
	flex: 1 1 0;
	padding-left: var(--space-sm);
	padding-right: var(--space-sm);
	min-width: 250px;
}

/* 2️⃣ Section Spacing */
section {
	padding-top: var(--space-section);
	padding-bottom: var(--space-section);
	position: relative;
}

/* 3️⃣ Hero Section */
.hero {
	min-height: 85vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	background: var(--color-cream);
	color: var(--color-petrol);
	position: relative;
	overflow: hidden;
}

.hero .hero-content {
	max-width: var(--container-narrow);
	z-index: 2;
}

/* 4️⃣ Responsive Breakpoints */
@media (max-width: 768px) {
	.h1 { font-size: var(--fs-2xl); }
	.h2 { font-size: var(--fs-xl); }
	.hero { min-height: 80vh; }
}

@media (max-width: 480px) {
	.h1 { font-size: var(--fs-xl); }
	.h2 { font-size: var(--fs-lg); }
}