/**
 * About page (screens 45-47, TASK-030).
 * Mobile-first and logical-direction only. The shared zahra-shell layout remains owned by
 * layout.css. Values are transcribed from the approved bundled screens - mobile values as the
 * base rule, desktop values under the shared 1024px breakpoint, matching the Categories/
 * Brands/Contact index convention already in this stylesheet layer.
 */

.zahra-about__breadcrumb {
	display: flex;
	align-items: center;
	gap: 6px;
	block-size: 36px;
	border-block-end: 1px solid var(--zahra-color-line);
	color: var(--zahra-color-muted);
	font-size: 11px;
	text-decoration: none;
}

.zahra-about__breadcrumb a {
	color: var(--zahra-color-muted);
	text-decoration: none;
}

.zahra-about__breadcrumb [aria-current="page"] {
	color: var(--zahra-color-ink);
	font-weight: 600;
}

.zahra-about__hero {
	padding-block: 32px 34px;
	border-block-end: 1px solid var(--zahra-color-line);
}

.zahra-about__eyebrow {
	display: block;
	margin-block-end: 14px;
	color: var(--zahra-color-brand);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .08em;
}

.zahra-about__title {
	margin-block: 0;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.35;
	text-wrap: pretty;
}

.zahra-about__lead {
	margin-block: 16px 0;
	color: var(--zahra-color-ink-2);
	font-size: 15px;
	line-height: 2;
	text-wrap: pretty;
}

.zahra-about__hero-actions {
	margin-block-start: 22px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.zahra-about__hero-facts {
	display: none;
}

.zahra-about__fact-row {
	padding-block: 18px;
	border-block-end: 1px solid var(--zahra-color-line-2);
}

.zahra-about__fact-label {
	display: block;
	margin-block-end: 6px;
	color: var(--zahra-color-muted);
	font-size: 11.5px;
}

.zahra-about__fact-value {
	display: block;
	font-family: var(--zahra-font-mono);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.6;
}

.zahra-about-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-block-size: 48px;
	padding-inline: 22px;
	color: var(--zahra-color-surface);
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
	border: 1.5px solid transparent;
}

.zahra-about-btn--primary {
	background: var(--zahra-color-brand);
}

.zahra-about-btn--primary:hover {
	background: var(--zahra-color-brand-dark);
}

.zahra-about-btn--ghost {
	background: transparent;
	border-color: var(--zahra-color-ink);
	color: var(--zahra-color-ink);
}

.zahra-about__h2 {
	margin-block: 0 20px;
	font-size: 23px;
	font-weight: 700;
}

.zahra-about__body {
	margin-block: 0 0;
	color: var(--zahra-color-ink-2);
	font-size: 14.5px;
	line-height: 2;
	text-wrap: pretty;
}

.zahra-about__body + .zahra-about__body {
	margin-block-start: 14px;
}

.zahra-about__story {
	padding-block: 32px;
	border-block-end: 1px solid var(--zahra-color-line);
}

.zahra-about__intro {
	padding-block: 28px;
	border-block-end: 1px solid var(--zahra-color-line);
}

.zahra-about__offer {
	padding-block: 32px;
	border-block-end: 1px solid var(--zahra-color-line);
}

.zahra-about__offer-grid,
.zahra-about__diff-grid {
	display: flex;
	flex-direction: column;
	gap: 1px;
	background: var(--zahra-color-line);
	border: 1px solid var(--zahra-color-line);
}

.zahra-about__card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px 18px;
	background: var(--zahra-color-surface);
}

.zahra-about__card-n {
	font-family: var(--zahra-font-mono);
	color: var(--zahra-color-brand);
	font-size: 11.5px;
}

.zahra-about__card-title {
	margin-block: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.5;
}

.zahra-about__card-body {
	margin-block: 0;
	color: var(--zahra-color-ink-2);
	font-size: 13.5px;
	line-height: 1.8;
	text-wrap: pretty;
}

.zahra-about__brands {
	padding-block: 32px;
	border-block-end: 1px solid var(--zahra-color-line);
}

.zahra-about__brands-grid {
	margin-block-start: 22px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

.zahra-about__brand-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-block-size: 92px;
	padding: 16px;
	background: var(--zahra-color-surface);
	border: 1px solid var(--zahra-color-line);
	text-align: center;
}

.zahra-about__brand-name {
	font-size: 14px;
	font-weight: 700;
}

.zahra-about__brand-placeholder {
	color: var(--zahra-color-muted);
	font-size: 11px;
}

/*
 * Real owner-supplied logo (TASK-063, added here per chat instruction) - contain, never cover,
 * so the different natural aspect ratios of the supplied artwork are never cropped/stretched.
 */
.zahra-about__brand-logo {
	max-inline-size: 100%;
	max-block-size: 100%;
	object-fit: contain;
	display: block;
}

.zahra-about__audience {
	padding-block: 32px;
	border-block-end: 1px solid var(--zahra-color-line);
}

.zahra-about__audience-grid {
	margin-block-start: 22px;
	display: flex;
	flex-direction: column;
	gap: 1px;
	background: var(--zahra-color-line);
	border: 1px solid var(--zahra-color-line);
}

.zahra-about__diff {
	padding-block: 32px;
	border-block-end: 1px solid var(--zahra-color-line);
}

.zahra-about__statement {
	padding-block: 34px;
	background: var(--zahra-color-ink);
	border-block-end: 1px solid var(--zahra-color-line);
}

.zahra-about__statement-lead {
	margin-block: 0;
	color: var(--zahra-color-surface);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
	text-wrap: pretty;
}

.zahra-about__statement-body {
	margin-block: 14px 0;
	color: var(--zahra-color-on-dark);
	font-size: 14px;
	line-height: 1.9;
	text-wrap: pretty;
}

.zahra-about__closing {
	padding-block: 32px;
}

.zahra-about__closing-actions {
	margin-block-start: 22px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.zahra-about__closing-card {
	margin-block-start: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 18px;
	background: var(--zahra-color-surface);
	border: 1px solid var(--zahra-color-line);
}

.zahra-about__closing-card .zahra-about__fact-value {
	font-size: 14.5px;
}

/* -----------------------------------------------------------------------
 * Desktop - screen 45. Shared provisional breakpoint (layout.css, Q-013/Q-014).
 * --------------------------------------------------------------------- */
@media (min-width: 1024px) {

	.zahra-about__breadcrumb {
		gap: 8px;
		block-size: 38px;
		font-size: 11.5px;
	}

	.zahra-about__hero {
		padding-block: 70px 72px;
		display: grid;
		grid-template-columns: 1.1fr .9fr;
		gap: 64px;
		align-items: end;
	}

	.zahra-about__title {
		font-size: 46px;
		line-height: 1.3;
		letter-spacing: -.01em;
	}

	.zahra-about__lead {
		margin-block-start: 26px;
		max-inline-size: 560px;
		font-size: 16.5px;
	}

	.zahra-about__hero-actions {
		flex-direction: row;
	}

	.zahra-about__hero-facts {
		display: block;
		border-inline-start: 1px solid var(--zahra-color-line);
		padding-inline-start: 40px;
	}

	.zahra-about-btn {
		display: inline-flex;
		min-block-size: 0;
		padding: 14px 26px;
	}

	.zahra-about__h2 {
		font-size: 32px;
		margin-block-end: 34px;
	}

	.zahra-about__story {
		padding-block: 76px;
	}

	.zahra-about__story-text .zahra-about__body {
		max-inline-size: 720px;
	}

	.zahra-about__body {
		font-size: 15.5px;
	}

	.zahra-about__intro {
		padding-block: 60px;
	}

	.zahra-about__intro .zahra-about__body {
		max-inline-size: 720px;
	}

	.zahra-about__offer,
	.zahra-about__brands,
	.zahra-about__audience,
	.zahra-about__diff {
		padding-block: 76px;
	}

	.zahra-about__offer-grid,
	.zahra-about__diff-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
	}

	.zahra-about__audience-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}

	.zahra-about__card {
		padding: 30px 26px;
	}

	.zahra-about__card-title {
		font-size: 19px;
	}

	.zahra-about__card-body {
		font-size: 14px;
	}

	.zahra-about__brands-grid {
		margin-block-start: 32px;
		grid-template-columns: repeat(5, 1fr);
	}

	.zahra-about__brand-tile {
		min-block-size: 132px;
	}

	.zahra-about__brand-name {
		font-size: 16px;
	}

	.zahra-about__statement {
		padding-block: 80px;
	}

	.zahra-about__statement-lead {
		max-inline-size: 720px;
		font-size: 30px;
	}

	.zahra-about__statement-body {
		max-inline-size: 640px;
		font-size: 15.5px;
	}

	.zahra-about__closing {
		padding-block: 80px;
		display: grid;
		grid-template-columns: 1.1fr .9fr;
		gap: 64px;
		align-items: start;
	}

	.zahra-about__closing-actions {
		flex-direction: row;
	}

	.zahra-about__closing-card {
		margin-block-start: 0;
		padding: 30px 32px;
		gap: 22px;
	}

	.zahra-about__closing-card .zahra-about__fact-value {
		font-size: 15px;
	}
}