/* ==========================================================================
   LAYOUT — container, grid, section rhythm
   The Framer build centres content in a 1200px track with a 30px gutter,
   derived from its own calc(min(1200px) - 30px) / 2 expressions.
   ========================================================================== */

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

/* Full-bleed section that keeps its inner content on the container track. */
.container--wide {
	max-width: none;
}

/* Measured section padding on the live site: 100px block (desktop),
   60px (phone). Horizontal padding comes from .container. */
.section {
	position: relative;
	padding-block: 100px;
}

.section--dark {
	background-color: var(--c-ink);
	color: var(--c-surface);
}

.section--flush {
	padding-block: 0;
}

@media (min-width: 810px) and (max-width: 1199.98px) {
	.section {
		/* Measured on the live site at 900px. */
		padding-block: 80px;
	}
}

@media (max-width: 809.98px) {
	.section {
		/* Measured on the live site at 390px. */
		padding-block: 60px;
	}
}

/* --------------------------------------------------------------------------
   GRID
   -------------------------------------------------------------------------- */

.grid {
	display: grid;
	gap: var(--gutter);
}

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

@media (min-width: 810px) and (max-width: 1199.98px) {
	.grid--3,
	.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

/* --------------------------------------------------------------------------
   VISIBILITY HELPERS — bound to Framer's exact breakpoints so template code
   can mirror the original's per-breakpoint component variants.
   -------------------------------------------------------------------------- */

@media (max-width: 809.98px)  { .hide-phone   { display: none !important; } }
@media (min-width: 810px) and (max-width: 1199.98px) { .hide-tablet { display: none !important; } }
@media (min-width: 1200px)    { .hide-desktop { display: none !important; } }

.show-phone   { display: none; }
.show-tablet  { display: none; }

@media (max-width: 809.98px)  { .show-phone  { display: block; } }
@media (min-width: 810px) and (max-width: 1199.98px) { .show-tablet { display: block; } }