/* Rijschool Oude Maas – Reviews-marquee (twee rijen, tegengesteld drijvend, tekst- en fotokaarten) */

.rom-rv {
	position: relative;
	background: var(--rom-rv-bg, #f6f9fc);
	padding: clamp(72px, 9vw, 120px) 0;
	overflow: hidden;
}

/* Kop */
.rom-rv__head {
	max-width: 1400px;
	margin: 0 auto 40px;
	padding: 0 clamp(24px, 5vw, 72px);
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	flex-wrap: wrap;
}

.rom-rv__kicker {
	font-size: 12px;
	letter-spacing: .24em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--rom-rv-kicker, #e5007d);
	margin-bottom: 14px;
}

.rom-rv__title {
	margin: 0;
	font-family: 'Outfit', sans-serif;
	font-weight: 800;
	font-size: clamp(34px, 4.2vw, 56px);
	line-height: 1;
	letter-spacing: -.035em;
	color: var(--rom-rv-title, #0f1b2d);
}

.rom-rv__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--rom-rv-link, #0f1b2d);
	font-weight: 600;
	font-size: 15px;
	border-bottom: 1px solid var(--rom-rv-link-border, #d6dee8);
	padding-bottom: 6px;
	transition: color .2s, border-color .2s;
}

.rom-rv__link:hover {
	color: var(--rom-rv-link-hover, #0091d5);
	border-bottom-color: var(--rom-rv-link-hover, #0091d5);
}

.rom-rv__link-stars {
	color: var(--rom-rv-link-stars, #ffb400);
	letter-spacing: 1px;
}

/* Rijen */
.rom-rv__rows {
	display: flex;
	flex-direction: column;
	gap: var(--rom-rv-row-gap, 18px);
}

/*
 * Elke rij = mask-fade wrapper (bevat "marquee" in de classnaam, zodat de
 * prefers-reduced-motion-regel in rom-base.css er automatisch op grijpt)
 * met daarin de geanimeerde track.
 */
.rom-rv__marquee {
	position: relative;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.rom-rv__track {
	display: flex;
	align-items: stretch;
	gap: 18px;
	width: max-content;
	padding-right: 18px;
	will-change: transform;
}

/* Hover op een rij pauzeert alleen die rij (marquee-wrapper is het hover-target). */
.rom-rv__marquee:hover .rom-rv__track {
	animation-play-state: paused;
}

/*
 * Rij 1 drijft naar links (rom-drift, gedeeld via rom-base.css: 0 -> -50%).
 * Rij 2 drijft naar rechts via een eigen keyframe (-50% -> 0).
 *
 * Beide rijen starten al "onderweg" (niet vanaf de linkerrand): de
 * animation-delay wordt negatief gezet als fractie van de totale duur,
 * zodat de loop bij het laden al halverwege staat. Rij 2 krijgt een net
 * iets andere fase (-0.35 i.p.v. -0.5) zodat de twee rijen niet perfect
 * synchroon ogen.
 */
.rom-rv__track--1 {
	animation: rom-drift var(--rom-rv-dur, 60s) linear infinite;
	animation-delay: calc(var(--rom-rv-dur, 60s) * -0.5);
}

.rom-rv__track--2 {
	animation: rom-rv-drift-back var(--rom-rv-dur, 60s) linear infinite;
	animation-delay: calc(var(--rom-rv-dur, 60s) * -0.35);
}

@keyframes rom-rv-drift-back {
	from { transform: translate3d(-50%, 0, 0); }
	to   { transform: translate3d(0, 0, 0); }
}

/* Tekst-kaart */
.rom-rv__card {
	flex: none;
	width: var(--rom-rv-card-width, 340px);
	background: var(--rom-rv-card-bg, #ffffff);
	border: 1px solid var(--rom-rv-card-border, #e1e8ef);
	border-radius: 20px;
	padding: 22px 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	box-shadow: 0 10px 30px -20px rgba(15, 27, 45, .2);
}

.rom-rv__card-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}

.rom-rv__stars {
	color: var(--rom-rv-card-stars, #ffb400);
	letter-spacing: 2px;
	font-size: 13px;
}

.rom-rv__badge {
	font-size: 11px;
	font-weight: 700;
	color: var(--rom-rv-badge-text, #e5007d);
	background: var(--rom-rv-badge-bg, #fdf0f7);
	padding: 4px 10px;
	border-radius: 999px;
	white-space: nowrap;
}

.rom-rv__quote {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--rom-rv-quote, #0f1b2d);
}

.rom-rv__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
}

.rom-rv__avatar {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--rom-rv-avatar-bg, #e6f4fb);
	color: var(--rom-rv-avatar-text, #0091d5);
	display: grid;
	place-items: center;
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 13px;
}

.rom-rv__who {
	font-size: 13px;
	line-height: 1.3;
}

.rom-rv__name {
	display: block;
	font-weight: 600;
	color: var(--rom-rv-name, #0f1b2d);
}

.rom-rv__source {
	color: var(--rom-rv-source, #8a94a6);
}

/* Fotokaart (zelfde rij-hoogte als de tekst-kaarten via align-items:stretch op de track) */
.rom-rv__photo {
	flex: none;
	position: relative;
	width: var(--rom-rv-photo-width, 220px);
	/* Hoogte: per foto (--rom-rv-photo-h) > algemeen (--rom-rv-photo-height) > automatisch (even hoog als de tekstkaarten).
	   Zodra een hoogte is gekozen zetten de sliders ook --rom-rv-photo-minh en --rom-rv-photo-self. */
	height: var(--rom-rv-photo-h, var(--rom-rv-photo-height, auto));
	min-height: var(--rom-rv-photo-minh, 100%);
	align-self: var(--rom-rv-photo-self, stretch);
	overflow: hidden;
	border-radius: 20px;
	background: #0f1b2d;
	box-shadow: 0 10px 30px -20px rgba(15, 27, 45, .3);
}

.rom-rv__photo-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--rom-rv-fx, 50%) var(--rom-rv-fy, 50%);
	display: block;
}

.rom-rv__photo-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15, 27, 45, 0) 50%, var(--rom-rv-photo-overlay, rgba(15, 27, 45, .8)) 100%);
}

.rom-rv__photo-badge {
	position: absolute;
	left: 14px;
	bottom: 14px;
	background: var(--rom-rv-photo-badge-bg, #e5007d);
	color: var(--rom-rv-photo-badge-text, #ffffff);
	font-family: 'Outfit', sans-serif;
	font-weight: 800;
	font-size: 12px;
	padding: 6px 12px;
	border-radius: 999px;
	box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .4);
}

/* Google-logo rechtsonder in de tekstkaart (widget-instelling "Google-logo op tekstkaarten") */
.rom-rv__google {
	margin-left: auto;
	flex-shrink: 0;
	display: inline-grid;
	place-items: center;
	box-sizing: border-box;
	width: var(--rom-rv-google-size, 28px);
	height: var(--rom-rv-google-size, 28px);
	padding: calc(var(--rom-rv-google-size, 28px) * 0.2);
	border-radius: 50%;
	background: var(--rom-rv-google-bg, #ffffff);
	border: 1px solid var(--rom-rv-google-border, #e1e8ef);
	box-shadow: 0 4px 12px -6px rgba(15, 27, 45, .25);
}

.rom-rv__google svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Pijl-icoon achter de Google-link (vervangt het losse ↗-teken) */
.rom-rv__link-ico {
	display: inline-grid;
	place-items: center;
	width: var(--rom-rv-link-ico-size, 22px);
	height: var(--rom-rv-link-ico-size, 22px);
	border-radius: var(--rom-rv-link-ico-radius, 6px);
	background: var(--rom-rv-link-ico-bg, #0091d5);
	color: var(--rom-rv-link-ico-color, #ffffff);
	flex-shrink: 0;
	transition: background .2s;
}

.rom-rv__link:hover .rom-rv__link-ico {
	background: var(--rom-rv-link-ico-bg-hover, #0f1b2d);
}

.rom-rv__link-ico .rom-arrow-svg {
	width: 60%;
	height: 60%;
	display: block;
}