/*! 24rent-testimonials 2.0.0 */
/**
 * 24Rent Testimonials — cosmetic styles (bundle, shell API 1).
 *
 * Geometry (scroll-snap row, slide widths per breakpoint, card padding, type sizes, the space the
 * controls take) is printed inline by the shell (RT_TST_Shortcodes::structure_css), so nothing
 * moves when this file arrives. This file carries colour, decoration and the controls' looks.
 * Design tokens captured from the live 24rent.fi slider; fonts are inherited from the theme.
 */

.trt-slider-wrap,
.trt-archive {
	--trt-teal:        #0bb395;
	--trt-card-radius: 5px;
	--trt-card-shadow: 0 2px 18px rgba(0, 0, 0, 0.3);
	--trt-text:        #343a40;
	--trt-name:        #000;
	--trt-meta:        #000;
	--trt-star-empty:  #878787;
	--trt-star-fill:   #f79400;
	--trt-dot:         rgba(255, 255, 255, 0.55);
	--trt-dot-active:  #fbb022;
}

/* ---------- Card (shared by slider + archive) ---------- */
.trt-card {
	background: #fff;
	border-radius: var(--trt-card-radius);
	box-shadow: var(--trt-card-shadow);
	color: var(--trt-text);
	font-family: inherit;
}

.trt-card__img {
	border-radius: 50%;
	object-fit: cover;
	display: inline-block;
}

.trt-card__more,
.trt-card__less {
	color: var(--trt-star-fill);
	font-style: italic;
	font-weight: 600;
	text-decoration: underline;
	white-space: nowrap;
}
.trt-card__full summary:hover .trt-card__more,
.trt-card__full summary:hover .trt-card__less {
	text-decoration: none;
}
.trt-card__full summary:focus-visible {
	outline: 2px solid var(--trt-teal);
	outline-offset: 2px;
}

.trt-card__name {
	color: var(--trt-name);
	font-weight: 700;
}
.trt-card__company {
	color: var(--trt-meta);
	font-weight: 700;
}
.trt-card__company a {
	color: inherit;
	text-decoration: none;
}
.trt-card__company a:hover {
	text-decoration: underline;
}

/* ---------- Card layout (release D) ----------
   The shell prints a card as image, text, name + date, stars: that order stays in the HTML so
   the name keeps its h3 for crawlers. Here the stars move above the text so the rating is read
   first, the name and the date share one line, and a cut review shows three lines before its
   "Lue lisää". Only the cut excerpt is clamped: a review short enough to have no expander is
   never hidden. Every selector starts with .trt-card on purpose: on the archive page this
   stylesheet sits in the head and the shell's inline geometry comes later in the body, so a bare
   class name would lose to it. */
.trt-card .trt-card__image { order: -2; }
.trt-card .trt-stars {
	order: -1;
	margin: 0 0 12px;
}
.trt-card .trt-card__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	column-gap: 0.5em;
}
.trt-card .trt-card__company { margin-top: 0; }
/* A dot between the two, with empty alternative text so it is not read out. Every browser
   gets it before the date; where :has() exists it hangs off the name instead, so a long pair
   that wraps ends its first line with the dot rather than starting the second with it. A
   browser without the alternative-text syntax drops the declaration and shows the gap alone. */
.trt-card .trt-card__name + .trt-card__company::before {
	content: "·" / "";
	margin-right: 0.5em;
}
@supports selector(.a:has(+ .b)) {
	.trt-card .trt-card__name + .trt-card__company::before { content: none; }
	.trt-card .trt-card__name:has(+ .trt-card__company)::after {
		content: "·" / "";
		margin-left: 0.5em;
	}
}
.trt-card .trt-card__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}
.trt-card .trt-card__more {
	display: inline-block;
	margin-top: 4px;
}

/* ---------- Star rating (two stacked rows, gold clipped by width) ---------- */
.trt-stars__base { color: var(--trt-star-empty); }
.trt-stars__fill { color: var(--trt-star-fill); }

/* ---------- Slider controls ---------- */
.trt-track:focus-visible {
	outline: 2px solid var(--trt-dot-active);
	outline-offset: 2px;
}
.trt-dot {
	background: var(--trt-dot);
	cursor: pointer;
	transition: background 0.2s;
}
.trt-dot.is-active {
	background: var(--trt-dot-active);
}
.trt-prev,
.trt-next,
.trt-pause {
	background: rgba(255, 255, 255, 0.85);
	color: #2b2b2b;
	cursor: pointer;
	font-weight: 700;
}
.trt-prev::before { content: "\2039"; }
.trt-next::before { content: "\203A"; }
.trt-pause::before { content: "\275A\275A"; font-size: 9px; letter-spacing: 1px; }
.trt-pause.is-paused::before { content: "\25B6"; font-size: 11px; letter-spacing: 0; }
.trt-dot:focus-visible,
.trt-prev:focus-visible,
.trt-next:focus-visible,
.trt-pause:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* read-more button */
.trt-more__btn {
	background: #2b2b2b;
	color: #fff;
	border-radius: 40px;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.2s;
}
.trt-more__btn:hover,
.trt-more__btn:focus {
	background: #000;
	color: #fff;
}

/* ---------- Archive grid ---------- */
.trt-grid {
	transition: opacity 0.2s ease;
}
.trt-grid.is-loading {
	opacity: 0.4;
}

/* filter bar */
.trt-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin: 0 0 26px;
}
.trt-filter {
	background: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 40px;
	padding: 8px 18px;
	font: 700 13px/1 inherit;
	color: var(--trt-text);
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.trt-filter:hover {
	border-color: var(--trt-teal);
	color: var(--trt-teal);
}
.trt-filter.is-active {
	background: var(--trt-teal);
	border-color: var(--trt-teal);
	color: #fff;
}

/* load more */
.trt-loadmore-wrap {
	text-align: center;
	margin-top: 34px;
	margin-bottom: 34px;
}
.trt-loadmore-wrap[hidden] {
	display: none;
}
.trt-loadmore {
	background: var(--trt-teal);
	color: #fff;
	border: 0;
	border-radius: 40px;
	padding: 13px 32px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: filter 0.2s;
}
.trt-loadmore:hover { filter: brightness(0.92); }
.trt-loadmore[disabled] { opacity: 0.6; cursor: default; }

.trt-loading {
	display: inline-flex;
	gap: 5px;
	margin-left: 10px;
	vertical-align: middle;
}
.trt-loading[hidden] { display: none; }
.trt-loading span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--trt-teal);
	animation: trt-bounce 1s infinite ease-in-out both;
}
.trt-loading span:nth-child(2) { animation-delay: 0.15s; }
.trt-loading span:nth-child(3) { animation-delay: 0.3s; }
@keyframes trt-bounce {
	0%, 80%, 100% { transform: scale(0.5); opacity: 0.4; }
	40%           { transform: scale(1);   opacity: 1;   }
}
@media (prefers-reduced-motion: reduce) {
	.trt-loading span { animation: none; opacity: 1; }
	.trt-dot, .trt-grid { transition: none; }
}