/**
 * Testimonial Featured Block Styles
 *
 * Two-column testimonial layout with large image on right.
 * Clean, focused implementation without multi-layout complexity.
 *
 * @version 1.1.0
 */

/* ==========================================================================
   Container
   ========================================================================== */

.testimonial-featured {
	position: relative;
}

/* Full-width alignment - override container constraint */
.testimonial-featured.alignfull,
.testimonial-featured.alignwide {
	max-width: none;
}

.testimonial-featured__container {
	border-radius: var(--radius-card);
	overflow: hidden;
}

/* ==========================================================================
   Slide/Item Layout - Two Column Grid
   ========================================================================== */

.testimonial-featured__slide,
.testimonial-featured__item {
	display: grid;
	grid-template-columns: 1fr 40%;
	min-height: 450px;
}

/* Content Column (Left) */
.testimonial-featured__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--space-2xl);
	padding-bottom: var(--space-3xl);
}

/* Image Column (Right) */
.testimonial-featured__image-wrapper {
	position: relative;
	overflow: hidden;
}

.testimonial-featured__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

/* ==========================================================================
   Typography
   ========================================================================== */

.testimonial-featured__quote {
	font-size: var(--font-size-h5);
	font-family: var(--font-family-heading);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-relaxed);
	margin-bottom: var(--space-lg);
}

.testimonial-featured__quote p {
	margin-bottom: 0;
}

.testimonial-featured__quote p + p {
	margin-top: var(--space-sm);
}

.testimonial-featured__quote strong {
	font-weight: var(--font-weight-semibold);
}

/* Long Quote Variant - Reduced font size for quotes over 350 characters */
.testimonial-featured__quote--long {
	font-size: var(--font-size-h6);
}

/* Attribution - Inline format: "Name, Title/Company" */
.testimonial-featured__attribution {
	font-size: var(--font-size-body);
}

.testimonial-featured__author {
	font-weight: var(--font-weight-semibold);
}

.testimonial-featured__company {
	font-weight: var(--font-weight-normal);
}

/* ==========================================================================
   Color Schemes
   ========================================================================== */

/* Dark Scheme (Default) - Background image with white text */
.testimonial-featured--dark .testimonial-featured__container {
	background-image: url('../../assets/images/bg-testimonial.webp');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--color-white);
}

.testimonial-featured--dark .testimonial-featured__quote,
.testimonial-featured--dark .testimonial-featured__quote strong,
.testimonial-featured--dark .testimonial-featured__attribution,
.testimonial-featured--dark .testimonial-featured__author,
.testimonial-featured--dark .testimonial-featured__company {
	color: var(--color-white);
}

.testimonial-featured--dark .testimonial-featured__dot {
	border-color: var(--color-white);
}

.testimonial-featured--dark .testimonial-featured__dot:hover {
	border-color: var(--color-white);
}

.testimonial-featured--dark .testimonial-featured__dot.active {
	background-color: var(--color-white);
	border-color: var(--color-white);
}

/* Light Scheme - Grey gradient with dark text */
.testimonial-featured--light .testimonial-featured__container {
	background-image: url('../../assets/images/bg-gradient-grey.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--color-heading);
}

.testimonial-featured--light .testimonial-featured__quote,
.testimonial-featured--light .testimonial-featured__quote strong,
.testimonial-featured--light .testimonial-featured__attribution,
.testimonial-featured--light .testimonial-featured__author,
.testimonial-featured--light .testimonial-featured__company {
	color: var(--color-heading);
}

.testimonial-featured--light .testimonial-featured__dot {
	border-color: var(--color-heading);
	opacity: 0.4;
}

.testimonial-featured--light .testimonial-featured__dot:hover {
	border-color: var(--color-heading);
	opacity: 0.7;
}

.testimonial-featured--light .testimonial-featured__dot.active {
	background-color: var(--color-heading);
	border-color: var(--color-heading);
	opacity: 1;
}

.testimonial-featured--light .testimonial-featured__dots {
	background: color-mix(in srgb, var(--color-white) 70%, transparent);
}

/* ==========================================================================
   No Image Variant
   Single column layout when no image is provided
   ========================================================================== */

.testimonial-featured__slide--no-image {
	grid-template-columns: 1fr;
	min-height: auto;
}

.testimonial-featured__slide--no-image .testimonial-featured__content {
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
	padding: var(--space-2xl) var(--space-3xl);
}

.testimonial-featured__slide--no-image .testimonial-featured__quote {
	text-wrap: balance;
}

/* ==========================================================================
   Image Position: Left (per-slide)
   Reverses the grid so image appears on the left, quote on the right
   ========================================================================== */

.testimonial-featured__slide--image-left {
	grid-template-columns: 40% 1fr;
}

.testimonial-featured__slide--image-left .testimonial-featured__image-wrapper {
	order: -1;
}

/* Tablet */
@media (width <= 1024px) {
	.testimonial-featured__slide--image-left {
		grid-template-columns: 45% 1fr;
	}
}

/* Mobile: stacks vertically, image on top */
@media (width <= 768px) {
	.testimonial-featured__slide--image-left {
		grid-template-columns: 1fr;
	}

	.testimonial-featured__slide--image-left .testimonial-featured__image-wrapper {
		order: 0;
	}
}


/* ==========================================================================
   Carousel
   ========================================================================== */

.testimonial-featured__carousel {
	position: relative;
}

.testimonial-featured__viewport {
	overflow: hidden;
}

.testimonial-featured__track {
	display: flex;
	transition: transform 0.4s ease-in-out;
	will-change: transform;
}

.testimonial-featured__slide {
	flex: 0 0 100%;
	min-width: 100%;
}

/* Dot Navigation */
.testimonial-featured__dots {
	position: absolute;
	bottom: var(--space-lg);
	left: var(--space-2xl);
	display: flex;
	gap: var(--space-sm);
	z-index: 10;
	background: color-mix(in srgb, var(--color-primary) 70%, transparent);
	padding: var(--space-xs) var(--space-sm);
	border-radius: var(--radius-full);
	backdrop-filter: blur(4px);
}

.testimonial-featured__dot {
	width: 18px;
	height: 18px;
	padding: 0;
	background: transparent;
	border: 2px solid currentColor;
	border-radius: var(--radius-full);
	cursor: pointer;
	transition: background-color var(--transition-base), transform var(--transition-base);
	opacity: 0.5;
}

.testimonial-featured__dot:hover {
	opacity: 0.8;
	transform: scale(1.1);
}

.testimonial-featured__dot.active {
	opacity: 1;
}

.testimonial-featured__dot:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	opacity: 1;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablet */
@media (width <= 1024px) {
	.testimonial-featured__slide,
	.testimonial-featured__item {
		grid-template-columns: 1fr 45%;
		min-height: 400px;
	}

	.testimonial-featured__content {
		padding: var(--space-xl);
		padding-bottom: var(--space-2xl);
	}

	.testimonial-featured__quote {
		font-size: var(--font-size-h6);
	}

	.testimonial-featured__quote--long {
		font-size: var(--font-size-lead);
	}

	.testimonial-featured__dots {
		left: var(--space-xl);
		bottom: var(--space-md);
	}

	/* No image variant - tablet */
	.testimonial-featured__slide--no-image .testimonial-featured__content {
		padding: var(--space-xl) var(--space-2xl);
	}
}

/* Mobile */
@media (width <= 768px) {
	.testimonial-featured__slide,
	.testimonial-featured__item {
		grid-template-columns: 1fr;
		grid-template-rows: auto minmax(250px, 1fr);
		min-height: auto;
	}

	.testimonial-featured__content {
		padding: var(--space-xl) var(--space-lg);
		padding-bottom: var(--space-lg);
		order: 1;
	}

	.testimonial-featured__image-wrapper {
		order: 2;
		min-height: 250px;
	}

	.testimonial-featured__quote {
		font-size: var(--font-size-lead);
	}

	.testimonial-featured__quote--long {
		font-size: var(--font-size-body);
	}

	.testimonial-featured__dots {
		position: relative;
		bottom: auto;
		left: auto;
		justify-content: center;
		padding: var(--space-md) var(--space-lg);
	}

	/* No image variant - mobile: single row, no image space */
	.testimonial-featured__slide--no-image {
		grid-template-rows: auto;
	}

	.testimonial-featured__slide--no-image .testimonial-featured__content {
		padding: var(--space-lg);
	}
}

/* Landscape Mobile - Side-by-side layout with smaller image */
@media (max-width: 991px) and (orientation: landscape) {
	.testimonial-featured__slide,
	.testimonial-featured__item {
		grid-template-columns: 1fr 35% !important;
		grid-template-rows: 1fr !important;
		min-height: unset !important;
		height: auto !important;
	}

	.testimonial-featured__content {
		order: 0 !important;
		padding: var(--space-lg) !important;
		padding-bottom: var(--space-lg) !important;
	}

	.testimonial-featured__image-wrapper {
		order: 1 !important;
		min-height: unset !important;
	}

	.testimonial-featured__image {
		object-position: center center;
	}

	.testimonial-featured__dots {
		position: absolute !important;
		bottom: var(--space-md) !important;
		left: var(--space-lg) !important;
	}

	/* Handle image-left variant */
	.testimonial-featured__slide--image-left {
		grid-template-columns: 35% 1fr !important;
	}

	.testimonial-featured__slide--image-left .testimonial-featured__image-wrapper {
		order: -1 !important;
	}

	/* No image variant - landscape mobile: single column */
	.testimonial-featured__slide--no-image {
		grid-template-columns: 1fr !important;
	}
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.testimonial-featured__track {
		transition: transform 0.2s ease;
	}
}

/* ==========================================================================
   Block Editor
   ========================================================================== */

.editor-styles-wrapper .testimonial-featured {
	margin-top: 0;
	margin-bottom: 0;
}

/* Alignment Variations */
.testimonial-featured.alignfull:not([style*="padding-left"], [class*="has-"][class*="-padding"]) {
	padding-left: 0;
}

.testimonial-featured.alignfull:not([style*="padding-right"], [class*="has-"][class*="-padding"]) {
	padding-right: 0;
}