/**
 * Testimonial carousel (no image) block
 *
 * HAND-WRITTEN CSS — NOT generated from the SCSS build.
 *
 * The theme's css/styles.css is a compiled artifact and its SCSS source is not
 * in this repo, so this block's styling lives in its own file, enqueued after
 * styles.css in functions/enqueue-css-files.php. If the SCSS source repo is
 * ever restored, fold this into a proper partial and delete this file plus the
 * wp_enqueue_style call.
 *
 * The block's template deliberately outputs `block-testimonials-carousel` and
 * `style-2` so it inherits that block's card styling and gets picked up by the
 * bundled TestimonialsCarousel JS class. Everything below is the delta between
 * style-2 and the no-image card design:
 *
 *   1. contained width  - style-2 is edge to edge; the card is inset + rounded
 *   2. text alignment   - the card's text runs left, not centred
 *   3. pagination       - style-2 puts it below the card; design puts it inside
 *   4. wayfinder        - decorative shape behind the quote
 *   5. brand colours    - every option in the Theme dropdown, see section 6
 *
 * Selectors carry both block classes so they always outrank the style-2 rules
 * in styles.css regardless of load order.
 *
 * NOTE: unlike some sibling themes, this theme's compiled bundle has no
 * `.swiper-slide.no-image` rules at all, so the alignment deltas in section 3
 * are stated outright here rather than layered on top of an existing no-image
 * branch. Nothing in this file depends on those base rules existing.
 */

/* ---------------------------------------------------------------------------
   0. Colour tokens
   ---------------------------------------------------------------------------
   Only colours already in this theme's palette are used. The decorative
   wayfinder is an alpha overlay rather than a fixed tint, so it tracks whatever
   card colour sits behind it instead of introducing a new hex.

   Default set = dark cards: white text, yellow active dash (matching how the
   style-1 carousel already marks its active slide). */

.block.block-testimonial-carousel-no-image {
	--tcni-ink: #fff;
	--tcni-accent: #d9fc00;
	--tcni-dash-idle: #fff;
	--tcni-wayfinder: rgba(255, 255, 255, 0.08);
}

/* Light cards — white text and white dashes would be invisible, so both flip to
   Navy. This is a fix rather than a port: the compiled style-2 rules hardcode
   `color: #fff`, which is why pale themes look broken on the sibling
   testimonials-carousel block. Scoped to this block only; nothing else moves. */
.block.block-testimonial-carousel-no-image.theme-yellow,
.block.block-testimonial-carousel-no-image.theme-feds_varsity_yellow,
.block.block-testimonial-carousel-no-image.theme-music_mauve,
.block.block-testimonial-carousel-no-image.theme-core_highlight,
.block.block-testimonial-carousel-no-image.theme-core_spotlight,
.block.block-testimonial-carousel-no-image.theme-green_piste {
	--tcni-ink: #003f58;
	--tcni-accent: #003f58;
	--tcni-dash-idle: rgba(0, 63, 88, 0.25);
	--tcni-wayfinder: rgba(0, 0, 0, 0.06);
}

/* ---------------------------------------------------------------------------
   1. Width — style-2 forces the container full bleed with no padding
   --------------------------------------------------------------------------- */

.block.block-testimonials-carousel.block-testimonial-carousel-no-image.style-2.contained .content-container {
	max-width: 100%;
	padding-left: 0.75rem;
	padding-right: 0.75rem;
}

@media (min-width: 1200px) {
	.block.block-testimonials-carousel.block-testimonial-carousel-no-image.style-2.contained .content-container {
		max-width: 1140px;
	}
}

@media (min-width: 1400px) {
	.block.block-testimonials-carousel.block-testimonial-carousel-no-image.style-2.contained .content-container {
		max-width: 1320px;
	}
}

.block.block-testimonials-carousel.block-testimonial-carousel-no-image.style-2.contained .content-container .slides-container {
	border-radius: 1.2rem;
}

/* ---------------------------------------------------------------------------
   2. The card
   --------------------------------------------------------------------------- */

.block.block-testimonials-carousel.block-testimonial-carousel-no-image.style-2 .content-container .slides-container {
	position: relative;
	overflow: hidden;
	padding: 2rem 1.5rem 1.5rem;
}

@media (min-width: 768px) {
	.block.block-testimonials-carousel.block-testimonial-carousel-no-image.style-2 .content-container .slides-container {
		padding: 3.5rem 3rem 2.5rem;
	}
}

@media (min-width: 1200px) {
	.block.block-testimonials-carousel.block-testimonial-carousel-no-image.style-2 .content-container .slides-container {
		padding: 4.5rem 4rem 3rem;
	}
}

/* Keep the slides above the decorative shape */
.block.block-testimonials-carousel.block-testimonial-carousel-no-image.style-2 .content-container .slides-container .swiper {
	position: relative;
	z-index: 1;
}

/* ---------------------------------------------------------------------------
   3. Text — full width of the card, left aligned
   --------------------------------------------------------------------------- */

.block.block-testimonials-carousel.block-testimonial-carousel-no-image.style-2 .content-container .slides-container .swiper .swiper-wrapper .swiper-slide.no-image .slide-content .text-col {
	width: 100%;
	margin-left: 0;
	padding: 0;
	color: var(--tcni-ink);
	text-align: left;
}

/* The template renders no image column; this is belt and braces in case a slide
   is ever built with one, since the compiled bundle sets .img-col to display
   block for style-2. */
.block.block-testimonials-carousel.block-testimonial-carousel-no-image.style-2 .content-container .slides-container .swiper .swiper-wrapper .swiper-slide.no-image .slide-content .img-col {
	display: none;
}

.block.block-testimonials-carousel.block-testimonial-carousel-no-image.style-2 .content-container .slides-container .swiper .swiper-wrapper .swiper-slide.no-image .slide-content .text-col .text-col-content {
	max-width: 44rem;
	padding: 0;
}

.block.block-testimonials-carousel.block-testimonial-carousel-no-image.style-2 .content-container .slides-container .swiper .swiper-wrapper .swiper-slide.no-image .slide-content .text-col .text-col-content .quote p {
	justify-content: flex-start;
	color: var(--tcni-ink);
}

/* Quote glyph. Desktop is 10em per the design; the smaller viewports keep the
   original block's 6rem so it doesn't swamp a narrow card. The box height and
   the upward nudge track the glyph size at roughly the original block's ratios
   (height ~= 0.5x font-size, translateY ~= -0.17x). */
.block.block-testimonials-carousel.block-testimonial-carousel-no-image.style-2 .content-container .slides-container .swiper .swiper-wrapper .swiper-slide.no-image .slide-content .text-col .text-col-content .quote {
	height: 3rem;
}

.block.block-testimonials-carousel.block-testimonial-carousel-no-image.style-2 .content-container .slides-container .swiper .swiper-wrapper .swiper-slide.no-image .slide-content .text-col .text-col-content .quote p {
	font-size: 6rem;
	transform: translateY(-1rem);
}

@media (min-width: 1200px) {
	.block.block-testimonials-carousel.block-testimonial-carousel-no-image.style-2 .content-container .slides-container .swiper .swiper-wrapper .swiper-slide.no-image .slide-content .text-col .text-col-content .quote {
		height: 5rem;
	}

	.block.block-testimonials-carousel.block-testimonial-carousel-no-image.style-2 .content-container .slides-container .swiper .swiper-wrapper .swiper-slide.no-image .slide-content .text-col .text-col-content .quote p {
		font-size: 10em;
		transform: translateY(-1.7rem);
	}
}

/* Testimonial text — 1.75rem on desktop per the design, down from the original
   block's 2rem. Weight 600, matching the source name below it. */
.block.block-testimonials-carousel.block-testimonial-carousel-no-image.style-2 .content-container .slides-container .swiper .swiper-wrapper .swiper-slide.no-image .slide-content .text-col .text-col-content .testimonial-text {
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.4;
}

@media (min-width: 768px) {
	.block.block-testimonials-carousel.block-testimonial-carousel-no-image.style-2 .content-container .slides-container .swiper .swiper-wrapper .swiper-slide.no-image .slide-content .text-col .text-col-content .testimonial-text {
		font-size: 1.5rem;
	}
}

@media (min-width: 1200px) {
	.block.block-testimonials-carousel.block-testimonial-carousel-no-image.style-2 .content-container .slides-container .swiper .swiper-wrapper .swiper-slide.no-image .slide-content .text-col .text-col-content .testimonial-text {
		padding-right: 2rem;
		font-size: 1.75rem;
	}
}

/* Source name — 1rem, same weight as the testimonial text above it */
.block.block-testimonials-carousel.block-testimonial-carousel-no-image.style-2 .content-container .slides-container .swiper .swiper-wrapper .swiper-slide.no-image .slide-content .text-col .text-col-content .testimonial-name {
	margin-bottom: 0;
	font-size: 1rem;
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
   4. Pagination — style-2 hangs it below the card at bottom:-2rem
   --------------------------------------------------------------------------- */

.block.block-testimonials-carousel.block-testimonial-carousel-no-image.style-2 .content-container .slides-container .swiper-pagination {
	position: static;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 0.5rem;
	width: auto;
	margin-top: 2rem;
	transform: none !important;
}

.block.block-testimonials-carousel.block-testimonial-carousel-no-image.style-2 .content-container .slides-container .swiper-pagination .swiper-pagination-bullet {
	width: 2.4rem;
	height: 0.6rem;
	margin: 0 !important;
	border-radius: 100rem;
	opacity: 1;
	background-color: var(--tcni-dash-idle);
	transition: all 0.3s;
}

.block.block-testimonials-carousel.block-testimonial-carousel-no-image.style-2 .content-container .slides-container .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
	background-color: var(--tcni-accent);
}

/* Only one testimonial — nothing to page through. Swiper adds
   .swiper-pagination-lock itself, but its own `display:none` rule is a single
   class and would lose to the `display:flex` above, so restate it here. */
.block.block-testimonials-carousel.block-testimonial-carousel-no-image.style-2 .content-container .slides-container .swiper-pagination.swiper-pagination-lock,
.block.block-testimonials-carousel.block-testimonial-carousel-no-image.style-2 .content-container .slides-container .swiper-pagination:empty {
	display: none;
}

/* ---------------------------------------------------------------------------
   5. Decorative wayfinder shape
   --------------------------------------------------------------------------- */

.block.block-testimonials-carousel.block-testimonial-carousel-no-image.style-2 .content-container .slides-container .card-wayfinder {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 70%;
	max-width: 34rem;
	pointer-events: none;
	/* Natural orientation — the graphic already points in from the left, so it
	   anchors to the top left of the card. */
}

.block.block-testimonials-carousel.block-testimonial-carousel-no-image.style-2 .content-container .slides-container .card-wayfinder svg {
	display: block;
	width: 100%;
	height: auto;
}

.block.block-testimonials-carousel.block-testimonial-carousel-no-image.style-2 .content-container .slides-container .card-wayfinder svg path {
	fill: var(--tcni-wayfinder);
}

/* ---------------------------------------------------------------------------
   6. Card colours — every option in the Theme dropdown
   ---------------------------------------------------------------------------
   The compiled bundle only paints six of the fourteen brand colours for
   style-2 cards; the rest silently fall back to Experience Education Green.
   These rules cover the full $colour_choices_brand list from
   functions/acf-field-groups/field-choices.php, so every option in the editor
   renders the colour its label promises.

   Seven classes each, so they outrank the six-class theme rules in styles.css
   on specificity rather than on load order. */

/* Dark cards — white text, yellow active dash (see section 0) */

.block.block-testimonials-carousel.block-testimonial-carousel-no-image.style-2.theme-sb_cyan .content-container .slides-container {
	background-color: #009dca;
}

.block.block-testimonials-carousel.block-testimonial-carousel-no-image.style-2.theme-ee_green .content-container .slides-container {
	background-color: #008b7e;
}

.block.block-testimonials-carousel.block-testimonial-carousel-no-image.style-2.theme-tb_green .content-container .slides-container {
	background-color: #64a316;
}

.block.block-testimonials-carousel.block-testimonial-carousel-no-image.style-2.theme-ed_orange .content-container .slides-container {
	background-color: #f60;
}

.block.block-testimonials-carousel.block-testimonial-carousel-no-image.style-2.theme-wc_blue .content-container .slides-container {
	background-color: #003f58;
}

.block.block-testimonials-carousel.block-testimonial-carousel-no-image.style-2.theme-jca_pink .content-container .slides-container {
	background-color: #ee4297;
}

.block.block-testimonials-carousel.block-testimonial-carousel-no-image.style-2.theme-feds_varsity_blue .content-container .slides-container {
	background-color: #041e42;
}

.block.block-testimonials-carousel.block-testimonial-carousel-no-image.style-2.theme-blue_run .content-container .slides-container {
	background-color: #24242f;
}

/* Light cards — navy text and dashes (see section 0) */

.block.block-testimonials-carousel.block-testimonial-carousel-no-image.style-2.theme-yellow .content-container .slides-container {
	background-color: #d9fc00;
}

.block.block-testimonials-carousel.block-testimonial-carousel-no-image.style-2.theme-feds_varsity_yellow .content-container .slides-container {
	background-color: #fcc23d;
}

.block.block-testimonials-carousel.block-testimonial-carousel-no-image.style-2.theme-music_mauve .content-container .slides-container {
	background-color: #bcc9f5;
}

.block.block-testimonials-carousel.block-testimonial-carousel-no-image.style-2.theme-core_highlight .content-container .slides-container {
	background-color: #e2ebce;
}

.block.block-testimonials-carousel.block-testimonial-carousel-no-image.style-2.theme-core_spotlight .content-container .slides-container {
	background-color: #eeeaf3;
}

.block.block-testimonials-carousel.block-testimonial-carousel-no-image.style-2.theme-green_piste .content-container .slides-container {
	background-color: #a0d2cd;
}