/* Brentwood Testimonial — quote block migrated from brentwood.ca. Self-contained:
 * the big faded quote marks and the dash are CSS (no image assets). */

.bw-tt {
	position: relative;
}

.bw-tt,
.bw-tt * {
	box-sizing: border-box;
}

.bw-tt__inner {
	position: relative;                  /* positioning context for the marks */
	/* top | right | bottom | left — mobile: less on the left, a bit more on the
	 * right so they read evenly (desktop sides are set to 4rem below). */
	padding: 4.5rem 2.25rem 20px 1.5rem;
}

/* When the testimonial sits in a single-column Kadence row, drop that row's
 * top/bottom padding. Scoped via :has so other 1-column rows are unaffected. */
.kt-row-column-wrap.kt-has-1-columns:has(.bw-tt) {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

@media (min-width: 768px) {
	.bw-tt__inner { padding-left: 4rem; padding-right: 4rem; } /* md:px-16 */
}

.bw-tt__quote { position: relative; } /* positioning context for the close mark */

.bw-tt__mark {
	position: absolute;
	height: 4rem;                  /* h-16 */
	width: auto;
	opacity: .1;                   /* opacity-10 */
	pointer-events: none;
	user-select: none;
}

/* Open: anchored to the card top-left (always inside, gap above the text).
 * Mobile: flush to the left edge; desktop nudged in (see md rule below). */
.bw-tt__mark--open  { top: .5rem; left: 0; }

/* Close: bottom-right of the quote text, offset outward like the live site. */
.bw-tt__mark--close { bottom: 0; right: 0; margin: 0 -3rem -2rem 0; }

/* Body quote. */
.bw-tt__body {
	position: relative;
	z-index: 3;
	font-style: italic;
	line-height: 1.7;              /* leading-relaxed */
	margin-bottom: 1rem;
	color: #4b5563;
}

.bw-tt__body p { margin: 0 0 1rem; font-style: italic; }
.bw-tt__body p:last-child { margin-bottom: 0; }

/* Short dash (dash.svg) between the body and the attribution (always left). */
.bw-tt__dash {
	display: block;
	width: 4rem;       /* w-16 */
	height: .25rem;    /* h-1 */
	margin: 0 0 1rem;  /* mb-4 */
}

/* Attribution ("from who"). The inner block sizes to its text; the flex
 * container positions it (right for the right variant) while the text inside
 * stays left-aligned — matching the live site. */
.bw-tt__from {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	width: 100%;
	align-items: flex-start;       /* block on the left by default */
}

.bw-tt__from-inner {
	text-align: left;              /* text always left-aligned */
	color: #4b5563;
	line-height: 1.4;
}

@media (min-width: 768px) {
	.bw-tt--right .bw-tt__from { align-items: flex-end; } /* block on the right, text still left */
	/* Placed after the base rule so it actually overrides left:0 on desktop. */
	.bw-tt__mark--open { left: 1rem; }                    /* desktop: nudged right */
}