/* -------------------------------------------------------------------------- */
/* Testimonial                                                                */
/* -------------------------------------------------------------------------- */

/**
 * Reusable testimonial presentation.
 *
 * Layout choices such as padding, border radius, internal block spacing and
 * vertical margins are defined by the WordPress pattern so they remain
 * visible and editable in the Site Editor.
 *
 * This stylesheet owns the component-specific presentation that should remain
 * consistent wherever the Testimonial pattern is used.
 */
.thula-testimonial {
	box-sizing: border-box;
	width: 100%;
	max-width: 56rem;
	margin-inline: auto;

	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--medium-grey);

	text-align: center;
}

/* -------------------------------------------------------------------------- */
/* Quote icon                                                                 */
/* -------------------------------------------------------------------------- */

/**
 * Centre the decorative quotation icon.
 *
 * Icon colour and size are intentionally controlled by the Core Icon block
 * within the pattern so they can use the theme's registered presets.
 */
.thula-testimonial__icon {
	display: flex;
	justify-content: center;
}

.thula-testimonial__quote-icon {
	margin: 0;
}

.thula-testimonial__quote-icon svg {
	display: block;
}

/* -------------------------------------------------------------------------- */
/* Quote                                                                      */
/* -------------------------------------------------------------------------- */

.thula-testimonial__quote {
	max-width: 48rem;
	margin-inline: auto;
	padding: 0;
	border: 0;
	color: var(--wp--preset--color--thula-blue);
}

.thula-testimonial__quote p {
	margin-block: 0;

	color: var(--wp--preset--color--thula-blue);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	line-height: 1.5;
}

/* -------------------------------------------------------------------------- */
/* Footer                                                                     */
/* -------------------------------------------------------------------------- */

/**
 * Contains the organisation logo and testimonial author information.
 *
 * Vertical margins are owned by the Footer Group in the pattern rather than
 * duplicated here.
 */
.thula-testimonial__footer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
}

/* -------------------------------------------------------------------------- */
/* Organisation logo                                                          */
/* -------------------------------------------------------------------------- */

.thula-testimonial__logo {
	flex-shrink: 0;
}

.thula-testimonial__logo img {
	display: block;
	width: auto !important;
	max-width:12rem;
	object-fit: contain;
}

/* -------------------------------------------------------------------------- */
/* Author                                                                     */
/* -------------------------------------------------------------------------- */

.thula-testimonial__author {
	display: flex;
	align-items: center;
	text-align: left;
}

.thula-testimonial__portrait {
	flex-shrink: 0;
}

.thula-testimonial__portrait img {
	display: block;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;

	object-fit: cover;
}

/**
 * Author details use a full-height divider to visually separate the portrait
 * from the person's name and role, matching the visual language used in the
 * Product Label.
 */
.thula-testimonial__author-details {
	margin: 0;
	padding-inline-start: var(--wp--preset--spacing--20);

	border-inline-start: 1px solid var(--wp--preset--color--medium-grey);
}

/**
 * Customer name.
 */
.thula-testimonial__name {
	margin-block: 0;
	color: var(--wp--preset--color--thula-blue);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 400;
	line-height: 1.3;
}

/**
 * Customer role and organisation.
 */
.thula-testimonial__role {
	margin-block: 0;
	color: var(--wp--preset--color--dark-grey);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	line-height: 1.2;
}

/* -------------------------------------------------------------------------- */
/* Mobile                                                                     */
/* -------------------------------------------------------------------------- */

@media (max-width: 480px) {
	.thula-testimonial__footer {
		flex-direction: column;
	}

	.thula-testimonial__author {
		justify-content: center;
	}

	.thula-testimonial__author-details {
		text-align: left;
	}
}