/**
 * NewsGrid Core — shared block styles.
 *
 * Every selector is scoped to a `.benchtest-` prefix so these rules do
 * not fight the theme, other plugins, or an Elementor canvas. No element
 * selectors are used outside a scoped ancestor.
 *
 * Tokens come from the theme's :root custom properties. Fallback values
 * are declared inline here so the blocks still render correctly if the
 * theme is swapped out and only the plugin remains active.
 *
 * @package NewsGrid_Core
 */

.benchtest-hero-grid,
.benchtest-filterable-grid {
	--benchtest-color-base: #ffffff;
	--benchtest-color-surface: #f2f2f2;
	--benchtest-color-text: #333333;
	--benchtest-color-muted: #777777;
	--benchtest-color-accent: #d32f2f;
	--benchtest-color-star-empty: #cccccc;
	--benchtest-radius: 4px;
	--benchtest-gap: 16px;
	--benchtest-overlay-from: rgba(0, 0, 0, 0.75);
	--benchtest-overlay-to: rgba(0, 0, 0, 0);
	box-sizing: border-box;
}

.benchtest-hero-grid *,
.benchtest-hero-grid *::before,
.benchtest-hero-grid *::after,
.benchtest-filterable-grid *,
.benchtest-filterable-grid *::before,
.benchtest-filterable-grid *::after {
	box-sizing: inherit;
}

.benchtest-hero-grid a,
.benchtest-filterable-grid a {
	text-decoration: none;
	color: inherit;
}

.benchtest-hero-grid img,
.benchtest-filterable-grid img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ------------------------------------------------------------
 * Hero Grid layout
 * ------------------------------------------------------------ */

.benchtest-hero-grid {
	display: flex;
	flex-direction: column;
	gap: var(--benchtest-gap);
	margin-block: 24px;
}

.benchtest-hero-grid__top {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--benchtest-gap);
}

.benchtest-hero-grid__small-row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--benchtest-gap);
}

/* ------------------------------------------------------------
 * Card primitives
 * ------------------------------------------------------------ */

.benchtest-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background-color: var(--benchtest-color-base);
	border-radius: var(--benchtest-radius);
	overflow: hidden;
}

.benchtest-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--benchtest-radius);
	background-color: var(--benchtest-color-surface);
}

.benchtest-card__media:focus-visible {
	outline: 2px solid var(--benchtest-color-accent);
	outline-offset: 2px;
}

.benchtest-card__overlay {
	position: absolute;
	inset: auto 0 0 0;
	padding: 16px;
	background: linear-gradient(
		to top,
		var(--benchtest-overlay-from) 0%,
		var(--benchtest-overlay-to) 100%
	);
	color: var(--benchtest-color-base);
}

.benchtest-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px 0 0;
	background-color: var(--benchtest-color-base);
}

.benchtest-card__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	color: inherit;
}

.benchtest-card__overlay .benchtest-card__title {
	color: var(--benchtest-color-base);
}

.benchtest-card__title a {
	color: inherit;
}

.benchtest-card__meta {
	display: block;
	margin-top: 6px;
	font-size: 0.8125rem;
	color: var(--benchtest-color-muted);
}

.benchtest-card__overlay .benchtest-card__meta {
	color: rgba(255, 255, 255, 0.85);
}

.benchtest-card__badge {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	padding: 4px 10px;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--benchtest-color-base);
	background-color: var(--benchtest-color-accent);
	border-radius: 2px;
	line-height: 1.2;
}

.benchtest-card__badge--verdict {
	top: auto;
	right: auto;
	bottom: 12px;
	left: 12px;
}

.benchtest-card__rating {
	display: inline-flex;
	align-items: center;
}

.benchtest-card__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 48px;
	height: 48px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.65);
	border: 2px solid var(--benchtest-color-base);
}

.benchtest-card__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 9px 0 9px 15px;
	border-color: transparent transparent transparent var(--benchtest-color-base);
}

/* Card size variants */

.benchtest-card--large .benchtest-card__media {
	aspect-ratio: 16 / 10;
}

.benchtest-card--large .benchtest-card__overlay .benchtest-card__title {
	font-size: 1.5rem;
}

.benchtest-card--tall .benchtest-card__media {
	aspect-ratio: 4 / 5;
}

.benchtest-card--tall .benchtest-card__title {
	font-size: 1.125rem;
}

.benchtest-card--small .benchtest-card__media {
	aspect-ratio: 4 / 3;
}

.benchtest-card--small .benchtest-card__overlay .benchtest-card__title {
	font-size: 0.9375rem;
}

.benchtest-card--small .benchtest-card__overlay {
	padding: 10px;
}

/* ------------------------------------------------------------
 * Star ratings (partial, discrete fill)
 * ------------------------------------------------------------ */

.benchtest-stars {
	display: inline-flex;
	align-items: center;
	gap: 1px;
	font-size: 0.875rem;
	line-height: 1;
}

.benchtest-star {
	font-family: inherit;
	font-style: normal;
}

.benchtest-star--filled {
	color: var(--benchtest-color-accent);
}

.benchtest-star--empty {
	color: var(--benchtest-color-star-empty);
}

/* ------------------------------------------------------------
 * Filterable Review Grid
 * ------------------------------------------------------------ */

.benchtest-filterable-grid {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-block: 32px;
}

.benchtest-filter-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 10px;
	background-color: var(--benchtest-color-surface);
	border-radius: var(--benchtest-radius);
}

/*
 * Filter pills — finish round item 1 (owner's rule): pill text is WHITE in
 * every state (default, hover, focus, active). Never black text. Where a
 * background is too light for white text it is deepened instead: colored
 * department pills get a server-deepened background
 * (newsgrid_core_pill_background_color, WCAG AA 4.5:1 or better) and the
 * "All Departments" pill sits on the dark text token.
 *
 * Selectors are prefixed with `.benchtest-filterable-grid` so they outrank
 * the scoped `.benchtest-filterable-grid a { color: inherit }` reset above,
 * which previously pulled the dark body color into the default pill state.
 */
.benchtest-filterable-grid .benchtest-filter-pill {
	display: inline-block;
	padding: 6px 14px;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.4;
	color: #ffffff;
	background-color: var(--benchtest-color-text);
	border: 1px solid var(--benchtest-color-text);
	border-radius: 999px;
	transition: background-color 120ms ease, filter 120ms ease, box-shadow 120ms ease;
}

.benchtest-filterable-grid .benchtest-filter-pill:visited,
.benchtest-filterable-grid .benchtest-filter-pill:hover,
.benchtest-filterable-grid .benchtest-filter-pill:focus,
.benchtest-filterable-grid .benchtest-filter-pill:focus-visible,
.benchtest-filterable-grid .benchtest-filter-pill:active,
.benchtest-filterable-grid .benchtest-filter-pill.is-active {
	color: #ffffff;
	text-decoration: none;
}

/* Hover and focus deepen the pill; text stays white. */
.benchtest-filterable-grid .benchtest-filter-pill:hover,
.benchtest-filterable-grid .benchtest-filter-pill:focus-visible {
	filter: brightness(0.82);
}

.benchtest-filterable-grid .benchtest-filter-pill:focus-visible {
	outline: 2px solid var(--benchtest-color-text);
	outline-offset: 2px;
}

/* Active pill: same white text, marked with a ring rather than a color swap. */
.benchtest-filterable-grid .benchtest-filter-pill.is-active {
	box-shadow: 0 0 0 2px var(--benchtest-color-surface), 0 0 0 4px var(--benchtest-color-text);
}

.benchtest-filterable-grid .benchtest-filter-pill--colored {
	border-color: transparent;
}

.benchtest-filterable-grid__items {
	display: grid;
	grid-template-columns: repeat(var(--benchtest-grid-cols, 3), minmax(0, 1fr));
	gap: 24px;
}

.benchtest-filterable-grid__empty {
	padding: 24px;
	background-color: var(--benchtest-color-surface);
	border-radius: var(--benchtest-radius);
	color: var(--benchtest-color-muted);
	text-align: center;
}

.benchtest-hero-empty {
	padding: 24px;
	background-color: var(--benchtest-color-surface);
	border-radius: var(--benchtest-radius);
	color: var(--benchtest-color-muted);
	text-align: center;
}

/* ------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------ */

/* Medium: hero grid small row goes 2x2; tall card stacks below large. */
@media (max-width: 1024px) {
	.benchtest-hero-grid__top {
		grid-template-columns: 1fr;
	}

	.benchtest-hero-grid__small-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.benchtest-card--tall .benchtest-card__media {
		aspect-ratio: 16 / 10;
	}

	.benchtest-filterable-grid__items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Phone: everything stacks to a single column. */
@media (max-width: 600px) {
	.benchtest-hero-grid__small-row {
		grid-template-columns: 1fr;
	}

	.benchtest-card--large .benchtest-card__overlay .benchtest-card__title {
		font-size: 1.25rem;
	}

	/*
	 * Finish round item 5: lead card caption at phone width. The caption
	 * no longer overlays the bottom of the image (where it collided with
	 * lettering in the image itself); it stacks below the image as a
	 * normal block, dark text on the page background.
	 */
	.benchtest-card--large .benchtest-card__media {
		display: flex;
		flex-direction: column;
		aspect-ratio: auto;
		background-color: transparent;
	}

	.benchtest-card--large .benchtest-card__media img {
		aspect-ratio: 16 / 10;
		height: auto;
		border-radius: var(--benchtest-radius);
	}

	.benchtest-card--large .benchtest-card__overlay {
		position: static;
		padding: 10px 0 0;
		background: none;
		color: var(--benchtest-color-text);
	}

	.benchtest-card--large .benchtest-card__overlay .benchtest-card__title {
		color: var(--benchtest-color-text);
		line-height: 1.3;
	}

	.benchtest-card--large .benchtest-card__overlay .benchtest-card__meta {
		color: var(--benchtest-color-muted);
	}

	.benchtest-card--tall .benchtest-card__title {
		font-size: 1rem;
	}

	.benchtest-filterable-grid__items {
		grid-template-columns: 1fr;
	}

	.benchtest-filter-pills {
		gap: 6px;
		padding: 8px;
	}

	.benchtest-filterable-grid .benchtest-filter-pill {
		padding: 5px 11px;
		font-size: 0.75rem;
	}
}

/* ------------------------------------------------------------
 * Motion
 *
 * Only the filter pill hover transitions animate. Under
 * prefers-reduced-motion, transitions are disabled. No autoplay motion
 * lives in this stylesheet (ticker motion is owned by Ticker Plus).
 * ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.benchtest-filterable-grid .benchtest-filter-pill {
		transition: none;
	}
}

/* ------------------------------------------------------------------
   Imageless posts (1.0.2): a designed placeholder, never a blank hole.
   Matches the 3:2 demo photo ratio so imageless cards line up.
   ------------------------------------------------------------------ */
.benchtest-media-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 3 / 2;
	background: linear-gradient(135deg, #2E2E2E 0%, #444444 100%);
	color: rgba(255, 255, 255, 0.55);
}

.benchtest-media-placeholder svg {
	width: 22%;
	max-width: 64px;
	min-width: 24px;
	height: auto;
}

.benchtest-card--large .benchtest-media-placeholder,
.benchtest-card--tall .benchtest-media-placeholder,
.benchtest-card--small .benchtest-media-placeholder {
	height: 100%;
	aspect-ratio: auto;
}

/* ------------------------------------------------------------------
   Archive pagination (1.0.3)
   ------------------------------------------------------------------ */
.benchtest-grid-pagination-wrap {
	margin-top: 32px;
}

.benchtest-grid-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.benchtest-grid-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid #DDDDDD;
	border-radius: 4px;
	color: var(--benchtest-color-text, #333333);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.benchtest-grid-pagination a.page-numbers:hover,
.benchtest-grid-pagination a.page-numbers:focus-visible {
	border-color: var(--benchtest-color-accent, #D32F2F);
	color: var(--benchtest-color-accent, #D32F2F);
}

.benchtest-grid-pagination .page-numbers.current {
	background: var(--benchtest-color-text, #333333);
	border-color: var(--benchtest-color-text, #333333);
	color: #FFFFFF;
}

.benchtest-grid-pagination .page-numbers.dots {
	border-color: transparent;
}