/* TESTIMONIALS — .db-testimonials  (faq, wine-catering = 2)
   Horizontal scroll-snap rail. Native drag/swipe, no JS; the arrow is
   progressive enhancement from assets/js/rail.js. */
.db-testimonials .db-testimonials__inner { display: flex; flex-direction: column; gap: 60px; padding-block: 120px; }
.db-testimonials__title { font-size: 1.5rem; line-height: 32px; }
.db-testimonials .db-rail { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.db-testimonials .db-rail::-webkit-scrollbar { display: none; }
/* The card is NOT a filled box. [Figma 368:2363, component 368:3494] it is a
   420-wide column on the section's own ground with `padding: 0 32px` and a 1px
   #BFB8B1 rule down its LEFT edge — the cards read as columns divided by rules,
   the same language as service-cols, not as tiles. Shipped as a sand-filled box
   with 32/40 padding all round and no rule, which is what the client saw. */
.db-testimonials__quote {
	flex: 0 0 84%; scroll-snap-align: start;
	display: flex; flex-direction: column; gap: 32px;
	padding: 0 32px;
	background: transparent;
	border-left: 1px solid var(--line);   /* #BFB8B1 = --line, not --line2 (#B5AEA6) */
}
/* The gold quote mark, 32x24 above the text [Figma 368:3496; the prototype ships
   it as assets/wine-catering/quote-mark.svg]. Delivered as a ::before with the
   SVG inlined as a data URI rather than an element in every card — the markup
   stays clean and any future card gets it without being rebuilt. */
.db-testimonials__quote::before {
	content: "";
	display: block;
	flex: 0 0 auto;
	width: 32px;
	height: 24px;
	background: url("data:image/svg+xml,%3Csvg%20width%3D%2232%22%20height%3D%2224%22%20viewBox%3D%220%200%2032%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M24.7018%2024L17.4035%2016.6875L27.1345%200L30.0351%200.750001L26.2924%2010.9687L32%2016.6875L24.7018%2024ZM7.29825%2024L0%2016.6875L9.73099%200L12.6316%200.750001L8.88889%2010.9687L14.5965%2016.6875L7.29825%2024Z%22%20fill%3D%22%23C78F54%22%2F%3E%0A%3C%2Fsvg%3E") left top / contain no-repeat;
}

.db-testimonials__quote p { font-size: 16px; line-height: 1.75; color: var(--muted); }

/* company over author, 4px apart [368:3500] */
.db-testimonials__cite { display: flex; flex-direction: column; gap: 4px; }
.db-testimonials__company { font-family: var(--font-display); text-transform: uppercase; font-size: 1.125rem; line-height: 1.55; color: var(--ink); margin: 0; }
.db-testimonials__author { font-size: 16px; color: var(--ink); margin: 0; }
.db-testimonials__cite { font-family: var(--font-display); text-transform: uppercase; font-size: 18px; line-height: 28px; color: var(--ink); }
.db-testimonials__cite .db-testimonials__person { font-family: var(--font-body); text-transform: none; font-size: 16px; line-height: 24px; }
@media (min-width: 861px) {
	/* 420 fixed, so four cards overflow 1360 and the rail is meant to scroll
	   [368:2362 holds four 420s at gap 16 = 1728]. Was a 3-up fraction with 40px
	   padding, which fitted three and lost the slider. */
	.db-testimonials__quote { flex: 0 0 420px; padding: 0 32px; }
	.db-testimonials__title { font-size: 5rem; line-height: 88px; }
}

/* --- variant: centred heading  (.db-testimonials--centered) ---------------
   `.wc-quotes` centres its heading; `.fq-testimonials` leaves it left. */
.db-testimonials--centered .db-testimonials__title { text-align: center; }

/* --- rail arrows ----------------------------------------------------------
   Client: on desktop there was no way to advance the rail at all — four 420px
   cards overflow 1360, but a mouse has no swipe. Not in the frame (the
   prototype had a single "next" button); the site's own .db-rail-nav is the
   closest existing control, so it is reused rather than invented.
   Shown at every width: this section is a rail on desktop too. */
.db-testimonials .db-rail-nav.is-ready { display: flex; justify-content: flex-end; }
/* The nav is the last child of __inner, so the column's 60px gap sits above it
   and the section's 120px bottom padding below. It was briefly a sibling of
   __inner, which put the 120px padding BETWEEN the rail and the arrows and left
   the buttons hard against the section's bottom-right corner — reported by the
   client as "touching the edge". */