/*
 * Brands index page - redesigned per owner-supplied `AR_Brands-standalone.html` (chat
 * instruction), superseding the TASK-014/TASK-034 hairline-card layout below it in history.
 *
 * Mobile-first and logical-direction only.
 *
 * PROVENANCE: `AR_Brands-standalone.html`, a single fixed-desktop (1440px-derived) export with
 * no mobile screen and no CSS media queries of its own - confirmed by inspecting its computed
 * styles directly (grid stayed a literal 4-column track down to a 390px test width). The
 * mobile values below (2-column grid, reduced hero type scale, `--zahra-gutter-mobile
 * --provisional` padding) are this project's own mobile-first adaptation, following the same
 * "one real breakpoint, not a speculative scale" convention documented in layout.css - not
 * part of the supplied file.
 *
 * Colors are the design's own inline RGB values, mapped onto this project's existing dark
 * ("ink surface") token set rather than introduced as new one-off hex: rgb(23,21,15) is
 * literally --zahra-color-ink, rgb(247,244,237) is --zahra-color-sand, and the muted/hairline
 * tones on that dark background reuse --zahra-color-on-dark / --zahra-color-line-dark
 * (tokens.css already documents these as "text/hairline on the ink surface").
 *
 *   desktop : hero padding 64px 60px, eyebrow 12px, h1 52px/1.22 max 14ch, intro 15.5px max
 *             56ch, filter chips row beside it; 4-column full-bleed logo-tile grid, 1:1 cards,
 *             34px padding, always-visible name+category overlay
 *   mobile  : hero padding reduced, h1 scaled down (own adaptation, see above), intro/filters
 *             stacked; 2-column grid, 20px card padding
 */

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

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

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

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

.zahra-brands-hero {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 32px var(--zahra-gutter-mobile--provisional);
	background: var(--zahra-color-ink);
	color: var(--zahra-color-sand);
}

.zahra-brands-hero__eyebrow {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .1em;
	color: var(--zahra-color-accent);
}

.zahra-brands-hero__title {
	margin: 0;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.28;
	letter-spacing: -.01em;
	max-inline-size: 14ch;
}

.zahra-brands-hero__row {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-block-start: 4px;
}

.zahra-brands-hero__intro {
	margin: 0;
	max-inline-size: 56ch;
	font-size: 13.5px;
	line-height: 1.9;
	color: var(--zahra-color-on-dark);
}

.zahra-brands-hero__intro strong {
	color: var(--zahra-color-sand);
}

.zahra-brands-hero__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.zahra-brands-filter {
	appearance: none;
	border: 1px solid var(--zahra-color-line-dark);
	background: transparent;
	color: var(--zahra-color-sand);
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	padding: 8px 12px;
	cursor: pointer;
}

.zahra-brands-filter.is-active {
	background: var(--zahra-color-accent);
	border-color: var(--zahra-color-accent);
	color: var(--zahra-color-ink);
}

.zahra-brands-filter:focus-visible {
	outline: 2px solid var(--zahra-color-sand);
	outline-offset: 1px;
}

/* ---------------------------------------------------------------------------
 * Logo grid
 * ------------------------------------------------------------------------- */

.zahra-brands-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--zahra-color-ink);
}

.zahra-brands-grid__card {
	position: relative;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: var(--zahra-color-sand);
	text-decoration: none;
	overflow: hidden;
}

/*
 * Author `display: flex` above and the UA `[hidden] { display: none }` rule are equal
 * specificity, so this explicit override is needed for brands-index.js's `card.hidden = true`
 * to actually hide a filtered-out tile.
 */
.zahra-brands-grid__card[hidden] {
	display: none;
}

.zahra-brands-grid__logo {
	max-inline-size: 100%;
	max-block-size: 100%;
	object-fit: contain;
	display: block;
}

.zahra-brands-grid__name-only {
	font-size: 13px;
	font-weight: 700;
	color: var(--zahra-color-ink);
	text-align: center;
}

/*
 * Logo-only card (owner instruction, chat): the name/category-count gradient overlay from the
 * owner-supplied mockup was removed entirely. The link's accessible name comes from the logo
 * `<img>`'s own alt text, not from visible on-card text - see zahra_v2_brands_index_card().
 * This hover effect is purely decorative.
 */
@media (hover: hover) and (pointer: fine) {

	.zahra-brands-grid__card:hover .zahra-brands-grid__logo,
	.zahra-brands-grid__card:focus-visible .zahra-brands-grid__logo {
		transform: scale(1.04);
	}

	.zahra-brands-grid__logo {
		transition: transform .25s ease;
	}
}

.zahra-brands-grid__card:focus-visible {
	outline: 2px solid var(--zahra-color-brand);
	outline-offset: -2px;
}

/*
 * Pending logo (TASK-063: owner-supplied artwork with no current product_brand term) -
 * non-clickable, per the owner's explicit choice for this redesign. Grayscale + reduced
 * opacity is the only signal used to mark "not yet linkable" - no invented badge copy.
 */
.zahra-brands-grid__card--pending {
	cursor: default;
}

.zahra-brands-grid__card--pending .zahra-brands-grid__logo {
	filter: grayscale(1);
	opacity: .55;
}

@media (min-width: 1024px) {

	.zahra-brands-index__breadcrumb {
		gap: 8px;
		block-size: 38px;
		padding-inline: var(--zahra-gutter);
		font-size: 11.5px;
	}

	.zahra-brands-hero {
		padding: 64px var(--zahra-gutter) 60px;
	}

	.zahra-brands-hero__title {
		font-size: 52px;
		line-height: 1.22;
	}

	.zahra-brands-hero__row {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 40px;
		margin-block-start: 8px;
	}

	.zahra-brands-hero__intro {
		font-size: 15.5px;
	}

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

	.zahra-brands-grid__card {
		padding: 34px;
	}
}