/*
 * Testimonials — contact band + review-submission modal
 * Depends on: design-tokens.css
 * Page: body.log-testimonials-page
 */

/* !important: beats log-global-layout-fix.css's .entry-content.is-layout-constrained > *
   margin-block reset, which otherwise zeroes this section's top AND bottom margin —
   the latter left it flush against the shared sitewide footer with no breathing room. */
.contact-band {
	max-width: 1160px;
	margin: 34px auto 60px !important;
	padding: 0 20px;
}

.cb-inner {
	position: relative;
	overflow: hidden;
	background: linear-gradient(145deg, var(--ink-950) 0%, var(--ink-900) 50%, #0f0f0f 100%);
	border: 1px solid var(--line-gold);
	border-radius: var(--r-lg);
	padding: 36px 34px;
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 28px;
	row-gap: 12px;
	align-items: center;
	transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}

/* cb-text + cb-cta stack in the left column, cb-methods spans both rows
   on the right — matches reference (cb-cta sits under cb-text, not
   floating as a 3rd item in a single row). */
.cb-inner .cb-text {
	grid-column: 1;
	grid-row: 1;
}

.cb-inner .cb-cta {
	grid-column: 1;
	grid-row: 2;
}

.cb-inner .cb-methods {
	grid-column: 2;
	grid-row: 1 / 3;
	justify-self: end;
}

.cb-inner:hover {
	transform: translateY(-4px);
	box-shadow: 0 32px 60px var(--ink-glass-35), 0 0 0 1px var(--gold-glass-15);
}

.cb-inner::before,
.cb-inner::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	opacity: .28;
	pointer-events: none;
}

.cb-inner::before {
	width: 220px;
	height: 220px;
	background: radial-gradient(circle, var(--gold-glass-20), transparent 70%);
	top: -70px;
	left: -40px;
	filter: none;
	opacity: 1;
}

.cb-inner::after {
	width: 200px;
	height: 200px;
	background: radial-gradient(circle, var(--gold-glass-10), transparent 70%);
	bottom: -70px;
	right: -30px;
	filter: none;
	opacity: 1;
}

.cb-text {
	position: relative;
	z-index: 1;
	/* Raw 20vw shrinks below a readable width on tablet/laptop sizes
	   (e.g. ~160px at 800px wide) and can break words mid-syllable.
	   clamp() keeps the same look at the desktop sizes this was tuned
	   for (1440px → 288px, inside the clamp range) while never going
	   narrower than 220px. Phone widths get their own full-width
	   override below, once .cb-inner drops to a single stacked column. */
	max-width: clamp(220px, 20vw, 100%);
}

.cb-text span.eyebrow {
	display: block;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gold-500);
	margin-bottom: 6px;
}

.cb-text h2 {
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(22px, 2.8vw, 32px);
	color: var(--white);
	line-height: 1.2;
}

.cb-text h2 em {
	font-style: italic;
	color: var(--gold-400);
}

/* line-height !important: beats log-parent-reset.css's .page .type-page .entry-content p
   {line-height:inherit} (0,3,1) — this is a <p>, so it otherwise loses to that reset. */
.cb-text p {
	position: relative;
	z-index: 1;
	color: var(--gray-light);
	font-size: 12.5px;
	margin-top: 8px;
	max-width: 320px;
	line-height: 1.2 !important;
}

.cb-methods {
	position: relative;
	z-index: 1;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.cb-method {
	display: flex;
	align-items: center;
	gap: 10px;
	transition: transform .3s var(--ease);
}

.cb-method:hover {
	transform: translateY(-3px);
}

.cb-method-icon {
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: var(--white-glass-10);
	color: var(--gold-400);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 16px;
}

.cb-method strong {
	display: block;
	font-size: 12.5px;
	color: var(--white);
	line-height: 1.2;
}

.cb-method span.d {
	display: block;
	font-size: 11px;
	color: var(--gray-light);
	line-height: 1.2;
}

.cb-cta {
	position: relative;
	z-index: 1;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.btn-gold {
	position: relative;
	overflow: hidden;
	background: var(--gold-500);
	color: var(--ink-900);
	font-weight: 700;
	font-size: 12.5px;
	line-height: 1.2;
	padding: 13px 22px;
	border-radius: var(--r-pill);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	box-shadow: var(--shadow-gold);
	transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}

.btn-gold::after {
	content: '';
	position: absolute;
	top: 0;
	left: -60%;
	width: 40%;
	height: 100%;
	background: linear-gradient(115deg, transparent, var(--white-glass-50), transparent);
	transform: skewX(-20deg);
	transition: left .6s var(--ease);
}

.btn-gold:hover::after {
	left: 130%;
}

.btn-gold:hover {
	background: var(--gold-400);
	color: var(--ink-900);
	transform: translateY(-2px);
	box-shadow: var(--shadow-gold-lg);
}

.btn-outline-w {
	border: 1.4px solid var(--white-glass-40);
	color: var(--white);
	font-weight: 700;
	font-size: 12.5px;
	line-height: 1.2;
	padding: 12px 21px;
	border-radius: var(--r-pill);
	transition: all .25s var(--ease);
}

.btn-outline-w:hover {
	background: var(--white-glass-15);
	color: var(--white);
}

@media(max-width:760px) {
	.cb-inner {
		grid-template-columns: 1fr;
		text-align: center;
		padding: 32px 22px;
		gap: 24px;
	}

	.cb-inner .cb-text,
	.cb-inner .cb-cta,
	.cb-inner .cb-methods {
		grid-column: 1;
		justify-self: center;
	}

	.cb-inner .cb-text {
		grid-row: 1;
		/* Desktop's 20vw (below) is ~78px at phone widths — narrow enough
		   to break words mid-syllable. Full-width instead, matching the
		   stacked/centered layout the rest of this breakpoint already
		   uses. */
		max-width: 100%;
	}

	.cb-inner .cb-methods {
		grid-row: 2;
	}

	.cb-inner .cb-cta {
		grid-row: 3;
	}

	.cb-text p {
		margin: 8px auto 0;
	}

	/* 2-up grid instead of one-per-row — fits Shop/Support/Email as a
	   2+1 layout instead of a long single column. */
	.cb-methods {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 18px;
		width: 100%;
	}

	.cb-method {
		flex-direction: column;
		gap: 8px;
		text-align: center;
		align-items: center;
	}

	.cb-cta {
		flex-direction: column;
		width: 100%;
		gap: 10px;
	}

	.cb-cta a,
	.cb-cta button {
		width: 100%;
		justify-content: center;
	}
}

/* ---- Review submission modal ---- */

.modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 28, 25, .55);
	backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	z-index: 400;
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s var(--ease);
}

.modal-overlay.open {
	opacity: 1;
	pointer-events: auto;
}

.modal-box {
	position: relative;
	background: var(--white);
	border-radius: var(--r-lg);
	padding: 32px 28px;
	max-width: 440px;
	width: 100%;
	box-shadow: var(--shadow-lg);
	transform: scale(.94) translateY(10px);
	transition: transform .35s var(--ease);
	max-height: 88vh;
	overflow-y: auto;
}

.modal-overlay.open .modal-box {
	transform: scale(1) translateY(0);
}

.modal-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--paper);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	color: var(--ink-700);
	transition: all .25s var(--ease);
}

.modal-close:hover {
	background: var(--blush-100);
	color: var(--plum-700);
}

.modal-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--sage-700);
	letter-spacing: .04em;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.mf-label {
	display: block;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--ink-700);
	margin: 14px 0 6px;
	line-height: 1.2;
}

.mf {
	width: 100%;
	border: 1.4px solid var(--line);
	border-radius: 12px;
	padding: 11px 14px;
	font-family: inherit;
	color: var(--ink-900);
	transition: border-color .25s var(--ease);
	resize: vertical;
}

.mf:focus {
	outline: none;
}

/* Compound selector: Blocksy's input:is([type="text"],...) form-field defaults
   (font-size, focus border-color) out-specificity a bare .mf class alone. */
input.mf,
textarea.mf {
	font-size: 13px;
	line-height: 1.4;
}

input.mf:focus,
textarea.mf:focus {
	border-color: var(--plum-600);
}

.modal-btns {
	display: flex;
	gap: 10px;
	margin-top: 20px;
}

.modal-btns .btn-sage,
.modal-btns .btn-outline-plum {
	flex: 1;
	justify-content: center;
}