/* ---------------------------------------------------------
   Testimonials sectie ([testimonials] + [testimonial]).
   Responsive grid — 3 kolommen op wide, 2 op tablet, 1 op mobile.
   Minimalistisch: serif-quote, subtiele attribution, geen zware
   card-backgrounds. Past bij de rest van de editorial styling.
--------------------------------------------------------- */

.lotarch-testimonials {
	max-width: var( --lotarch-page-content-max-width );
	margin: 0 auto;
	padding: clamp( 2rem, 4vw, 3.5rem ) clamp( 1.5rem, 4vw, 3rem );
}

.lotarch-testimonials__title {
	font-family: var( --lotarch-font-serif );
	font-size: var( --lotarch-alinea-title-size );
	font-weight: var( --lotarch-alinea-title-weight );
	line-height: var( --lotarch-alinea-title-line-height );
	letter-spacing: var( --lotarch-alinea-title-letter-spacing );
	color: var( --lotarch-fg-primary );
	margin: 0 0 clamp( 1.5rem, 3vw, 2.5rem );
	text-align: left;
}

/* Oranje streepje onder "Wat klanten zeggen" — matcht de alinea-titel
   styling op editorial pagina's (verduurzamen, over-lotarchitectuur)
   én "Stuur een bericht" op de contactpagina. */
.lotarch-testimonials__title::after {
	content: '';
	display: block;
	width: 2.5rem;
	height: 2px;
	background: #FD9606;
	margin-top: 0.6rem;
}

.lotarch-testimonials__grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: clamp( 1.5rem, 3vw, 2.5rem );
	align-items: start;
}

/* Individueel testimonial-blok — figure + blockquote + figcaption.
   Compacte editorial look: dunne top-border als scheiding tussen
   testimonials, klein oranje opening-quote als accent, tight vertical
   ritme.

   Eerste testimonial krijgt GEEN top-border zodat er geen grijze lijn
   direct onder de sectie-titel ("Wat klanten zeggen") verschijnt —
   alleen het oranje streepje van de titel-::after is daar dan te zien.
   Volgende testimonials houden hun border-top als visuele scheiding. */
.lotarch-testimonial {
	margin: 0;
	padding: clamp( 0.75rem, 1.5vw, 1rem ) 0 0;
	border-top: 1px solid rgba( 26, 26, 26, 0.1 );
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.lotarch-testimonial:first-child {
	border-top: 0;
	padding-top: 0;
}

.lotarch-testimonial__quote {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var( --lotarch-font-serif );
	font-size: clamp( 0.95rem, 1.05vw, 1.05rem );
	font-style: italic;
	line-height: 1.55;
	color: #2a2a2a;
	letter-spacing: -0.005em;
}

/* Klein oranje opening-quote als typografisch accent BOVEN de tekst.
   Kleiner formaat (2.25rem ipv 4.5rem) + krappe margin-bottom (0.15rem)
   zodat 'ie nauw tegen de tekst aanzit — leest als een subtiele editorial
   accent-lead ipv als een dominante grafische element. Oranje matcht de
   site accent (nav/CTA hover, streep onder verduurzamen thema-titels). */
.lotarch-testimonial__quote::before {
	content: "\201C"; /* left double quotation mark */
	display: block;
	font-family: var( --lotarch-font-serif );
	font-style: normal;
	font-weight: 500;
	font-size: 2.25rem;
	line-height: 0.7;
	color: #FD9606;
	opacity: 0.85;
	margin-bottom: 0.15rem;
	pointer-events: none;
	user-select: none;
}

/* Attribution als één inline regel: naam · rol. Naam in sans (labelig,
   crisp), rol in serif italic (byline-magazine feel). Dot-separator in
   grijs tussenin. Wraps op smalle viewport. */
.lotarch-testimonial__attribution {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 0.55rem;
	margin-top: auto; /* push naar bottom als quotes verschillen in hoogte */
	line-height: 1.4;
}

.lotarch-testimonial__name {
	font-family: var( --lotarch-font-sans );
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var( --lotarch-fg-primary );
}

.lotarch-testimonial__role {
	font-family: var( --lotarch-font-serif );
	font-size: 0.82rem;
	font-style: italic;
	color: #888;
	display: inline-flex;
	align-items: baseline;
	gap: 0.55rem;
}

/* Dot-separator vóór de rol — alleen als naam er ook is (rol solo
   krijgt geen bullet aan de linkerkant). Grijs voor subtiele scheiding. */
.lotarch-testimonial__name + .lotarch-testimonial__role::before {
	content: "\00B7"; /* middle dot */
	color: #bbb;
	font-style: normal;
	font-family: var( --lotarch-font-sans );
	font-size: 0.9rem;
	line-height: 1;
}

/* Responsive: 1 kolom op mobile (default is 2 kolommen naast elkaar). */
@media ( max-width: 700px ) {
	.lotarch-testimonials__grid {
		grid-template-columns: 1fr;
	}
}

/* --- Vertical layout (layout="vertical") — testimonials altijd onder
       elkaar in één kolom, ongeacht viewport-breedte. Bedoeld voor
       gebruik in smallere containers zoals een [vd_kolom] naast een
       formulier. Padding + max-width worden hier weggehaald zodat de
       sectie de volle breedte van z'n parent-kolom pakt. --- */
.lotarch-testimonials--layout-vertical {
	max-width: none;
	padding: 0;
	margin: 0;
}

.lotarch-testimonials--layout-vertical .lotarch-testimonials__grid {
	grid-template-columns: 1fr;
	gap: clamp( 1.75rem, 3vw, 2.5rem );
}