/**
 * Testimonial single-template styles. Reproduce the live testimonial pages 1:1.
 * Section styling comes from the carried webflow.css; this file holds only gaps
 * and any per-page custom-code overrides live alongside tm-custom/{slug}.css.
 */

/*
 * Background-image sizing. The live highlight thumbnails and hero video poster
 * are set via per-instance Webflow combo classes (is-lc-N / is-lc-hero-video)
 * that also declare background-size:cover. Those classes are dropped here (the
 * images come from the Media Library, emitted inline by the partials), so
 * restore the cover sizing/positioning on the base classes.
 */
.tm-hl-img,
.tm-hero-video {
	background-size: cover;
	background-position: 50% 0%;
	background-repeat: no-repeat;
}

/*
 * Quote-mark images sit in a 48px line-box on the live site (the mark's
 * font-size:48px/line-height:1 with an inline <img>). The theme's global
 * img{display:block} reset collapses that to the image height, shortening the
 * hero pull-quote by ~29px. Restore the inline flow for the mark images.
 */
.tm-hero-pq-mark img,
.tm-pq-mark {
	display: inline;
}

/*
 * Vertical rails. Testimonial pages draw their column rails from the per-section
 * vlines (tm-mid-vlines / tm-pq-vlines), exactly as the live site does, and
 * leave the global .pinstripes overlay border at 0. The theme forces that
 * overlay border to 1px site-wide (correct for other templates), which on
 * testimonials adds a second, continuous set of rails over the gaps between
 * sections. Remove that overlay border here so only the per-section rails show.
 */
body.single-testimonial .pinstripes-wrapper {
	border-left-width: 0;
	border-right-width: 0;
}

/*
 * Per-section rail colours follow each section's background, per the design:
 *   light (#f7f7f7) backgrounds → #e6e9ee rails
 *   purple (#5d4af5) backgrounds → #f7f7f799 rails
 *
 * Most sections are single-background so one colour applies. The hero is the
 * exception: it is light on top and a #5d4af5 block on the bottom (drawn by
 * .tm-hero-inner:before), so a single rail cannot carry both colours. Split it
 * into contiguous bands — a light-coloured rail over the top region and a purple
 * one over the block — using the section's own ::before/::after as the extra
 * rails (.tm-hero-inner:after stays the purple-block rail).
 */

/* Pull-quote section sits on the purple background → purple-bg rail colour. */
.tm-pq-vlines {
	border-left-color: rgba(253, 253, 252, 0.2);
	border-right-color: rgba(253, 253, 252, 0.2);
}

/* Hero — desktop. Purple block starts 566px down the inner (566+160px section
 * pad = 726px from the section top). */
.tm-hero-sect::before {
	content: "";
	position: absolute;
	pointer-events: none;
	z-index: 1;
	top: 0;
	height: 726px; /* section top (incl. 160px pad) → purple top */
	left: 80px;
	right: 80px;
	border-left: 1px solid #e6e9ee;
	border-right: 1px solid #e6e9ee;
}
.tm-hero-inner:after {
	inset: 566px 80px 0; /* purple top → section bottom */
	border-left: 1px solid rgba(253, 253, 252, 0.2);
	border-right: 1px solid rgba(253, 253, 252, 0.2);
}

/*
 * Hero + mid rails — mobile. At ≤767px the live design pulls the rails to a 10px
 * inset, drops the mid-section rails and shortens the hero rail to the purple
 * block only. Restore the mid rails and rebuild the hero rail as three contiguous
 * bands, all 10px from the screen edge:
 *   sect::before  light top    (section top → purple top)
 *   inner::after  purple block (#5d4af5 region, height 732 from the inner bottom)
 *   sect::after   light bottom (the 64px section bottom padding below the block)
 * Section padding is 96/24/64, inner padding 0/0/64, purple block height 732, so
 * the hero inner is inset 24px → -14px reaches 10px from the screen edge.
 */
@media screen and (max-width: 767px) {
	.tm-mid-vlines {
		border-left: 1px solid #e6e9ee;
		border-right: 1px solid #e6e9ee;
		left: 10px;
		right: 10px;
	}
	.tm-hero-sect::before {
		top: 0;
		bottom: 796px; /* purple top = 732 block + 64 bottom pad above section base */
		height: auto;
		left: 10px;
		right: 10px;
	}
	.tm-hero-inner:after {
		height: 732px;
		inset: auto -14px 0; /* purple block, 10px from screen */
	}
	.tm-hero-sect::after {
		content: "";
		position: absolute;
		pointer-events: none;
		z-index: 1;
		bottom: 0;
		height: 64px; /* section bottom padding, below the purple block */
		left: 10px;
		right: 10px;
		border-left: 1px solid #e6e9ee;
		border-right: 1px solid #e6e9ee;
	}
}

/*
 * Contact-form inputs — match the contact page (.cv2s) exactly, at every screen
 * size. The contact page draws the field box on a WRAPPER (.cv2s-input-wrap)
 * with a transparent, borderless <input> inside; the testimonial originally put
 * the border, fill and 38px auto-height straight on the input, so it ended up
 * shorter (38px vs 42px) and the carried Webflow `.w-input:focus` Webflow-blue
 * border plus the :focus-visible ring landed on the whole box instead of inset
 * over the field. Mirror the contact structure (.tm-contact-input-wrap) so
 * border, radius, fill, height, padding and every focus/hover/active state are
 * identical to the contact page. The box height is constant across breakpoints
 * on the contact page, so these rules carry no media queries.
 */
.tm-contact-input-wrap {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	width: 100%;
	height: 42px;
	padding: 10px 12px;
	background-color: #fdfdfc;
	border: 1px solid #e6e9ee;
	border-radius: 4px;
}
.tm-contact-input-wrap.tm-contact-wrap-textarea {
	height: auto;
	align-items: flex-start;
}
/* The input itself becomes transparent + borderless inside the wrapper, so the
   Webflow-blue focus border has nothing to paint and the :focus-visible ring
   sits inset over the field — exactly as on the contact page. */
.tm-contact-input {
	flex: 1 1 0;
	width: 100%;
	min-width: 0;
	height: 20px;
	min-height: 0;
	margin: 0;
	padding: 0;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	outline: none;
}
.tm-contact-input.tm-contact-textarea {
	height: auto;
	min-height: 120px;
	resize: vertical;
}
/* Focus state — match the contact page: the wrapper border darkens to #1a1a1a
   on focus and there is NO colour ring (the carried Webflow blue border + the
   generic purple :focus-visible ring are both suppressed, the darkened border
   being the focus indicator). */
.tm-contact-input-wrap:focus-within {
	border-color: #1a1a1a;
}
.tm-contact-input:focus,
.tm-contact-input:focus-visible {
	outline: none;
}