/* Quote Block Styles
--------------------------------------------- */

/* Base/Default style - White background with border */
.wp-block-quote {
	position: relative;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border-light);
	padding: var(--wp--preset--spacing--large);
	border-radius: 0.3125rem;
}

/* Default to center alignment (no alignment classes applied) */
.wp-block-quote:not([class*="align"]) {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.wp-block-quote:not([class*="align"]) p {
	text-align: center;
}

/* When explicitly set to align center */
.wp-block-quote.aligncenter {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.wp-block-quote.aligncenter p {
	text-align: center;
}

/* Quote icon - Light blue by default */
.wp-block-quote::before {
	content: "";
	display: block;
	width: 2.3125rem;
	height: 1.625rem;
	margin: 0 auto var(--wp--preset--spacing--medium);
	/* CSS mask approach for single SVG source */
	mask-image: url('../images/quote-icon.svg');
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-image: url('../images/quote-icon.svg');
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	/* Color shows through the mask */
	background-color: #7CA4FB;
}

/* Quote text */
.wp-block-quote p {
	margin: 0;
}

/* Author/cite section */
.wp-block-quote cite {
	display: block;
	margin-top: var(--wp--preset--spacing--medium);
	font-style: normal;
}

/* Center cite by default */
.wp-block-quote:not([class*="align"]) cite,
.wp-block-quote.aligncenter cite {
	text-align: center;
}

/* Citation with image - creates centered container with left-aligned content */
.wp-block-quote:not([class*="align"]) cite:has(img),
.wp-block-quote.aligncenter cite:has(img),
.wp-block-quote cite:has(img) {
	text-align: left;
	/* add important to override a block editor inline rule */
	display: inline-block !important;
}

/* Citation images - circular avatar style */
.wp-block-quote cite img {
	width: 2.1875rem;
	max-width: 2.1875rem;
	height: 2.1875rem;
	border-radius: 50%;
	object-fit: cover;
	float: left;
	margin-right: var(--wp--preset--spacing--xx-tiny);
}

/* Blue Style - Gradient background with white text
--------------------------------------------- */

.wp-block-quote.is-style-blue {
	background: var(--wp--preset--gradient--blue);
	color: var(--wp--preset--color--inverted-text);
}

.wp-block-quote.is-style-blue::before {
	background-color: var(--wp--preset--color--inverted-text);
}

.wp-block-quote.is-style-blue cite {
	color: var(--wp--preset--color--inverted-text);
}


/* Highlight Style - Gray background with blue icon
--------------------------------------------- */

.wp-block-quote.is-style-highlight {
	background-color: var(--wp--preset--color--pale-background);
}

.wp-block-quote.is-style-highlight::before {
	background-color: var(--wp--preset--color--primary);
}

/* Plain Style - No background, top/bottom borders
--------------------------------------------- */

.wp-block-quote.is-style-plain::before {
	background-color: var(--wp--preset--color--border-light);
}

/* Responsive Styles - Mobile
--------------------------------------------- */

@media (max-width: 48.875rem) {
	.wp-block-quote {
		padding: var(--wp--preset--spacing--xs-medium) var(--wp--preset--spacing--medium);
	}

	.wp-block-quote::before {
		width: 1.875rem;
		height: 1.3125rem;
	}

	.wp-block-quote.is-style-plain {
		padding-left: var(--wp--preset--spacing--tiny);
		padding-right: var(--wp--preset--spacing--tiny);
	}

	/* Bold text is blue only on mobile for non-blue quotes */
	.wp-block-quote strong,
	.wp-block-quote b {
		color: var(--wp--preset--color--primary);
	}

	/* Bold text stays white in blue style */
	.wp-block-quote.is-style-blue strong,
	.wp-block-quote.is-style-blue b {
		color: var(--wp--preset--color--inverted-text);
	}
}