/**
 * Testimonial style: Inline Quote
 *
 * A filled band with the quote mark straddling its top edge. The two placements differ only in
 * fill, alignment and whether they carry arrows, so those are the color variation, the layout
 * variation and the quote count — not two blocks.
 *
 * Nothing here sets a height — the panel's falls out of its padding and the copy it holds.
 */

.module.testimonial.style-panel {
	--quote-panel: var(--aqua);
	--quote-badge: var(--dark-teal);

}

.module.testimonial.style-panel.tea-green {
	--quote-panel: var(--tea-green);
	--quote-badge: var(--fern);
}

.module.testimonial.style-panel.blush {
	--quote-panel: var(--petal);
	--quote-badge: var(--blush);
}

/* Under a programme the band takes the warm fill and the mark the programme's heading colour;
   with no programme the Colour field's tea-green / aqua stands, so an unbranded page is
   unchanged — panel --apricot-pale, mark IBT's own heading colour. Placed after .tea-green:
   equal specificity, so order decides. */
.module.testimonial.style-panel[data-brand] {
	--quote-panel: var(--program-warm, var(--apricot-pale));
	/* The comp reverses the mark: a pale disc with the glyph set on it, where unbranded it is a
	   filled disc with a white glyph. */
	--quote-badge: var(--quote-disc);
	--quote-glyph: var(--quote-mark);
}

.module.testimonial.style-panel .panel {
	background: var(--quote-panel);
	border-radius: 10px;
	padding: var(--module-spacing-small);
	position: relative;
}

.module.testimonial.style-panel .panel:has(.arrows) {
	padding-bottom: var(--text-spacing-xlarge);
}

/* On the <svg>, not only on the span: testimonial.css sets `color` on `.mark svg`, so the
   span's colour never reached the circle and --quote-badge has been inert since it was
   written — the Colour field's fern included. */
.module.testimonial.style-panel .mark svg,
.module.testimonial.style-panel .mark {
	color: var(--quote-badge);
}

/* The disc straddles the panel's top edge, half above and half below. Only the span is
   positioned: the box rules used to sit in the selector above, which made the glyph absolute
   inside its own already-absolute disc and pushed it a further 32px clear of it. */
.module.testimonial.style-panel .mark {
	height: 64px;
	position: absolute;
	top: -32px;
	width: 64px;
}

.module.testimonial.style-panel .mark svg {
	display: block;
	height: 100%;
	width: 100%;
}

.module.testimonial.style-panel .quotes {
	display: grid;
	list-style: none;
	margin: 0;
	padding: 0;
}

.module.testimonial.style-panel .quotes > li {
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-small);
	grid-area: 1 / 1;
}

.module.testimonial.style-panel .quotes:not(.jazzy-carousel) > li + li {
	opacity: 0;
}

.module.testimonial.style-panel blockquote {
	margin: 0;
}

.module.testimonial.style-panel :is(blockquote p, footer p) {
	margin: 0;
}

.module.testimonial.style-panel footer {
	align-items: center;
	display: flex;
	gap: var(--text-spacing-small);
}

/* 80px disc, and the portrait 100 tall standing 20 above it — the field wants a cut-out PNG,
   which is what the comp uses. */
.module.testimonial.style-panel .portrait {
	background: var(--quote-disc);
	border-radius: 100%;
	display: block;
	flex: none;
	height: 80px;
	overflow: clip;
	position: relative;
	width: 80px;
}

/* Two mask layers added together: the disc, and a block covering everything above its centre.
   The head is meant to stand clear of the disc, so masking to the disc alone would behead the
   portrait — and leaving it unmasked squares off the shoulders on a photograph whose lower half
   is opaque. */
.module.testimonial.style-panel .portrait img {
	bottom: 0;
	display: block;
	height: 100px;
	left: 50%;
	/*mask-composite: add;
	mask-image: radial-gradient(circle 40px at 50% calc(100% - 40px), #000 100%, transparent 100%), linear-gradient(#000 0 0);
	mask-position: 0 0;
	mask-repeat: no-repeat;
	mask-size: 100% 100%, 100% calc(100% - 40px);*/
	object-fit: contain;
	object-position: bottom;
	position: absolute;
	translate: -50% 0;
	width: auto;
}

.module.testimonial.style-panel .arrows {
	bottom: var(--text-spacing-small);
	display: flex;
	gap: 12px;
	position: absolute;
	right: var(--text-spacing-small);
}

.module.testimonial.style-panel .panel:has(.arrows) footer {
	padding-right: 132px;
}

/** Layout: centered (default) **/

.module.testimonial.style-panel.align-center .quotes > li {
	align-items: center;
	margin-inline: auto;
	max-width: 990px;
	text-align: center;
}

/* style.css gives every <footer> width: 100%, so the attribution sat at the left edge of a
   full-width row inside an otherwise centred quote. Centring the row rather than shrinking it
   keeps a portrait and its name together when one is set. */
.module.testimonial.style-panel.align-center footer {
	justify-content: center;
}

.module.testimonial.style-panel.align-center .mark {
	left: 50%;
	translate: -50%;
}

/** Layout: left **/

.module.testimonial.style-panel.align-left .mark {
	left: var(--module-spacing-small);
}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 650 - Mobile Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(650rem/16)) {

	.module.testimonial.style-panel .panel,
	.module.testimonial.style-panel .panel:has(.arrows) {
		padding: var(--text-spacing-large) var(--text-spacing-small) var(--text-spacing-small);
	}

	.module.testimonial.style-panel.align-left .mark {
		left: var(--text-spacing-small);
	}

	.module.testimonial.style-panel .arrows {
		justify-content: flex-end;
		margin-top: var(--text-spacing-small);
		position: static;
	}

	.module.testimonial.style-panel .panel:has(.arrows) footer {
		padding-right: 0;
	}

}