/* ====================================================================
 * The articles index
 * --------------------------------------------------------------------
 * The index was a title, a date and an excerpt in a plain box. No cover,
 * no image, nothing to look at — and on a site whose other pages now
 * carry a whole drawn vocabulary, the blog read as the part nobody had
 * got to yet.
 *
 * The covers are figures, not photographs, and inc/post-cover.php says
 * why. What matters here is that a cover is ABOUT its article: a piece
 * on debt gets the ladder, one on compounding gets the curve. A real
 * featured image always takes precedence.
 * ==================================================================== */

.alrasly-articles {
	display: grid;
	gap: 1rem;
	max-inline-size: 1180px;
	margin-inline: auto;
}

/* ── The cover ────────────────────────────────────────────────────────
 * A field the figure is drawn ON, rather than a rectangle with a picture
 * inside it. The gradient is off-axis so the panel has a light source,
 * and the figure sits large and cropped — a diagram at poster scale
 * rather than an icon floated in the middle. */
.alrasly-cover {
	position: relative;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--card, 12px);
	background:
		radial-gradient(120% 140% at 88% 6%, rgba(124, 58, 245, 0.55), transparent 62%),
		radial-gradient(90% 120% at 6% 96%, rgba(255, 178, 122, 0.16), transparent 60%),
		linear-gradient(158deg, #221A54, var(--wp--preset--color--ground) 76%);
}

/* A faint rule grid, so the figure reads as something measured rather
   than a shape on a gradient. Masked out where the figure sits. */
.alrasly-cover--drawn::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 34px 34px;
	-webkit-mask-image: radial-gradient(85% 80% at 70% 55%, #000 25%, transparent 80%);
	mask-image: radial-gradient(85% 80% at 70% 55%, #000 25%, transparent 80%);
}

.alrasly-cover__fig {
	position: absolute;
	/* Cropped at the edges on purpose: a figure that fits neatly inside its
	   panel reads as an icon, one that runs off it reads as a diagram. */
	inset-block-end: -6%;
	inset-inline-start: -8%;
	inline-size: 88%;
	block-size: auto;
	color: var(--wp--preset--color--accent);
	opacity: 0.92;

	filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45));
}

/* Each figure gets its own hue so an index of several articles does not
   read as one repeated picture. */
.alrasly-cover[data-figure="debt"] .alrasly-cover__fig,
.alrasly-cover[data-figure="tiers"] .alrasly-cover__fig { color: #A79AD9; }
.alrasly-cover[data-figure="risk"] .alrasly-cover__fig { color: #FFB27A; }
.alrasly-cover[data-figure="goal"] .alrasly-cover__fig,
.alrasly-cover[data-figure="balance"] .alrasly-cover__fig { color: #C9BEEF; }

/* vector-effect applies to the SHAPES, not to the <svg> that contains them.
   Setting it on the svg did nothing, so the 1.1 stroke was multiplied by the
   ~32x scale of a full-width cover and came out as a fat band. On the paths it
   holds a constant screen width, which is what makes this read as a drawn
   diagram at every size instead of a zoomed icon. */
.alrasly-cover__fig path,
.alrasly-cover__fig rect,
.alrasly-cover__fig circle {
	vector-effect: non-scaling-stroke;
	/* With non-scaling-stroke the width is in SCREEN pixels, so it has to be
	   set per context: the authored 1.1 came out as a hairline on a full-width
	   cover, having previously come out as a fat band when it was scaling. */
	stroke-width: 2px;
}
.alrasly-cover--lead .alrasly-cover__fig path,
.alrasly-cover--lead .alrasly-cover__fig rect,
.alrasly-cover--lead .alrasly-cover__fig circle { stroke-width: 3px; }
.alrasly-postcover .alrasly-cover__fig path,
.alrasly-postcover .alrasly-cover__fig rect,
.alrasly-postcover .alrasly-cover__fig circle { stroke-width: 3px; }

.alrasly-cover--photo img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* ── The lead article ─────────────────────────────────────────────────
 * The newest piece is structurally different, not just first. A block
 * query loop cannot express that, which is why the index is rendered in
 * PHP. With one article published this is the whole page, and it reads
 * as a deliberate front page rather than a list with one row in it. */
.alrasly-article__link {
	display: block;
	text-decoration: none;
	color: inherit;
	border-radius: var(--wp--custom--radius--card, 12px);
}

.alrasly-article--lead .alrasly-article__link {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 2rem;
	align-items: center;
}
/* 4/3 made the lead card taller than its own text and left a well of
   empty space beside it. */
.alrasly-article--lead .alrasly-cover { aspect-ratio: 16 / 10; }
.alrasly-article--lead .alrasly-article__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.75rem, 3.2vw, 2.6rem);
	line-height: 1.22;
	font-weight: 600;
	margin: 0 0 0.75rem;
	color: var(--wp--preset--color--text);
	letter-spacing: -0.01em;
}
.alrasly-article--lead .alrasly-article__excerpt {
	font-size: 1rem;
	line-height: 1.9;
	margin: 0 0 1rem;
	color: var(--wp--preset--color--text-2);
	max-inline-size: 32rem;
}

/* ── The run beneath ──────────────────────────────────────────────── */
.alrasly-article--row .alrasly-article__link {
	display: grid;
	grid-template-columns: 12rem 1fr;
	gap: 1.35rem;
	align-items: center;
	padding: 0.9rem;
	border: 1px solid rgba(255, 255, 255, 0.07);
	background-color: var(--wp--preset--color--card);
	transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), border-color 200ms ease;
}
.alrasly-article--row .alrasly-cover { aspect-ratio: 16 / 10; }
.alrasly-article--row .alrasly-article__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.15rem;
	line-height: 1.5;
	font-weight: 500;
	margin: 0 0 0.4rem;
	color: var(--wp--preset--color--text);
}
.alrasly-article--row .alrasly-article__excerpt {
	font-size: 0.875rem;
	line-height: 1.8;
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--text-2);
}

.alrasly-article__meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--text-3);
	font-variant-numeric: tabular-nums;
}

/* One interaction, the same everywhere: the card lifts and the figure
   drifts a little further into frame. */
.alrasly-article__link:hover .alrasly-cover__fig,
.alrasly-article__link:focus-visible .alrasly-cover__fig {
	transform: translate(-2%, -3%) scale(1.03);
}
.alrasly-cover__fig { transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1); }
.alrasly-article--row .alrasly-article__link:hover,
.alrasly-article--row .alrasly-article__link:focus-visible {
	transform: translateY(-3px);
	border-color: rgba(255, 178, 122, 0.3);
	outline: none;
}
.alrasly-article--lead .alrasly-article__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 4px;
}

.alrasly-articles__empty {
	color: var(--wp--preset--color--text-2);
	font-size: 1rem;
}
.alrasly-articles__pages {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-block-start: 2rem;
}
.alrasly-articles__pages a,
.alrasly-articles__pages span {
	min-inline-size: 44px;
	min-block-size: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-inline: 0.75rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: var(--wp--preset--color--text-2);
	text-decoration: none;
	font-size: 0.9rem;
}
.alrasly-articles__pages .current {
	background-color: rgba(255, 178, 122, 0.14);
	border-color: rgba(255, 178, 122, 0.42);
	color: var(--wp--preset--color--accent);
}

/* ── The single article ───────────────────────────────────────────────
 * Leads with the same cover the index showed, so arriving from the index
 * feels like opening the thing you clicked rather than landing somewhere
 * unrelated. */
/* The banner sits on the ARTICLE'S OWN MEASURE, not the full 1180px column.
   Two reasons, and the second is the one that mattered. A hero the width of the
   prose leads into the reading rather than announcing a landing page. And the
   figures are drawn 3:2, so a 21/9 banner could never be filled by one: measured
   full width, the figure came out 692px tall inside a 506px panel — overflowing
   top and bottom while leaving 236px of dead space beside it. 16/10 on the
   measure is the proportion the figures were composed for. */
.alrasly-postcover {
	margin-block-end: 2rem;
	max-inline-size: 41.25rem;
	margin-inline: auto;
}
.alrasly-postcover .alrasly-cover { aspect-ratio: 16 / 10; }

@media (max-width: 900px) {
	.alrasly-article--lead .alrasly-article__link { grid-template-columns: 1fr; gap: 1.15rem; }
	.alrasly-article--lead .alrasly-cover { aspect-ratio: 16 / 10; }
	.alrasly-postcover .alrasly-cover { aspect-ratio: 16 / 10; }
}

@media (max-width: 600px) {
	/* The 12rem cover column cannot shrink and would overflow a 390px
	   screen; stack instead. */
	.alrasly-article--row .alrasly-article__link { grid-template-columns: 1fr; gap: 0.9rem; }
	.alrasly-article--row .alrasly-cover { aspect-ratio: 16 / 9; }
}

@media (prefers-reduced-motion: reduce) {
	.alrasly-cover__fig { transition: none; }
	.alrasly-article__link:hover .alrasly-cover__fig { transform: none; }
}

/* ── The article header sits on ONE measure ──────────────────────────
 * The prose was already 660px, but the title and date ran the full 1180px
 * column. Putting the banner on the measure made that visible: the title
 * overhung the banner by 260px. Aligning only the date would have moved the
 * misalignment rather than removed it, so the whole header — title, banner,
 * date, byline — now shares the column the article is actually read in.
 *
 * The date keeps its inline-start edge (the right, in RTL) on that measure
 * rather than centring, so it lines up with the title above it. */
body.single .wp-block-post-title,
body.single .wp-block-post-date {
	max-inline-size: 41.25rem;
	margin-inline: auto;
}
body.single .wp-block-post-date {
	inline-size: 41.25rem;
	max-inline-size: 100%;
}