/* Quotes / Testimonials */
/* A fully accessible, reusable, and semantic testimonials component */
/* <link rel="stylesheet" href="https://sc-site.s3.amazonaws.com/contentPages/_styles/quotes.css">
 * https://cdn.shocho.co/sc-site/contentPages/_styles/quotes.css (Akamai purge cache)
 */
/* @USAGE:
 * (exclude any unneeded element by simply removing it)
 * <figure class="quote">
 * 		<div class="stars" style="--rating: 5" role="img" aria-label="Rated 5 out of 5 stars"></div>
 *  	<blockquote class="quote__quote">
 *  		<p><!-- Quote --></p>
 *  	</blockquote>
 *  	<figcaption class="quote__attribution">
 *  		<img src="https://cdn.shocho.co/sc-site/icons/icon--profile-avatar.svg?i10c=img.resize(width:48,height:48)" width="48" height="48" class="quote__avatar" alt="Full Name" loading="lazy" decoding="async">
 *  		<span class="quote__source">
 *  			<cite class="quote__cite"><!-- Quote name/initials --></cite>
 * 				<span class="quote__role">
 * 					<span class="font-heading pro-blue">[PRO]</span>
 * 					<span>Verified Buyer</span>
 * 					<span>City, ST</span>
 * 				</span>
 *  		</span>
 *  	</figcaption>
 * </figure>
 * 
 */

:where(:root) {
    --quote-min-width-2x:    360px; /* 360px for 2 per row */
    --quote-min-width-3x:    280px; /* 280px for 3 per row */
    --quote-bg:              #fdfcfb;
    --quote-border-radius:   .375em;
    --quote-spacing:         .75rem;
    --quote-stars-rating:    .625em;
    --quote-block-font-size: 1.1875rem;
    --quote-grid-font-size:  1.0625rem;
    --quote-opening-char:    "\201C"; /* Opening double-quote */
    --quote-closing-char:    "\201D"; /* Closing double-quote */
    --quote-letter-spacing:  .01875em;
    --quote-avatar-size:     3rem;
    --quote-inline-divider:  "\00B7"; /* · - https://www.toptal.com/designers/htmlarrows/punctuation/middle-dot/ */
}

/* Grid layout container */
#content .quotes {
	--quote-min-width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--quote-min-width), 1fr));
    gap: calc(var(--quote-spacing) * 1.5);
    padding: calc(var(--quote-spacing) * 2) 0;
}

@media (min-width: 390px) {
	#content .quotes { --quote-min-width: var(--quote-min-width-3x); }
	#content .quotes.quotes-2x { --quote-min-width: var(--quote-min-width-2x); }
	#content .quotes.quotes-3x { --quote-min-width: var(--quote-min-width-3x); }
}

/* Only quotes in the grid layout container */
#content .quotes > .quote {
    background: var(--quote-bg);
    border: 1px solid rgba(0, 0, 0, .1);
    border-bottom-color: rgba(0, 0, 0, .15);
    border-radius: var(--quote-border-radius);
    box-shadow: inset 0 0 0 .0625rem #fff, 0 .0625em .1875em rgba(0, 0, 0, .1);
    padding: calc(var(--quote-spacing) * 1.5) calc(var(--quote-spacing) * 2);
}

#content *:not(.quotes) > .quote + .quote { 
	border-top: 1px solid #edf0f1;
	margin-top:  calc(var(--quote-spacing) * 1.5);
	padding-top: calc(var(--quote-spacing) * 1.5);
}

#content .quote {
    display: -webkit-flex;
    display:         flex;
    -webkit-flex-direction: column;
            flex-direction: column;
    gap: var(--quote-spacing);
    margin: 0;
    padding: 0;
}

/* Resize star ratings score font-size */
#content .quote .stars .stars-rating { font-size: var(--quote-stars-rating); }

#content .quote__quote {
    border-bottom: 0; /* unsets legacy style */
    font-size: var(--quote-block-font-size);
    font-style: normal;
    letter-spacing: var(--quote-letter-spacing);
    line-height: 1.667;
    margin: 0;
    padding: 0;
}

#content .quotes .quote__quote { font-size: var(--quote-grid-font-size); }

#content .quote .quote__quote p { margin: 0; max-width: none; }
#content .quote__quote p::before { content: var(--quote-opening-char); }
#content .quote__quote p::after  { content: var(--quote-closing-char); }

#content .quote__attribution {
    display: -webkit-flex;
    display:         flex;
    -webkit-align-items: center;
            align-items: center;
    gap: .75rem;
    margin-top: auto;
}

#content .quote__avatar {
    aspect-ratio: 1;
    border-radius: 50%;
    flex: none;
    height: var(--quote-avatar-size);
    object-fit: cover;
    width:  var(--quote-avatar-size);
}

#content .quote__source {
    display: -webkit-flex;
    display:         flex;
    -webkit-flex-direction: column;
            flex-direction: column;
}

/* Remove the em dash before the name if there is no name or no avatar */
#content .quote__cite:empty::before, 
#content .quote__avatar + .quote__source .quote__cite::before { content: ''; }

/* Reset default inherited `<cite>` styles */
#content .quote__cite {
    font-style: normal;
    font-weight: bold;
}

#content .quote__role {
    color: var(--grey-700, #63666d); 
    font-size: .875rem; 
    letter-spacing: var(--quote-letter-spacing);
    text-wrap: pretty;
}

/* inline divider character */
#content .quote__role > * + *::before {
    content: var(--quote-inline-divider);
    padding-right: 0.5ch;
}

#content .pro-blue { color: var(--problue, #1167b1); }