/* BBD Projects and Reviews: the map's Projects / Reviews switch, review pop-ups, the review
   line in the list beside the map, the review cards under the map, and the review on a
   project's own page. Colours come from the project map's Appearance settings (its button
   colour is the accent). */

.pm-portfolio,
.pmr-single-review {
	--pmr-accent: var(--pm-btn-bg, #0F2744);
	--pmr-star: #f4b400;
	--pmr-soft: var(--pm-bg-alt, #f7f8fa);
}

/* ---- Projects / Reviews switch (left of the map) ---- */
.pmr-mode {
	display: inline-flex;
	margin: 10px;
	padding: 3px;
	gap: 3px;
	background: var(--pm-bg, #ffffff);
	border: 1px solid var(--pm-border, #e3e5e8);
	border-radius: var(--pm-radius, 10px);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
}

.pm-portfolio .pmr-mode .pmr-mode-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 7px 12px;
	border: 0;
	border-radius: calc(var(--pm-radius, 10px) - 3px);
	background: transparent;
	color: var(--pm-text, #1c1f24);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: none;
	transition: background 0.12s, color 0.12s;
}

.pm-portfolio .pmr-mode .pmr-mode-btn:hover {
	background: var(--pmr-soft);
}

.pm-portfolio .pmr-mode .pmr-mode-btn.is-active {
	background: var(--pmr-accent);
	color: #ffffff;
}

.pm-portfolio .pmr-mode .pmr-mode-btn:focus-visible {
	outline: 2px solid var(--pmr-accent);
	outline-offset: 2px;
}

.pmr-mode-btn svg {
	display: block;
	flex: 0 0 auto;
}

/* ---- Review pop-up: the text part scrolls under the photo ---- */
.pmr-iw .pmr-iw-body {
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Without a photo the title starts at the top, beside the close button. */
.pmr-iw > .pmr-iw-body:first-child .pm-iw-title {
	padding-right: 34px;
}

.pmr-iw-story {
	margin: 6px 0 2px;
	font-size: var(--pm-font-popup, 13px);
	line-height: 1.45;
	color: var(--pm-popup-body-color, var(--pm-text, #1c1f24));
}

.pmr-iw-review {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--pm-border, #e3e5e8);
}

.pmr-iw-review-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	font-size: 12px;
	color: var(--pm-muted, #5c6470);
}

.pm-portfolio a.pmr-iw-review-head,
.pm-portfolio a.pmr-iw-review-head:hover {
	color: var(--pm-muted, #5c6470);
	text-decoration: none;
}

.pm-portfolio a.pmr-iw-review-head:hover .pmr-iw-name {
	text-decoration: underline;
}

.pmr-iw-name {
	font-weight: 600;
	color: var(--pm-text, #1c1f24);
}

.pmr-iw-review-text {
	margin-top: 4px;
	font-size: var(--pm-font-popup, 13px);
	line-height: 1.45;
	color: var(--pm-popup-body-color, var(--pm-text, #1c1f24));
}

.pmr-g {
	display: block;
	flex: 0 0 auto;
}

.pmr-stars {
	display: inline-flex;
	letter-spacing: 1px;
	font-size: 13px;
	line-height: 1;
}

.pmr-star {
	color: #d6d6d6;
}

.pmr-star.is-on {
	color: var(--pmr-star);
}

/* ---- Review line on the list beside the map (Reviews view) ---- */
.pmr-card-review {
	margin: 8px 0 4px;
	padding: 8px 10px;
	background: var(--pmr-soft);
	border-radius: 8px;
}

.pmr-card-review-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	font-size: 12px;
	color: var(--pm-muted, #5c6470);
}

.pmr-card-review-by {
	font-weight: 600;
	color: var(--pm-text, #1c1f24);
}

.pm-portfolio .pmr-card-review-text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	margin: 4px 0 0;
	padding: 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--pm-text, #1c1f24);
}

/* ---- Review cards under the map ---- */
.pmr-reviews {
	margin-top: 28px;
	color: var(--pm-text, #1c1f24);
}

.pm-portfolio .pmr-reviews__heading {
	margin: 0 0 4px;
	padding: 0;
	font-size: 1.1em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Filters: the same row as the map's filters. reviews.js turns each dropdown into the map's own
   pill and list (pm-filter-pill, pm-filter-btn, pm-filter-drop, pm-filter-option), so both rows
   follow the same Appearance settings. Without JavaScript the dropdowns stay, drawn as the same
   pills. Clear filters follows while any filter is on. */
.pmr-filters {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	padding: 14px 0 10px;
}

.pmr-filter-pills {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	flex: 1;
	min-width: 0;
}

.pm-portfolio .pmr-filter {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	flex: 0 0 auto;
	width: auto;
	max-width: 100%;
	height: 34px;
	margin: 0;
	padding: 0 30px 0 12px;
	border: var(--pm-filter-border-w, 1px) solid var(--pm-filter-border, var(--pm-border, #e3e5e8));
	border-radius: var(--pm-filter-radius, 999px);
	background-color: var(--pm-filter-bg, var(--pm-bg, #fff));
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23737373' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 10px 10px;
	box-shadow: none;
	color: var(--pm-filter-text, var(--pm-text, #1c1f24));
	font-family: inherit;
	font-size: var(--pm-font-filter, 13px);
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
}

.pm-portfolio .pmr-filter[hidden] {
	display: none;
}

.pm-portfolio .pmr-filter:hover {
	border-color: var(--pm-muted, #5c6470);
}

.pm-portfolio .pmr-filter:focus-visible {
	outline: 2px solid var(--pmr-accent);
	outline-offset: 2px;
}

.pm-portfolio .pmr-filter.is-set {
	border-color: var(--pm-filter-active, var(--pm-tag-color));
	color: var(--pm-filter-active, var(--pm-tag-color));
}

/* The open native list keeps dark text on white. */
.pm-portfolio .pmr-filter option {
	color: #2f2f2f;
	background: #fff;
}

/* In the pill's list the options are buttons, so the keyboard reaches them; they keep the look of
   the map's options. */
.pm-portfolio button.pm-filter-option {
	display: block;
	width: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-family: inherit;
	font-weight: inherit;
	line-height: inherit;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
}

.pm-portfolio button.pm-filter-option:hover,
.pm-portfolio button.pm-filter-option:focus-visible {
	background: var(--pm-bg-alt);
	outline: none;
}

.pm-portfolio button.pm-filter-option.pm-filter-option-active {
	font-weight: 600;
}

/* Clear filters looks like the map's Clear all. */
.pm-portfolio .pmr-clear {
	flex: 0 0 auto;
	margin: 0;
	padding: 0 4px;
	border: 0;
	background: none;
	color: var(--pm-clearall-color);
	font-family: inherit;
	font-size: var(--pm-clearall-font-size);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.15s, opacity 0.15s;
}

.pm-portfolio .pmr-clear:hover,
.pm-portfolio .pmr-clear:focus-visible {
	color: var(--pm-text);
	opacity: 0.8;
	text-decoration: none;
}

/* The Filter button, shown only without JavaScript. */
.pm-portfolio .pmr-submit {
	flex: 0 0 auto;
	height: 34px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--pmr-accent);
	border-radius: var(--pm-filter-radius, 999px);
	background: #fff;
	color: var(--pmr-accent);
	font-family: inherit;
	font-size: var(--pm-font-filter, 13px);
	cursor: pointer;
}

@media (max-width: 600px) {
	.pm-portfolio .pmr-filter {
		height: 32px;
		padding-left: 10px;
	}
}

/* Cards: a masonry grid built from CSS columns; the column count follows the width of the
   container. */
.pmr-grid {
	columns: 270px 4;
	column-gap: 16px;
}

/* With JavaScript the cards sit in a grid of 4px rows, each card spanning as many rows as its
   height needs (reviews.js), so every column fills and tall story cards leave none empty. Up to
   four columns, as above. */
.pmr-grid.is-masonry {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(max(min(270px, 100%), calc((100% - 48px) / 4)), 1fr));
	grid-auto-rows: 4px;
	grid-auto-flow: row dense;
	column-gap: 16px;
	columns: auto;
}

.pmr-grid.is-masonry .pmr-card {
	display: block;
	align-self: start;
	margin: 0;
}

/* The grid takes focus after a page change, for keyboard users; it needs no outline. */
.pmr-grid:focus {
	outline: none;
}

.pmr-card {
	display: inline-block;
	width: 100%;
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	margin: 0 0 16px;
	padding: 14px 15px;
	background: var(--pm-bg, #fff);
	border: 1px solid var(--pm-card-border, var(--pm-border, #e3e5e8));
	border-radius: var(--pm-radius, 10px);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	font-size: 14px;
	line-height: 1.5;
	text-align: left;
}

/* Cards of the other pages stay in the HTML, hidden until their page number is chosen. */
.pmr-card[hidden] {
	display: none;
}

.pmr-card__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 8px;
	color: var(--pm-muted, #5c6470);
	font-size: 12px;
}

.pm-portfolio .pmr-card__loc {
	display: inline-flex;
	align-items: flex-start;
	gap: 4px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	text-align: left;
}

.pm-portfolio button.pmr-card__loc {
	cursor: pointer;
}

.pm-portfolio button.pmr-card__loc:hover span {
	text-decoration: underline;
}

.pmr-pin-icon {
	flex: 0 0 auto;
	margin-top: 3px;
}

.pmr-card__date {
	white-space: nowrap;
}

.pm-portfolio .pmr-card__title {
	margin: 8px 0;
	padding: 0;
	font-size: var(--pm-font-card-title, 15px);
	line-height: 1.3;
}

.pm-portfolio .pmr-card__title a {
	color: var(--pm-card-title-color, var(--pm-text, #1c1f24));
	text-decoration: none;
}

.pm-portfolio .pmr-card__title a:hover {
	text-decoration: underline;
}

.pmr-card__desc {
	margin: 0;
}

/* Project photos: the first one wide, the next ones side by side under it. */
.pmr-photos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px;
	margin: 0 0 10px;
}

.pmr-photo {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 6px;
	background: var(--pmr-soft);
	aspect-ratio: 4 / 3;
}

.pmr-photo:first-child {
	grid-column: 1 / -1;
	aspect-ratio: 16 / 10;
}

.pmr-photos--2 .pmr-photo:nth-child(2) {
	grid-column: 1 / -1;
}

.pmr-photo.is-hidden {
	display: none;
}

.pm-portfolio .pmr-photo img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.pmr-photos__more {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	font-weight: 600;
	font-size: 15px;
}

/* The review. On a story card it sits under a divider, after the project. */
.pmr-card--story .pmr-review {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--pm-border, #e3e5e8);
}

.pmr-review__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}

.pm-portfolio a.pmr-review__head,
.pm-portfolio a.pmr-review__head:hover,
.pm-portfolio a.pmr-review__head:focus,
.pmr-single-review a.pmr-review__head,
.pmr-single-review a.pmr-review__head:hover,
.pmr-single-review a.pmr-review__head:focus {
	color: inherit;
	text-decoration: none;
}

.pm-portfolio a.pmr-review__head:hover .pmr-review__name,
.pm-portfolio a.pmr-review__head:focus-visible .pmr-review__name,
.pmr-single-review a.pmr-review__head:hover .pmr-review__name,
.pmr-single-review a.pmr-review__head:focus-visible .pmr-review__name {
	text-decoration: underline;
}

.pmr-avatar {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #5f6f7a;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 32px;
	text-align: center;
}

.pmr-review__meta {
	display: block;
	min-width: 0;
}

.pmr-review__line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--pm-muted, #5c6470);
}

.pmr-review__name {
	display: block;
	font-weight: 600;
	font-size: 13px;
}

.pmr-review__text {
	margin: 0;
}

.pmr-reply {
	margin-top: 10px;
	padding: 10px 12px;
	background: var(--pmr-soft);
	border-radius: 8px;
	font-size: 13px;
}

.pmr-reply__head {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 4px;
}

.pmr-reply__head time {
	color: var(--pm-muted, #5c6470);
	font-size: 12px;
	white-space: nowrap;
}

/* The review on a project's own page, under the description: a bordered box like the review
   cards, in the page's own type. */
.pmr-single-review {
	margin: 28px 0 32px;
}

/* Inside a template's post content the theme styles every h2 (Divi: 40px); the headings keep the
   gallery heading's size and weight. */
.pmr-single-review h2.pm-single-section-title {
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.1;
	margin: 0 0 12px;
}

.pmr-single-review .pmr-review {
	padding: 14px 16px;
	background: var(--pm-bg, #fff);
	border: 1px solid var(--pm-border, #e6e9ee);
	border-radius: var(--pm-radius, 10px);
	text-align: left;
}

/* The business response reads in the same type as the review, under the same heading as
   "Client Review" with its date beside it. The head lines (stars, dates, name) keep the cards'
   sizes and the cards' line height, not the page's. */
.pmr-single-review .pmr-reply {
	font-size: inherit;
}

.pmr-single-review .pmr-review__head,
.pmr-single-review .pmr-reply__head {
	line-height: 1.5;
}

.pmr-single-review .pmr-reply__head {
	align-items: baseline;
	margin-bottom: 0;
}

/* Page numbers */
.pmr-pages {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 8px 0 0;
}

.pmr-pages > a,
.pmr-pages > span {
	display: inline-block;
	min-width: 2.2em;
	padding: 6px 10px;
	border: 1px solid var(--pm-border, #e3e5e8);
	border-radius: 6px;
	text-align: center;
	text-decoration: none;
}

.pm-portfolio .pmr-pages a {
	color: inherit;
}

.pm-portfolio .pmr-pages a:hover,
.pm-portfolio .pmr-pages a:focus-visible {
	border-color: var(--pmr-accent);
	color: var(--pmr-accent);
}

.pmr-pages .pmr-pages__current {
	font-weight: 700;
	background: var(--pmr-accent);
	border-color: var(--pmr-accent);
	color: #fff;
}

.pmr-pages .pmr-pages__gap {
	border-color: transparent;
}

/* Phones: Previous and Next show only their arrows, so the page numbers stay on one row;
   screen readers still read the words. */
@media (max-width: 480px) {
	.pmr-pages__word {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}
}

.pmr-empty {
	color: var(--pm-muted, #5c6470);
}

/* Photo viewer */
.pmr-lb-lock {
	overflow: hidden;
}

.pmr-lb {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.9);
}

.pmr-lb.is-open {
	display: flex;
}

.pmr-lb__figure {
	margin: 0;
	max-width: 92vw;
	text-align: center;
}

.pmr-lb__img {
	display: block;
	max-width: 92vw;
	max-height: 84vh;
	margin: 0 auto;
	object-fit: contain;
}

.pmr-lb__count {
	min-height: 1em;
	margin-top: 8px;
	color: #ddd;
	font-size: 13px;
}

.pmr-lb button {
	position: absolute;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
}

.pmr-lb button:hover,
.pmr-lb button:focus-visible {
	background: rgba(255, 255, 255, 0.28);
}

.pmr-lb__close {
	top: 16px;
	right: 16px;
}

.pmr-lb__prev {
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
}

.pmr-lb__next {
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
}

.pmr-lb button[hidden] {
	display: none;
}