/*
 * People's Choice Awards — Fragrance Edition
 * Route stylesheet: Gift Guide (spec §5.8).
 *
 * 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-panel`, `.field` and its
 * inputs, `.pcfa-card`, `.perfume-card` and its shot, `.bi-row`,
 * `.section-heading`, `.accent-bar`, `.pcfa-empty`, the buttons, the ad slot height
 * and the `.pcfa-modal` shell all live in public.css and are deliberately not
 * repeated here.
 *
 * Metrics come from the approved prototype (`/home/claude/work/proto/giftguide.html`).
 * Raw hex becomes the semantic tokens and physical properties become logical ones,
 * so the page mirrors in Arabic without a second stylesheet.
 */

/* ==========================================================================
   1. Filter panel
   ========================================================================== */

/*
 * Three across rather than the shared `.form-grid`'s two: six filters in two
 * columns made the panel taller than the phone viewport it was meant to fit in,
 * and these are one-line selects rather than text fields.
 */
.filter-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.filter-panel .search-row {
	margin-top: 16px;
}

/* The free-text field is a pill, so it reads as a search box beside the square
   selects above it rather than as a seventh filter. */
.filter-panel .search-row input[type='text'] {
	border-radius: 999px;
}

.filter-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 20px;
}

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

@media (max-width: 639px) {
	.filter-grid {
		grid-template-columns: 1fr;
	}

	/* Full-width actions on a phone: three pills side by side wrapped into a
	   ragged two-and-one arrangement that read as an accident. */
	.filter-actions .btn {
		width: 100%;
	}
}

/* ==========================================================================
   2. Other ways to search
   ========================================================================== */

.other-ways-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

/*
 * Two of these cards are links and the third is a submit button for the filter
 * form, so the button's inherited chrome is reset here — a `<button>` otherwise
 * arrives centred, in the platform UI font, with its own border.
 */
.way-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px 20px;
	font-family: inherit;
	text-align: start;
	cursor: pointer;
}

.way-title {
	font-size: 13.5px;
	font-weight: 800;
	color: var(--ink);
}

.way-body {
	font-size: 12px;
	line-height: 1.55;
	color: var(--muted);
}

@media (max-width: 1023px) {
	.other-ways-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   3. Results
   ========================================================================== */

.results-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

/* The heading row takes the space and the count sits at the end of the line, so
   the accent bar still aligns with the headings elsewhere on the page. */
.results-head .bi-row {
	flex: 1 1 340px;
}

.results-count {
	margin: 0;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--faint);
	/* A count is a quantity, so its digits must not reorder inside Arabic text. */
	direction: ltr;
	unicode-bidi: isolate;
}

/*
 * Four across rather than the shared grid's five. A Gift Guide card carries the
 * attribute chips as well as both names and the fragrance house, and at five
 * columns the chips wrapped to three rows and the cards lost their alignment.
 */
.results-grid {
	grid-template-columns: repeat(4, 1fr);
}

.result-chips {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 8px;
}

.chip {
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--magenta-50);
	color: var(--magenta-deep);
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

/*
 * "Surprise Me" returns exactly one card, and this is what marks it as the pick
 * rather than as the first of a list. It is a border weight rather than a colour
 * fill, so the perfume photograph is still what the eye lands on.
 */
.result-card.is-surprise {
	border-width: 2px;
	border-color: var(--magenta-deep);
}

.no-results {
	margin-top: 8px;
}

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

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

/* ==========================================================================
   4. New-launch promo popup (spec §5.8)
   ==========================================================================
   Fixed 400×500 on desktop and 320×400 on mobile, with the artwork cropped by
   `object-fit: cover` — so an upload of any aspect ratio fills the box instead of
   resizing it, and the popup looks the same for every campaign. The recommended
   artwork size is documented in the admin, never printed here.
   ========================================================================== */

.promo-popup .popup-box {
	position: relative;
	width: 400px;
	height: 500px;
}

.promo-popup .popup-box > a {
	display: block;
	width: 100%;
	height: 100%;
}

.promo-popup .popup-box img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--radius);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

/*
 * Its own close button rather than the shared `.pcfa-modal-close`: that one is a
 * sticky control inside a padded white dialog, and this box is edge-to-edge
 * artwork. `inset-inline-end` so it sits on the trailing corner in both
 * directions.
 */
.promo-popup .popup-close {
	position: absolute;
	top: -14px;
	inset-inline-end: -14px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: none;
	border-radius: 50%;
	background: var(--white);
	color: var(--magenta-deep);
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
}

.promo-popup .popup-close:hover {
	background: var(--magenta-50);
}

@media (max-width: 460px) {
	.promo-popup .popup-box {
		width: 320px;
		height: 400px;
	}
}