/*
 * t1i/testimonial — block styles.
 *
 * Unlike t1i/action-badge (which borrows the theme's shared .t1-action-badge
 * rule) this block owns its own visual, because nothing in the theme expressed
 * a reusable quote treatment: the one existing testimonial — Sa'Ra on Our
 * Impact — was hand-built as a core/quote in a core/columns inside a navy
 * section, with .t1-voice-quote supplying only the cite rule. This block
 * generalises that band so the seven review-round placements share one shape.
 *
 * The band deliberately reproduces the Our Impact proportions (1080px content,
 * 5xl vertical padding, 3xl gutter, vertically centered columns) so the two read
 * as the same component once Our Impact is migrated onto this block.
 */

.t1i-testimonial {
	padding-block: var(--wp--preset--spacing--5-xl);
	padding-inline: var(--wp--preset--spacing--lg);
}

.t1i-testimonial__inner {
	margin-inline: auto;
	max-width: 1080px;
}

/* Band + photograph: two columns, vertically centered, photo optionally first.
   Below 782px (core's own breakpoint for stacking columns) it becomes one
   column so the quote never drops under ~40 characters a line. */
.t1i-testimonial--has-media .t1i-testimonial__inner {
	display: grid;
	gap: var(--wp--preset--spacing--3-xl);
	align-items: stretch;
}

@media (min-width: 782px) {
	.t1i-testimonial--has-media .t1i-testimonial__inner {
		grid-template-columns: 1fr 1fr;
	}
	/* The quote is first in the DOM (see render.php), so the photo sits right by
	   default and this pulls it left. Before 2026-09-04 the figure was emitted
	   first and this rule was a no-op, which is why the control appeared dead. */
	.t1i-testimonial--media-left .t1i-testimonial__media {
		order: -1;
	}
}

/* ⚠️ THE PHOTO FILLS ITS HALF; IT DOES NOT FLOAT IN THE MIDDLE OF IT.
   This was `align-items: center` with `height: auto`, so the photo kept its own
   aspect ratio while the QUOTE column set the row height. A long quote beside a
   landscape photo left a deep band of dead space above and below it, which is what
   made /about/ethical-fundraising look uncomposed. Stretching the row and cropping
   the photo to fill is what every reference in both brand decks actually shows.

   The cost is a crop: the block stores one image and offers no focal-point control,
   so a face near an edge can lose the top of a head on a very long quote. If that
   turns up, the fix is an object-position control on the block, NOT reverting to
   centered — reverting brings the dead space back. */
.t1i-testimonial__media {
	margin: 0;
	display: flex;
}

.t1i-testimonial__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--card, 16px);
}

/* Stacked, there is no text column beside the photo to take a height from, so it
   goes back to its own proportions rather than collapsing to nothing. */
@media (max-width: 781px) {
	.t1i-testimonial__media img {
		height: auto;
	}
}

.t1i-testimonial__quote {
	margin: 0;
	border: 0;
	padding: 0;
}

.t1i-testimonial__text {
	margin: 0;
	font-family: var(--wp--preset--font-family--plus-jakarta-sans);
	font-size: var(--wp--preset--font-size--card-title);
	font-weight: 700;
	line-height: 1.25;
	text-wrap: pretty;
}

/* Inline variant: a card for sitting two-up inside a core/columns, so the type
   steps down and the padding tightens — the band's 5xl would leave a pair of
   these taller than the viewport. */
.t1i-testimonial--inline {
	padding-block: var(--wp--preset--spacing--2-xl);
	padding-inline: var(--wp--preset--spacing--2-xl);
	border-radius: var(--wp--custom--radius--card, 16px);
	height: 100%;
}

.t1i-testimonial--inline .t1i-testimonial__text {
	font-size: var(--wp--preset--font-size--lead);
}

/* Attribution. Matches .t1-voice-quote's dotted rule so the migrated Our
   Impact band and these new ones agree. currentColor at reduced opacity keeps
   it legible on every fill in the $t1i_tones map without a per-tone override. */
/* Attribution. Matches .t1-voice-quote's dotted rule so the migrated Our Impact
   band and these new ones agree. currentColor at reduced opacity keeps it legible
   on every fill in the $t1i_tones map without a per-tone override.

   ⚠️ THE FOUR LINES ARE FOUR SIZES, ON PURPOSE. They were all one size with only
   bold and 0.85 opacity separating them, which read as a flat block of text with
   no way in — the name did not come forward and the source link did not recede.
   Name > role > place-and-date > source, each step down in size AND in opacity, so
   the eye lands on the person first. Sizes are theme presets, not arbitrary. */
.t1i-testimonial__cite {
	display: block;
	margin-top: var(--wp--preset--spacing--xl);
	padding-top: var(--wp--preset--spacing--lg);
	border-top: 1px dotted currentColor;
	font-size: var(--wp--preset--font-size--meta);
	font-style: normal;
	line-height: 1.45;
}

.t1i-testimonial__name {
	display: block;
	font-size: var(--wp--preset--font-size--card-body);
	font-weight: 700;
	line-height: 1.25;
}

.t1i-testimonial__role {
	display: block;
	margin-top: var(--wp--preset--spacing--2-xs);
	font-size: var(--wp--preset--font-size--body);
	opacity: 0.9;
}

.t1i-testimonial__meta {
	display: block;
	margin-top: var(--wp--preset--spacing--2-xs);
	font-size: var(--wp--preset--font-size--meta);
	opacity: 0.7;
}

/* ⚠️ THE SEPARATOR IS DRAWN HERE, NOT TYPED INTO THE STRING. A middot at the meta
   size inside a 0.7-opacity line is invisible — it was there and could not be seen.
   Drawn on the date so it only ever appears BETWEEN the two, never leading when a
   quote has a date but no location. Sized up from the text it separates and given
   real space either side, because a separator that matches its neighbours reads as
   a speck of dirt rather than as punctuation. */
.t1i-testimonial__place + .t1i-testimonial__date::before {
	content: "·";
	margin-inline: 0.5em;
	font-size: 1.5em;
	line-height: 0;
	vertical-align: -0.05em;
	opacity: 0.8;
}

.t1i-testimonial__source {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--sm);
	color: inherit;
	/* 13px literal: the scale jumps 12 (fine) -> 15 (meta) and neither is right
	   here -- 12 disappears under the meta line, 15 competes with it. */
	font-size: 13px;
	text-decoration: underline;
	opacity: 0.7;
}

.t1i-testimonial__source:hover,
.t1i-testimonial__source:focus {
	opacity: 1;
}

/* Decorative quote marks — provisional, thread 10216. Kate asked for the big
   blue quote marks from the round-1 logo presentation; that artwork has not
   been handed over, so this is a type-set stand-in using the theme's sky token
   rather than a guess at Danielle's asset. aria-hidden by construction (CSS
   content is not exposed as text) and it must never carry meaning.

   ⚠️ THE COLOR IS `currentColor`, NOT A TOKEN. It was hardcoded to sky, which was
   right on navy — Kate asked for blue marks — and wrong on every other fill; on the
   purple tone a sky mark just clashes. Taking the tone's own text color at half
   opacity means the mark tracks the fill automatically and no tone can be added
   without it working. If Kate wants the blue accent back on a specific tone, add a
   --t1i-testimonial-mark override for that tone rather than re-hardcoding sky. */
.t1i-testimonial--marks .t1i-testimonial__quote {
	position: relative;
	padding-top: var(--wp--preset--spacing--4-xl);
}

/* ⚠️ SIZE IS SET FOR THE INK, NOT THE EM BOX. Plus Jakarta Sans draws this glyph
   at roughly a third of its font-size, so 5rem read as a stray comma next to a
   44px quote — measured in the browser, 80px of font-size renders ~28px of mark.
   The clamp is deliberately large for that reason; it is not a typo. Scales with
   the viewport because the band is full-bleed and a fixed size looks lost at
   1440 and overbearing on a phone. If the glyph is ever swapped for Danielle's
   artwork (thread 10216), re-measure rather than carrying this number over. */
.t1i-testimonial--marks .t1i-testimonial__quote::before {
	content: "\201C";
	position: absolute;
	top: -0.3em;
	left: -0.05em;
	color: currentColor;
	opacity: 0.5;
	font-family: var(--wp--preset--font-family--plus-jakarta-sans);
	font-size: clamp(9rem, 14vw, 18rem);
	line-height: 1;
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
	.t1i-testimonial__source {
		transition: opacity 0.15s ease;
	}
}


/* --- Wide layout ----------------------------------------------------------
   A third layout, added 2026-09-04, referencing the arrangement Shaina composed
   by hand on /about/ethical-fundraising (her revision 2026-08-27): a long low
   band, the quote held to a narrow measure on the left, and a landscape
   photograph taking the greater share on the right. Her version was built out of
   nested core/columns with an inline <style> tag in the post content; this is the
   same shape as a block option, so it survives an editor touching it.

   Two things carried over from her composition because she reached for them twice
   and they are the only visual ideas in it that are hers rather than core's: the
   photograph is SHAPED (two opposite corners heavily rounded, two square) and it
   CARRIES A FADE. Both are honored below.

   ⚠️ Not a copy. Her band put the attribution centered under the quote at the
   same size as the quote itself, and set the name in a script face that is not in
   the approved brand guide. This uses the block's own attribution hierarchy. */
@media (min-width: 782px) {
	.t1i-testimonial--wide.t1i-testimonial--has-media .t1i-testimonial__inner {
		grid-template-columns: 1fr 1.3fr;
		align-items: center;
	}
}

/* The quote sits on a narrow measure here, so it steps down from the band's
   card-title -- at 32px on a 40% column it would break every three words. */
.t1i-testimonial--wide .t1i-testimonial__text {
	font-size: var(--wp--preset--font-size--lead);
}

/* ⚠️ THE BACKGROUND BLEEDS. THE CONTENT DOES NOT. Two different things, and
   conflating them was the mistake here on the first pass: `max-width: none` let the
   quote and photograph run to the window edge, which looks deliberate at 1440 and
   falls apart above it -- a 2560px monitor got a quote line 1100 characters wide
   with a photograph the size of a door. The band is full-bleed via the block's own
   `align: full`; the CONTENT is held to the site's established wide measure, the
   same 1280px section-split uses. Wider than the 1080px `band` uses, because this
   layout carries a photograph beside the quote rather than the quote alone. */
.t1i-testimonial--wide {
	padding-block: var(--wp--preset--spacing--4-xl);
}

.t1i-testimonial--wide .t1i-testimonial__inner {
	/* 1280 literal, not a token: there is no --scale--wide in theme.json, and
	   section-split states the same number as a layout contentSize. If a token is
	   ever added, both should move to it together. */
	max-width: 1280px;
}

/* SHAPE. Two opposite corners rounded hard, two left square -- the motif Shaina
   used on both of her attempts. One radius token so the two corners cannot drift
   apart, and it is generous (56px) because at anything smaller the shape reads as
   a mistake rather than a decision. */
.t1i-testimonial--wide .t1i-testimonial__media {
	position: relative;
	isolation: isolate;
	border-radius: 0 var(--t1i-testimonial-shape, 56px) 0 var(--t1i-testimonial-shape, 56px);
	overflow: hidden;
}

.t1i-testimonial--wide .t1i-testimonial__media img {
	border-radius: 0;
	aspect-ratio: 16 / 10;
}

/* STROKE. The client outlined the photograph in sky on both attempts. Drawn on the
   figure with an inset shadow rather than a border so it follows the shaped corners
   and does not change the element's box. currentColor at low alpha, for the same
   reason the mark is currentColor -- a hardcoded sky stroke is right on navy and
   wrong on gold, and every new tone would need remembering. */
.t1i-testimonial--wide .t1i-testimonial__media {
	box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.45);
}

.t1i-testimonial--wide.t1-on-light .t1i-testimonial__media {
	box-shadow: inset 0 0 0 2px rgb(0 0 0 / 0.25);
}

/* FADE. Brand guide p24 -- a gradient bottom to top in the surrounding color, so
   the photograph settles into the band instead of sitting on it as a rectangle.
   It reads the fill from currentColor's opposite: the band's own background is
   not available to CSS here, so the fade is a soft darkening rather than a tint,
   which works on every tone in the map. */
.t1i-testimonial--wide .t1i-testimonial__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgb(0 0 0 / 0) 55%, rgb(0 0 0 / 0.45) 100%);
}

/* Stacked, the shape stays but the fixed ratio goes -- a 16/10 crop across a phone
   takes the top of a head off. */
@media (max-width: 781px) {
	.t1i-testimonial--wide .t1i-testimonial__media img {
		aspect-ratio: auto;
	}
}


/* --- Story fields ---------------------------------------------------------
   A heading and a paragraph ABOVE the quote, for the case where the testimonial
   IS the story rather than an aside beside one — a fundraiser profile, where the
   quote is the last beat and not the whole point. Added 2026-09-04 because
   Fundraise had four of these hand-built out of a group, an image, a heading, a
   paragraph and a bare core/quote, inside a single-column core/columns. That is
   five block types and a redundant wrapper to say "person, story, quote", and it
   is why the four cards were four different heights.
   Both fields are optional; a quote with neither behaves exactly as before. */
.t1i-testimonial__heading {
	margin: 0 0 var(--wp--preset--spacing--sm);
	font-family: var(--wp--preset--font-family--calibri);
	font-size: var(--wp--preset--font-size--card-title);
	font-weight: 700;
	line-height: 1.15;
}

.t1i-testimonial__intro {
	margin: 0 0 var(--wp--preset--spacing--xl);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.5;
	opacity: 0.92;
}

/* --- Card layout ----------------------------------------------------------
   One person: photograph on top, story under it, quote last. Sized to sit in a
   grid of siblings — the block does not create the grid, because how many across
   is a page decision, not a component one. Drop several into a group with its
   Grid layout and they line up; the photograph's fixed ratio is what makes the
   tops agree, and stretching to the row makes the bottoms agree. */
.t1i-testimonial--card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0;
	border-radius: var(--wp--custom--radius--card, 16px);
	overflow: hidden;
}

/* ⚠️ gap: 0 IS LOAD-BEARING. `.t1i-testimonial--has-media .t1i-testimonial__inner`
   sets `gap: 3xl` so that in the band and wide layouts the photograph and the quote
   have a gutter between them, side by side. A card stacks them and the photograph is
   flush to the card edge, so that 52px lands between the photo and the heading and
   nowhere else — the inset above the heading read 80px against 28px on the sides and
   bottom, which is what made the top look wrong. */
.t1i-testimonial--card .t1i-testimonial__inner {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: 0;
	max-width: none;
}

/* ⚠️ ONE RATIO IS THE WHOLE POINT. On Fundraise the four photographs were a 0.75
   portrait hand-resized to 290px and three untouched 718px squares, which is why
   the cards ran 834 / 1166 / 1224 / 1253px tall. A fixed ratio here means four
   different source images still produce four identical card tops. */
/* The figure is emitted AFTER the quote in render.php — deliberately, so a screen
   reader reaches the words before a portrait of the person who said them, and so
   the Image Position control has something to reorder. In a card the photograph
   reads first, so it is pulled to the top visually and left second in the DOM. */
.t1i-testimonial--card .t1i-testimonial__media {
	margin: 0;
	display: block;
	order: -1;
}

/* ⚠️ THE RATIO GOES ON THE IMAGE, NOT ON THE FIGURE. Setting it on the figure and
   letting the image fill looks equivalent and is not: aspect-ratio is a PREFERRED
   size, and a flex item at its intrinsic height pushes straight through it — the
   0.75 portrait rendered 837px tall inside a figure asking for 471. On the image,
   with height auto, the ratio is the one that wins. Same arrangement the wide
   layout uses. */
.t1i-testimonial--card .t1i-testimonial__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0;
}

.t1i-testimonial--card .t1i-testimonial__body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: var(--wp--preset--spacing--xl);
}

/* The quote is the last beat, so it sits at the bottom of the card whatever
   length the story above it happens to be — otherwise a short story leaves the
   quote floating mid-card while its neighbour's sits low. */
.t1i-testimonial--card .t1i-testimonial__quote {
	margin-top: auto;
}

/* The card shrank the quote to `lead` so it would not shout over the story above
   it. Allison, SureFeedback #10450, 2026-09-03: "is there any way the font size can
   be bigger". It grows back toward the band's card-title, but as a clamp rather than
   a swap — at 32px flat, a two-up card at 628px broke this quote across five lines
   and the pair stopped matching height. The floor is the old value, so nothing gets
   smaller than it was at any width. */
.t1i-testimonial--card .t1i-testimonial__text {
	font-size: clamp(
		var(--wp--preset--font-size--lead),
		2.1vw,
		var(--wp--preset--font-size--card-title)
	);
}

/* 🚨 THE MARK HANGS BESIDE THE FIRST LINE, IT DOES NOT SIT ABOVE IT. Same thread:
   "the quote mark doesn't push everything down". The card used to reserve a 2xl
   band of padding-top for a glyph that is drawn ~a third of its font-size, so every
   card carried ~32px of empty space above its quote and the four cards grew by that
   much for a mark barely touching the top of it.

   Indenting instead costs nothing vertically: the mark is still absolutely
   positioned, so it never enters the text flow, and the padding it needs is
   horizontal — which the quote has room for inside the card's own padding. The band
   and wide layouts keep the overhead mark; a full-bleed quote has the height to
   spend and the glyph reads as an opening flourish there. */
.t1i-testimonial--card.t1i-testimonial--marks .t1i-testimonial__quote {
	padding-top: 0;
	padding-left: 3.2rem;
}

.t1i-testimonial--card.t1i-testimonial--marks .t1i-testimonial__quote::before {
	font-size: 8rem;
	top: -0.19em;
	left: 0;
}