/* ============================================================================
   Layout layer — containers, grid, section rhythm, page shell
   ============================================================================
   Load class: RENDER-CRITICAL. Enqueued directly after base.css.

   Everything is direction-agnostic: the grid and every offset use logical
   properties, so the identical rules serve Arabic (RTL) and English (LTR).
   There is deliberately NO `[dir="rtl"] .ma-something { float: right }` block —
   mirrored rules are the symptom of a layout that was written physically.
   ========================================================================= */

/* --- Containers ----------------------------------------------------------- */

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

.ma-container--wide {
	max-inline-size: var(--ma-container-wide);
}

.ma-container--narrow {
	max-inline-size: var(--ma-container-narrow);
}

/* --- Grid ----------------------------------------------------------------- */

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

/*
 * Auto-fit collections. `min()` guards the 320px viewport: without it a card
 * with a 22rem minimum overflows its container on the smallest screens.
 */
.ma-grid--cards {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.ma-grid--cards-sm {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.ma-grid--cards-lg {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
}

/* --- Section rhythm ------------------------------------------------------- */

.ma-section {
	padding-block: var(--ma-section-pad);
}

.ma-section--tight {
	padding-block: clamp(var(--ma-space-5), 2.5vw, var(--ma-space-6));
}

.ma-section--dark {
	background-color: var(--ma-dark-bg);
	color: var(--ma-on-dark);
}

.ma-section--wash {
	background-color: var(--ma-accent-wash);
}

.ma-section__header {
	display: flex;
	flex-direction: column;
	gap: var(--ma-space-2);
	margin-block-end: var(--ma-space-6);
}

/* --- Horizontal primitives ------------------------------------------------ */

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

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

/* --- Page shell ----------------------------------------------------------- */

.ma-main {
	display: block;
	min-block-size: 50vh;
}

.ma-header {
	position: sticky;
	top: 0;
	z-index: var(--ma-z-header);
	background-color: rgb(249 248 245 / 88%);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-block-end: var(--ma-border-width) solid rgb(185 200 195 / 35%);
	transition: background-color var(--ma-dur-base), box-shadow var(--ma-dur-base);
}

.ma-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ma-space-5);
	min-block-size: var(--ma-header-height);
}

.ma-header__brand {
	color: var(--ma-text-strong);
	font-weight: var(--ma-fw-semibold);
	font-size: var(--ma-fs-h4);
	text-decoration: none;
	letter-spacing: var(--ma-track-heading);
}

.ma-footer {
	padding-block: var(--ma-space-7);
	border-block-start: var(--ma-border-width) solid var(--ma-border);
}

.ma-footer__note {
	color: var(--ma-text-muted);
	font-size: var(--ma-fs-sm);
}

/* --- Listing entry -------------------------------------------------------- */

.ma-entry + .ma-entry {
	padding-block-start: var(--ma-space-6);
	border-block-start: var(--ma-border-width) solid var(--ma-border);
}

.ma-entry__title {
	margin: 0;
	font-size: var(--ma-fs-h3);
}

.ma-entry__excerpt {
	margin: var(--ma-space-3) 0 0;
	color: var(--ma-text-muted);
	max-inline-size: var(--ma-measure);
}

.ma-entry__title a {
	color: inherit;
	text-decoration: none;
}

.ma-entry__title a:hover {
	color: var(--ma-accent);
	text-decoration: underline;
}

.ma-empty {
	color: var(--ma-text-muted);
}

/* --- Responsive collapse -------------------------------------------------- */

@media (max-width: 47.99em) {
	.ma-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.ma-section__header {
		margin-block-end: var(--ma-space-6);
	}
}