/* Gabion reviews - "Customer Projects & Reviews" on the gabion category page.
   Loaded by inc/gabion-reviews/gabion-reviews.php. Colours are the theme's
   (SMB green #03ba48 and the add-to-cart orange #ff8800 as in style.css);
   kept as local custom properties until the shared token file exists.
   2026-10-07: header left-aligned under the h3, orange card hover, popup laid
   out like the Customer Reviews photo modal (client feedback).
   2026-10-22: merged block - blue "Project photo" badge, the All / Reviews /
   Photos switch right of the pills, a photo-only popup (.is-photo); the
   frame's overflow-x rule is gone again - it clipped the close X on desktop.
   2026-10-23: the photo popup in the review popup's two columns (client).
   2026-10-23: three badge kinds (green review, blue Wire Fence stock, orange
   BBA & ISO); the source switch as a segmented control on its own first row,
   the category pills as smaller outline chips under it (client); the popup
   rules moved to gabion-reviews-modal.css (500-line limit).
   2026-10-26: source switch row gone, badge pills close the one pill row;
   one green for every badge, Read / View as text links (client).
   2026-11-03: the heading no longer collapses (no chevron, no underline) and
   the pills are one group with one pressed pill (client). */

.wf-reviews {
	--wfr-green: #03ba48;
	--wfr-green-dark: #028a36;
	--wfr-green-tint: #e8f8ee;
	--wfr-orange: #ff8800;
	--wfr-orange-dark: #e67a00;
	--wfr-star: #f5a623;
	--wfr-text: #1f2a37;
	--wfr-muted: #6b7280;
	--wfr-line: #e5e7eb;
	--wfr-pill: #f3f4f6;
	margin: 0 0 24px;
	color: var(--wfr-text);
}

/* The head is centred, the h3 above included (client 2026-10-26; it was
   left-aligned under the h3 since 2026-10-07). The h3's collapse button is
   the theme's and keeps its own place on the right. */
.wf-reviews__heading,
.wf-reviews__intro {
	text-align: center;
}
.wf-reviews__intro {
	margin: 0 0 10px;
	color: var(--wfr-muted);
}

/* --- Star summary ------------------------------------------------------- */
.wf-reviews__summary {
	display: flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto 16px;
	padding: 6px 16px;
	border: 1px solid #f0d58c;
	border-radius: 999px;
	background: #fffbea;
	font-size: 14px;
}
.wf-reviews__summary strong {
	color: var(--wfr-text);
}
.wf-reviews__summary-note {
	color: var(--wfr-muted);
}
.wf-reviews__summary-note a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.wf-reviews__summary-note a:hover,
.wf-reviews__summary-note a:focus-visible {
	color: var(--wfr-green-dark);
}

/* --wfr-n (0-5) is set inline by wf_gabion_reviews_stars(): the grey row is
   the base, the coloured copy on top is clipped to n/5 of its width. */
.wf-reviews__stars {
	position: relative;
	display: inline-block;
	line-height: 1;
	font-size: 15px;
	letter-spacing: 1px;
	color: #d1d5db;
	white-space: nowrap;
}
.wf-reviews__stars::before,
.wf-reviews__stars::after {
	content: "★★★★★";
}
.wf-reviews__stars::after {
	position: absolute;
	top: 0;
	left: 0;
	width: calc(var(--wfr-n, 5) / 5 * 100%);
	overflow: hidden;
	color: var(--wfr-star);
}

/* --- Category pills + badge pills -------------------------------------- */
/* One wrapping row (client 2026-10-26): the category pills, then the badge
   pills, one group since 2026-11-03 (one filter level). */
.wf-reviews__filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 0 0 20px;
}
/* Two lines at most: the script folds the rest behind "More +" (2026-10-26). */
.wf-reviews__pill.is-overflow,
.wf-reviews__pill--more[hidden] {
	display: none;
}
.wf-reviews__pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	padding: 4px 5px 4px 12px;
	border: 1px solid #d9dee5;
	border-radius: 999px;
	background: #fff;
	color: var(--wfr-text);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}
/* A pill keeps its look after a mouse click (:focus): the theme's
   button:focus turns the text white, which left a toggled-off badge pill
   blank on white (2026-10-26). */
.wf-reviews__pill:focus {
	background: #fff;
	color: var(--wfr-text);
}
/* background set explicitly: the customizer's inline button:hover paints
   every button orange otherwise, orange text on orange. */
.wf-reviews__pill:hover,
.wf-reviews__pill:focus-visible {
	background: #fff;
	border-color: var(--wfr-orange);
	color: var(--wfr-orange-dark);
}
/* A light green tint for every pressed pill, category or badge. */
.wf-reviews__pill.is-active,
.wf-reviews__pill.is-active:hover,
.wf-reviews__pill.is-active:focus-visible {
	background: var(--wfr-green-tint);
	border-color: var(--wfr-green);
	color: var(--wfr-green-dark);
}
.wf-reviews__count {
	min-width: 24px;
	padding: 2px 7px;
	border-radius: 999px;
	background: var(--wfr-pill);
	color: var(--wfr-muted);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
}
.wf-reviews__pill.is-active .wf-reviews__count {
	background: #fff;
	color: var(--wfr-green-dark);
}

/* --- Cards ------------------------------------------------------------- */
.wf-reviews__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}
/* Before the script runs (delay-JS) only the first page shows; the script
   takes over with .is-hidden per card once a pill or Show more is used.
   8 = wf_gabion_reviews_page_size(). */
.wf-reviews__grid:not(.is-js) .wf-reviews__card:nth-child(n + 9),
.wf-reviews__card.is-hidden {
	display: none;
}
.wf-reviews__card {
	display: flex;
	flex-direction: column;
	cursor: pointer; /* the whole card opens the review */
	border: 1px solid var(--wfr-line);
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
	transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.wf-reviews__card:hover,
.wf-reviews__card:focus-within {
	border-color: var(--wfr-orange);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}
.wf-reviews__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--wfr-pill);
	cursor: pointer;
}
/* The photo fills the 4:3 box, centred, whatever its own shape. WP Rocket's
   WebP rewrite moves .wf-reviews__img onto a <picture> wrapper, so the rule
   targets the elements, not the class. */
.wf-reviews__media picture,
.wf-reviews__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.25s;
}
.wf-reviews__card:hover .wf-reviews__media img {
	transform: scale(1.04);
}
.wf-reviews__badge {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 1;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--wfr-green);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	/* "Verified Customer Project" is wider than a card on a 375px phone: an
	   ellipsis rather than a pill cut off by the photo's edge. */
	max-width: calc(100% - 16px);
	overflow: hidden;
	text-overflow: ellipsis;
}
/* Every kind wears the same green (client 2026-10-26: fewer colours); the
   label alone tells them apart. Blue / orange per kind until then. */
.wf-reviews__body {
	padding: 10px 12px 6px;
}
/* A photo card has no star row: an empty line of the stars' height keeps its
   title on the same line as the review titles (client 2026-10-26). The card
   stars are a block so their row is exactly 15px, not the body's line box. */
.wf-reviews__body .wf-reviews__stars {
	display: block;
	width: fit-content;
}
.wf-reviews__card[data-source="photo"] .wf-reviews__body::before {
	content: "";
	display: block;
	height: 15px; /* .wf-reviews__stars: font-size 15px, line-height 1 */
}
.wf-reviews__title {
	margin: 4px 0 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.wf-reviews__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: auto;
	padding: 8px 12px 10px;
	border-top: 1px solid var(--wfr-line);
	font-size: 12px;
	color: var(--wfr-muted);
}
.wf-reviews__location {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
/* A review card's title and name line live in data-text and are drawn here,
   so the visitor sees them but they are no page text for search engines
   (render.php, 2026-10-27). The ellipsis rules above still apply. The
   badge and badge-pill labels the same way since 2026-11-04 (client). */
.wf-reviews__title[data-text]::before,
.wf-reviews__location[data-text]::before,
.wf-reviews__badge[data-text]::before,
.wf-reviews__pill-label[data-text]::before {
	content: attr(data-text);
}
/* A text link, not a boxed button (client 2026-10-26: fewer buttons): green
   bold "Read →" that underlines with the card's hover. Still a <button> for
   keyboard users; the background is set because the customizer's inline
   button:hover / :focus rules paint every button orange otherwise. */
.wf-reviews__read,
.wf-reviews__read:hover,
.wf-reviews__read:focus,
.wf-reviews__read:active {
	flex: 0 0 auto;
	padding: 4px 0;
	border: 0;
	background: transparent;
	color: var(--wfr-green-dark);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	cursor: pointer;
}
.wf-reviews__read:hover,
.wf-reviews__read:focus-visible,
.wf-reviews__card:hover .wf-reviews__read {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.wf-reviews__read:focus-visible {
	outline: 2px solid var(--wfr-green);
	outline-offset: 2px;
}

.wf-reviews__more-wrap {
	margin: 18px 0 0;
	text-align: center; /* client 2026-10-26; was left */
}
/* The JS sets [hidden] once every card shows; a theme p display rule would
   otherwise keep the empty wrap (and its button) on screen. */
.wf-reviews__more-wrap[hidden] {
	display: none;
}
.wf-reviews__more {
	min-height: 40px;
	padding: 8px 22px;
	border: 1px solid var(--wfr-green);
	border-radius: 8px;
	background: #fff;
	color: var(--wfr-green-dark);
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
/* :focus and :active too: the theme's generic button:focus / button:active
   rule turns the text white over our white background after a click. */
.wf-reviews__more:hover,
.wf-reviews__more:focus,
.wf-reviews__more:focus-visible,
.wf-reviews__more:active {
	background: var(--wfr-orange);
	border-color: var(--wfr-orange);
	color: #fff;
}

/* The title shrinks with the screen so it stays on one line on a phone
   (client 2026-10-26): 24px from ~460px up, ~19.5px on a 375px phone. The ID
   beats gabion-category-tabs.css's #full-product-details > h2.wf-collapse.
   The section is always open (client 2026-11-03: open by default, and the
   closed state looked bad): no chevron, no underline, and a click does
   nothing. The heading keeps .wf-collapse because it is where the section
   above stops (main.js toggleCategoryHeaders(), nextUntil). */
#full-product-details > h2.wf-collapse.wf-reviews__heading {
	padding-right: 0; /* no button to make room for */
	font-size: clamp(16px, 5.2vw, 24px);
	text-decoration: none;
	cursor: default;
	pointer-events: none; /* the accordion's click handler never fires */
}
.wf-reviews__heading .collapse-btn {
	display: none;
}

/* --- Breakpoints -------------------------------------------------------- */
@media (max-width: 991px) {
	.wf-reviews__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (max-width: 767px) {
	.wf-reviews__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
}
/* Phones: the star line on one line (client 2026-10-26) - the shorter
   "(592 Customer Reviews)" and a font that shrinks a little with the screen.
   It wrapped to two lines here until then. */
@media (max-width: 575px) {
	.wf-reviews__summary {
		gap: 6px;
		padding: 6px 12px;
		font-size: clamp(12px, 3.6vw, 14px);
		white-space: nowrap;
	}
	.wf-reviews__summary-long {
		display: none;
	}
}