/*
 * Winners-page-only rules (spec §5.4).
 *
 * The maroon top banner, the year tabs, `.section-heading.accent-bar`, the
 * `.bi-row` heading convention, `.pcfa-grid`, the perfume tile, `.pcfa-empty`,
 * `.bi-columns`, `.verify-block`, `.pcfa-code`, the media-coverage components and
 * the modal shell all already live in `public.css` and are not repeated here.
 * What remains is the intro line, the per-category block and the inside of the
 * winner-detail pop-up.
 *
 * Metrics come from the approved prototype (`/home/claude/work/proto/winners.html`
 * for the page, `editors-choice.html` for the detail pop-up, which is the same
 * component). Raw hex becomes the semantic tokens and physical properties become
 * logical ones, so the page mirrors in Arabic without a second stylesheet.
 */

/* ==========================================================================
   1. Intro and category blocks
   ========================================================================== */

.winners-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, because this
   is a sentence rather than a label — a §2.5 row would leave a ragged gap in the
   middle of centred body copy. */
.winners-intro .ar {
	display: block;
	margin-top: 6px;
	font-size: 14px;
	color: var(--magenta);
}

.category-block + .category-block {
	margin-top: 46px;
}

/* The prototype closes each category title with a hairline as well as the maroon
   accent bar, which is what visually separates one category's three winners from
   the next category's heading. */
.category-block .section-heading {
	padding-bottom: 14px;
	border-bottom: 2px solid var(--magenta-100);
}

/*
 * Unique to this page: People's Choice winners belong to a category, and the
 * official names carry the "People's Choice —" prefix, so the pill wraps to as
 * many lines as it needs instead of truncating a name mid-word.
 */
.winner-cat {
	display: inline-block;
	margin: 18px 0 0;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--magenta);
	color: var(--white);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.04em;
	line-height: 1.4;
	text-transform: uppercase;
	white-space: normal;
}

/* Also unique to this page: a perfume described in one language only. The page
   script adds this class and hides the divider, so the single paragraph fills the
   width instead of sitting in the left third with an orphaned rule beside it. */
.winner-desc.is-single {
	grid-template-columns: 1fr;
}