/* Layout & Container */
.container {
	width: 100%;
	max-width: var(--container-max-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-padding);
	padding-right: var(--container-padding);
}

/* Sections */
.section {
	padding-top: 6rem; /* 96px as per Figma */
	padding-bottom: 6rem;
	scroll-margin-top: 100px; /* Offset for fixed header */
}

/* Deep link targets (in case they are not .section) */
[id] {
	scroll-margin-top: 100px;
}

.section--sm {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.section--lg {
	padding-top: 8rem;
	padding-bottom: 8rem;
}

.section--dark {
	background-color: var(--color-primary-dark-1);
	color: var(--color-surface-white);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark h5,
.section--dark h6,
.section--dark p {
	color: var(--color-surface-white);
}

.section--light-bg {
	background-color: var(--color-surface-2);
}

/* CSS Grid Utilities */
.grid {
	display: grid;
	gap: var(--spacing-6);
}

.grid-cols-1 { grid-template-columns: 1fr; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }


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

@media (min-width: 768px) {
	.md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
	.md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
}

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

/* Flexbox Utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.flex-wrap { flex-wrap: wrap; }
.gap-2 { gap: var(--spacing-2); }
.gap-4 { gap: var(--spacing-4); }
.gap-6 { gap: var(--spacing-6); }
.gap-8 { gap: 2rem; } /* 32px */
.gap-10 { gap: 2.5rem; } /* 40px */
.gap-12 { gap: 3rem; } /* 48px */
.gap-14 { gap: 3.5rem; } /* 56px */
.gap-16 { gap: 4rem; } /* 64px */
.gap-20 { gap: 5rem; } /* 80px */

/* Screen Reader Only */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}
/* ─── Footer Component Design ───────────────────────────────── */
.site-footer {
	background-color: var(--color-primary-dark-1);
	color: rgba(255, 255, 255, 0.5);
	font-family: var(--font-body);
}

.site-footer h4 {
	color: #ffffff !important;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin-bottom: 1.5rem;
}

.site-footer a {
	color: rgba(255, 255, 255, 0.4);
	transition: var(--transition-normal);
}

.site-footer a:hover {
	color: var(--color-accent) !important;
}

.site-footer p, 
.site-footer address {
	color: rgba(255, 255, 255, 0.4);
	line-height: 1.6;
	font-size: 14px;
}

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom .copyright,
.footer-bottom .footer-legal a,
.footer-bottom .iso-badge {
	color: rgba(255, 255, 255, 0.3);
}

.footer-bottom .footer-legal a:hover {
	color: var(--color-accent) !important;
}