/* ============================================================
   TESTIMONIALS PAGE CSS — Maison Décor
   ============================================================ */

.testimonials-hero {
  padding: 160px 0 90px;
  background: var(--clr-cream);
  position: relative;
  overflow: hidden;
}

.testimonials-hero::after {
  content: '"';
  position: absolute;
  right: 5%;
  top: 10%;
  font-family: var(--font-display);
  font-size: min(40vw, 480px);
  line-height: 0.8;
  color: rgba(185,170,153,0.15);
  pointer-events: none;
}

.testimonials-hero h1 { color: var(--clr-dark); margin-bottom: 16px; }
.testimonials-hero p  { color: var(--clr-mid); font-size: 1.05rem; max-width: 480px; }

/* ——— Stats Row ——— */

.testimonials-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--clr-dark);
}

.ts-stat {
  padding: 40px 32px;
  text-align: center;
  border-right: 1px solid rgba(185,170,153,0.12);
}

.ts-stat:last-child { border-right: none; }

.ts-stat-num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  color: var(--clr-cream);
  line-height: 1;
  margin-bottom: 6px;
}

.ts-stat-label {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clr-mid);
}

@media (max-width: 640px) {
  .testimonials-stats { grid-template-columns: repeat(2, 1fr); }
  .ts-stat:nth-child(2) { border-right: none; }
}

/* ——— Featured Quote ——— */

.featured-quote {
  padding: 96px 0;
  background: var(--clr-white);
  text-align: center;
}

.featured-quote blockquote {
  max-width: 840px;
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  font-weight: 300;
  font-style: italic;
  color: var(--clr-dark);
  line-height: 1.5;
  position: relative;
}

.featured-quote blockquote::before,
.featured-quote blockquote::after {
  font-size: 6rem;
  line-height: 0;
  vertical-align: -0.6rem;
  color: var(--clr-lightest);
  font-style: normal;
}

.featured-quote blockquote::before { content: '\201C'; margin-right: 4px; }
.featured-quote blockquote::after  { content: '\201D'; margin-left: 4px; }

.featured-quote-author {
  margin-top: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.featured-quote-author img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--clr-lightest);
}

.fqa-name { font-weight: 500; color: var(--clr-dark); }
.fqa-role { font-size: 0.82rem; color: var(--clr-mid); margin-top: 2px; }

/* ——— Testimonials Masonry ——— */

.testimonials-masonry {
  columns: 3;
  column-gap: 28px;
  padding: 72px 0;
}

.t-card {
  break-inside: avoid;
  background: var(--clr-white);
  border: 1px solid var(--clr-lightest);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-bottom: 28px;
  transition: var(--transition);
}

.t-card:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-3px);
}

.t-card-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 16px;
}

.t-card-star {
  width: 14px;
  height: 14px;
  fill: #d4a84b;
}

.t-card-text {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--clr-dark);
  line-height: 1.6;
  margin-bottom: 20px;
}

.t-card-author {
  display: flex;
  gap: 12px;
  align-items: center;
}

.t-card-author img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.t-card-name {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--clr-dark);
  margin-bottom: 2px;
}

.t-card-role {
  font-size: 0.78rem;
  color: var(--clr-mid);
}

.t-card-project {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--clr-lightest);
  font-size: 0.78rem;
  color: var(--clr-light);
  letter-spacing: 0.06em;
}

.t-card-project span {
  color: var(--clr-mid-dark);
  font-weight: 500;
}

@media (max-width: 900px) { .testimonials-masonry { columns: 2; } }
@media (max-width: 580px) { .testimonials-masonry { columns: 1; } }

/* ——— Video Testimonials ——— */

.video-testimonials {
  background: var(--clr-cream);
  padding: 80px 0;
}

.vt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.vt-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  aspect-ratio: 9/16;
  max-height: 440px;
  background: var(--clr-dark);
  cursor: pointer;
}

.vt-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  transition: opacity var(--transition);
}

.vt-card:hover img { opacity: 0.45; }

.vt-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.vt-name {
  color: var(--clr-cream);
  font-family: var(--font-display);
  font-size: 1rem;
  text-align: center;
}

@media (max-width: 768px) { .vt-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .vt-grid { grid-template-columns: 1fr; } }

/* ——— Leave a Review ——— */

.leave-review {
  background: var(--clr-dark);
  padding: 80px 0;
}

.leave-review-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.leave-review h2 { color: var(--clr-cream); margin-bottom: 16px; }
.leave-review p  { color: rgba(220,213,204,0.7); }

.review-form { display: flex; flex-direction: column; gap: 20px; }

.rating-select {
  display: flex;
  gap: 8px;
}

.rating-star {
  width: 32px;
  height: 32px;
  cursor: pointer;
  fill: rgba(220,213,204,0.3);
  transition: fill var(--transition-fast);
}

.rating-star.active, .rating-star:hover { fill: #d4a84b; }

@media (max-width: 768px) {
  .leave-review-inner { grid-template-columns: 1fr; }
}