/**
 * Hayder Voice — Layout
 * Container classes, grid system, flex utilities.
 */

@layer layout {

	/* ============================================================
	 * CONTAINERS
	 * ============================================================ */

	.container-sm {
		max-width: var(--container-sm);
		margin-inline: auto;
		padding-inline: var(--container-pad);
		container-type: inline-size;
		container-name: container-sm;
	}

	.container-md {
		max-width: var(--container-md);
		margin-inline: auto;
		padding-inline: var(--container-pad);
		container-type: inline-size;
		container-name: container-md;
	}

	.container-lg {
		max-width: var(--container-lg);
		margin-inline: auto;
		padding-inline: var(--container-pad);
		container-type: inline-size;
		container-name: container-lg;
	}

	.container-xl {
		max-width: var(--container-xl);
		margin-inline: auto;
		padding-inline: var(--container-pad);
		container-type: inline-size;
		container-name: container-xl;
	}

	/* ============================================================
	 * GRID SYSTEM
	 * ============================================================ */

	/* Base post grid */
	.post-grid {
		display: grid;
		gap: clamp(1.5rem, 3vw, 2.5rem);
	}

	/* 2-column grid */
	.post-grid--2col {
		grid-template-columns: repeat(2, 1fr);
	}

	/* 3-column grid */
	.post-grid--3col {
		grid-template-columns: repeat(3, 1fr);
	}

	/* 4-column grid */
	.post-grid--4col {
		grid-template-columns: repeat(4, 1fr);
	}

	/* Auto-fill responsive grid */
	.post-grid--auto {
		grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
	}

	/* Archive grid — CSS masonry (progressive enhancement) */
	.archive-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: clamp(1.5rem, 2.5vw, 2rem);
		align-items: start;
	}

	/* CSS masonry layout — only in supporting browsers */
	@supports (grid-template-rows: masonry) {
		.archive-grid {
			grid-template-rows: masonry;
		}
	}

	/* ============================================================
	 * FLEX UTILITIES
	 * ============================================================ */

	.flex { display: flex; }
	.flex-col { display: flex; flex-direction: column; }
	.flex-wrap { flex-wrap: wrap; }
	.flex-center { display: flex; align-items: center; justify-content: center; }
	.flex-between { display: flex; align-items: center; justify-content: space-between; }
	.flex-start { display: flex; align-items: flex-start; }
	.flex-end { display: flex; align-items: flex-end; }
	.items-center { align-items: center; }
	.items-start { align-items: flex-start; }
	.justify-center { justify-content: center; }
	.justify-between { justify-content: space-between; }
	.gap-1 { gap: var(--space-2); }
	.gap-2 { gap: var(--space-4); }
	.gap-3 { gap: var(--space-6); }
	.gap-4 { gap: var(--space-8); }

	/* ============================================================
	 * SECTION SPACING
	 * ============================================================ */

	.section {
		padding-block: clamp(4rem, 8vw, 8rem);
	}

	.section--sm {
		padding-block: clamp(2rem, 4vw, 4rem);
	}

	.section--lg {
		padding-block: clamp(6rem, 12vw, 12rem);
	}

	/* ============================================================
	 * IMG FRAME — aspect ratio containers
	 * ============================================================ */

	.img-frame {
		overflow: hidden;
		position: relative;
	}

	.img-frame--16-9  { aspect-ratio: 16 / 9; }
	.img-frame--4-3   { aspect-ratio: 4 / 3;  }
	.img-frame--3-2   { aspect-ratio: 3 / 2;  }
	.img-frame--1-1   { aspect-ratio: 1 / 1;  }
	.img-frame--hero  { aspect-ratio: 24 / 9;  }
	.img-frame--card  { aspect-ratio: 16 / 10; }

	/* ============================================================
	 * CONTENT VISIBILITY (off-screen optimization)
	 * ============================================================ */

	.cv-auto {
		content-visibility: auto;
		contain-intrinsic-size: auto 400px;
	}

} /* @layer layout */