/**
 * Layout conventions: containers, sections, grid, page skeleton.
 *
 * The header component lives in assets/css/header.css, the footer in
 * assets/css/footer.css.
 *
 * Breakpoints (PROVISIONAL): 480 / 768 / 1024 / 1280 / 1440.
 *
 * @package GagaMuller
 */

/* ---------------------------------------------------------------------
 * Containers
 * .gm-container       1120px – Figma section content (160px inset at 1440)
 * .gm-container--wide 1200px – Figma header / hero / footer (120px inset)
 * .gm-container--text  48rem – long-form reading column (PROVISIONAL)
 * ------------------------------------------------------------------ */

.gm-container {
	width: 100%;
	max-width: calc(var(--gm-container) + (var(--gm-gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--gm-gutter);
}

.gm-container--wide {
	max-width: calc(var(--gm-container-wide) + (var(--gm-gutter) * 2));
}

.gm-container--text {
	max-width: calc(var(--gm-container-text) + (var(--gm-gutter) * 2));
}

/* Vertical rhythm for page sections. */
.gm-section {
	padding-block: var(--gm-space-section);
}

/* ---------------------------------------------------------------------
 * Grid – CSS Grid only (no flex percentage maths).
 * Usage: <div class="gm-grid" style="--gm-cols: 4">…</div>
 * Figma: 4 cards × 262 + 3 × 24 gap = 1120 (figures); 4 × 256 + 3 × 32
 * (services). Use .gm-grid--lg for the 32px gap.
 * Mobile: 1 column · ≥768px: 2 columns · ≥1024px: --gm-cols (default 3).
 * ------------------------------------------------------------------ */

.gm-grid {
	display: grid;
	gap: var(--gm-grid-gap);
	grid-template-columns: minmax(0, 1fr);
}

.gm-grid--lg {
	gap: var(--gm-grid-gap-lg);
}

@media (min-width: 768px) {
	.gm-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.gm-grid {
		grid-template-columns: repeat(var(--gm-cols, 3), minmax(0, 1fr));
	}
}

/* Flow spacing between stacked children. */
.gm-stack > * + * {
	margin-top: var(--gm-stack-space, var(--gm-space-24));
}

/* ---------------------------------------------------------------------
 * Section header – template-parts/components/section-header.php
 * Figma (What We Do 596:1163, 1440): eyebrow at the section top
 * (40px light-purple badge, 9px gap, Averta 25) · 28px · heading 61/66
 * left · intro 21/30 right (352px column, x 928) · 44px to the content.
 * Below 1024px everything stacks.
 * ------------------------------------------------------------------ */

.gm-section-header {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: var(--gm-space-24);
	margin-bottom: var(--gm-section-header-gap, clamp(2rem, 1.6479rem + 1.5023vw, 2.75rem)); /* 32 → 44 */
}

.gm-eyebrow {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	color: var(--gm-text);
	font-family: var(--gm-font-heading);
	font-size: var(--gm-text-eyebrow);
	font-weight: var(--gm-weight-bold);
	line-height: var(--gm-leading-eyebrow);
}

.gm-eyebrow__badge {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: var(--gm-size-eyebrow-icon);
	height: var(--gm-size-eyebrow-icon);
	border-radius: var(--gm-radius-round);
	background: var(--gm-color-light-purple);
	color: var(--gm-color-white);
}

.gm-eyebrow__badge .gm-icon {
	width: 28px;
	height: 28px;
}

.gm-section-header__title {
	margin: 0;
	color: var(--gm-text);
}

.gm-section-header__intro {
	max-width: 30rem;
	margin: 0;
	color: var(--gm-text-secondary);
}

@media (min-width: 1024px) {
	.gm-section-header {
		grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); /* 352 */
		column-gap: var(--gm-space-32);
		row-gap: 28px;
	}

	.gm-section-header > .gm-eyebrow {
		grid-column: 1 / -1;
	}

	.gm-section-header__intro {
		align-self: end;
		padding-bottom: var(--gm-space-10); /* Figma: intro baseline sits 11px above the heading's. */
	}

	.gm-section-header--no-intro .gm-section-header__title {
		grid-column: 1 / -1;
	}
}

/* ---------------------------------------------------------------------
 * Page skeleton
 * ------------------------------------------------------------------ */

.site {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
}

.site-main {
	flex: 1 0 auto;
}

.site-main:focus {
	outline: none;
}

/* ---------------------------------------------------------------------
 * Page header (templates without a custom hero block)
 * ------------------------------------------------------------------ */

.page-header {
	padding-block: var(--gm-space-section) var(--gm-space-32);
}

.page-header__intro {
	max-width: var(--gm-measure);
	color: var(--gm-text-secondary);
	font-size: var(--gm-text-intro);
	line-height: var(--gm-leading-intro);
}

/* ---------------------------------------------------------------------
 * Entry content (editor output)
 * Standard content sits in a readable column aligned to the container's
 * left edge (left-aligned, narrow margins – Brand §19). Wide and full
 * blocks break out; ACF blocks (.gm-block) manage their own containers.
 * ------------------------------------------------------------------ */

.entry-content {
	--gm-content-start: max(var(--gm-gutter), calc((100% - var(--gm-container)) / 2));
	padding-bottom: var(--gm-space-section);
}

.entry-content > * {
	max-width: min(var(--gm-container-text), calc(100% - (var(--gm-gutter) * 2)));
	margin-inline: var(--gm-content-start) auto;
}

.entry-content > .alignwide {
	max-width: min(var(--gm-container), calc(100% - (var(--gm-gutter) * 2)));
}

.entry-content > .alignfull,
.entry-content > .gm-block {
	max-width: none;
	margin-inline: 0;
}

.entry-content > :first-child {
	margin-top: 0;
}

.entry-content > p,
.entry-content > ul > li,
.entry-content > ol > li {
	max-width: var(--gm-measure);
}

.entry-meta {
	color: var(--gm-text-secondary);
	font-size: var(--gm-text-sm);
}

/* ---------------------------------------------------------------------
 * Post list (index, archive, search) – STRUCTURAL, unstyled
 * ------------------------------------------------------------------ */

.post-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.post-list > li + li {
	margin-top: var(--gm-space-32);
}

.post-list .entry-title {
	font-size: var(--gm-text-h3);
	line-height: var(--gm-leading-h3);
}

.post-navigation,
.pagination {
	padding-block: var(--gm-space-32);
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--gm-space-16);
}