/*
 * The layout figure (README "The layout figure"): every section is a 150px numbered
 * rail beside a content field, 28px gutter, 56px page margin (20px below 900px).
 * Sections are separated by a single hairline — never cards, boxes or shadows.
 *
 * Inline sides are written as logical properties (inline-start/end), so dir="rtl" (the Arabic
 * page) mirrors the figure and moves the rail to the right edge without a second stylesheet.
 */

.wp-site-blocks {
	padding: 0;
}

.samira-main {
	display: flex;
	flex-direction: column;
}

/* Anchors clear the sticky header, plus the admin bar it sits under when logged in. */
.samira-section {
	padding: 88px var(--samira-page-margin);
	border-bottom: 1px solid var(--samira-hairline-strong);
	background: var(--samira-ground);
	color: var(--samira-text);
	scroll-margin-top: calc(var(--samira-header-height) + var(--wp-admin--admin-bar--height, 0px));
}

.samira-section--raised {
	--samira-ground: var(--samira-raised);
}

.samira-figure {
	display: grid;
	grid-template-columns: var(--samira-rail-width) minmax(0, 1fr);
	column-gap: var(--samira-rail-gutter);
	align-items: start;
}

.samira-rail {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-self: stretch;
	padding-inline-end: var(--samira-rail-padding);
	border-inline-end: 1px solid var(--samira-hairline);
	font-family: var(--samira-font-mono);
	font-size: 10px;
	font-weight: 600;
	line-height: 1.7;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.samira-rail__heading {
	color: var(--samira-accent);
}

.samira-rail__index,
.samira-rail__label {
	display: block;
}

.samira-rail__sep {
	display: none;
}

.samira-rail__note {
	color: var(--samira-rail-text);
	font-family: var(--samira-font-text);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.16em;
}

/* Deliberate grid breaks: hero and contact headlines span rail + field. */
.samira-figure__span {
	grid-column: 1 / -1;
}

.samira-figure__field {
	min-width: 0;
}

@media (max-width: 899.98px) {

	/* Mobile order (artboard 1b): FAQ comes before the Screen chapter and the contact form. */
	.samira-main > .wp-block-samira-screen,
	.samira-main > .wp-block-samira-contact {
		order: 1;
	}

	.samira-section {
		padding: 30px var(--samira-page-margin) 32px;
	}

	.samira-figure {
		grid-template-columns: minmax(0, 1fr);
	}

	.samira-rail {
		display: block;
		margin-bottom: 16px;
		padding-inline-end: 0;
		border-inline-end: 0;
		font-size: 9.5px;
		line-height: 1;
	}

	.samira-rail__index,
	.samira-rail__label,
	.samira-rail__sep {
		display: inline;
	}

	.samira-rail__note {
		display: none;
	}
}