/*
 * People's Choice Awards — Fragrance Edition
 * Route stylesheet: Fragrance Directory (spec §5.7).
 *
 * The filename is the underscored route key, which is how
 * Frontend\Assets::route_asset() finds it and enqueues it after public.css.
 *
 * Page-unique rules only. The maroon top banner, `.pcfa-card` and its hover lift,
 * `.pcfa-grid`, the perfume tile, `.bi-columns`, `.bi-row`, `.section-heading`,
 * `.accent-bar`, `.pcfa-empty` and the buttons all live in public.css and are
 * deliberately not repeated here.
 *
 * Metrics come from the approved prototype (`/home/claude/work/proto/directory.html`).
 * Raw hex becomes the semantic tokens and every physical property becomes a logical
 * one, so the page mirrors in Arabic without a second stylesheet — which is what
 * the stats-row divider below depends on.
 */

/* ==========================================================================
   1. Search box in the banner
   ========================================================================== */

.top-banner .search-row {
	display: flex;
	gap: 8px;
	max-width: 460px;
	margin: 22px auto 0;
}

/* A white field on the maroon banner. The border is a light overlay rather than a
   token colour: on this background the pale line token would be invisible. */
.top-banner .search-row input[type='search'] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 13px 18px;
	border: 1.5px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.96);
	font-family: inherit;
	font-size: 14px;
	color: var(--ink);
	/* Safari draws its own inset field on the maroon banner without this. */
	-webkit-appearance: none;
	appearance: none;
}

.top-banner .search-row input[type='search']:focus {
	border-color: var(--white);
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.28);
}

.top-banner .search-row .search-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 46px;
	height: 46px;
	border: 1.5px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	background: transparent;
	color: var(--white);
	cursor: pointer;
	transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.top-banner .search-row .search-submit:hover {
	background: rgba(255, 255, 255, 0.16);
	border-color: var(--white);
}

/* ==========================================================================
   2. Listing
   ========================================================================== */

.directory-intro {
	max-width: 70ch;
	margin: 0 auto;
	text-align: center;
	font-size: 14px;
	line-height: 1.7;
	color: var(--muted);
}

/* Both languages at the same size and weight, one under the other: this is a
   sentence rather than a label, and a §2.5 start/end row would leave a ragged gap
   in the middle of centred body copy. */
.directory-intro .ar {
	display: block;
	margin-top: 6px;
	font-size: 14px;
	color: var(--magenta);
}

/*
 * Four across rather than the shared grid's five: a company card is text-only and
 * at five columns the longer house names wrapped to three lines.
 */
.company-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.company-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 22px 16px;
	text-align: center;
}

.company-initial {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 12px;
	border-radius: 50%;
	background: var(--magenta-deep);
	color: var(--white);
	font-size: 18px;
	font-weight: 800;
	letter-spacing: 0.02em;
}

/* A supplied logo sits in the same 56px circle the initials use, so a grid of
   mixed cards keeps one baseline. `contain` because a fragrance house's mark is
   often wordmark-shaped and `cover` would crop the name out of it. */
.company-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 12px;
	border-radius: 50%;
	background: var(--magenta-50);
	overflow: hidden;
}

.company-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 6px;
}

.company-card .name-en {
	font-size: 13.5px;
	font-weight: 800;
	color: var(--ink);
}

/* Identical size and weight to the English half — the Arabic name is not a
   sub-line here, it is the same name (spec §2.5). */
.company-card .name-ar {
	font-size: 13.5px;
	font-weight: 800;
	color: var(--magenta);
}

.company-card .count {
	margin-top: 8px;
	font-size: 11px;
	font-weight: 700;
	color: var(--faint);
}

.directory-empty {
	margin-top: 8px;
}

@media (max-width: 1023px) {
	.company-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 639px) {
	.company-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.company-card {
		padding: 18px 12px;
	}
}

/* ==========================================================================
   3. Company profile
   ========================================================================== */

.back-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 24px;
	font-size: 13px;
	font-weight: 700;
	color: var(--magenta-deep);
}

.back-link:hover {
	color: var(--magenta);
}

/*
 * The arrow is a direction, not a character, and on the Arabic site "back" points
 * the other way. The mirroring itself now lives once in `public-rtl.css` for every
 * `.arrow-glyph` on the site rather than being restated per page.
 */

.profile-header {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 28px;
}

.profile-initial {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	background: var(--magenta-deep);
	color: var(--white);
	font-size: 28px;
	font-weight: 800;
}

.profile-logo {
	flex: none;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	background: var(--magenta-50);
	object-fit: contain;
	padding: 10px;
}

.profile-identity {
	min-width: 0;
}

/*
 * The company name is a bilingual pair, so the size and weight sit on the row and
 * both halves inherit them (spec §2.5). An earlier pass set them per half, which
 * is exactly the drift the specification says not to repeat: the Arabic came out
 * smaller and lighter than the English beside it.
 */
.profile-identity .bi-row {
	font-size: clamp(20px, 2.6vw, 26px);
	font-weight: 900;
}

.profile-identity h2 {
	color: var(--ink);
}

.profile-identity .ar {
	color: var(--magenta);
}

/* --- Bio ------------------------------------------------------------------- */

.profile-bio {
	margin-bottom: 28px;
}

.profile-bio .eyebrow {
	display: block;
	margin-bottom: 8px;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--magenta);
}

/* Arabic body copy needs the extra leading; the shared `.bi-columns .col` line
   height is tuned for Latin text. */
.profile-bio .col.ar p {
	line-height: 1.9;
}

/* --- Stats row ------------------------------------------------------------- */

/*
 * The divider between stats is a specific client correction: a thin vertical line
 * *between* adjacent stats and none after the last one. It is `border-inline-end`
 * rather than `border-right`, so on the Arabic site the line falls on the other
 * side of each item and the row still reads as three separated stats instead of
 * one with a stray line hanging off its outer edge.
 */
.profile-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0 0 28px;
	padding: 18px 22px;
	border-radius: 14px;
	background: var(--magenta-50);
}

.profile-meta .item {
	padding-inline: 22px;
	border-inline-end: 1px solid var(--magenta-100);
}

.profile-meta .item:first-child {
	padding-inline-start: 0;
}

/* The reset that makes the rule "between", not "after each". Without it the row
   ends on a line pointing at nothing. */
.profile-meta .item:last-child {
	padding-inline-end: 0;
	border-inline-end: none;
}

.profile-meta dt,
.profile-meta dd {
	margin: 0;
}

.profile-meta .label {
	display: block;
	margin-bottom: 4px;
}

/* Both languages of the label at one size and weight, stacked: a stat column is
   only as wide as its value, and a start/end row would wrap mid-label. */
.profile-meta .label .en,
.profile-meta .label .ar {
	display: block;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--magenta);
	/* Uppercase Latin is happy at 1.5; the Arabic half of the same label is not —
	   its diacritics need the extra leading, so the pair takes the larger figure
	   rather than each half taking its own and the stack going ragged. */
	line-height: 1.65;
}

.profile-meta .value {
	font-size: 13px;
	font-weight: 700;
	color: var(--ink);
}

/*
 * On a phone the row becomes a stack, so the vertical rule between items would be
 * a line down one side of each block. It becomes the horizontal rule between them
 * instead, and the last item still carries none.
 */
@media (max-width: 639px) {
	.profile-meta {
		flex-direction: column;
		gap: 12px;
		padding: 16px 18px;
	}

	.profile-meta .item {
		padding-inline: 0;
		padding-bottom: 12px;
		border-inline-end: none;
		border-bottom: 1px solid var(--magenta-100);
	}

	.profile-meta .item:last-child {
		padding-bottom: 0;
		border-bottom: none;
	}
}

/* --- Links ----------------------------------------------------------------- */

.profile-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 32px;
}