/* =========================================================
   TIVOLI — layout.css
   Containers, grid utilities, section spacing, breakpoints.

   Breakpoints used across the theme (documented here since CSS
   custom properties can't be interpolated into @media queries).
   ETAP 17C audit: there is no single fixed 4-step scale — components
   pick the nearest of these recurring values to their own content:
     480px  – large phones (the most common single breakpoint)
     560/640/720px – small tablets / narrow component-specific tweaks
     768px  – tablets
     900px  – header/nav breakpoint (mobile drawer swap), reused by
              several page sections; paired with a 901px min-width
              override where an exact hand-off is needed
     1024px – small laptops; occasionally paired with 1025px the
              same way
     1280px – wider admin/staff-panel layouts only, not used on any
              customer-facing page
   A few components use an isolated one-off value (e.g. 400px) for a
   single narrow tweak that doesn't need to match anything else.
   Reuse the nearest existing value above before introducing a new
   one; this list was found to have no on-page conflicts, so it is
   documentation only, not a refactor target.
   ========================================================= */

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

.container--narrow {
	max-width: var(--container-narrow);
}

.section {
	position: relative;
	padding-block: var(--space-2xl);
}

@media (max-width: 768px) {
	.section {
		padding-block: var(--space-xl);
	}
}

.section--tight {
	padding-block: var(--space-xl);
}

.section--cream {
	background: var(--color-cream);
}

.section--deep {
	background: var(--color-cream-deep);
}

.section--green {
	background: var(--color-green-800);
	color: var(--color-cream);
}

.section--green h2,
.section--green h3,
.section--green .eyebrow {
	color: var(--color-cream);
}

.section-head {
	max-width: 640px;
	margin-bottom: var(--space-xl);
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.section-head--center {
	max-width: 680px;
	margin-inline: auto;
	text-align: center;
	align-items: center;
}

.section-head--split {
	max-width: none;
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-lg);
}

@media (max-width: 768px) {
	.section-head--split {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ---------- Generic grids ---------- */
.grid {
	display: grid;
	gap: var(--space-lg);
}

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

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

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

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

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

.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}