/*-------------------------------------------------------------------------------------------------------

ROOT

-------------------------------------------------------------------------------------------------------*/

:root {
	--reviews-page-gap: 2.5;
	--reviews-section-spacing: 0.5;

	--reviews-page-width: 32.5;
	--reviews-page-aspect: 0.875;

	--reviews-page-headline-size: 1.5;
	--reviews-page-article-size: 1.15;
	--reviews-page-content-size: 1.15;
	--reviews-page-footer-size: 0.95;    
}

/*-------------------------------------------------------------------------------------------------------

REVIEWS

-------------------------------------------------------------------------------------------------------*/

#reviews {
	display: flex !important;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	
	position: relative;
	background-color: rgb(255, 255, 255);
	border-top: calc(1px / var(--zoom-multiplier, 1)) solid rgb(240, 240, 240);

	width: 100vw;
	height: auto;
	padding: calc(var(--fixed-content-padding) / 0.75) var(--page-content-padding);
	gap: var(--base-page-size);
}

#reviews .row {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;

	width: 100%;
	gap: calc(var(--base-page-size) * var(--reviews-section-spacing));
}

#reviews .star {
	width: calc(var(--base-page-size) * var(--base-page-paragraph-size));
	height: calc(var(--base-page-size) * var(--base-page-paragraph-size));
	opacity: 1;
}

#reviews .star.half {
	-webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0.1) 50%);
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0.1) 50%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

#reviews .star.empty {
	opacity: 0.1;
}

#reviews p.count {
	margin-left: calc(var(--base-page-size) * var(--base-page-paragraph-size));
}

#testimonials {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;

	overflow: hidden;
	cursor: pointer;

	width: calc(100% + var(--page-content-padding) * 2);
	height: auto;
	padding: 0 var(--page-content-padding);
	margin: 0 calc(var(--page-content-padding) * -1);
	margin-top: calc(var(--base-page-size) * var(--reviews-page-gap) * 2);
	gap: calc(var(--base-page-size) * var(--reviews-page-gap));
}

#testimonials::before,
#testimonials::after {
    content: "";
    position: absolute;
    
    pointer-events: none;
    background: rgb(255, 255, 255);
    top: 0;
    
    width: var(--page-content-padding);
    height: 100%;
    
    z-index: 32;
}

#testimonials::before {
    background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    left: 0;
}

#testimonials::after {
    background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    right: 0;
}

#testimonials:active {
	cursor: none;
}

#testimonials .testimonial {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	
	position: relative;

	border: calc(1px / var(--zoom-multiplier)) solid rgb(250, 250, 250);
	border-radius: var(--base-page-radius);

	flex-shrink: 0;
	flex-grow: 0;

	width: calc(var(--base-page-size) * var(--reviews-page-width));
    height: calc(var(--base-page-size) * var(--reviews-page-width) / var(--reviews-page-aspect));
	
	padding: calc(var(--base-page-size) * var(--reviews-page-gap));
	gap: calc(var(--base-page-size) * var(--reviews-page-gap));

	transition: border-color var(--transition-medium);
}

#testimonials .testimonial:hover {
	border-color: rgb(220, 220, 220);
}

#testimonials h2 {
	color: rgb(0, 0, 0);
	
	font-size: calc(var(--base-page-size) * var(--reviews-page-headline-size));
	font-weight: var(--font-weight-medium);
	
	letter-spacing: calc(var(--base-page-size) * var(--base-page-letter-spacing));
	line-height: calc(100% + var(--base-page-size) * var(--reviews-page-headline-size) / 2);
	text-transform: capitalize;
	
	flex-shrink: 0;
	flex-grow: 0;
	
	margin-top: calc(var(--base-page-size) * var(--reviews-page-content-size));
}

#testimonials p {
	color: rgb(0, 0, 0);
	opacity: 0.75;
	
	font-size: calc(var(--base-page-size) * var(--reviews-page-content-size));

	letter-spacing: calc(var(--base-page-size) * var(--base-page-letter-spacing));
	line-height: calc(100% + var(--base-page-size) * var(--reviews-page-article-size) / 1.45);
	white-space: wrap;

	flex-shrink: 0;
	flex-grow: 0;

	max-width: 100%;
}

#testimonials p.name {
	font-weight: var(--font-weight-medium);
}

#testimonials p.date {
	margin-left: auto;
}

#testimonials div.container {
    position: relative;
    flex-shrink: 0;
	flex-grow: 0;
    width: 100%;
    margin-top: calc(var(--base-page-size) * var(--reviews-page-gap) * -1);
    height: calc(var(--base-page-size) * var(--reviews-page-width) / var(--reviews-page-aspect) * 0.45);
}

#testimonials p.content {
    position: absolute;
    
    left: 0;
    top: 0;
    
	overflow: hidden;
	overflow-y: auto;
	overscroll-behavior: auto;
	
	font-size: calc(var(--base-page-size) * var(--reviews-page-content-size));
	padding-top: calc(var(--base-page-size) * var(--reviews-page-gap) * 0.5);
	padding-bottom: calc(var(--base-page-size) * var(--reviews-page-width) / var(--reviews-page-aspect) * 0.125);
	
	width: 100%;
	max-height: 100%;
}

#testimonials div.container::before,
#testimonials div.container::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 4;
}

#testimonials div.container::before {
    top: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    height: calc(var(--base-page-size) * var(--reviews-page-gap));
}

#testimonials div.container::after {
    bottom: 0;
    background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    height: calc(var(--base-page-size) * var(--reviews-page-width) / var(--reviews-page-aspect) * 0.125);
}

#testimonials p.date,
#testimonials p.footer {
	opacity: 0.5;
}

#testimonials p.footer {
    position: absolute;
	font-size: calc(var(--base-page-size) * var(--reviews-page-footer-size));
	left: calc(var(--base-page-size) * var(--reviews-page-gap));
	bottom: calc(var(--base-page-size) * var(--reviews-page-gap));
}

@media (max-width: 75vh) {
	:root {
		--reviews-page-gap: 5;
    	--reviews-section-spacing: 0.5;
		
		--reviews-page-width: 75;
    	--reviews-page-aspect: 0.875;

		--reviews-page-headline-size: 5;
		--reviews-page-article-size: 4.25;
		--reviews-page-content-size: 3.5;
        --reviews-page-footer-size: 3.5;
	}
}