/*
 * Tarot Arabi — layout primitives
 *
 * Containers, section rhythm, grids and flow helpers. All directional spacing
 * uses logical properties so the same markup works in RTL without overrides.
 */

/* ------------------------------------------------------------ Containers */
/* Design System §9 */

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

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

.ta-container--reading {
	max-inline-size: calc(var(--container-reading) + (var(--container-pad) * 2));
}

/* --------------------------------------------------------------- Sections */
/* Design System §11, §48, §60 — generous, uncompressed vertical rhythm */

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

.ta-section--tight {
	padding-block: var(--section-space-tight);
}

.ta-section--flush-top {
	padding-block-start: 0;
}

.ta-section--flush-bottom {
	padding-block-end: 0;
}

/* Background system (§48). Deep green is reserved for the few moments the spec
   allows it to dominate (final CTA, footer), never as a page-wide surface. */
.ta-section--surface {
	background-color: var(--color-surface);
}

.ta-section--alt {
	background-color: var(--color-surface-alt);
}

.ta-section--warm {
	background-color: var(--color-surface-warm);
}

.ta-section--deep {
	background-color: var(--color-surface-deep);
	color: var(--color-on-deep);
}

.ta-section--deep :is(h1, h2, h3, h4, h5, h6) {
	color: var(--color-on-deep);
}

.ta-section--deep :is(p, li) {
	color: var(--color-on-deep-muted);
}

/* ------------------------------------------------------------------ Flow */

.ta-stack {
	display: flex;
	flex-direction: column;
	gap: var(--ta-stack-gap, var(--space-6));
}

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

.ta-stack--lg {
	--ta-stack-gap: var(--space-10);
}

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

.ta-cluster--loose {
	gap: var(--space-4);
}

/* ------------------------------------------------------------------ Grid */ /* Design System §10 */

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

/* Editorial split: 5 / 7 (§10) */
.ta-grid--split {
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: start;
}

/* Editorial split, reversed: 7 / 5 */
.ta-grid--split-reverse {
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	align-items: start;
}

/* Even halves */
.ta-grid--halves {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Feature strip: repeat(4, 1fr) (§10) */
.ta-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Cards / learning paths: repeat(3, 1fr) (§10) */
.ta-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

/* Tablet: 3-column grids drop to 2, the feature strip becomes 2 × 2 (§10) */
@media (max-width: 1023px) {
	.ta-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

/* Mobile: single-column flow, split sections stack (§10) */
@media (max-width: 767px) {
	.ta-grid--4,
	.ta-grid--3,
	.ta-grid--2,
	.ta-grid--halves,
	.ta-grid--split,
	.ta-grid--split-reverse {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ------------------------------------------------------------ Media panel */
/* Design System §26 — large editorial media, 16:10 */

.ta-media-panel {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-2xl);
	box-shadow: var(--shadow-md);
	background-color: var(--color-surface-alt);
}

.ta-media-panel img {
	inline-size: 100%;
	block-size: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* --------------------------------------------------------- Reading widths */

.ta-reading {
	max-inline-size: var(--container-reading);
}

.ta-heading-block {
	max-inline-size: var(--container-heading);
}