/**
 * Asmae — pages
 *
 * Layout only. If a visual decision appears in this file, it belongs in
 * tokens, primitives or components instead.
 *
 * Design System v2, sections 6 and 7.
 *
 * @package Asmae
 */

/* ==================================================================
   Hero — discovery first
   Light ground, dark headline. The category cards are the primary call
   to action; search sits beneath them, introduced by a quiet label.
   ================================================================== */

.asmae-hero {
	border-radius: 0;
	padding: var(--asmae-space-6) var(--asmae-space-3) var(--asmae-space-5);
	margin-bottom: 0;
	color: var(--asmae-ink-800);
	text-align: center;
	position: relative;
	isolation: isolate;
}

/*
 * The ground spans the viewport while the content keeps the container
 * measure. Physical properties on purpose: transform is not direction-
 * aware, so the logical version of this trick breaks under RTL.
 */
.asmae-hero::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset-block: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	background:
		radial-gradient(620px 420px at 88% -8%, rgba(124, 92, 255, 0.10), transparent 65%),
		radial-gradient(520px 420px at 6% 108%, rgba(124, 92, 255, 0.08), transparent 65%),
		linear-gradient(180deg, #f4f1ff 0%, #fbfaff 62%, #ffffff 100%);
	pointer-events: none;
}

.asmae-hero__headline {
	font-family: var(--asmae-font-display);
	font-size: var(--asmae-size-display);
	font-weight: 700;
	line-height: var(--asmae-lh-display);
	margin: 0 auto var(--asmae-space-2);
	color: var(--asmae-ink-800);
}

.asmae-hero__lede {
	margin: 0 auto var(--asmae-space-5);
	max-width: 56ch;
	font-size: var(--asmae-size-body);
	color: var(--asmae-ink-600);
}

/* --- Category cards: the primary CTA -------------------------------
 *
 * No icons. A line-drawn glyph set is dead weight next to eight Arabic
 * labels — the count and the promise below the title do the work an icon
 * was standing in for, and they carry information rather than decoration.
 *
 * Two rows of four. Eight cards on one line leaves each label ~110px, and
 * "أسماء من القرآن" wraps.
 * ------------------------------------------------------------------ */

.asmae-cta {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--asmae-space-3);
	max-width: 1000px;
	margin: 0 auto;
	text-align: right;
}

.asmae-cta__item {
	position: relative;
	display: grid;
	align-content: start;
	gap: 2px;
	padding: var(--asmae-space-3) var(--asmae-space-4) var(--asmae-space-4);
	background: #fff;
	border: 1px solid var(--asmae-ink-100);
	border-radius: var(--asmae-r-md);
	box-shadow: var(--asmae-e-card);
	overflow: hidden;
	transition: box-shadow var(--asmae-fast) var(--asmae-ease),
	            border-color var(--asmae-fast) var(--asmae-ease);
}

/* The accent bar unrolls from the leading edge on hover. */
.asmae-cta__item::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 4px;
	background: linear-gradient(90deg, #7c5cff 0%, #e9679a 100%);
	transform: scaleX(0);
	transform-origin: 100% 50%;
	transition: transform var(--asmae-slow) var(--asmae-ease);
}

.asmae-cta__item:hover,
.asmae-cta__item:focus-visible {
	border-color: transparent;
	box-shadow: var(--asmae-e-card-hover);
}

.asmae-cta__item:hover::before,
.asmae-cta__item:focus-visible::before {
	transform: scaleX(1);
}

/* The count sits opposite the title, at the closing edge of the row. */
.asmae-cta__count {
	font-size: var(--asmae-size-micro);
	font-variant-numeric: tabular-nums;
	color: var(--asmae-ink-400);
	text-align: end;
}

.asmae-cta__label {
	font-family: var(--asmae-font-display);
	font-size: var(--asmae-size-subtitle);
	font-weight: 700;
	line-height: 1.6;
	color: var(--asmae-primary-600);
}

.asmae-cta__desc {
	font-size: var(--asmae-size-small);
	line-height: 1.65;
	color: var(--asmae-ink-400);
}

/* --- Search, demoted ----------------------------------------------- */

.asmae-hero__aside {
	margin: var(--asmae-space-5) 0 var(--asmae-space-2);
	font-size: var(--asmae-size-small);
	color: var(--asmae-ink-400);
}

.asmae-search {
	position: relative;
	display: flex;
	gap: var(--asmae-space-2);
	max-width: 560px;
	margin: 0 auto;
	padding: var(--asmae-space-1);
	background: #fff;
	border: 1px solid var(--asmae-ink-100);
	border-radius: var(--asmae-r-md);
	box-shadow: var(--asmae-e-card);
}

.asmae-search__field {
	border: 0;
	min-height: 48px;
	background: transparent;
}

.asmae-search__field:focus {
	outline-offset: -2px;
}

.asmae-search__submit {
	min-height: 48px;
	padding: 0 var(--asmae-space-4);
	border: 0;
	border-radius: var(--asmae-r-sm);
	background: var(--asmae-primary-600);
}

.asmae-search__submit:hover {
	background: var(--asmae-primary-700);
}

/* ==================================================================
   Single name page
   ================================================================== */

.asmae-page .asmae-hero {
	background: none;
	color: inherit;
	padding: 0 0 var(--asmae-space-4);
	margin-bottom: var(--asmae-space-4);
	border-bottom: 1px solid var(--asmae-ink-100);
	text-align: start;
	border-radius: 0;
}

.asmae-page .asmae-hero::before,
.asmae-page .asmae-hero::after {
	display: none;
}

.asmae-gender {
	display: inline-block;
	margin-bottom: var(--asmae-space-2);
	padding: 4px var(--asmae-space-3);
	border-radius: 999px;
	background: var(--asmae-ink-050);
	color: var(--asmae-ink-600);
	font-size: var(--asmae-size-micro);
	font-weight: 600;
}

.asmae-name {
	font-family: var(--asmae-font-display);
	font-size: var(--asmae-size-display);
	font-weight: 700;
	line-height: var(--asmae-lh-display);
	color: var(--asmae-ink-800);
	margin: 0;
}

.asmae-latin {
	margin: 0;
	font-size: var(--asmae-size-micro);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--asmae-ink-400);
	text-align: start;
}

.asmae-lede {
	margin: var(--asmae-space-3) 0 0;
	max-width: 58ch;
	font-size: var(--asmae-size-body);
	color: var(--asmae-ink-600);
}

/* ==================================================================
   Archives and search results
   ================================================================== */

.asmae-archive-head {
	margin-bottom: var(--asmae-space-5);
	padding-bottom: var(--asmae-space-4);
	border-bottom: 1px solid var(--asmae-ink-100);
}

.asmae-archive-intro {
	margin: 0;
	max-width: 62ch;
	color: var(--asmae-ink-600);
}

.asmae-archive-count {
	display: inline-block;
	margin: var(--asmae-space-3) 0 0;
	padding: 4px var(--asmae-space-3);
	border-radius: 999px;
	background: var(--asmae-primary-100);
	color: var(--asmae-primary-700);
	font-size: var(--asmae-size-micro);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* ==================================================================
   Homepage sections
   Identity comes from combining band, content shape and accent — not
   from bespoke styling per section.
   ================================================================== */

/* The two anchors get the larger gap. Twice per page, and that is what
   marks the spine. */
.asmae-block--anchor {
	margin-bottom: var(--asmae-anchor);
}

.asmae-block--featured {
	margin-bottom: var(--asmae-anchor);
}

/* More ways to browse — the plainest section, by design */
.asmae-ways {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: var(--asmae-space-3);
	align-items: start;
}

.asmae-way {
	padding: var(--asmae-space-3) var(--asmae-space-4);
}

.asmae-way__title {
	margin: 0 0 var(--asmae-space-2);
	padding-bottom: var(--asmae-space-2);
	border-bottom: 1px solid var(--asmae-ink-100);
	font-size: var(--asmae-size-micro);
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--asmae-ink-400);
}

.asmae-band__note {
	margin: 0 0 var(--asmae-space-3);
	font-family: var(--asmae-font-scripture);
	font-size: 1.05rem;
	color: var(--asmae-green-600);
}

/* ==================================================================
   Footer navigation
   ================================================================== */

.asmae-footer-nav {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--asmae-space-6) var(--asmae-space-5);
	max-width: var(--asmae-max);
	margin: 0 auto;
	padding: var(--asmae-space-6) var(--asmae-space-4);
	font-size: var(--asmae-size-small);
	line-height: 2;
}

.asmae-footer-nav h3 {
	margin: 0 0 var(--asmae-space-3);
	padding-bottom: var(--asmae-space-2);
	border-bottom: 1px solid var(--asmae-ink-100);
	font-family: var(--asmae-font-display);
	font-size: var(--asmae-size-body);
	font-weight: 700;
	letter-spacing: 0;
	color: var(--asmae-ink-800);
}

.asmae-footer-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 2;
}

.asmae-footer-nav li {
	margin-bottom: var(--asmae-space-2);
	break-inside: avoid;
}

.asmae-footer-nav a:hover {
	color: var(--asmae-primary-600);
}

/* ==================================================================
   Mobile
   Optimised, not merely responsive.
   ================================================================== */

@media (max-width: 640px) {

	.asmae-page {
		padding: var(--asmae-space-4) var(--asmae-space-3) var(--asmae-space-5);
	}

	.asmae-hero {
		padding: var(--asmae-space-5) var(--asmae-space-3);
		border-radius: var(--asmae-r-md);
	}

	/* Field and button stack; the button stays full width and thumb-sized. */
	.asmae-search {
		flex-direction: column;
		background: none;
		border: 0;
		box-shadow: none;
		padding: 0;
	}

	.asmae-search__field,
	.asmae-search__submit {
		width: 100%;
		border-radius: var(--asmae-r-md);
	}

	.asmae-search__field {
		box-shadow: var(--asmae-e-2);
	}

	/* Names are short: two columns, never one. One column wastes half the
	   screen and doubles the scroll. */
	.asmae-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--asmae-space-2);
	}

	/* The alphabet keeps all 28 visible — that is its entire value. */
	.asmae-letters {
		grid-template-columns: repeat(auto-fill, 48px);
		justify-content: space-between;
	}

	.asmae-letter {
		width: 48px;
		height: 48px;
		font-size: 1.3rem;
	}

	.asmae-sep {
		margin-block: var(--asmae-space-5);
	}

	.asmae-roots {
		grid-template-columns: repeat(2, 1fr);
	}

	.asmae-collections,
	.asmae-ways {
		grid-template-columns: 1fr;
	}

	/*
	 * The CTA panel dissolves into separate cards. Six cells squeezed into
	 * one strip at 360px would put the labels below the legible floor.
	 */
	.asmae-cta {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--asmae-space-2);
	}

	.asmae-cta__item {
		padding: var(--asmae-space-3);
	}

	.asmae-cta__desc {
		display: none;
	}

	.asmae-collection::before {
		font-size: 7rem;
	}

	/* The featured bar wraps rather than shrinking its type. */
	.asmae-featured__gloss {
		padding-inline-start: 0;
		border-inline-start: 0;
		flex-basis: 100%;
	}

	.asmae-facts {
		grid-template-columns: repeat(2, 1fr);
	}

	.asmae-footer-nav ul {
		columns: 1;
	}
}

/* ==================================================================
   Responsive ladder
   Three breakpoints, each solving a specific failure rather than
   scaling everything down uniformly.
   ================================================================== */

/* Tablet — the seven-cell CTA strip stops fitting first. */
@media (max-width: 1024px) {

	.asmae-cta {
		grid-template-columns: repeat(3, 1fr);
	}

	.asmae-assure {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--asmae-space-4) var(--asmae-space-3);
	}

	.asmae-assure__item:nth-child(odd) {
		border-inline-start: 0;
	}
}

/* Small tablet — paired panels stop being peers and stack. */
@media (max-width: 860px) {

	.asmae-pair {
		grid-template-columns: 1fr;
	}

	.asmae-cta {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Phone — the strip dissolves into cards; nothing is merely shrunk. */
@media (max-width: 640px) {

	.asmae-head {
		gap: var(--asmae-space-2);
	}

	.asmae-more a {
		font-size: var(--asmae-size-micro);
	}

	.asmae-assure {
		grid-template-columns: 1fr;
		gap: var(--asmae-space-3);
		padding: var(--asmae-space-3);
	}

	.asmae-assure__item {
		border-inline-start: 0;
		padding-inline: 0;
	}

	.asmae-assure__item + .asmae-assure__item {
		border-block-start: 1px solid var(--asmae-ink-100);
		padding-block-start: var(--asmae-space-3);
	}

	.asmae-pair {
		padding-inline: var(--asmae-space-3);
	}

	.asmae-hero {
		padding-block: var(--asmae-space-5) var(--asmae-space-4);
	}
}

/* Narrow phone — two columns is the floor for name cards. */
@media (max-width: 380px) {

	.asmae-letters {
		grid-template-columns: repeat(auto-fill, 44px);
	}

	.asmae-letter {
		width: 44px;
		height: 44px;
		font-size: 1.15rem;
	}
}