/*
 * Pro Testimonials – Front-end styles
 *
 * All colours and sizing are driven by CSS custom properties.
 * Override any variable in your theme to customise the look:
 *
 *   :root {
 *     --pt-accent:      #your-colour;
 *     --pt-card-radius: 12px;
 *   }
 */

/* =========================================================================
   Custom Properties (design tokens)
   ========================================================================= */

:root {
	/* Colours */
	--pt-bg:             #ffffff;
	--pt-text:           #1a1a1a;
	--pt-text-muted:     #6b7280;
	--pt-meta-color:  	 rgba(107, 114, 128, 0.6);
	--pt-accent:         #2563eb;
	--pt-border:         #e5e7eb;
	--pt-quote-icon:     #d1d5db;

	/* Card */
	--pt-card-bg:        #ffffff;
	--pt-card-radius:    8px;
	--pt-card-padding:   1.75rem;
	--pt-card-shadow:    0 1px 4px rgba(0, 0, 0, .08), 0 4px 16px rgba(0, 0, 0, .06);

	/* Typography */
	--pt-font-content:   1rem;
	--pt-font-name:      .9375rem;
	--pt-font-meta:      .8125rem;
	--pt-line-height:    1.7;

	/* Avatar */
	--pt-avatar-size:    52px;

	/* Gap between cards (masonry) */
	--pt-gap:            1.5rem;

	/* Alignment */
	--pt-text-align:     left;
	--pt-author-justify: flex-start;

	/* Carousel navigation */
	--pt-nav-bg:         #ffffff;
	--pt-nav-color:      #374151;
	--pt-nav-size:       40px;
	--pt-nav-radius:     50%;
	--pt-dot-color:      #d1d5db;
	--pt-dot-active:     var(--pt-accent);
}

/* =========================================================================
   Shared – Card
   ========================================================================= */

.pro-testimonial-card {
	background:    var(--pt-card-bg);
	border:        1px solid var(--pt-border);
	border-radius: var(--pt-card-radius);
	box-shadow:    var(--pt-card-shadow);
	padding:       var(--pt-card-padding);
	display:       flex;
	flex-direction: column;
	gap:           1rem;
	color:         var(--pt-text);
	line-height:   var(--pt-line-height);
	text-align:    var(--pt-text-align, left);
	box-sizing:    border-box;
}

/* Opening quote mark */
.pro-testimonial-card::before {
	content:     '\201C';
	font-size:   3rem;
	line-height: 1;
	color:       var(--pt-quote-icon);
	margin-bottom: -.5rem;
}

/* Testimonial body */
.pro-testimonial-content {
	font-size: var(--pt-font-content);
	flex:      1;
	margin:    0;
}

/* Author row */
.pro-testimonial-author {
	display:     flex;
	align-items: center;
	gap:         .75rem;
	margin-top:  auto;
}

/* Avatar */
.pro-testimonial-avatar {
	flex-shrink: 0;
	width:       var(--pt-avatar-size);
	height:      var(--pt-avatar-size);
	border-radius: var(--pt-avatar-radius, 50%);
	overflow:    hidden;
	background:  var(--pt-border);
}

.pro-testimonial-avatar img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
}

/* Avatar placeholder (no image) */
.pro-testimonial-avatar-placeholder {
	width:           var(--pt-avatar-size);
	height:          var(--pt-avatar-size);
	border-radius:   50%;
	background:      var(--pt-accent);
	color:           #fff;
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-size:       calc(var(--pt-avatar-size) * .4);
	font-weight:     700;
	flex-shrink:     0;
}

/* Name + meta text */
.pro-testimonial-info {
	min-width: 0;
}

.pro-testimonial-name {
	font-size:   var(--pt-font-name);
	font-weight: 600;
	opacity:     0.85;
	margin:      0 0 .125rem;
}

.pro-testimonial-meta {
    font-size: var(--pt-font-meta);
    color:     var(--pt-meta-color);
    margin:    0;
}

.pro-testimonial-meta a {
	color:           inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.pro-testimonial-meta a:hover {
	color: var(--pt-accent);
}

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

.pro-testimonials-carousel-wrap {
	position: relative;
}

/* Swiper overrides */
.pro-testimonials-carousel .swiper-slide {
	height: auto; /* let all slides match tallest */
}

.pro-testimonials-carousel .swiper-slide .pro-testimonial-card {
	height:          100%;
	border:          none;
	box-shadow:      none;
	padding:         0;
	justify-content: center;
}

/* Author row: honour text-align for carousel */
.pro-testimonials-carousel .pro-testimonial-author {
	justify-content: var(--pt-author-justify, flex-start);
}

/* Navigation buttons */
.pro-testimonials-carousel-wrap .swiper-button-prev,
.pro-testimonials-carousel-wrap .swiper-button-next {
	width:         var(--pt-nav-size);
	height:        var(--pt-nav-size);
	background:    var(--pt-nav-bg);
	color:         var(--pt-nav-color);
	border-radius: var(--pt-nav-radius);
	box-shadow:    0 1px 4px rgba(0,0,0,.15);
	top:           50%;
	transform:     translateY(-50%);
	transition:    color .2s, background .2s;
}

.pro-testimonials-carousel-wrap .swiper-button-prev::after,
.pro-testimonials-carousel-wrap .swiper-button-next::after {
	font-size:   calc(var(--pt-nav-size) * .35);
	font-weight: 700;
	color:       var(--pt-nav-color);
}

.pro-testimonials-carousel-wrap .swiper-button-prev:hover,
.pro-testimonials-carousel-wrap .swiper-button-next:hover {
	background: var(--pt-nav-color);
	color:      var(--pt-nav-bg);
}

.pro-testimonials-carousel-wrap .swiper-button-prev:hover::after,
.pro-testimonials-carousel-wrap .swiper-button-next:hover::after {
	color: var(--pt-nav-bg);
}

/* Pagination dots */
.pro-testimonials-carousel-wrap .swiper-pagination-bullet {
	background: var(--pt-dot-color);
	opacity: 1;
}

.pro-testimonials-carousel-wrap .swiper-pagination-bullet-active {
	background: var(--pt-dot-active);
}

.pro-testimonials-carousel-wrap .swiper-pagination {
	position: relative;
	margin-top: 1.25rem;
}

/* =========================================================================
   Masonry
   ========================================================================= */

.pro-testimonials-masonry-wrap {
	/* columns count driven inline by shortcode attribute */
}

.pro-testimonials-masonry {
	/* Masonry.js uses position:absolute on items; we set a relative container */
}

.pro-testimonials-masonry .pro-testimonial-card {
	margin-bottom: var(--pt-gap);
	width:         100%; /* Masonry.js handles x-positioning */
}

/* Masonry column sizer (used by Masonry.js for column width calc) */
.pro-testimonials-masonry-sizer,
.pro-testimonials-masonry .pro-testimonial-card {
	/* width set inline via <style> tag rendered by shortcode */
}

/* =========================================================================
   Infinite Scroll – Load More indicator
   ========================================================================= */

.pro-testimonials-load-more {
	text-align:  center;
	padding:     2rem 0 1rem;
	transition:  opacity .4s ease;
}

.pro-testimonials-load-more.is-hidden {
	opacity:        0;
	pointer-events: none;
	height:         0;
	padding:        0;
	overflow:       hidden;
}

.pro-testimonials-spinner {
	display:       inline-block;
	width:         28px;
	height:        28px;
	border:        3px solid var(--pt-border);
	border-top-color: var(--pt-accent);
	border-radius: 50%;
	animation:     pt-spin .7s linear infinite;
}

@keyframes pt-spin {
	to { transform: rotate(360deg); }
}

/* =========================================================================
   Responsive — Masonry grid
   =========================================================================
   On narrow screens the shortcode's column count is overridden so cards
   are never cramped. Masonry.js reads the sizer element's rendered width
   at initialisation and on resize, so forcing width: 100% here is enough —
   the JS resize handler picks it up automatically.
   ========================================================================= */

/* Tablet (≤ 768 px) — maximum 2 columns regardless of shortcode setting. */
@media ( max-width: 768px ) {
	.pro-testimonials-masonry-sizer,
	.pro-testimonials-masonry .pro-testimonial-card {
		width: calc( 50% - ( var(--pt-gap, 24px) / 2 ) ) !important;
	}
}

/* Mobile (≤ 480 px) — single column, full width. */
@media ( max-width: 480px ) {
	.pro-testimonials-masonry-sizer,
	.pro-testimonials-masonry .pro-testimonial-card {
		width: 100% !important;
	}
}