/* ====================================================================
 * /about/ — the page that answers "who is this person"
 * --------------------------------------------------------------------
 * Audited at 12/20; see plan/about-page-audit.md. The writing was the
 * strongest thing on it and the design was barely there: an empty
 * labelled photo box mid-story, not one drawn mark or image anywhere,
 * and a life story rendered as nine identical headed prose blocks.
 * ==================================================================== */

/* ── Hero ─────────────────────────────────────────────────────────────
 * A personal-brand About page opened with no face. The portrait sits on
 * the inline-start — the right in RTL — so it is the first thing read. */
.alrasly-abouthero {
	display: grid;
	grid-template-columns: 15.5rem 1fr;
	gap: 2rem;
	align-items: center;
	margin-block-start: 1.5rem;
}
.alrasly-abouthero__portrait { margin: 0; }
.alrasly-abouthero__portrait img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 18%;
	border-radius: var(--wp--custom--radius--card, 12px);
	box-shadow: 0 18px 44px -26px rgba(0, 0, 0, 0.9);
}

/* The opening paragraph was a bordered block — the same device as the
   pull-quotes, so the page began by appearing to quote itself. It is
   just the lede now. */
.alrasly-abouthero .alrasly-entity--about {
	border: none !important;
	padding: 0 !important;
	background: none !important;
	font-size: 1.0625rem;
	line-height: 1.95;
	color: var(--wp--preset--color--text-2);
	margin: 0;
}
.alrasly-abouthero .alrasly-entity--about strong {
	color: var(--wp--preset--color--text);
	font-weight: 500;
}

/* ── The story ────────────────────────────────────────────────────────
 * Seven headings tell one account in order: the grocery shop, his
 * father, the thing he did not understand, accounting, the missing half,
 * being wrong, today. That ORDER is the argument, which is the one
 * condition under which a sequence device is earned rather than
 * decorative — so the beats get a spine and a mark, and the two headings
 * that are not story beats («اختصاراً», «وش أقدّم») deliberately do not. */
.alrasly-beat {
	position: relative;
	padding-inline-start: 2.15rem;
}
.alrasly-beat::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.42em;
	inline-size: 0.72rem;
	block-size: 0.72rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--ground);
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--accent);
}
/* The line runs from the mark down through the prose that belongs to
   this beat, stopping before the next heading. */
.alrasly-beat::after {
	content: "";
	position: absolute;
	inset-inline-start: 0.3rem;
	inset-block-start: 1.5em;
	block-size: calc(100% + 1.2em);
	inline-size: 1px;
	background: linear-gradient(to bottom, rgba(255, 178, 122, 0.4), rgba(255, 178, 122, 0));
}

/* ── The photograph inside the story ─────────────────────────────── */
.alrasly-shot {
	margin: 2rem 0;
	/* Sits inside the reading measure rather than beside it, so the eye does
	   not have to leave the column and come back. */
	max-inline-size: 26rem;
}
.alrasly-shot img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border-radius: var(--wp--custom--radius--card, 12px);
	box-shadow: 0 20px 48px -28px rgba(0, 0, 0, 0.9);
}

/* ── Pull-quotes ──────────────────────────────────────────────────────
 * These carried a 4px coloured border-inline-start, which the craft
 * floor refuses on a callout. The emphasis now comes from size and a
 * drawn quote mark — the thing the bar was standing in for. */
.alrasly-pull {
	position: relative;
	border: none !important;
	padding: 0.25rem 0 0.25rem 0 !important;
	padding-inline-start: 2.6rem !important;
	background: none !important;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	line-height: 1.6;
	color: var(--wp--preset--color--text);
	max-inline-size: 34rem;
}
.alrasly-pull::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.15em;
	inline-size: 1.65rem;
	block-size: 1.65rem;
	background-color: var(--wp--preset--color--accent);
	opacity: 0.85;
	/* A drawn quote mark, not a typographic one: the site's marks are all
	   authored SVG on one grid, and a glyph would be the odd one out. */
	-webkit-mask-image: var(--alrasly-quote);
	mask-image: var(--alrasly-quote);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}
:root {
	--alrasly-quote: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.4 5.4C6.2 6.7 4.2 9.4 4.2 12.9c0 3.2 1.9 5.7 4.6 5.7 2.2 0 3.8-1.6 3.8-3.7 0-2-1.4-3.5-3.3-3.5-.4 0-.8.1-1 .2.4-1.8 1.9-3.4 3.9-4.2zm10 0c-3.2 1.3-5.2 4-5.2 7.5 0 3.2 1.9 5.7 4.6 5.7 2.2 0 3.8-1.6 3.8-3.7 0-2-1.4-3.5-3.3-3.5-.4 0-.8.1-1 .2.4-1.8 1.9-3.4 3.9-4.2z'/%3E%3C/svg%3E");
}

/* ── «اختصاراً» — the evidence ────────────────────────────────────────
 * Credentials, reach, student count, location: the page's proof, and it
 * was the least emphatic thing on it. */
.alrasly-facts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* 16rem gave four columns at 1180px and squeezed each fact into 288px of
	   two-line text. Two columns let a credential sit on one line. */
	grid-template-columns: repeat(auto-fit, minmax(min(25rem, 100%), 1fr));
	gap: 0.6rem;
}
.alrasly-facts li {
	position: relative;
	margin: 0;
	/* LOGICAL, not physical. This was `padding: .85rem 2.35rem .85rem .95rem`,
	   which reserves the wide side on the RIGHT — correct in Arabic, where the
	   check mark sits at inline-start. On the English page inline-start is the
	   LEFT, so the mark stayed put and the text ran straight over it:
	   «Accountant, MBA» rendered as «countant, MBA». */
	padding-block: 0.85rem;
	padding-inline-start: 2.35rem;
	padding-inline-end: 0.95rem;
	border-radius: 10px;
	background-color: var(--wp--preset--color--card);
	border: 1px solid rgba(255, 255, 255, 0.06);
	font-size: 0.875rem;
	line-height: 1.75;
	color: var(--wp--preset--color--text-2);
}
.alrasly-facts li::marker { content: none; }
.alrasly-facts li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0.9rem;
	inset-block-start: 1.05rem;
	inline-size: 1.05rem;
	block-size: 1.05rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFB27A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.6l4.8 4.8L19.5 7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
}

/* ── «وش أقدّم» — the four things ─────────────────────────────────── */
.alrasly-offers {
	display: grid;
	/* Four cards in three columns strands one alone on the second row.
	   Two columns give a clean 2x2. */
	grid-template-columns: repeat(auto-fit, minmax(min(25rem, 100%), 1fr));
	gap: 0.9rem;
}
.alrasly-offer {
	display: flex;
	flex-direction: column;
	padding: 1.35rem 1.4rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--wp--custom--radius--card, 12px);
	background-color: var(--wp--preset--color--card);
	text-decoration: none;
	transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), border-color 180ms ease;
}
.alrasly-offer:hover,
.alrasly-offer:focus-visible {
	transform: translateY(-3px);
	border-color: rgba(255, 178, 122, 0.28);
	outline: none;
}
.alrasly-offer .alrasly-ico {
	inline-size: 1.5rem;
	block-size: 1.5rem;
	margin-block-end: 0.8rem;
	color: var(--wp--preset--color--text-3);
	transition: color 180ms ease, transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.alrasly-offer:hover .alrasly-ico {
	color: var(--wp--preset--color--accent);
	transform: translateX(-2px);   /* forward is left in RTL */
}
.alrasly-offer h3 {
	margin: 0 0 0.4rem;
	font-size: 1rem;
	font-weight: 500;
	color: var(--wp--preset--color--text);
}
.alrasly-offer p {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.75;
	color: var(--wp--preset--color--text-2);
}

/*
 * The flat variant: a card that is NOT a link.
 *
 * On /en/about/ the course card pointed at /academy/, the Arabic course page,
 * and there is no English one to point at — 4948 is the closed duplicate. The
 * card keeps its place because the course exists and is the main product; what
 * it loses is the affordance, because lifting on hover and then doing nothing
 * on click is worse than looking inert.
 *
 * So: no transform, no border tint, no icon colour change. Everything that says
 * "this responds to you" is switched off, and the note below says why.
 */
.alrasly-offer--flat,
.alrasly-offer--flat:hover {
	transform: none;
	border-color: rgba(255, 255, 255, 0.08);
	cursor: default;
}
.alrasly-offer--flat:hover .alrasly-ico {
	color: var(--wp--preset--color--text-3);
	transform: none;
}
.alrasly-offer__note {
	margin-block-start: 0.55rem !important;
	color: var(--wp--preset--color--text-3) !important;
	font-size: 0.75rem !important;
}

@media (max-width: 781px) {
	/* minmax(25rem,...) is a hard floor and cannot shrink below 400px, which
	   pushed 65px of horizontal overflow onto a 390px screen — on a page that
	   had none before. min() above fixes the tracks; these keep the images and
	   the quote inside the column too. */
	.alrasly-shot { max-inline-size: 100%; }
	.alrasly-pull { max-inline-size: 100%; }
	.alrasly-abouthero {
		grid-template-columns: 1fr;
		gap: 1.4rem;
		justify-items: start;
	}
	.alrasly-abouthero__portrait { max-inline-size: 13rem; }
	.alrasly-pull { font-size: 1.25rem; padding-inline-start: 2.2rem !important; }
	.alrasly-beat { padding-inline-start: 1.75rem; }
	.alrasly-shot { margin-block: 1.5rem; }
}