/*
|--------------------------------------------------------------------------
| EventFlow Design System — Layout Engine
| EFDS-001
|--------------------------------------------------------------------------
*/

/* ==========================================================
   Containers
   ========================================================== */

.ef-container {
	width: min(
		calc(100% - (var(--ef-page-gutter) * 2)),
		var(--ef-container-lg)
	);
	margin-inline: auto;
}

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

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

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

.ef-container--xl,
.ef-container--wide {
	max-width: var(--ef-container-xl);
}

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

/* ==========================================================
   Sections
   ========================================================== */

.ef-section {
	position: relative;
	padding-block: var(--ef-section-space-md);
}

.ef-section--sm {
	padding-block: var(--ef-section-space-sm);
}

.ef-section--lg {
	padding-block: var(--ef-section-space-lg);
}

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

.ef-section--full {
	width: 100%;
}

/* ==========================================================
   Stack
   ========================================================== */

.ef-stack {
	display: flex;
	flex-direction: column;
	gap: var(--ef-space-5);
}

.ef-stack--sm {
	gap: var(--ef-space-3);
}

.ef-stack--lg {
	gap: var(--ef-space-7);
}

/* ==========================================================
   Cluster
   ========================================================== */

.ef-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ef-space-4);
}

.ef-cluster--between {
	justify-content: space-between;
}

/* ==========================================================
   Grid
   ========================================================== */

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

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

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

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

.ef-grid--12 {
	grid-template-columns: repeat(12, minmax(0, 1fr));
}

/* ==========================================================
   Span Utilities
   ========================================================== */

.ef-span-3 {
	grid-column: span 3;
}

.ef-span-4 {
	grid-column: span 4;
}

.ef-span-6 {
	grid-column: span 6;
}

.ef-span-8 {
	grid-column: span 8;
}

.ef-span-9 {
	grid-column: span 9;
}

.ef-span-12 {
	grid-column: span 12;
}

/* ==========================================================
   Split Layouts
   ========================================================== */

.ef-layout-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--ef-space-7);
	align-items: center;
}

.ef-layout-split--wide {
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
}

.ef-layout-split--reverse {
	grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr);
}

/* ==========================================================
   Sidebar Layout
   ========================================================== */

.ef-layout-sidebar {
	display: grid;
	grid-template-columns: minmax(14rem, 0.32fr) minmax(0, 1fr);
	gap: var(--ef-space-7);
	align-items: start;
}

/* ==========================================================
   Full Bleed
   ========================================================== */

.ef-full-bleed {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

/* ==========================================================
   Frame / Aspect Ratio
   ========================================================== */

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

.ef-frame--16x9 {
	aspect-ratio: 16 / 9;
}

.ef-frame--4x3 {
	aspect-ratio: 4 / 3;
}

.ef-frame--square {
	aspect-ratio: 1;
}

.ef-frame > img,
.ef-frame > video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================================
   Alignment
   ========================================================== */

.ef-align-start {
	align-items: start;
}

.ef-align-center {
	align-items: center;
}

.ef-align-end {
	align-items: end;
}

/* ==========================================================
   Responsive
   ========================================================== */

@media (max-width: 64rem) {

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

	.ef-grid--12 {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.ef-span-8,
	.ef-span-9,
	.ef-span-12 {
		grid-column: 1 / -1;
	}

	.ef-layout-split,
	.ef-layout-split--wide,
	.ef-layout-split--reverse,
	.ef-layout-sidebar {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 40rem) {

	.ef-section {
		padding-block: var(--ef-section-space-sm);
	}

	.ef-grid--2,
	.ef-grid--3,
	.ef-grid--4,
	.ef-grid--12 {
		grid-template-columns: 1fr;
	}

	.ef-span-3,
	.ef-span-4,
	.ef-span-6,
	.ef-span-8,
	.ef-span-9,
	.ef-span-12 {
		grid-column: auto;
	}

	.ef-cluster {
		align-items: stretch;
		flex-direction: column;
	}
}

/* ==========================================================
   C6.7 — Responsive Visual Polish
   ========================================================== */

@media (max-width: 64rem) {

	.ef-container {
		width: min(
			100% - calc(var(--ef-page-gutter) * 2),
			var(--ef-container)
		);
	}

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

	.ef-feature {
		gap: var(--ef-space-5);
	}

	.ef-section {
		padding-block: var(--ef-section-space-md);
	}
}

@media (max-width: 40rem) {

	.ef-container {
		width: min(
			100% - calc(var(--ef-page-gutter) * 2),
			var(--ef-container)
		);
	}

	.ef-card-grid {
		grid-template-columns: 1fr;
	}

	.ef-section {
		padding-block: var(--ef-section-space-sm);
	}

	.ef-feature {
		grid-template-columns: 1fr;
	}

	.ef-panel {
		border-radius: var(--ef-radius-md);
	}

	.ef-institutional-header {
		padding-block:
			var(--ef-space-6)
			var(--ef-space-5);
	}
}

/* ==========================================================
   EFDS Gutenberg Content Canvas
   ----------------------------------------------------------
   Canonical WordPress/Gutenberg content geometry.

   The canvas itself is unrestricted.

   normal    -> editorial content width
   alignwide -> institutional width
   alignfull -> full available width
   ========================================================== */

.ef-gutenberg-content {
    width: 100%;
    max-width: none;
}


/*
 * All top-level Gutenberg blocks use border-box geometry.
 */
.ef-gutenberg-content > * {
    box-sizing: border-box;
}


/*
 * Default editorial blocks.
 *
 * Reading measure is applied to the blocks themselves rather
 * than to the entire Gutenberg document.
 */
.ef-gutenberg-content
> :not(.alignwide):not(.alignfull) {
    width: min(
        calc(100% - (var(--ef-page-gutter) * 2)),
        var(--ef-content)
    );

    max-width: var(--ef-content);

    margin-left: auto;
    margin-right: auto;
}


/*
 * Gutenberg wide alignment.
 */
.ef-gutenberg-content > .alignwide {
    width: min(
        calc(100% - (var(--ef-page-gutter) * 2)),
        var(--ef-container-xl)
    );

    max-width: var(--ef-container-xl);

    margin-left: auto;
    margin-right: auto;

    transform: none;
}


/*
 * Gutenberg full alignment.
 *
 * No breakout mathematics are required because the parent
 * canvas is already unrestricted.
 */
.ef-gutenberg-content > .alignfull {
    width: 100%;
    max-width: none;

    margin-left: 0;
    margin-right: 0;

    transform: none;
}


/*
 * Preserve EventFlow prose typography without allowing the
 * old prose measure to constrain the complete document.
 */
.ef-prose.ef-gutenberg-content {
    max-width: none;
}


/*
 * Mobile retains the same geometry contract.
 */
@media (max-width: 48rem) {

    .ef-gutenberg-content
    > :not(.alignwide):not(.alignfull),
    .ef-gutenberg-content > .alignwide {
        width: calc(
            100% - (var(--ef-page-gutter) * 2)
        );
    }
}