/*
 * home.css - the Zahra homepage.
 *
 * LAYER 5, page-scoped. Loaded ONLY on the front page (see inc/enqueue.php): none of it is of
 * any use on another route, unlike the product card, which every catalogue surface reuses.
 *
 * It owns the homepage SECTIONS and nothing else. It does NOT own - and must never restate -
 * the product card, the header or the footer. The two product strips are plain grids around
 * the canonical card from product-card.css; every card rule stays in that file.
 *
 * PROVENANCE
 *   desktop : screens/01-home-desktop.html (AR_Home / AR_Hero)
 *             hero band 620px; sections at 48px/60px (44px on the tinted bands);
 *             category grid repeat(5, 1fr) at 16px with 4:3 media; brand grid repeat(5, 1fr)
 *             at 16px with 96px tiles; Fresh 380px + 1fr at 40px; product strips repeat(4,
 *             1fr) at 20px (16px inside Fresh); steps repeat(4, 1fr) hairline grid;
 *             CTA band 42px/60px; company panel 1fr 1fr, 760px cap
 *   mobile  : screens/02-home-mobile.html
 *             hero band 520px bottom-anchored; sections at 20px/16px; category grid 1fr 1fr
 *             at 10px with 16:9 media; brands as a wrapping chip row; product strip 1fr 1fr
 *             at 10px; steps stacked 28px + 1fr rows; CTA band 24px/16px stacked
 *
 * Mobile-first, per RESPONSIVE.md. One breakpoint, the IMPLEMENTATION PROVISIONAL 1024px
 * (Q-013) - no new breakpoint was introduced.
 *
 * Logical properties throughout. Exactly one direction-aware rule exists in this file, the
 * hero gradient angle, and it is documented where it appears.
 */

/* ---------------------------------------------------------------------------
 * Component-owned derived values - NOT approved design tokens.
 *
 * These six colours appear in the approved homepage but were never declared in the design's
 * :root block; they are part of the "30 hex values outside :root" recorded in
 * docs/01-design/tokens/colors.md. They are named here, INSIDE the component that uses them,
 * rather than promoted into tokens.css - because unlike the header/footer values they occur
 * on exactly one screen, so there is no evidence yet that they are systematic.
 *
 * Naming them is not approving them. Values are copied verbatim from the approved screens and
 * the pending token-consolidation task still owns them.
 * ------------------------------------------------------------------------- */

.zahra-home {
	--zahra-home-wash: 6 42 25;              /* hero gradient, rgb channels - 01/02 hero overlay */
	--zahra-home-on-dark-green: #9EC2AC;     /* hero eyebrow; Fresh panel body text */
	--zahra-home-on-dark-warm: #E4DCCE;      /* hero paragraph */
	--zahra-home-fresh-panel: #0B3F26;       /* Fresh panel surface */
	--zahra-home-fresh-panel-ink: #EAF3ED;   /* Fresh panel heading and eyebrow */
	--zahra-home-cta-lead: #F0D5D1;          /* paragraph inside the brand-red CTA band */

	background: var(--zahra-color-surface);
}

/* ---------------------------------------------------------------------------
 * Section frame
 *
 * Every section is full-bleed with a .zahra-shell inner, so tinted bands reach the viewport
 * edge while their content stays on the approved 1440/60 grid.
 * ------------------------------------------------------------------------- */

.zahra-home-section {
	border-block-end: 1px solid var(--zahra-color-line);
	padding-block: 20px;
}

.zahra-home-section--sand {
	background: var(--zahra-color-sand);
}

.zahra-home-section__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px;
	margin-block-end: 12px;
}

.zahra-home-section__title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
}

/*
 * The "see all" link is desktop-only: the approved mobile sections carry a heading alone.
 * It is never rendered at all when it has no destination - that decision lives in PHP, so a
 * hidden element here is always a real, working link.
 */
.zahra-home-section__more {
	display: none;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
}

.zahra-home-section__more:hover,
.zahra-home-section__more:focus-visible {
	text-decoration: underline;
}

.zahra-home-section__arrow {
	margin-inline-start: 4px;
}

/* ---------------------------------------------------------------------------
 * Buttons
 *
 * Three approved variants, all at the 44px+ touch-target minimum (ACCESSIBILITY.md section 4).
 * ------------------------------------------------------------------------- */

.zahra-home-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-block-size: 48px;
	padding-inline: 24px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
}

.zahra-home-btn--fresh {
	background: var(--zahra-color-success-2);
	color: var(--zahra-color-surface);
}

.zahra-home-btn--fresh:hover,
.zahra-home-btn--fresh:focus-visible {
	background: var(--zahra-color-success);
	color: var(--zahra-color-surface);
}

.zahra-home-btn--ghost {
	border: 1.5px solid rgb(247 244 237 / 60%);
	color: var(--zahra-color-sand);
}

.zahra-home-btn--ghost:hover,
.zahra-home-btn--ghost:focus-visible {
	border-color: var(--zahra-color-sand);
	color: var(--zahra-color-sand);
}

.zahra-home-btn--invert {
	background: var(--zahra-color-surface);
	color: var(--zahra-color-brand);
}

.zahra-home-btn--invert:hover,
.zahra-home-btn--invert:focus-visible {
	background: var(--zahra-color-sand);
	color: var(--zahra-color-brand-dark);
}

/* ---------------------------------------------------------------------------
 * Hero
 *
 * The approved band renders over a photograph. No hero image exists in the design handoff
 * (docs/02-content/missing-content.md), so the band shows its own approved base colour under
 * its approved gradient and no substitute image is invented. See template-parts/home/hero.php.
 *
 * The slider controls are not rendered either - only one slide of content is approved - so the
 * space the design reserves for them at the bottom of the band is not reserved here. That is
 * the one geometric consequence of the omission.
 * ------------------------------------------------------------------------- */

.zahra-home-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-block-size: 520px;
	background: var(--zahra-color-ink);
	color: var(--zahra-color-sand);
	overflow: hidden;
}

/*
 * Mobile wash rises from the bottom edge, matching the approved mobile band, and needs no
 * direction handling at all.
 */
.zahra-home-hero__wash {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		0deg,
		rgb(var(--zahra-home-wash) / 94%) 0%,
		rgb(var(--zahra-home-wash) / 78%) 42%,
		rgb(var(--zahra-home-wash) / 26%) 74%,
		rgb(var(--zahra-home-wash) / 5%) 100%
	);
}

.zahra-home-hero__inner {
	position: relative;
	padding-block: 20px 28px;
}

.zahra-home-hero__content {
	display: flex;
	flex-direction: column;
	gap: 11px;
	max-inline-size: 640px;
}

.zahra-home-hero__eyebrow {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--zahra-home-on-dark-green);
}

.zahra-home-hero__title {
	margin: 0;
	font-size: 27px;
	font-weight: 700;
	line-height: 1.38;
	text-wrap: pretty;
	text-shadow: 0 2px 18px rgb(8 7 5 / 60%);
}

.zahra-home-hero__text {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.8;
	color: var(--zahra-home-on-dark-warm);
	text-wrap: pretty;
}

.zahra-home-hero__actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-block-start: 4px;
}

/* ---------------------------------------------------------------------------
 * Categories (TASK-062 visual reconciliation)
 *
 * Image-free, bordered index grid - a stacked list on mobile, a continuous 5-column grid on
 * desktop. The background/gap/border trio draws a shared hairline grid without doubling
 * borders between cells, the same technique .zahra-home-steps__list already uses below.
 * ------------------------------------------------------------------------- */

.zahra-home-cats__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	background: var(--zahra-color-line);
	border: 1px solid var(--zahra-color-line);
}

.zahra-home-cat {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	grid-template-areas: "title count arrow";
	align-items: center;
	gap: 4px 12px;
	background: var(--zahra-color-surface);
	color: var(--zahra-color-ink);
	text-decoration: none;
	padding: 16px;
	min-block-size: 56px;
}

/*
 * TASK-062 owner hover correction: the whole cell background changes, nothing else - title,
 * count, arrow and border stay exactly as the rest state. Scoped to hover-capable pointers only
 * (no sticky touch/mobile hover) via `(hover: hover) and (pointer: fine)`, since no existing
 * project-wide convention for this exists yet. `:focus-visible` gets the same background (the
 * owner-approved fallback) plus a real outline so keyboard focus stays visible without relying
 * on the background swap alone.
 */
@media (hover: hover) and (pointer: fine) {
	.zahra-home-cat:hover {
		background: rgb(247 244 237) !important;
	}
}

.zahra-home-cat:focus-visible {
	background: rgb(247 244 237) !important;
	outline: 2px solid var(--zahra-color-brand);
	outline-offset: -2px;
}

.zahra-home-cat__title {
	grid-area: title;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.4;
}

.zahra-home-cat__count {
	grid-area: count;
	font-size: 12px;
	font-weight: 500;
	color: var(--zahra-color-muted);
	white-space: nowrap;
}

.zahra-home-cat__arrow {
	grid-area: arrow;
	color: var(--zahra-color-brand);
	font-size: 15px;
	line-height: 1;
}

/*
 * Full-width outlined action after the mobile list. Desktop shows the same destination as
 * .zahra-home-section__more in the section head instead (see below), so this is hidden there.
 */
.zahra-home-cats__all {
	display: flex;
	align-items: center;
	justify-content: center;
	min-block-size: 48px;
	margin-block-start: 10px;
	border: 1.5px solid var(--zahra-color-line);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--zahra-color-ink);
	text-decoration: none;
}

.zahra-home-cats__all:hover,
.zahra-home-cats__all:focus-visible {
	border-color: var(--zahra-color-brand);
	color: var(--zahra-color-brand);
}

/*
 * Mobile is a single column, so every row is always fully occupied - the filler never
 * renders here. On the 5-column desktop grid it fills whatever cell(s) the last row leaves
 * empty when the term count isn't a multiple of 5, matching .zahra-home-cat's own background
 * so that leftover space reads as a normal cell instead of the container's hairline-grid
 * background colour.
 */
.zahra-home-cat__filler {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Brands
 *
 * Linked on both breakpoints (Q-041 resolved, TASK-023) - see template-parts/home/brands.php.
 * `.zahra-home-brand` is applied to an `<a>` (or, defensively, a `<span>` when a term has no
 * resolvable URL); the box appearance is unchanged from the previous unlinked tile, with only
 * the anchor-default color/underline reset and a hover/focus affordance added.
 * ------------------------------------------------------------------------- */

.zahra-home-brands__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
}

.zahra-home-brand {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--zahra-color-line);
	padding: 8px 12px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--zahra-color-ink);
	text-decoration: none;
}

a.zahra-home-brand:hover,
a.zahra-home-brand:focus-visible {
	color: var(--zahra-color-brand);
	text-decoration: underline;
}

/*
 * TASK-063 (owner-directed, chat instruction): real logo when the term has one mapped,
 * replacing the plain-text tile content. contain (never cover) so the supplied artwork's
 * different natural aspect ratios are never cropped/stretched. A fixed block-size caps the
 * chip's height on mobile since the tile itself is content-sized here (padding only, no
 * min-block-size) unlike the fixed-height desktop tile below.
 */
.zahra-home-brand__logo {
	max-inline-size: 100%;
	max-block-size: 28px;
	object-fit: contain;
	display: block;
}

/* ---------------------------------------------------------------------------
 * Fresh
 *
 * DESKTOP ONLY. The approved mobile screen is complete and does not contain this section.
 * ------------------------------------------------------------------------- */

.zahra-home-fresh {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Product strips
 *
 * A grid around the canonical card, nothing more. Deliberately carries none of the
 * .zahra-shop--list / --auto classes, so the card keeps its approved GRID arrangement at every
 * width - which is what both the desktop and the mobile homepage show.
 * ------------------------------------------------------------------------- */

.zahra-home-strip {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

/* ---------------------------------------------------------------------------
 * Ordering steps
 * ------------------------------------------------------------------------- */

.zahra-home-steps__list {
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--zahra-color-line);
	border: 1px solid var(--zahra-color-line);
}

.zahra-home-step {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	gap: 12px;
	align-items: baseline;
	background: var(--zahra-color-surface);
	padding: 14px 16px;
}

.zahra-home-step__number {
	font-size: 13px;
	color: var(--zahra-color-brand);
}

.zahra-home-step__title {
	font-size: 13.5px;
	font-weight: 600;
}

/* The approved mobile row is number + title only; the description returns at the breakpoint. */
.zahra-home-step__text {
	display: none;
	font-size: 12.5px;
	line-height: 1.8;
	color: var(--zahra-color-ink-2);
}

/* ---------------------------------------------------------------------------
 * Account CTA band
 * ------------------------------------------------------------------------- */

.zahra-home-cta {
	background: var(--zahra-color-brand);
	color: var(--zahra-color-surface);
	padding-block: 24px;
}

.zahra-home-cta__inner {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.zahra-home-cta__title {
	margin: 0 0 8px;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.4;
}

.zahra-home-cta__lead {
	margin: 0;
	font-size: 13px;
	line-height: 1.8;
	color: var(--zahra-home-cta-lead);
}

.zahra-home-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.zahra-home-cta__actions .zahra-home-btn {
	flex: 1 1 auto;
}

/* ---------------------------------------------------------------------------
 * Company block
 *
 * Owner-directed redesign (2026-08-28): a three-card hairline grid, the same technique as
 * .zahra-home-steps__list above, replacing the original two-cell panel. Rendered at every
 * width - the footer still repeats the same verified values regardless.
 * ------------------------------------------------------------------------- */

.zahra-home-about__intro {
	margin-block-end: 16px;
}

.zahra-home-about__text {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.8;
	color: var(--zahra-color-ink-2);
	max-inline-size: 640px;
}

.zahra-home-about__panel {
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin: 0;
	background: var(--zahra-color-line);
	border: 1px solid var(--zahra-color-line);
}

.zahra-home-about__cell {
	background: var(--zahra-color-surface);
	padding: 14px 16px;
}

.zahra-home-about__label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	color: var(--zahra-color-brand);
	margin-block-end: 6px;
}

.zahra-home-about__value {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	font-style: normal;
	line-height: 1.7;
	color: var(--zahra-color-ink);
}

/* ---------------------------------------------------------------------------
 * Desktop - IMPLEMENTATION PROVISIONAL breakpoint (Q-013).
 *
 * From here down, values come from screens/01-home-desktop.html.
 * ------------------------------------------------------------------------- */

@media (min-width: 1024px) {

	.zahra-home-section {
		padding-block: 48px;
	}

	.zahra-home-section--sand {
		padding-block: 44px;
	}

	.zahra-home-section__head {
		margin-block-end: 20px;
	}

	.zahra-home-section__title {
		font-size: 24px;
	}

	.zahra-home-section__more {
		display: block;
	}

	/* Hero -------------------------------------------------------------- */

	.zahra-home-hero {
		align-items: center;
		min-block-size: 620px;
	}

	/*
	 * THE ONE DIRECTION-AWARE RULE IN THIS FILE, and it is justified: CSS gradients take a
	 * physical angle and have no logical equivalent. The dark end must fall under the text
	 * block, which sits on the inline-start edge - the right in Arabic. 270deg points left, so
	 * the opaque stop lands on the right; an LTR locale needs the mirror image.
	 *
	 * The angle is the only thing that flips. No layout property in this file uses left/right.
	 */
	.zahra-home-hero__wash {
		background: linear-gradient(
			var(--zahra-home-hero-angle, 270deg),
			rgb(var(--zahra-home-wash) / 92%) 0%,
			rgb(var(--zahra-home-wash) / 78%) 34%,
			rgb(var(--zahra-home-wash) / 34%) 66%,
			rgb(var(--zahra-home-wash) / 8%) 100%
		);
	}

	.zahra-home-hero__inner {
		padding-block: 0;
	}

	.zahra-home-hero__content {
		gap: 18px;
	}

	.zahra-home-hero__eyebrow {
		font-size: 13px;
	}

	.zahra-home-hero__title {
		font-size: 46px;
		line-height: 1.3;
		text-shadow: 0 2px 24px rgb(8 7 5 / 55%);
	}

	.zahra-home-hero__text {
		font-size: 16.5px;
		line-height: 1.85;
		max-inline-size: 520px;
	}

	.zahra-home-hero__actions {
		flex-direction: row;
		flex-wrap: wrap;
		margin-block-start: 6px;
	}

	.zahra-home-hero__actions .zahra-home-btn {
		min-block-size: 52px;
		padding-inline: 28px;
		font-size: 15px;
	}

	/* Categories -------------------------------------------------------- */

	.zahra-home-cats__grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.zahra-home-cat {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-rows: auto auto;
		grid-template-areas:
			"title arrow"
			"count arrow";
		align-items: center;
		padding: 22px 20px;
		min-block-size: 92px;
	}

	.zahra-home-cat__title {
		font-size: 15px;
	}

	.zahra-home-cat__arrow {
		align-self: center;
		font-size: 17px;
	}

	.zahra-home-cats__all {
		display: none;
	}

	.zahra-home-cat__filler {
		display: block;
		background: var(--zahra-color-surface);
	}

	/* Brands ------------------------------------------------------------ */

	.zahra-home-brands__grid {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 16px;
	}

	.zahra-home-brand {
		display: flex;
		align-items: center;
		justify-content: center;
		min-block-size: 96px;
		background: var(--zahra-color-surface);
		padding: 20px;
		font-size: 19px;
		font-weight: 700;
		text-align: center;
	}

	.zahra-home-brand__logo {
		max-block-size: 56px;
	}

	/* Fresh ------------------------------------------------------------- */

	.zahra-home-fresh {
		display: block;
	}

	.zahra-home-fresh__grid {
		display: grid;
		grid-template-columns: 380px minmax(0, 1fr);
		gap: 40px;
		align-items: center;
	}

	.zahra-home-fresh__panel {
		display: flex;
		flex-direction: column;
		gap: 16px;
		align-self: stretch;
		background: var(--zahra-home-fresh-panel);
		color: var(--zahra-home-fresh-panel-ink);
		padding: 32px 28px;
	}

	.zahra-home-fresh__brand {
		font-size: 26px;
		font-weight: 700;
		letter-spacing: 0.02em;
	}

	.zahra-home-fresh__title {
		margin: 0;
		font-size: 27px;
		font-weight: 700;
		line-height: 1.4;
	}

	.zahra-home-fresh__text {
		margin: 0;
		font-size: 13.5px;
		line-height: 1.9;
		color: var(--zahra-home-on-dark-green);
	}

	.zahra-home-fresh__cta {
		margin-block-start: auto;
		min-block-size: 44px;
		font-size: 13.5px;
	}

	.zahra-home-fresh__chips {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin: 0 0 14px;
		padding: 0;
		list-style: none;
	}

	.zahra-home-fresh__chip {
		font-size: 12px;
		font-weight: 600;
		background: var(--zahra-color-success-bg);
		color: var(--zahra-color-success-2);
		border: 1px solid var(--zahra-color-success-line);
		padding: 6px 11px;
	}

	.zahra-home-fresh .zahra-home-strip {
		gap: 16px;
	}

	/* Product strips ---------------------------------------------------- */

	/*
	 * auto-fit rather than a fixed repeat(4). At the approved 1440px shell both strips resolve
	 * to exactly the approved four columns - the wide strip because auto-fit collapses its
	 * empty tracks and the four cards absorb the row, the Fresh strip because its 900px column
	 * fits exactly four 190px minimums.
	 *
	 * The difference shows at the provisional breakpoint, where the Fresh strip has only 484px
	 * to work with: a fixed four-column grid would produce 109px cards there. It wraps to two
	 * rows of two instead. Same lesson as TASK-009's PDP grid - an approved desktop track has
	 * to carry a floor to survive 1024px.
	 */
	.zahra-home-strip {
		grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
		gap: 20px;
	}

	/* Steps ------------------------------------------------------------- */

	.zahra-home-steps__list {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.zahra-home-step {
		display: block;
		padding: 22px;
	}

	.zahra-home-step__number {
		display: block;
		font-size: 14px;
		margin-block-end: 10px;
	}

	.zahra-home-step__title {
		display: block;
		font-size: 15px;
		margin-block-end: 6px;
	}

	.zahra-home-step__text {
		display: block;
	}

	/* CTA band ---------------------------------------------------------- */

	.zahra-home-cta {
		padding-block: 42px;
	}

	.zahra-home-cta__inner {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		gap: 44px;
	}

	.zahra-home-cta__text {
		max-inline-size: 640px;
	}

	.zahra-home-cta__title {
		font-size: 29px;
	}

	.zahra-home-cta__lead {
		font-size: 14.5px;
	}

	.zahra-home-cta__actions {
		flex: 0 0 auto;
	}

	.zahra-home-cta__actions .zahra-home-btn {
		flex: 0 0 auto;
		font-size: 14.5px;
	}

	/* Company block ----------------------------------------------------- */

	.zahra-home-about {
		padding-block: 44px;
	}

	.zahra-home-about__intro {
		margin-block-end: 24px;
	}

	.zahra-home-about__text {
		margin: 14px 0 0;
		font-size: 14px;
		line-height: 1.9;
		max-inline-size: 760px;
	}

	.zahra-home-about__panel {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.zahra-home-about__cell {
		padding: 22px;
	}

	.zahra-home-about__label {
		font-size: 13px;
		margin-block-end: 8px;
	}

	.zahra-home-about__value {
		font-size: 14.5px;
	}
}

/*
 * LTR mirror for the one direction-aware rule. Kept next to nothing else, deliberately - if
 * this block ever grows, the file has stopped using logical properties somewhere.
 */
:root[dir="ltr"] .zahra-home {
	--zahra-home-hero-angle: 90deg;
}