/* ═══════════════════════════════════════════════════════════════
   TestRoute - Onze eigen rating (ster, tegels, blok)
   ───────────────────────────────────────────────────────────────
   Getekend door includes/rating.php (tr_rating_render,
   tr_rating_stars). 4.89.0 · de 'own'-stand.

   VIER MATEN, één regel per maat: de tegel is steeds 10px groter dan
   de ster erin, zodat de lucht rond de ster overal gelijk oogt.

       hero   28 / 18   hero's, scorekaart homepage
       score  34 / 22   het scoreblok op /reviews/
       card   24 / 15   reviewkaarten
       foot   22 / 13   de footerregel

   !important overal: Cornerstone's cascade is agressief, en deze
   component staat in slots van zes verschillende modules.
   ═══════════════════════════════════════════════════════════════ */

.tr-rt{
	/* Alleen de twee die echt doorwerken. --tr-rt-mid en --tr-rt-empty zitten
	   in de symbolen, die via <use> van deze container erven; het verloop
	   staat vast in de sprite (zie rating.php, VASTE KLEUREN). */
	--tr-rt-mid: #03c988;
	--tr-rt-empty: rgba(255,255,255,.16);
	--tr-rt-tile: rgba(255,255,255,.08);
	--tr-rt-tile-line: rgba(255,255,255,.10);
	--tr-rt-radius: 0px;

	display:flex !important;
	flex-direction:column !important;
	gap:12px !important;
	font-family:'Inter','Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif !important;
}
.tr-rt.is-center{ align-items:center !important; text-align:center !important }
.tr-rt.is-start{ align-items:flex-start !important; text-align:left !important }

/* De sprite mag geen ruimte innemen. Zonder deze regel houdt een <svg>
   met width 0 in sommige browsers nog altijd een regelhoogte over. */
.tr-rt__sprite{
	position:absolute !important;
	width:0 !important; height:0 !important;
	overflow:hidden !important;
}

/* ── De rij ──────────────────────────────────────────────────── */
.tr-rt__stars{
	display:inline-flex !important;
	align-items:center !important;
	gap:3px !important;
	line-height:0 !important;
}
.tr-rt__tile{
	display:inline-grid !important;
	place-items:center !important;
	box-sizing:border-box !important;
	background:var(--tr-rt-tile) !important;
	border:1px solid var(--tr-rt-tile-line) !important;
	border-radius:var(--tr-rt-radius) !important;
	flex:none !important;
}
.tr-rt__stars svg{ display:block !important }

.tr-rt__stars.is-hero  .tr-rt__tile{ width:28px !important; height:28px !important }
.tr-rt__stars.is-hero  svg{ width:18px !important; height:18px !important }
.tr-rt__stars.is-score .tr-rt__tile{ width:34px !important; height:34px !important }
.tr-rt__stars.is-score svg{ width:22px !important; height:22px !important }
.tr-rt__stars.is-card  .tr-rt__tile{ width:24px !important; height:24px !important }
.tr-rt__stars.is-card  svg{ width:15px !important; height:15px !important }
.tr-rt__stars.is-foot  .tr-rt__tile{ width:22px !important; height:22px !important }
.tr-rt__stars.is-foot  svg{ width:13px !important; height:13px !important }
.tr-rt__stars.is-score{ gap:4px !important }
.tr-rt__stars.is-foot{ gap:2px !important }

/* Zonder tegels: de ster krijgt dan de maat van de tegel, want anders
   krimpt de rij op elke plek waar 'plain' gebruikt wordt. */
.tr-rt__stars.is-plain{ gap:2px !important }
.tr-rt__stars.is-plain.is-hero  svg{ width:22px !important; height:22px !important }
.tr-rt__stars.is-plain.is-score svg{ width:26px !important; height:26px !important }
.tr-rt__stars.is-plain.is-card  svg{ width:16px !important; height:16px !important }
.tr-rt__stars.is-plain.is-foot  svg{ width:14px !important; height:14px !important }

.tr-rt__link{
	display:inline-flex !important;
	text-decoration:none !important;
	border:0 !important;
}
.tr-rt__link:hover .tr-rt__tile{ border-color:rgba(255,255,255,.20) !important }

/* ── De zin ──────────────────────────────────────────────────── */
.tr-rt__line{
	margin:0 !important;
	font-size:14px !important;
	font-weight:500 !important;
	line-height:1.4 !important;
	color:rgba(255,255,255,.78) !important;
	text-wrap:pretty !important;
}
.tr-rt__line b{ color:#fff !important; font-weight:700 !important }

/* ── De bronregel ────────────────────────────────────────────── */
.tr-rt__src{
	margin:2px 0 0 !important;
	font-size:12.5px !important;
	font-weight:500 !important;
	line-height:1.4 !important;
	color:rgba(255,255,255,.5) !important;
}
.tr-rt__src a{
	color:rgba(255,255,255,.6) !important;
	text-decoration:underline !important;
	text-underline-offset:3px !important;
}
.tr-rt__src a:hover{ color:#fff !important; text-decoration-color:#fff !important }
.tr-rt__dot{ margin:0 7px !important; color:rgba(255,255,255,.3) !important }

/* ── Op licht ────────────────────────────────────────────────── */
/* De off-white secties. Glas op wit is geen glas: daar wordt de tegel een
   lichte vlak met een echte lijn, en de lege ster navy op 14%. */
.tr-rt.is-light,
.is-light .tr-rt{
	--tr-rt-empty: rgba(13,27,42,.14);
	--tr-rt-tile: rgba(13,27,42,.05);
	--tr-rt-tile-line: rgba(13,27,42,.10);
}
.tr-rt.is-light .tr-rt__line{ color:#415a77 !important }
.tr-rt.is-light .tr-rt__line b{ color:#0d1b2a !important }
.tr-rt.is-light .tr-rt__src{ color:#5b7189 !important }
.tr-rt.is-light .tr-rt__src a{ color:#415a77 !important }
.tr-rt.is-light .tr-rt__src a:hover{ color:#0d1b2a !important }

/* ── Mobiel ──────────────────────────────────────────────────── */
/* Eén trede kleiner, en de hero centreert ook in de start-variant: in een
   smalle kolom leest een linksuitgelijnd blok onder een gecentreerde CTA
   als een losse staart. */
@media (max-width: 599px){
	.tr-rt{ gap:10px !important }
	.tr-rt__stars.is-hero  .tr-rt__tile{ width:26px !important; height:26px !important }
	.tr-rt__stars.is-hero  svg{ width:16px !important; height:16px !important }
	.tr-rt__stars.is-score .tr-rt__tile{ width:30px !important; height:30px !important }
	.tr-rt__stars.is-score svg{ width:19px !important; height:19px !important }
	.tr-rt__line{ font-size:13px !important }
	.tr-rt__src{ font-size:12px !important }
}