/* ============================================
   Quote testimonial card + variants.

   Base .gs-wgs-quote = white card w/ 5-star row, quote text,
   author block (photo + name + role). Used in 3 contexts:

   - Inside .gs-wgs-quote-row (paired with text — see row.css)
   - .gs-wgs-quote--featured = standalone, larger, glass on dark
     section (used as its own band between two muted sections)
   - .gs-wgs-quote--glass    = glass card without the centered
     "featured" framing. Used inside .gs-wgs-quotes-2up (2-col
     grid of side-by-side testimonials on a dark section)

   Stars use the homepage's FA-path SVG byte-for-byte (matches
   the orange→orange gradient defined globally in base.html).
   Don't re-engineer stars with Lucide — visual mass drifts.
   ============================================ */

.gs-wgs-quote {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 2rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  box-shadow: 0 4px 16px rgba(0, 38, 69, 0.04);
}

.gs-wgs-quote__stars {
  display: flex;
  gap: 0.25rem;
}

.gs-wgs-quote__star {
  width: 16px;
  height: 16px;
  display: block;
}

.gs-wgs-quote__text {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-fg);
  margin: 0;
  text-wrap: pretty;
}

.gs-wgs-quote__author {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin: 0;
}

.gs-wgs-quote__photo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.gs-wgs-quote__meta {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.gs-wgs-quote__name {
  font-style: normal;
  font-weight: var(--weight-bold);
  font-size: 0.95rem;
  color: var(--color-fg);
}

.gs-wgs-quote__role {
  font-size: 0.85rem;
  color: var(--color-fg-body);
}

/* ─── Featured variant ──────────────────────
   Single card, centered, max-width 820. Glass effect on a dark
   section. Larger quote type, centered alignment. */
.gs-wgs-quote--featured {
  max-width: 820px;
  margin: 0 auto;
  padding: 3rem 3.5rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
  text-align: center;
  align-items: center;
}

.gs-wgs-quote--featured .gs-wgs-quote__text {
  font-size: 1.125rem;
  color: #fff;
  max-width: 60ch;
  text-wrap: balance;
}

.gs-wgs-quote--featured .gs-wgs-quote__name {
  color: #fff;
}

.gs-wgs-quote--featured .gs-wgs-quote__role {
  color: rgba(255, 255, 255, 0.75);
}

.gs-wgs-quote--featured .gs-wgs-quote__author {
  margin-top: 0.5rem;
}

/* Author meta block left-aligns even though the card is centered.
   Name + role sit naturally next to the photo as a left-anchored
   text block. */
.gs-wgs-quote--featured .gs-wgs-quote__meta {
  text-align: left;
}

/* ─── Glass variant (for 2-up grids) ──────── */

.gs-wgs-quotes-2up {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: var(--content-frame);
  margin: 0 auto;
}

/* Equal-height cards. The grid stretches the <li>s by default
   (align-items: stretch), but the inner <figure> doesn't fill
   that height unless we tell it to. The flex chain below makes
   each li a column flex container with the figure stretching to
   fill, so cards with longer quotes don't outgrow shorter ones —
   side-by-side both reach the same baseline at the card bottom. */
.gs-wgs-quotes-2up > li {
  display: flex;
}

.gs-wgs-quote--glass {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
  padding: 2rem 2.25rem;
  /* Stretch to fill the li (which itself stretches via grid). */
  flex: 1;
  box-sizing: border-box;
}

.gs-wgs-quote--glass .gs-wgs-quote__text {
  color: #fff;
}

.gs-wgs-quote--glass .gs-wgs-quote__name {
  color: #fff;
}

.gs-wgs-quote--glass .gs-wgs-quote__role {
  color: rgba(255, 255, 255, 0.75);
}

/* ============================================
   Mobile / tablet
   ============================================ */

@media (max-width: 900px) {
  .gs-wgs-quotes-2up {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

@media (max-width: 767px) {
  .gs-wgs-quote--featured {
    padding: 2rem 1.5rem;
  }
}