/*
 * Testimonial card and its dialog (template-parts/components/testimonial-card.php).
 * From the preview docs/preview/new_home7_2.png: photo inset in a light card,
 * name, a large brown quotation mark beside a short quote, „Czytaj całą
 * opinię” at the bottom (lined up across the cards).
 */

/* position: the card's screen-reader text is absolutely positioned; without a
   positioned card it escapes the carousel's scroll box and widens the page. */
.hf-testimonial
{
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: clamp(0.625rem, 0.4rem + 0.6vw, 1.125rem);
	border: 1px solid var(--hf-color-card-border);
	border-radius: var(--hf-radius-m);
	background: var(--hf-color-surface);
}

.hf-testimonial__media
{
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: var(--hf-radius-s);
	background: var(--hf-color-band);
}

.hf-testimonial__photo
{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Faces sit in the upper part of the portraits. */
	object-position: 50% 30%;
}

.hf-testimonial__body
{
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: var(--hf-space-m) clamp(0.25rem, 0.1rem + 0.5vw, 0.75rem) var(--hf-space-xs);
}

.hf-testimonial__name
{
	margin: 0 0 var(--hf-space-s);
	font-size: clamp(1.125rem, 1rem + 0.35vw, 1.375rem);
}

/* A one-line quote sits in the middle of the mark, as in the preview. */
.hf-testimonial__quote
{
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 1.1rem;
	margin: 0 0 var(--hf-space-m);
	padding: 0;
	border: 0;
	color: var(--hf-color-heading);
}

/* Georgia Bold, heavy like the preview's mark; its ink is about 1.2 text
   lines tall. The glyph fills only 0.10–0.45em of a line-height: 1 box, so
   the box is cut to the ink and the glyph moved up into it. */
.hf-testimonial__mark
{
	display: block;
	height: 0.36em;
	color: var(--hf-color-primary);
	font-family: var(--hf-font-text);
	font-size: clamp(4.25rem, 3.6rem + 1.6vw, 5.5rem);
	font-weight: 700;
	line-height: 1;
	transform: translateY(-0.1em);
}

.hf-testimonial__excerpt
{
	margin: 0;
	font-size: clamp(1rem, 0.95rem + 0.2vw, 1.1875rem);
	line-height: 1.45;
}

.hf-testimonial__more
{
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 0.6em;
	margin-top: auto;
	padding: 0.25rem 0;
	border: 0;
	background: none;
	color: var(--hf-color-eyebrow);
	cursor: pointer;
	font: inherit;
	font-size: clamp(1rem, 0.95rem + 0.2vw, 1.1875rem);
}

.hf-testimonial__more[hidden]
{
	display: none;
}

.hf-testimonial__more-text
{
	text-decoration: underline;
	text-decoration-color: var(--hf-color-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.35em;
}

.hf-testimonial__more:hover
{
	color: var(--hf-color-primary-hover);
}

.hf-testimonial__more-icon
{
	flex: none;
	width: 1.15em;
	height: 1.15em;
	transition: transform var(--hf-transition);
}

.hf-testimonial__more:hover .hf-testimonial__more-icon
{
	transform: translateX(3px);
}

/* Dialog content */

/* The name goes under the photo only when its longest word does not fit
   beside it (a long name on a 320 px phone; as in the team dialog). */
.hf-testimonial__dialog-header
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--hf-space-s);
	margin-bottom: var(--hf-space-m);
	/* Room for the close button. */
	padding-right: 2.5rem;
}

.hf-testimonial__avatar
{
	flex: none;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	object-fit: cover;
	object-position: 50% 30%;
}

.hf-testimonial__dialog-name
{
	flex: 1 1 0;
	min-width: min-content;
	margin: 0;
	font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
}

.hf-testimonial__full
{
	margin: 0;
	padding: 0 0 0 var(--hf-space-m);
	border-left: 2px solid var(--hf-color-primary);
	font-size: var(--hf-text-m);
	line-height: var(--hf-leading-text);
}

.hf-testimonial__full p
{
	margin: 0;
}

.hf-testimonial__full p + p
{
	margin-top: var(--hf-space-s);
}