/**
 * 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   - style-2's .no-image branch centres text; design is left
 *   3. pagination       - style-2 puts it below the card; design puts it inside
 *   4. wayfinder        - decorative shape behind the quote
 *
 * Card background colours are NOT set here — the theme's own style-2 theme
 * rules in styles.css already paint them, and this block uses the same
 * `theme-*` classes.
 *
 * Selectors carry both block classes so they always outrank the style-2 rules
 * in styles.css regardless of load order.
 */

/* Active pagination dash colour. Yellow by default, matching how style-1 marks
   its active slide in this theme. Orange is the one card colour style-2 paints
   bright enough that yellow stops reading, so it takes Navy instead — both are
   this theme's own brand colours. */
.block.block-testimonial-carousel-no-image {
	--tcni-accent: #d9fc00;
}

.block.block-testimonial-carousel-no-image.theme-ed_orange {
	--tcni-accent: #003f58;
}

/* ---------------------------------------------------------------------------
   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 — style-2's .no-image branch centres it and sets width 100%
   --------------------------------------------------------------------------- */

.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;
	text-align: left;
}

.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;
}

/* 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: #fff;
	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;
}

/* A barely-there dark shape over whatever the theme colour is. Kept as an alpha
   overlay rather than a fixed tint so it tracks the card colour and introduces
   no hex outside the theme's palette. */
.block.block-testimonials-carousel.block-testimonial-carousel-no-image.style-2 .content-container .slides-container .card-wayfinder svg path {
	fill: rgba(0, 0, 0, 0.07);
}