/* ═══════════════════════════════════════════════════════════════════════════
   TESTIMONIALS — LIQUID GLASS CARDS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Same diamond-backdrop treatment as .cc-testimonial-slider (below), so
   every page using the shared render functions (ce_render_testimonials_grid()
   etc.) matches the pages that hardcode this section instead — there was no
   reason for these to look different, it just hadn't been ported over yet. */
.testimonials {
	padding: 5rem 0;
	position: relative;
	overflow: clip;
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
}

.testimonials::before {
	content: '';
	position: absolute;
	width: 450px;
	height: 450px;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 2.75rem;
	transform: rotate(45deg);
	top: -80px;
	left: -90px;
	pointer-events: none;
	z-index: 0;
}
.testimonials::after {
	content: '';
	position: absolute;
	width: 260px;
	height: 260px;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 2rem;
	transform: rotate(45deg);
	top: 420px;
	left: 178px;
	pointer-events: none;
	z-index: 0;
}

.testimonials .site-container {
	position: relative;
	z-index: 1;
}

.testimonials__heading {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-h2);
	font-weight: 700;
	color: #ffffff;
	text-align: center;
	margin: 0 0 3rem;
	line-height: 1.25;
}

/* Flex, not grid — .cc-ts-item's own flex-basis/flex-grow (testimonials.css,
   "TESTIMONIAL SLIDER" section below) is what makes 1-2 cards grow to fill
   the row instead of leaving unused space, exactly like .cc-ts-track. A grid
   container ignores an item's flex properties entirely, so with fewer than
   3 cards a grid-based wrapper silently strands them at 1/3 width each with
   empty space after — this was that bug. With exactly 3 (every page's
   current count except one), flex-basis sums to 100% on its own, so this
   is visually identical to the grid it replaces; wrap only changes anything
   once a page has fewer than 3, or more than fit in one row. */
.testimonials__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	align-items: stretch;
}

/* Cards have a real minimum content width (logo + name + padding), so on
   narrower screens 3 columns can't shrink to fit — they force the grid,
   and the whole page, wider than the viewport. Step down to one card's
   flex-basis per row before that happens instead of leaving it fixed at
   three everywhere. */
@media (max-width: 900px) {
	.testimonials__grid > .cc-ts-item {
		flex-basis: calc(50% - 0.75rem);
	}
}

@media (max-width: 600px) {
	.testimonials {
		padding: 3rem 0;
	}

	.testimonials__grid > .cc-ts-item {
		flex-basis: 100%;
	}

	.testimonial-pull {
		padding: 3rem 0;
	}
}

/* ── Liquid glass card ── */
.testimonials__card {
	background: rgba(255, 255, 255, 0.16);
	backdrop-filter: blur(40px) saturate(1.5) brightness(1.1);
	-webkit-backdrop-filter: blur(40px) saturate(1.5) brightness(1.1);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 1.25rem;
	padding: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

/* The card's own header, identity, divider, quote and button styles were
   removed in 2.78.0. That card layout was superseded by the .cc-ts-* carousel
   below and nothing has rendered it since — inc/acf-testimonials.php and
   inc/testimonials-carousel.php emit only .cc-ts-* and .testimonials__heading. */

/* ═══════════════════════════════════════════════════════════════════════════
   SINGLE PULL QUOTE — featured testimonial, teal background
   ═══════════════════════════════════════════════════════════════════════════ */

.testimonial-pull {
	background: #6d9fa3;
	padding: 5rem 0;
}

/* Centred single card — wider than the 3-column grid cards */
.testimonial-pull__card {
	max-width: 780px;
	margin: 0 auto;
}


/* ═══════════════════════════════════════════════════════════════════════════
   TESTIMONIAL SLIDER — three-up, quote-as-image / attribution-outside,
   mirroring the .ce-proj-card structure (projects-archive.css): a fixed,
   equal-height coloured block (like the project image) with a small tail
   pointing at the crest + name/role/school sitting outside it, on the
   section's own background (like the project title below the image).

   Splitting quote and attribution into two elements — rather than one card
   containing both — is what lets each be made uniform independently: the
   bubble stretches to match the tallest in its row (quote centred inside),
   and the attribution row is a fixed-height strip beneath it. Previous
   one-box versions had the two fighting each other for height.

   Scoped under .cc-testimonial-slider so it doesn't touch the shared
   .testimonials__* grid card used on the ~40 other pages. Trialled first on
   the Cornerstones Curriculum page.

   Bubbles are opaque brand tints (composited over white), not a translucent
   white overlay — matching the reasoning already documented in send.css:
   a translucent panel over navy reads as dark and muddy, whereas an opaque
   pastel card reads as a genuinely light, attention-grabbing object.
   ═══════════════════════════════════════════════════════════════════════════ */

.cc-testimonial-slider {
	background: #253d47;
	padding: 5rem 0;
	position: relative;
	overflow: clip;
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
	backdrop-filter: blur(0px);
	-webkit-backdrop-filter: blur(0px);
}

/* Diamonds — same motif/positioning as .ce-send-we-help (send.css) */
.cc-testimonial-slider::before {
	content: '';
	position: absolute;
	width: 450px;
	height: 450px;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 2.75rem;
	transform: rotate(45deg);
	top: -80px;
	left: -90px;
	pointer-events: none;
	z-index: 0;
}
.cc-testimonial-slider::after {
	content: '';
	position: absolute;
	width: 260px;
	height: 260px;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 2rem;
	transform: rotate(45deg);
	top: 420px;
	left: 178px;
	pointer-events: none;
	z-index: 0;
}

.cc-testimonial-slider .site-container {
	position: relative;
	z-index: 1;
}

.cc-testimonial-slider__heading {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-h2);
	font-weight: 700;
	color: #ffffff;
	text-align: center;
	margin: 0 0 3rem;
	line-height: 1.25;
}

.cc-ts-stage {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding-left: 3.5rem;
	padding-right: 2rem;
}

.cc-ts-track {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}
.cc-ts-track::-webkit-scrollbar { display: none; }
.cc-ts-track:focus-visible {
	outline: 2px solid var(--ci-color-engage);
	outline-offset: 4px;
	border-radius: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
	.cc-ts-track { scroll-behavior: auto; }
}

/* "Sets" variant — for pages with more testimonials than fit one screen at a
   time in sensible groups (e.g. Maestro's 9, in 3 curated sets of 3). Each
   .cc-ts-set is one full-width "page" that the track scrolls/pages between
   (via the same Next button + pagination JS already used everywhere else —
   nothing there needed to change, since it already reads whatever the
   track's direct children are). Inside a set, the 3 cards sit in a static
   row — no per-card scrolling, no peek — using the same .cc-ts-item/
   .cc-ts-bubble/etc. as everywhere else, just without the outer track's
   own flex-basis/scroll-snap rules, which only target the base one-card-
   per-testimonial layout. */
.cc-ts-track--sets > .cc-ts-set {
	flex: 0 0 100%;
	scroll-snap-align: start;
	display: flex;
	gap: 1.5rem;
}
.cc-ts-track--sets > .cc-ts-set > .cc-ts-item {
	flex: 1 1 0;
}

/* Below the width where three cards fit in a row, the set has nothing left to
   do. It used to turn into a column, which stacked its three cards vertically
   inside a single page — so a phone got a very tall block of three quotes and
   only three pages for nine testimonials.

   display: contents removes the wrapper's box without touching the markup, so
   the nine cards become the track's own flex children and page one at a time,
   exactly like every other carousel on the site. The curated grouping still
   applies above this width, where it can be seen as a row.

   The script follows the same rule — a display: contents child is transparent
   to it too, so it counts nine pages here and three on a wide screen. See
   readCards() in testimonial-carousel.js.

   The per-card flex basis has to be restated because the set-scoped selector
   below is more specific than the plain .cc-ts-item rules further down. */
@media (max-width: 900px) {
	.cc-ts-track--sets > .cc-ts-set { display: contents; }
	.cc-ts-track--sets > .cc-ts-set > .cc-ts-item { flex: 1 0 calc(50% - 0.75rem); }
}

@media (max-width: 680px) {
	.cc-ts-track--sets > .cc-ts-set > .cc-ts-item { flex: 0 0 100%; }
}

/* One item per testimonial — bubble + attribution stacked, stretched so
   every bubble in the row shares the same height regardless of quote length.
   Renders as a <div> normally, or an <a> when a case study is linked — the
   reset below (matching .ce-proj-card__link) makes either tag look identical.

   flex-grow is 1 (not 0) so that when fewer testimonials exist than fit per
   row — e.g. 2 cards where 3 would fit — they grow to share the full width
   evenly instead of leaving an empty-looking gap on the right. flex-shrink
   stays 0, so this has no effect once there are MORE cards than fit: the
   row is already wider than its container in that case, so there's no
   spare space left to grow into, and the scroll/peek sizing is unchanged. */
.cc-ts-item {
	scroll-snap-align: start;
	flex: 1 0 calc(33.333% - 1rem);
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	outline-offset: 3px;
	-webkit-tap-highlight-color: transparent;
}

/* Same liquid-glass shadow baseline as .ce-feature-list__item (feature-list.css)
   — the card pattern used on /maestro/, EYFS, SEND etc. — so this bubble reads
   as the same family of component rather than inventing its own hover language. */
.cc-ts-bubble {
	position: relative;
	flex: 1 1 auto;
	border-radius: 1rem;
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 4px 20px rgba(0, 0, 0, 0.05);
	transition: box-shadow 0.2s ease;
}

/* Linked cards (a testimonial with a full case study) deepen this shadow on
   hover — matching .ce-feature-list__item:hover exactly, no lift/transform.
   Cards with no case study stay static, since there's nothing to invite a
   click toward. */
.cc-ts-item--linked:hover .cc-ts-bubble {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 8px 28px rgba(0, 0, 0, 0.08);
}

/* Opaque brand tints, pre-composited over white — the exact values used for
   the SEND "we help" cards (send.css), not a translucent tint re-derived
   here, so any future brand-colour change only has to happen in one place. */
.cc-ts-item:nth-child(3n+1) .cc-ts-bubble { background: rgb(254, 242, 228); }
.cc-ts-item:nth-child(3n+2) .cc-ts-bubble { background: rgb(246, 235, 240); }
.cc-ts-item:nth-child(3n+3) .cc-ts-bubble { background: rgb(233, 240, 244); }

/* Tail — a small rotated square in the bubble's own colour, pointing down at
   the crest below. Deliberately geometric, not a rounded cartoon balloon —
   this is what visually earns the attribution sitting outside the bubble. */
.cc-ts-bubble::after {
	content: '';
	position: absolute;
	width: 18px;
	height: 18px;
	background: inherit;
	bottom: -7px;
	left: 26px;
	transform: rotate(45deg);
	border-radius: 3px;
}

/* Grows to fill whatever room the bubble has left (after the "Read their
   story" link, on the one card that has one) and centers its own text
   within that space — so a short quote doesn't just sit pinned to the top
   of a tall bubble. No reserved empty space is added for cards without a
   case study — the row's height comes from whichever bubble's real content
   (quote, plus a link if present) is genuinely tallest, nothing padded in
   just to keep a slot's height consistent. */
.cc-ts-quote {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-body);
	line-height: 1.55;
	color: var(--ci-color-navy);
	margin: 0;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
}

/* Placeholder for the school's own logo (not a photo of the person) — same
   grey used for "no image yet" elsewhere on the site (.ce-proj-card__image
   --no-image in projects-archive.css). Empty for now; a real <img> tag will
   replace this once school logos are supplied. */
.cc-ts-crest {
	width: 40px;
	height: 40px;
	border-radius: 0.4rem;
	background-image: linear-gradient(135deg, #e8edf0 0%, #d4dce0 100%);
	flex-shrink: 0;
}

/* Real school logo, once supplied — replaces the gradient placeholder above
   with an <img class="cc-ts-crest">. object-fit:contain rather than cover
   since a school crest can't be cropped without losing detail. */
img.cc-ts-crest {
	object-fit: contain;
	background-image: none;
}

/* Footer — attribution only now that "Read their story" lives inside the
   bubble instead. Name, role and school are always three separate lines,
   but a long school name can wrap onto a 4th — e.g. "St Paul's Church of
   England Voluntary Controlled Primary School" — so the min-height covers
   that 4-line worst case (not just 3), with the wrap accounted for rather
   than merely hoped not to happen. Only the bubble has flex-grow, not this
   footer, so if this reservation is ever too small on a genuinely long
   name, the bubble on THAT card silently grows to compensate while its
   siblings don't — which is exactly the mismatch this min-height prevents. */
.cc-ts-footer {
	padding-top: 1.4rem;
	min-height: 6.4rem;
}

.cc-ts-attrib {
	display: flex;
	align-items: center;
	gap: 0.9rem;
}

.cc-ts-name {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 700;
	color: #ffffff;
	margin: 0;
	line-height: 1.35;
}

.cc-ts-meta {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	color: rgba(255, 255, 255, 0.72);
	margin: 0;
	line-height: 1.45;
}

/* "Read their story" — sits inside the bubble itself, only rendered when a
   case study exists, styled as the same .ce-cc-card-link text link used for
   "Find out more" on /maestro/, EYFS, SEND etc. (feature-list.css), rather
   than a bespoke white+arrow CTA. Colour cycles with the bubble's own tint,
   matching how those other pages colour-match their card-link to the
   card's accent (e.g. eyfs.css). */
/* Keyed off the whole card's :hover (ancestor), not .cc-ts-cta:hover on the
   text itself — otherwise this only reacted to the cursor sitting exactly
   over the small "Read their story" span, not anywhere else on the card. */
.cc-ts-item:nth-child(3n+1) .cc-ts-cta { color: var(--ci-color-engage); }
.cc-ts-item:nth-child(3n+1):hover .cc-ts-cta { color: #d97e10; }
.cc-ts-item:nth-child(3n+2) .cc-ts-cta { color: var(--ci-color-develop); }
.cc-ts-item:nth-child(3n+2):hover .cc-ts-cta { color: #8a3a5c; }
.cc-ts-item:nth-child(3n+3) .cc-ts-cta { color: var(--ci-color-innovate); }
.cc-ts-item:nth-child(3n+3):hover .cc-ts-cta { color: #3a6e87; }

/* Right-hand advance — the same ghost pill used for CTAs elsewhere on the
   site (buttons.css .ci-btn--ghost), not a bespoke arrow control. Sized to
   its text, not stretched to the card's height. */
.cc-ts-next {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* Pagination — mirrors .ce-blog-pagination (blog-archive.css), the site's
   existing numbered-pill pattern, recoloured for this section's dark
   background instead of introducing a new arrow/dot control. */
.cc-ts-pagination {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	padding: 1.75rem 3.5rem 0;
}

/* .cc-ts-page — the numbered pagination pills — removed in 2.78.0. The
   pagination container is still used, but it renders dots (.cc-ts-pagination--dots)
   and no longer emits numbered pages. */

/* Tablet — two-up, matching the 900px step already used by the older
   .testimonials__grid cascade elsewhere in this file */
@media (max-width: 900px) {
	.cc-ts-item { flex: 1 0 calc(50% - 0.75rem); }

	/* The "Next school" button goes at the same width the track goes two-up.
	   
	   It is a right-hand advance that reads as one because it sits beside a
	   full row of cards. Two-up, the third card's space is empty and the
	   button is left floating in the middle of it, level with nothing —
	   at iPad portrait it sat in ~300px of dark space with a card edge on one
	   side and the section's margin on the other.
	   
	   It was already hidden below 680px. 900 is the honest breakpoint: it is
	   the one that creates the gap, not a second number chosen separately.
	   
	   Nothing is lost with it. The pagination dots below the track are the
	   same control by another route, and they stay at every width. */
	.cc-ts-next { display: none; }
}

@media (max-width: 680px) {
	.cc-ts-stage { padding-left: 1.5rem; padding-right: 1.5rem; }
	.cc-ts-item { flex: 0 0 100%; }
	.cc-ts-bubble { padding: 1.5rem; }
	.cc-ts-quote { font-size: var(--ci-text-body); }
	/* .cc-ts-next is hidden from 900px up in the block above — it used to be
	   hidden here, which left it stranded through the whole 681-900 band. */
	.cc-ts-pagination { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* ── "Sets" controls (Maestro) — arrows either side, dots below ──────────
   The base stage's 3.5rem/2rem padding exists only because a single
   right-hand button previously lived there; here two small circular arrows
   flank the track instead, symmetric left/right, positioned absolutely
   inside that padding gutter rather than as normal flex siblings — a flex
   sibling's own width AND the stage's flex `gap` would BOTH additionally
   shrink the track below the base page's card width, on top of the
   padding, which isn't "the exact same card dimensions" this was built to
   match. Absolutely positioned, they take no width from the track at all:
   the track fills 100% of the stage's padded content box, so with the same
   2.75rem+2.75rem=5.5rem total as the base stage, every card resolves to
   the exact same width as on every other page.

   Each arrow sits in a "slot" sized to the BUBBLE's own zone specifically,
   not the whole card — the slot spans from the top down to where the
   attribution footer begins (top:0, bottom:<footer's own fixed height>),
   then centres the arrow within that with plain flexbox. The footer's
   height is fixed (padding-top 1.4rem + min-height 6.4rem — see
   .cc-ts-footer below), so this is a plain CSS ratio, not a value that
   needs measuring or recalculating in JS: no getBoundingClientRect, no
   scroll-driven repositioning, nothing that can silently throw and take
   the click handlers down with it. */
.cc-ts-stage--sets {
	position: relative;
	padding-left: 2.75rem;
	padding-right: 2.75rem;
}

.cc-ts-arrow-slot {
	position: absolute;
	top: 0;
	bottom: 7.8rem; /* .cc-ts-footer's padding-top (1.4rem) + min-height (6.4rem) */
	width: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cc-ts-arrow-slot--prev { left: 0; }
.cc-ts-arrow-slot--next { right: 0; }

.cc-ts-arrow {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.28);
	background: rgba(255, 255, 255, 0.10);
	color: #ffffff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

/* An actual SVG icon rather than a text glyph or a CSS border-corner trick —
   both of those hit real limits: the ‹/› Unicode character rendered visibly
   off-centre in Lato regardless of box centring, and a crossed-border
   corner reads as a thick, blocky "V" with hard-cut ends. The path itself
   is a well-tested chevron (Heroicons), and — importantly — both the
   viewBox (24×24) and the rendered size (16×16) are SQUARE, matching the
   circular button they sit in; the previous attempt used a non-square
   10×16 box inside a square button, which is a likely source of the
   asymmetric look even though the path itself was mathematically centred
   within its own (lopsided) box. */
.cc-ts-arrow-svg {
	width: 16px;
	height: 16px;
	display: block;
}
.cc-ts-arrow:hover:not(:disabled) {
	background: var(--ci-color-engage);
	border-color: var(--ci-color-engage);
	color: #253d47;
}
.cc-ts-arrow:disabled { display: none; }
.cc-ts-arrow:focus-visible { outline: 2px solid var(--ci-color-engage); outline-offset: 2px; }

/* ── Phones: no arrows, same card width as everywhere else ───────────────────
   At this width the base stage drops to 1.5rem gutters and hides its "Next
   school" button (see the 680px block above) — the dots and the swipe are the
   controls on a phone. The sets variant was missing both of those overrides:
   .cc-ts-stage--sets sets its own 2.75rem padding and, being later in the
   file at equal specificity, won. .cc-ts-arrow isn't .cc-ts-next either, so
   the arrows survived a rule meant to remove exactly this.

   The cost was real. Maestro's cards came out 223px against 263px on every
   other carousel — 40px, 15%, narrower, on the page carrying the longest
   quotes — for a control no other carousel offers here. And with
   .cc-ts-arrow:disabled hidden, the first card showed a lone right-hand arrow
   rather than a pair.

   Which is the opposite of what the block above this was built for: it says
   the arrows are absolutely positioned so every card "resolves to the exact
   same width as on every other page". That held on a desktop and quietly
   stopped holding on a phone. */
@media (max-width: 680px) {
	.cc-ts-stage--sets {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}

	.cc-ts-arrow-slot { display: none; }
}

/* Plain dots rather than the numbered pills used elsewhere — with 3 sets
   rather than up to ~9 individual testimonials, a page NUMBER carries no
   extra information a dot doesn't already give, so there's nothing here
   worth the numbered pill's added visual weight. */
/* gap is the space between the DOTS, not between the buttons: each button is
   44px wide with the dot drawn centred inside it, so the visible gap is the
   button gap plus the empty padding either side. 0.5rem of button gap would
   read as ~44px of space between dots, hence none here — the padding is the gap.

   padding-top overrides the base .cc-ts-pagination's 1.75rem. That value was
   written for the numbered pills, whose box is the pill you can see; a dot
   button carries 14px of its own empty space above the dot, so 28px on top of
   that was the same margin counted twice. 0.5rem plus the button's own 14 puts
   the dots 22px below the cards. */
.cc-ts-pagination--dots {
	gap: 0;
	padding-top: 0.5rem;
}

/* The button is the tap target; ::before is the dot you can see.
   Previously the button WAS the dot at 8x8px, which is the entire tappable
   area — under the 24x24 WCAG 2.5.8 minimum and a long way under the 44px
   comfort target. Now it is 44x44 with the dot drawn inside, so it looks
   identical and is four times easier to hit. */
.cc-ts-dot {
	/* 44 wide, 36 tall. The width is what matters for hitting one dot in a row
	   of dots, so it keeps the full 44; the height comes down to trim the band
	   without going anywhere near the 24px WCAG 2.5.8 floor. */
	width: 44px;
	height: 36px;
	border: none;
	padding: 0;
	background: none;
	cursor: pointer;
	display: grid;
	place-items: center;
	-webkit-tap-highlight-color: transparent;
}

.cc-ts-dot::before {
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.28);
	transition: background 0.2s ease, width 0.2s ease;
}

.cc-ts-dot:focus-visible {
	outline: 2px solid var(--ci-color-engage);
	outline-offset: -8px;
	border-radius: 9999px;
}

.cc-ts-dot[aria-current="true"]::before {
	background: var(--ci-color-engage);
	width: 26px;
}

@media (prefers-reduced-motion: reduce) {
	.cc-ts-dot::before { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CTA QUOTE — compact inline pill (ce_render_testimonial_cta_quote(), 14
   pages) restyled to match the .cc-ts-bubble tinted-card look rather than a
   translucent-white-on-navy pill, so it reads as the same family of
   component as the bubble grid above instead of a flatter, older treatment.
   Always the orange tint (rgb(254, 242, 228)) since there's only ever one
   quote here, not a cycling set.
   ═══════════════════════════════════════════════════════════════════════════ */

.cc-cta-quote {
	max-width: 1200px;
	margin: 0 auto 1.25rem;
	padding: 0 2rem;
}

/* Quote and attribution sit side by side — the block is deliberately wide
   and short, so a second column uses that width rather than pushing the
   card taller in a placement that's already squeezed between the CTA's
   body copy and its button. */
.cc-cta-quote__bubble {
	background: rgb(254, 242, 228);
	border-radius: 1.25rem;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 4px 20px rgba(0, 0, 0, 0.05);
	padding: 1.5rem 2rem;
	display: flex;
	align-items: center;
	gap: 2rem;
	text-align: left;
	/* fit-content = min(max-content, available), so the bubble hugs a short
	   quote instead of stretching the full 1200px, but a long one still caps
	   at the container width and wraps inside. Not a flex/justify-content
	   wrapper — as a flex item the bubble shrinks below its own content and
	   collapses to a tall, ~60px-wide column on the longer quotes. */
	width: fit-content;
	max-width: 100%;
	margin: 0 auto;
}

.cc-cta-quote__text {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-body);
	line-height: 1.75;
	color: var(--ci-color-navy);
	margin: 0;
	flex: 1 1 auto;
}

/* Fixed basis, not a fraction, so the divider lands in the same place
   regardless of quote length. Long school names wrap inside this column —
   the previous inline treatment set white-space: nowrap, which a name like
   "Canon Sharples Church of England Primary School and Nursery" could not
   wrap out of, pushing it past the card's edge. */
.cc-cta-quote__attrib {
	flex: 0 0 250px;
	padding-left: 2rem;
	border-left: 1px solid rgba(30, 45, 61, 0.12);
}

/* Logo sits to the left of the name/role/school block, not stacked above it —
   .cc-cta-quote__attrib becomes a row only when a logo is present; with no
   logo it stays the plain block of stacked <p> tags it always was. */
.cc-cta-quote__attrib:has(.cc-cta-quote__logo) {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

/* School logo, when set. object-fit:contain since a crest can't be cropped
   without losing detail. */
.cc-cta-quote__logo {
	width: 40px;
	height: 40px;
	border-radius: 0.4rem;
	object-fit: contain;
	flex-shrink: 0;
}

.cc-cta-quote__name {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 700;
	color: var(--ci-color-navy);
	margin: 0;
	line-height: 1.35;
}

.cc-cta-quote__meta {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	color: var(--ci-color-text-muted);
	margin: 0;
	line-height: 1.45;
}

/* ── Below 850px the 250px column leaves too little room for the quote ───────
   Same fixed-column problem as the featured testimonial in maestro.css: the
   attribution's flex basis does not change with the viewport, so everything
   the card loses comes off the quote. Measured on the longest of the fourteen
   quotes using this card, in characters per line (comfortable is 45–75):

     1400  82    1000  61     880  49     840  44
     1180  80     900  51     860  46     820  42
     1024  63     870  48     850  45     768  37

   45 characters lands at 850px almost exactly, which is where this stacks —
   not at a device width, at the width where the measure stops working. 900px
   and up keeps the side-by-side card at 51 characters or better.

   This was already stacking, but only below 720px, so every tablet width sat
   in the broken band. The geometry is identical on all fourteen instances —
   only the number of lines differs with quote length — so one number fixes
   the lot.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 850px) {
	.cc-cta-quote__bubble {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
		/* Once stacked there's no second column to hug against, so fill the
		   width instead of shrink-wrapping to the longest wrapped line —
		   that left the card visibly narrower than the copy around it. */
		width: 100%;
	}

	.cc-cta-quote__attrib {
		flex: 0 0 auto;
		width: 100%;
		padding-left: 0;
		padding-top: 1rem;
		border-left: none;
		border-top: 1px solid rgba(30, 45, 61, 0.12);
	}
}

/* Phones also tighten the container padding — kept separate from the stacking
   above so tablets keep the roomier gutter. */
@media (max-width: 720px) {
	.cc-cta-quote {
		padding: 0 1.25rem;
	}
}