/*
 * MITS Proof Wall — MITS Daylight design system.
 * Ported verbatim from the September 2026 design handoff
 * (county-proof-wall.divi.html), with the class prefix changed from .cpw to
 * .mits-pw and an owner-reply block added.
 *
 * Purple is #450961 — the live-site value. The print guide (#560760) and the
 * old Locations module (#570960) carry different values; reconciling those is
 * a separate job. Do not "fix" them here.
 *
 * Montserrat 300/600 and Lato 400 are loaded site-wide by the theme, so no
 * @import or <link> here.
 */

.mits-pw {
	--pw-bg: #FCFAF7;
	--pw-surface: #FFFFFF;
	--pw-band: #F2EDE5;
	--pw-ink: #313239;
	--pw-muted: #6E6F79;
	--pw-accent: #450961;
	--pw-accent-l: #7d2ea2;
	--pw-hair: rgba(49, 50, 57, .12);
	background: var(--pw-bg);
	color: var(--pw-ink);
	font-family: Lato, sans-serif;
	padding: 74px 32px;
	box-sizing: border-box;
}

.mits-pw * { box-sizing: border-box; }

.mits-pw-head { max-width: 640px; margin: 0 0 32px; }

.mits-pw-label {
	font-family: Montserrat, sans-serif;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--pw-accent-l);
	margin: 0 0 16px;
}

.mits-pw-title {
	font-family: Montserrat, sans-serif;
	font-weight: 300;
	font-size: clamp(32px, 4.4vw, 54px);
	line-height: 1.02;
	letter-spacing: -.01em;
	color: var(--pw-ink);
	margin: 0 0 16px;
}

.mits-pw-sub {
	font-size: 17px;
	line-height: 1.7;
	color: var(--pw-ink);
	margin: 0;
	max-width: 52ch;
}

.mits-pw-ticker {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
	padding: 0 0 16px;
	border-bottom: 1px solid var(--pw-hair);
}

.mits-pw-count {
	font-family: Montserrat, sans-serif;
	font-weight: 300;
	font-size: 44px;
	line-height: 1;
	color: var(--pw-accent);
	font-variant-numeric: tabular-nums;
}

.mits-pw-rating {
	font-family: Montserrat, sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--pw-accent-l);
}

.mits-pw-ticker-lbl { font-size: 15px; color: var(--pw-muted); }

.mits-pw-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 0 0; }

.mits-pw-chip {
	font-family: Montserrat, sans-serif;
	font-weight: 600;
	font-size: 12.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--pw-accent);
	background: transparent;
	border: 1px solid var(--pw-accent);
	border-radius: 2px;
	padding: 9px 14px;
	cursor: pointer;
	transition: background .15s, color .15s, transform .15s;
}

.mits-pw-chip:hover {
	background: var(--pw-accent-l);
	border-color: var(--pw-accent-l);
	color: #fff;
	transform: translateY(-2px);
}

.mits-pw-chip[aria-pressed="true"] { background: var(--pw-accent); color: #fff; }
.mits-pw-chip:focus-visible { outline: 2px solid var(--pw-accent-l); outline-offset: 2px; }
.mits-pw-chip .mits-pw-n { opacity: .6; margin-left: 6px; font-variant-numeric: tabular-nums; }

/* The dividers read as a ruled table.
 *
 * The rules live on the CARDS, not on the grid container. A container that
 * painted its own background behind the cells would show every unfilled cell
 * as an empty box — which happens on any row that is not full, including the
 * last row of the unfiltered wall and any county with one or two reviews.
 * Card-drawn rules simply stop where the cards stop. */
.mits-pw-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 0;
	background: none;
	border-top: 1px solid var(--pw-hair);
	border-left: 1px solid var(--pw-hair);
	margin-top: 32px;
}

.mits-pw-card {
	background: var(--pw-surface);
	border-right: 1px solid var(--pw-hair);
	border-bottom: 1px solid var(--pw-hair);
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.mits-pw-stars { color: var(--pw-accent); font-size: 14px; letter-spacing: .18em; }
.mits-pw-quote { font-size: 16px; line-height: 1.7; color: var(--pw-ink); margin: 0; }

/* ---- Read-more fold -------------------------------------------------------
 * CSS only, on purpose. WP Rocket delays JavaScript on this site, so a JS fold
 * would be a dead button until the visitor interacts with the page. The full
 * quote is always in the DOM; the clamp is visual only, so crawlers and screen
 * readers get the whole review either way.
 * -------------------------------------------------------------------------- */

.mits-pw-quote-block { display: flex; flex-direction: column; gap: 8px; }

/* Off-screen but still focusable and keyboard-operable. */
.mits-pw-fold {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.mits-pw-fold:not(:checked) ~ .mits-pw-quote {
	display: -webkit-box;
	-webkit-line-clamp: 8;
	line-clamp: 8;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mits-pw-more {
	align-self: flex-start;
	font-family: Montserrat, sans-serif;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--pw-accent);
	border-bottom: 1px solid var(--pw-hair);
	padding-bottom: 2px;
	cursor: pointer;
}

.mits-pw-more:hover { color: var(--pw-accent-l); border-bottom-color: var(--pw-accent-l); }
.mits-pw-fold:focus-visible ~ .mits-pw-more { outline: 2px solid var(--pw-accent-l); outline-offset: 3px; }
.mits-pw-fold:not(:checked) ~ .mits-pw-more .mits-pw-more-close { display: none; }
.mits-pw-fold:checked ~ .mits-pw-more .mits-pw-more-open { display: none; }

.mits-pw-reply {
	border-left: 2px solid var(--pw-band);
	padding: 0 0 0 16px;
	margin: 0;
}

.mits-pw-reply-lbl {
	display: block;
	font-family: Montserrat, sans-serif;
	font-weight: 600;
	font-size: 10.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--pw-muted);
	margin: 0 0 8px;
}

/* Clamped so the customer's words lead the card. The full reply stays in the
 * DOM; only the visible height is capped. */
.mits-pw-reply p {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--pw-muted);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mits-pw-attrib {
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--pw-hair);
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.mits-pw-name {
	font-family: Montserrat, sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .04em;
	color: var(--pw-ink);
}

.mits-pw-place { font-size: 13.5px; color: var(--pw-muted); }
.mits-pw-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }

.mits-pw-product {
	font-family: Montserrat, sans-serif;
	font-weight: 600;
	font-size: 10.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--pw-accent-l);
	background: var(--pw-band);
	border-radius: 2px;
	padding: 4px 8px;
}

.mits-pw-verified { font-size: 12.5px; color: var(--pw-muted); }

.mits-pw-link {
	font-family: Montserrat, sans-serif;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--pw-accent);
	text-decoration: none;
	border-bottom: 1px solid var(--pw-hair);
	padding-bottom: 2px;
	align-self: flex-start;
}

.mits-pw-link:hover { color: var(--pw-accent-l); border-bottom-color: var(--pw-accent-l); }

.mits-pw-empty {
	display: none;
	font-size: 16px;
	line-height: 1.7;
	color: var(--pw-muted);
	margin: 32px 0 0;
	max-width: 52ch;
}

/* Conversion path, in priority order: book, call, then the Google link as a
 * quiet citation rather than a button. */
.mits-pw-foot {
	margin-top: 32px;
	display: flex;
	align-items: center;
	gap: 16px 28px;
	flex-wrap: wrap;
}

.mits-pw-phone {
	font-family: Montserrat, sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--pw-accent);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
}

.mits-pw-phone:hover { color: var(--pw-accent-l); border-bottom-color: var(--pw-accent-l); }

/* Strict mode only: the way back to the full wall. */
.mits-pw-more-link {
	font-family: Montserrat, sans-serif;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--pw-accent);
	text-decoration: none;
	border-bottom: 1px solid var(--pw-hair);
	padding-bottom: 2px;
}

.mits-pw-more-link:hover { color: var(--pw-accent-l); border-bottom-color: var(--pw-accent-l); }

.mits-pw-gmb {
	font-size: 14px;
	color: var(--pw-muted);
	text-decoration: none;
	border-bottom: 1px solid var(--pw-hair);
	padding-bottom: 1px;
	margin-left: auto;
}

.mits-pw-gmb:hover { color: var(--pw-ink); border-bottom-color: var(--pw-muted); }

@media (max-width: 640px) {
	.mits-pw-gmb { margin-left: 0; }
	.mits-pw-btn { width: 100%; text-align: center; }
}

.mits-pw-btn {
	display: inline-block;
	font-family: Montserrat, sans-serif;
	font-weight: 600;
	font-size: 12.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff;
	background: var(--pw-accent);
	border-radius: 2px;
	padding: 14px 22px;
	text-decoration: none;
	transition: background .15s, transform .15s;
}

.mits-pw-btn:hover { background: var(--pw-accent-l); transform: translateY(-2px); color: #fff; }

.mits-pw[data-variant="compact"] { padding: 32px; }
.mits-pw[data-variant="compact"] .mits-pw-count { font-size: 32px; }

@media (max-width: 640px) {
	.mits-pw { padding: 32px 16px; }
	.mits-pw-card { padding: 24px; }
}

@media (prefers-reduced-motion: reduce) {
	.mits-pw-chip, .mits-pw-btn { transition: none; }
	.mits-pw-chip:hover, .mits-pw-btn:hover { transform: none; }
}