/* ==========================================================================
   voice.css — Genva Interior

   Ported from the mock.

   The card itself is the flex row, and the review mark is its ::before, which
   makes the mark the first flex item without any element standing in for it.
   The dot before the attribution is the cite's ::before for the same reason.

   core/quote's left border and margins are cleared, as in the craftsman
   panel: the card is what carries the shape here.
   ========================================================================== */

.voicecard {
	--icon-review: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3Cpath d='M8 9h8M8 13h5'/%3E%3C/svg%3E");

	position: relative;
	background: var(--surface-container-lowest);
	padding: var(--space-xl);
	border-radius: var(--rounded-xl);
	box-shadow: var(--shadow-sm);
	display: flex;
	align-items: flex-start;
	gap: var(--space-md);
}

@media (width < 782px) {

	.voicecard {
		padding: var(--space-md);
	}
}

.voicecard::before {
	content: "";
	flex: none;
	width: 3rem;
	height: 3rem;
	border-radius: var(--rounded-full);
	background-color: var(--secondary);
	mask-image: var(--icon-review);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: 1.75rem;
}

.voicecard__body {
	flex: 1;
	min-width: 0;
	margin: 0;
	border: none;
	padding: 0;
}

.voicecard__body > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.voicecard__text {
	color: var(--on-surface);
	margin-bottom: var(--space-md);
}

@media (width < 782px) {

	.voicecard__text {
		font-size: var(--body-md-size);
		line-height: var(--body-md-line);
	}
}

/* Reached by element rather than by a class. The citation is part of the quote
   block's own saved markup, and core writes the `<cite>` without a class of
   its own; a class added here did not survive the editor's check of what it
   had saved, and the whole block came up as invalid content. Nothing is put on
   that element any more, so the styles come down the tree instead — including
   the type scale the class used to carry. */
.voicecard__body cite {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--on-surface-variant);
	font-family: var(--font-heading);
	font-size: var(--label-md-size);
	line-height: var(--label-md-line);
	letter-spacing: var(--label-md-track);
	font-style: normal;
	font-weight: 700;
}

.voicecard__body cite::before {
	content: "";
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: var(--rounded-full);
	background: var(--secondary);
}