/* Gabion reviews - the popup a card opens, a review or a project photo.
   Loaded by inc/gabion-reviews/gabion-reviews.php after gabion-reviews.css,
   whose .wf-reviews custom properties (--wfr-*) it uses; the history of these
   rules before the split is in that file's header.
   2026-10-23: split out of gabion-reviews.css (500-line limit). One frame for
   reviews and photos: a fixed 4:3 image box with the whole photo over a
   blurred copy of itself, and a text column exactly as tall as the image box,
   so the arrows never change the frame's size (client).
   2026-10-23: the text column never scrolls as a whole (it showed two
   scrollbars over the thumbnails): only an opened review text scrolls, the
   arrows, name, thumbnails and date stay put (client).
   2026-11-03: photo arrows on the big photo (client: stepping photos only by
   the thumbnails was not obvious); the frame up to 1200px wide (Szilard).
   2026-11-04 (design A, Szilard): the small card arrows above the text gave
   way to big round Previous / Next buttons on the overlay either side of
   the frame (a row under it on phones), and the thumbnails moved under the
   photo, so stepping cards and stepping photos no longer look alike. */

/* --- Popup ------------------------------------------------------------- */
/* The popup is the Customer Reviews photo modal: same markup, styled by the
   theme's .term-modal / .gallery-modal-content / .review-photo-modal /
   .aira-close rules in style.css. Only what main.js + slick
   provide on the reviews page is filled in here: one photo visible in the
   big box, four thumbnails in a row, and the FontAwesome star glyphs that
   style.css scopes to #comments. */
/* While the review is being fetched only a spinner shows, centred; the
   frame appears once the text and photos are in. */
.wf-reviews__spinner {
	display: none;
	width: 48px;
	height: 48px;
	border: 4px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: wf-reviews-spin 0.8s linear infinite;
}
.wf-reviews__modal.is-loading .wf-reviews__spinner {
	display: block;
}
.wf-reviews__modal.is-loading .gallery-modal-content {
	display: none;
}
@keyframes wf-reviews-spin {
	to {
		transform: rotate(360deg);
	}
}
/* Up to 1200px wide on big screens (the theme's reviews-page frame stops at
   1000px; 2026-11-03); the theme's width: 95% still fits it to smaller ones. */
.wf-reviews .review-photo-modal .gallery-modal-content {
	max-width: 1200px;
}

/* --- Previous / next card beside the frame (design A, 2026-11-04) -------- */
/* The overlay lays out in a row: Previous button, frame, Next button. The
   frame takes what the two buttons leave (theme: width 95%, column flow).
   The spinner stands in the frame's slot while a review loads. */
.wf-reviews .review-photo-modal.wf-reviews__modal {
	flex-flow: row nowrap;
	gap: 20px;
	padding: 0 20px;
	box-sizing: border-box;
}
.wf-reviews .review-photo-modal .gallery-modal-content {
	flex: 0 1 1200px;
	min-width: 0;
}
.wf-reviews .wf-reviews__spinner,
.wf-reviews .review-photo-modal .gallery-modal-content {
	order: 1;
}
.wf-reviews .wf-reviews__side--next {
	order: 2;
}
.wf-reviews .wf-reviews__side {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-top: -35px; /* level with the frame, which the theme lifts by 35px */
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	cursor: pointer;
	user-select: none;
}
.wf-reviews .wf-reviews__side-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #fff;
	color: var(--wfr-text);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	text-shadow: none;
	transition: background-color 0.15s, color 0.15s;
}
.wf-reviews .wf-reviews__side-icon:before {
	font: normal normal normal 22px/1 FontAwesome;
	content: "\f053";
	transform: translate(-1.5px, 1px); /* optical centre, as the photo arrows */
}
.wf-reviews .wf-reviews__side--next .wf-reviews__side-icon:before {
	content: "\f054";
	transform: translate(1.5px, 1px);
}
.wf-reviews .wf-reviews__side:hover .wf-reviews__side-icon,
.wf-reviews .wf-reviews__side:focus-visible .wf-reviews__side-icon {
	background: var(--wfr-orange);
	color: #fff;
}
.wf-reviews .wf-reviews__side:focus-visible {
	outline: none; /* the orange circle is the focus mark */
}
/* Only one card in the current filter: nothing to step to. Hidden but still
   in the row, so the frame keeps its width. */
.wf-reviews .wf-reviews__side.is-off {
	visibility: hidden;
}
/* The theme caps the frame at 80% of the viewport but never scrolls it, so a
   long review on a short screen spilled its thumbnails and date outside. The
   inner container scrolls, not the frame: the frame's scrollbox clipped the
   close button, which the theme pulls out over the frame's corner. Since
   2026-10-23 it is only a safety net: the image box fits the same height and
   the text column scrolls itself. */
.wf-reviews .review-photo-modal .modal-container {
	position: relative; /* the text column is pinned to it, see below */
	max-height: calc(80vh - 70px); /* frame 80% minus its 2 x 15px border + 2 x 20px padding */
	overflow-y: auto;
	overflow-x: hidden; /* no sideways scrollbar at any width; only the thumbnail row scrolls across */
}
/* No overflow rule on the frame itself: it never scrolls (overflow visible),
   and any clip there cuts off the close X the theme pulls over its corner. */

/* --- One frame for both kinds ------------------------------------------ */
/* Image box 58%, text column 42% for a review and a project photo alike.
   The image box alone sets the row's height (a fixed 4:3, capped to the
   frame's 80vh); the text column is absolutely pinned to that height, so
   stepping from a review to a photo keeps the frame exactly the same size.
   The column is a flex stack that never scrolls: the review text is the one
   part that gives way, and scrolls inside itself once Read more opens it. */
/* The image box is a fixed 4:3 (capped to the frame's 80vh) holding the big
   photo and, under it, the thumbnail row; the photo takes what the row
   leaves, so a one-photo card (no row) keeps the same frame size. */
.wf-reviews .review-photo-modal .img-box {
	display: flex;
	flex-direction: column;
	width: 58%;
	aspect-ratio: 4 / 3;
	max-height: calc(80vh - 70px); /* as the container: the image never makes it scroll */
}
.wf-reviews .review-photo-modal .txt-box {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 42%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.wf-reviews .review-photo-modal .txt-box > *,
.wf-reviews .review-photo-modal .comment-body > * {
	flex-shrink: 0;
}
.wf-reviews .review-photo-modal .comment-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
}
.wf-reviews .review-photo-modal .txt-box .comment-txt {
	flex: 0 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-right: 8px; /* the thin scrollbar does not touch the words */
	scrollbar-width: thin;
	scrollbar-color: #c4c9cf transparent;
}
/* Opened (Read more): the box's last line fades out instead of being cut in
   half; the padding lets the text's real end scroll clear of the fade. */
.wf-reviews .review-photo-modal .txt-box .comment-txt:not(.is-clamped) {
	padding-bottom: 18px;
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
	mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
}
.wf-reviews .review-photo-modal .comment-txt::-webkit-scrollbar {
	width: 6px;
}
.wf-reviews .review-photo-modal .comment-txt::-webkit-scrollbar-thumb {
	background: #c4c9cf;
	border-radius: 3px;
}
.wf-reviews .review-photo-modal .comment-foot {
	margin-top: auto; /* the date sits on the column's bottom edge */
	padding-top: 10px;
	color: var(--wfr-muted);
	font-size: 13px;
}
.wf-reviews .review-photo-modal .comment-images-full .item {
	display: none;
	position: relative;
	isolation: isolate; /* the blurred copy's z-index -1 stays inside the item */
	overflow: hidden;
}
.wf-reviews .review-photo-modal .comment-images-full .item.is-active {
	display: block;
	height: 100%;
}
/* Previous / next photo of the opened card, on the big photo's left and right
   edges (client 2026-11-03). Hidden by the script when the card has one
   photo; the arrows above the text keep stepping cards. Spans, not buttons:
   the customizer's inline button:hover would paint them orange on orange. */
.wf-reviews .review-photo-modal .comment-images-full {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
}
.wf-reviews__img-prev,
.wf-reviews__img-next {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-top: -21px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.15s;
}
.wf-reviews__img-prev {
	left: 12px;
}
.wf-reviews__img-next {
	right: 12px;
}
.wf-reviews__img-prev:before,
.wf-reviews__img-next:before {
	font: normal normal normal 18px/1 FontAwesome;
	content: "\f053";
	/* Optical centring: the glyph box sat 0.75px high, and a chevron centred
	   by its box looks shifted towards its open side (Szilard 2026-11-03). */
	transform: translate(-1.5px, 1px);
}
.wf-reviews__img-next:before {
	content: "\f054";
	transform: translate(1.5px, 1px);
}
.wf-reviews__img-prev:hover,
.wf-reviews__img-next:hover,
.wf-reviews__img-prev:focus-visible,
.wf-reviews__img-next:focus-visible {
	background: var(--wfr-orange);
	outline: none;
}
.wf-reviews__img-prev[hidden],
.wf-reviews__img-next[hidden] {
	display: none;
}

/* The whole photo, contained, never cropped. The rest of the box is the same
   photo blurred and darkened: the theme's .cont:before spacer turned into a
   layer under the .cont background (background-image: inherit reads the
   photo URL the script sets inline). */
.wf-reviews .review-photo-modal .comment-images-full .cont {
	height: 100%;
	background-size: contain;
}
.wf-reviews .review-photo-modal .comment-images-full .cont:before {
	position: absolute;
	inset: 0;
	z-index: -1;
	padding-top: 0;
	background-image: inherit;
	background-position: center;
	background-size: cover;
	filter: blur(16px) brightness(0.7);
	transform: scale(1.15); /* the blur's soft edge falls outside the box */
}

/* The thumbnail row under the photo (2026-11-04), fixed-size thumbnails, the
   rest scroll sideways; showPhoto() keeps the active one in view. Hidden by
   the script under two photos. */
.wf-reviews .review-photo-modal .comment-images-nav {
	display: flex;
	flex: none;
	height: 64px;
	margin: 8px -3px 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.wf-reviews .review-photo-modal .comment-images-nav[hidden] {
	display: none;
}
.wf-reviews .review-photo-modal .comment-images-nav::-webkit-scrollbar {
	display: none;
}
.wf-reviews .review-photo-modal .comment-images-nav .item {
	flex: 0 0 96px;
	height: 100%;
	scroll-snap-align: start;
}
.wf-reviews .review-photo-modal .comment-images-nav .cont {
	height: 100%;
	border-radius: 6px;
}
.wf-reviews .review-photo-modal .comment-images-nav .cont:before {
	display: none; /* the theme's 91% spacer: the row sets the height here */
}
.wf-reviews .review-photo-modal .comment-images-nav .item.is-active .cont {
	outline: 2px solid var(--wfr-orange);
	outline-offset: -2px;
}
.wf-reviews .review-photo-modal .comment-images-nav .item[role="button"] {
	cursor: pointer;
}
.wf-reviews .review-photo-modal .dashicons {
	font: normal normal normal 18px/1 FontAwesome;
	display: inline-block;
	width: 20px;
}
.wf-reviews .review-photo-modal .dashicons-star-filled:before {
	content: "\f005";
}
.wf-reviews .review-photo-modal .comment-txt {
	white-space: pre-line; /* the text arrives as plain text with its own line breaks */
}
/* A long review: the first 8 lines, then the Read more / Show less toggle. */
.wf-reviews .review-photo-modal .comment-txt.is-clamped {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 8;
	line-clamp: 8;
	overflow: hidden;
}
.wf-reviews .review-photo-modal .wf-reviews__readmore {
	display: inline-block;
	margin: -6px 0 12px;
	font-size: 14px;
	font-weight: 700;
	color: var(--wfr-green-dark);
	text-decoration: underline;
	cursor: pointer;
}
.wf-reviews .review-photo-modal .wf-reviews__readmore:hover,
.wf-reviews .review-photo-modal .wf-reviews__readmore:focus-visible {
	color: var(--wfr-orange);
}
.wf-reviews .review-photo-modal .wf-reviews__readmore[hidden] {
	display: none;
}
/* A project photo: the photo-info block under the arrows in place of the
   review's name, stars, text and date. */
.wf-reviews .wf-reviews__photo-info,
.wf-reviews .wf-reviews__modal.is-photo .comment-head,
.wf-reviews .wf-reviews__modal.is-photo .comment-body,
.wf-reviews .wf-reviews__modal.is-photo .comment-foot {
	display: none;
}
.wf-reviews .wf-reviews__modal.is-photo .wf-reviews__photo-info {
	display: block;
}
/* The badge is the opened card's (kind class and label copied by the script). */
.wf-reviews .wf-reviews__photo-info .wf-reviews__badge {
	position: static; /* in the flow, not over a photo as on the card */
	display: inline-block;
	margin: 0 0 10px;
}
.wf-reviews .wf-reviews__photo-info p {
	margin: 0 0 6px;
}
.wf-reviews p.wf-reviews__photo-title {
	font-weight: 600; /* as .comment-author */
}
/* The image's Description (2026-10-26); its links in the site green. */
.wf-reviews .wf-reviews__photo-desc {
	margin-top: 10px;
	line-height: 1.5;
}
.wf-reviews .wf-reviews__photo-desc p {
	margin: 0 0 8px;
}
.wf-reviews .wf-reviews__photo-desc a {
	color: var(--wfr-green-dark);
	text-decoration: underline;
}
/* A case study's credit line and post link (2026-11-04); an ordinary photo
   leaves the credit empty, and an empty line takes no room. */
.wf-reviews .wf-reviews__photo-info p:empty,
.wf-reviews .wf-reviews__photo-link[hidden] {
	display: none;
}
.wf-reviews p.wf-reviews__photo-credit {
	font-style: italic;
}
.wf-reviews .wf-reviews__photo-link {
	display: inline-block;
	margin-top: 4px;
	color: var(--wfr-green-dark);
	font-weight: 700;
	text-decoration: none;
}
.wf-reviews .wf-reviews__photo-link:hover,
.wf-reviews .wf-reviews__photo-link:focus-visible {
	color: var(--wfr-orange);
	text-decoration: underline;
}
body.wf-reviews-modal-open {
	overflow: hidden;
}

/* --- Breakpoints -------------------------------------------------------- */
/* Phones: the image box full width on top (capped at 42vh), the text under it
   at a fixed 34vh that scrolls inside, so the frame keeps one size here too;
   with the Previous / Next row under the frame all of it stays inside the
   viewport (2026-11-04: 45vh + 40vh before the row). */
@media (max-width: 767px) {
	.wf-reviews .review-photo-modal.wf-reviews__modal {
		flex-flow: row wrap;
		align-content: center;
		gap: 12px;
		padding: 0;
	}
	.wf-reviews .review-photo-modal .gallery-modal-content {
		flex: 0 0 95%;
	}
	.wf-reviews .wf-reviews__side {
		order: 2;
		flex-direction: row;
		gap: 8px;
		margin-top: 0;
		padding: 10px 18px;
		border-radius: 22px;
		background: #fff;
		color: var(--wfr-text);
		text-shadow: none;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	}
	.wf-reviews .wf-reviews__side--next {
		order: 3;
		flex-direction: row-reverse;
	}
	.wf-reviews .wf-reviews__side-icon {
		width: auto;
		height: auto;
		background: none;
		box-shadow: none;
	}
	.wf-reviews .wf-reviews__side-icon:before {
		font-size: 16px;
	}
	.wf-reviews .wf-reviews__side:hover .wf-reviews__side-icon,
	.wf-reviews .wf-reviews__side:focus-visible .wf-reviews__side-icon {
		background: none;
		color: inherit;
	}
	.wf-reviews .wf-reviews__side:hover,
	.wf-reviews .wf-reviews__side:focus-visible {
		background: var(--wfr-orange);
		color: #fff;
	}
	.wf-reviews .review-photo-modal .modal-container {
		max-height: 85vh;
	}
	.wf-reviews .review-photo-modal .img-box,
	.wf-reviews .review-photo-modal .txt-box {
		width: 100%;
	}
	.wf-reviews .review-photo-modal .img-box {
		max-height: 42vh;
	}
	.wf-reviews .review-photo-modal .txt-box {
		position: static;
		height: 34vh;
	}
	.wf-reviews .review-photo-modal .comment-images-nav {
		height: 52px;
		margin: 6px 5px 0;
	}
	.wf-reviews .review-photo-modal .comment-images-nav .item {
		flex-basis: 76px;
	}
	/* The close X inside the frame, over the photo's top right corner: the
	   theme's -20px top margin pushed half of it out of the frame on phones
	   (2026-10-26). */
	.wf-reviews .review-photo-modal .aira-close {
		top: 10px;
		right: 10px;
		margin: 0;
		z-index: 3;
	}
	.wf-reviews__img-prev,
	.wf-reviews__img-next {
		width: 36px;
		height: 36px;
		margin-top: -18px;
	}
	.wf-reviews__img-prev {
		left: 8px;
	}
	.wf-reviews__img-next {
		right: 8px;
	}
	/* The theme rounds the photo's top corners here; the blur layer's clip follows. */
	.wf-reviews .review-photo-modal .comment-images-full .item {
		border-radius: 25px 25px 0 0;
	}
}