/* ====================================================================
 * /tools/ — the index
 * --------------------------------------------------------------------
 * The page listed the same seven tools twice: a routing table of
 * situations, then the same seven as full-width stacked blocks. The
 * table is gone and its situation lines now lead each card (see
 * build/scripts/tools-merge.php), which leaves one job here — stop the
 * cards being a column.
 *
 * Seven full-width rows meant scrolling to compare two tools. As a grid
 * the whole set is visible at once, which is what an index is for.
 * ==================================================================== */

.alrasly-toollist {
	display: grid;
	/* 20rem gives three columns at the 1180px content width, so the five
	   calculators land 3 + 2 rather than 4 + 1 with a lone card stranded
	   on its own row. The two assessments then fill a row cleanly too. */
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	gap: 0.9rem;
	align-items: stretch;
}

.alrasly-toolrow {
	display: flex !important;
	flex-direction: column;
	padding: 1.35rem 1.4rem !important;
	margin-top: 0 !important;
	border: 1px solid rgba(255, 255, 255, 0.08);
	position: relative;
	overflow: hidden;
	transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
	            border-color 180ms ease,
	            background-color 180ms ease;
}

/* A quiet accent edge on the inline-start — the right, in RTL — so the
   cards read as a set of routes rather than seven loose boxes. */
.alrasly-toolrow::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: 2px;
	background: linear-gradient(to bottom, rgba(255, 178, 122, 0.75), rgba(124, 58, 245, 0.4));
	opacity: 0;
	transition: opacity 180ms ease;
}

.alrasly-toolrow:hover,
.alrasly-toolrow:focus-visible {
	transform: translateY(-3px);
	border-color: rgba(255, 178, 122, 0.28) !important;
	outline: none !important;
}
.alrasly-toolrow:hover::before,
.alrasly-toolrow:focus-visible::before { opacity: 1; }

/* The mark. Same 24x24 grid and 1.7 stroke as the homepage cards, the
   course facts and the verdict marks inside the tools themselves, so the
   whole site reads as one hand. */
.alrasly-toolrow .alrasly-ico {
	inline-size: 1.5rem;
	block-size: 1.5rem;
	color: var(--wp--preset--color--text-3);
	margin-block-end: 0.85rem;
	transition: color 180ms ease, transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.alrasly-toolrow:hover .alrasly-ico {
	color: var(--wp--preset--color--accent);
	/* forward is a LEFT nudge in RTL — design-system.md rule 6 */
	transform: translateX(-2px);
}

/* The situation the visitor arrives with, lifted off the routing table.
   It leads, because people come with a problem and not a tool name. */
.alrasly-toolrow__kicker {
	margin: 0 0 0.3rem !important;
	font-size: 0.75rem !important;
	line-height: 1.6;
	color: var(--wp--preset--color--accent) !important;
}

.alrasly-toolrow > h3 {
	font-size: 1rem !important;
	margin-block-end: 0.45rem !important;
}

.alrasly-toolrow__desc {
	font-size: 0.8125rem !important;
	line-height: 1.75 !important;
	margin-block-end: 0.85rem !important;
	color: var(--wp--preset--color--text-2) !important;
}

/* Pinned to the foot so the meta line sits on one baseline across a row
   of cards whose descriptions differ in length. */
.alrasly-toolrow__meta {
	margin-block-start: auto !important;
	font-size: 0.75rem !important;
	color: var(--wp--preset--color--text-3) !important;
}

/* Scroll reveal, matching the homepage: the section fades, the cards
   cascade on transform only. Two nested opacity animations multiply, and
   a card at 0.5 inside a section at 0.5 renders at 0.25. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.alrasly-toollist > * {
			animation: alrasly-shift linear both;
			animation-timeline: view();
			animation-range: entry 4% cover 22%;
		}
		.alrasly-toollist > :nth-child(2) { animation-range: entry 1% cover 24%; }
		.alrasly-toollist > :nth-child(3) { animation-range: entry -2% cover 26%; }
		/* fill-mode keeps transform owned after the reveal, which would
		   leave the hover lift dead on every card it touched */
		.alrasly-toollist > :hover { animation: none; }
	}
}

@media (max-width: 600px) {
	.alrasly-toollist { grid-template-columns: 1fr; }
	/* 13px is fine in a three-up grid where the card is the unit of scan.
	   On a phone the card IS the page, so the description is body copy and
	   has to be read, not scanned. */
	.alrasly-toolrow__desc { font-size: 0.9375rem !important; }
	.alrasly-toolrow__kicker { font-size: 0.8125rem !important; }
}

/*
 * A card that is not a link.
 *
 * The "See the course" button on /en/tools/ pointed at /academy/, the Arabic
 * course page, and there is no English one — 4948 is the closed duplicate. It
 * keeps its place because the course exists and is the main product; what it
 * loses is the affordance, because a button that lifts on hover and does
 * nothing on click is worse than one that looks inert. Same treatment already
 * applied to the offer card on /en/about/.
 */
.alrasly-noroute {
	cursor: default;
	opacity: 0.72;
}
.alrasly-noroute:hover {
	transform: none;
	filter: none;
}
.alrasly-noroute__note {
	display: block;
	margin-block-start: 0.55rem;
	color: var(--wp--preset--color--text-3);
	font-size: 0.78rem;
	line-height: 1.7;
}