/*
 * OMTRA Recensioni - carousel.
 * Colours and type from the site: blue #303F9F / #3F51B5, orange #F57C00, Source Sans Pro.
 * Touch: native horizontal scroll with snap (momentum and swipe for free); mouse drag and arrows via JS.
 */

.omtra-reviews {
	--omtra-blue: #303f9f;
	--omtra-text: #303f9f;
	--omtra-muted: #5a63a8;
	--omtra-orange: #f57c00;
	--omtra-line: rgba(48, 63, 159, 0.1);
	--omtra-gap: 30px;
	--omtra-per: 3;
	--omtra-bleed: 0px;
	position: relative;
	margin: 0;
	padding: 0;
	font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
	text-align: left;
	color: var(--omtra-text);
}

.omtra-reviews *,
.omtra-reviews *::before,
.omtra-reviews *::after {
	box-sizing: border-box;
}

.omtra-reviews__title {
	margin: 0 0 28px;
	color: var(--omtra-blue);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
}

/* ---------- Viewport / track ---------- */

.omtra-reviews__viewport {
	position: relative;
	margin: 0 calc(-1 * var(--omtra-bleed));
	padding: 14px var(--omtra-bleed) 44px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding: 0 var(--omtra-bleed);
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	cursor: grab;
	outline: none;
}

.omtra-reviews__viewport::-webkit-scrollbar {
	display: none;
}

.omtra-reviews__viewport:focus-visible {
	outline: none;
}

/* Focus ring around the cards: inside the faded edges of the home band, so always visible. */
.omtra-reviews__viewport:focus-visible .omtra-reviews__track {
	outline: 2px solid var(--omtra-blue);
	outline-offset: 6px;
	border-radius: 8px;
}

.omtra-reviews.is-static .omtra-reviews__viewport {
	cursor: auto;
}

.omtra-reviews.is-dragging .omtra-reviews__viewport {
	scroll-snap-type: none;
	scroll-behavior: auto;
	cursor: grabbing;
	user-select: none;
	-webkit-user-select: none;
}

.omtra-reviews__track {
	display: flex;
	gap: var(--omtra-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.omtra-reviews__slide {
	display: flex;
	flex: 0 0 calc((100% - (var(--omtra-per) - 1) * var(--omtra-gap)) / var(--omtra-per));
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	scroll-snap-align: start;
}

.omtra-reviews__slide::before,
.omtra-reviews__slide::after {
	content: none;
}

/* ---------- Card ---------- */

.omtra-review {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0;
	padding: 34px 34px 30px;
	background: #fff;
	border: 1px solid rgba(48, 63, 159, 0.07);
	border-radius: 6px;
	box-shadow: 0 1px 0 rgba(48, 63, 159, 0.04), 0 22px 46px -26px rgba(48, 63, 159, 0.35);
	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Orange accent, the same rule used across the site. */
.omtra-review::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 34px;
	width: 46px;
	height: 3px;
	background: var(--omtra-orange);
	border-radius: 0 0 2px 2px;
}

@media (hover: hover) {
	.omtra-reviews:not(.is-dragging) .omtra-review:hover {
		transform: translateY(-4px);
		box-shadow: 0 1px 0 rgba(48, 63, 159, 0.04), 0 30px 60px -28px rgba(48, 63, 159, 0.45);
	}
}

.omtra-review__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 40px;
}

.omtra-review__rating {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.omtra-review__stars {
	display: inline-flex;
	gap: 3px;
	line-height: 0;
}

.omtra-review__stars svg {
	display: block;
	width: 16px;
	height: 16px;
}

/* Slightly darker than the brand orange: readable rating (contrast >= 3:1). */
.omtra-review__stars .is-on {
	fill: #e06c00;
}

.omtra-review__stars .is-off {
	fill: #fff;
	stroke: #a9afd6;
	stroke-width: 1.4;
}

.omtra-review__logo {
	display: block;
	min-width: 0;
	flex: 0 1 auto;
	width: auto;
	height: auto;
	max-width: min(130px, 45%);
	max-height: 40px;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.7;
	transition: filter 0.35s ease, opacity 0.35s ease;
}

.omtra-review:hover .omtra-review__logo {
	filter: none;
	opacity: 1;
}

.omtra-review__mark {
	display: block;
	flex: 0 0 auto;
	width: 34px;
	height: 25px;
	margin: 0 0 14px;
	color: var(--omtra-orange);
	opacity: 0.9;
}

/* Quote marks + text form one block, centred in the space between the stars and the author. */
.omtra-review__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1 1 auto;
	margin: 24px 0 22px;
	padding: 0;
	border: 0;
	background: none;
	quotes: none;
	font-style: normal;
}

.omtra-review__text::before,
.omtra-review__text::after {
	content: none;
}

/* Closing quote: bottom right of the text, mirrored, same colour as the opening one. */
.omtra-review__mark--close {
	align-self: flex-end;
	margin: 12px 0 0;
	transform: rotate(180deg);
}

.omtra-review__text p,
.omtra-review__name,
.omtra-review__role {
	overflow-wrap: anywhere;
	word-break: break-word;
}

.omtra-review__text p {
	margin: 0;
	padding: 0;
	color: var(--omtra-text);
	font-size: 18px;
	font-weight: 400;
	font-style: normal;
	line-height: 1.55;
	letter-spacing: 0.01em;
}

/* ---------- Author ---------- */

/* Same height in every card (set by JS from the tallest one): the divider, the photo and the name line
   up across the carousel; a shorter description just leaves room below. */
.omtra-review__author {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	min-height: var(--omtra-author-h, 0px);
	padding-top: 22px;
	border-top: 1px solid var(--omtra-line);
}

.omtra-review__photo {
	flex: 0 0 52px;
	display: block;
	width: 52px;
	height: 52px;
	margin: 0;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 3px #fff, 0 6px 16px -6px rgba(48, 63, 159, 0.5);
}

/* No photo: made-up portrait, blurred (reads as a photo out of focus). */
.omtra-review__photo--placeholder {
	position: relative;
	overflow: hidden;
	background: #dfe3f0;
}

.omtra-review__photo--placeholder img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(3.5px) saturate(0.9);
	transform: scale(1.25);
}

.omtra-review__who {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.omtra-review__name {
	color: var(--omtra-blue);
	font-size: 16px;
	font-weight: 700;
	font-style: normal;
	line-height: 1.25;
	letter-spacing: 0.01em;
}

/* Technical sheet: small orange line (ROLE · Company, or the client description) above the name. */
.omtra-review__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 0;
	line-height: 1.35;
}

.omtra-review__role {
	color: var(--omtra-orange);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Anonymous clients: the role is a short description, written as a sentence, in the brand orange. */
.omtra-review__role--desc {
	color: var(--omtra-orange);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.4;
	text-transform: none;
}

.omtra-review__company {
	color: var(--omtra-orange);
	font-size: 13px;
	font-weight: 600;
}

/* The dot belongs to the role: if the line breaks, it stays at the end of the first line. */
.omtra-review__role:not(:last-child)::after {
	content: "·";
	margin: 0 7px;
	color: var(--omtra-orange);
	font-weight: 700;
	letter-spacing: 0;
}

/* ---------- Controls (bottom left) ---------- */

.omtra-reviews__controls {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 2px;
}

.omtra-reviews.is-static .omtra-reviews__controls {
	display: none;
}

.omtra-reviews__arrow {
	display: inline-grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin: 0;
	padding: 0;
	border: 1.5px solid rgba(48, 63, 159, 0.35);
	border-radius: 50%;
	background: #fff;
	box-shadow: none;
	color: var(--omtra-blue);
	line-height: 0;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.omtra-reviews__arrow svg {
	display: block;
	width: 20px;
	height: 20px;
}

/* The theme resets button borders on :focus/:active: keep the circle. */
.omtra-reviews .omtra-reviews__arrow,
.omtra-reviews .omtra-reviews__arrow:focus,
.omtra-reviews .omtra-reviews__arrow:active {
	border-color: rgba(48, 63, 159, 0.35);
	box-shadow: none;
}

@media (hover: hover) {
	.omtra-reviews .omtra-reviews__arrow:not([aria-disabled="true"]):hover {
		background: var(--omtra-blue);
		border-color: var(--omtra-blue);
		color: #fff;
	}
}

.omtra-reviews__arrow:not([aria-disabled="true"]):active {
	transform: scale(0.94);
}

.omtra-reviews__arrow:focus {
	outline: none;
}

.omtra-reviews__arrow:focus-visible {
	outline: 2px solid var(--omtra-blue);
	outline-offset: 3px;
}

.omtra-reviews__arrow[aria-disabled="true"] {
	opacity: 0.32;
	cursor: default;
}

.omtra-reviews__progress {
	position: relative;
	width: 140px;
	height: 2px;
	margin-left: 14px;
	background: rgba(48, 63, 159, 0.14);
	overflow: hidden;
}

.omtra-reviews__progress span {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: var(--omtra-thumb-w, 33%);
	background: var(--omtra-orange);
	transform: translateX(var(--omtra-thumb-x, 0px));
	transition: transform 0.2s ease-out, width 0.2s ease-out;
}

.omtra-reviews__count {
	color: var(--omtra-blue);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	font-variant-numeric: tabular-nums;
}

.omtra-reviews__count-sep {
	margin: 0 6px;
	opacity: 0.4;
}

.omtra-reviews .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Responsive ---------- */

@media (max-width: 1099px) {
	.omtra-reviews {
		--omtra-per: 2;
		--omtra-gap: 24px;
	}
}

@media (max-width: 699px) {
	.omtra-reviews {
		--omtra-gap: 16px;
	}

	/* One card plus a glimpse of the next one: it is clear that it scrolls. */
	.omtra-reviews__slide {
		flex-basis: 86%;
	}

	.omtra-review {
		padding: 28px 24px 24px;
	}

	.omtra-review::before {
		left: 24px;
	}

	.omtra-review__text p {
		font-size: 17px;
	}

	.omtra-reviews__progress {
		width: 90px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.omtra-reviews__viewport {
		scroll-behavior: auto;
	}

	.omtra-review,
	.omtra-review__logo,
	.omtra-reviews__arrow,
	.omtra-reviews__progress span {
		transition: none;
	}
}

/* ---------- Automatic placement in the home page ---------- */

.omtra-reviews-band {
	position: relative;
	width: 100%;
	padding: 30px 0 80px;
}

.omtra-reviews-band__inner {
	max-width: 1300px;
	margin: 0 auto;
	padding: 0 20px;
}

.omtra-reviews-band .omtra-reviews {
	--omtra-bleed: 20px;
}

/* The bleed area (room for the card shadows) fades out: cards leaving the view do not look cut. */
.omtra-reviews-band .omtra-reviews__viewport {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--omtra-bleed), #000 calc(100% - var(--omtra-bleed)), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 var(--omtra-bleed), #000 calc(100% - var(--omtra-bleed)), transparent 100%);
}

/* Message for editors when there is nothing to show. */
.omtra-reviews-empty {
	max-width: 1260px;
	margin: 20px auto;
	padding: 16px 20px;
	border: 1px dashed rgba(48, 63, 159, 0.35);
	border-radius: 6px;
	color: #303f9f;
	font-size: 15px;
}