/* ============================================
   gs-outcomes — Section #7: Customer Outcomes
   Dark-bg section: 3-up headline stats + 2-up testimonial grid.
   Uses --color-bg-dark (Giant Swarm Blue #002645) so it reads
   distinctly from the darkest #5 capabilities section.

   The testimonials are intentionally NOT a carousel — both quotes
   are always visible (2-up grid mirroring the Delivery Model
   section above). Carousels hide content behind interaction; with
   only 2 quotes the slider chrome (arrows + dots + autoplay) costs
   more attention than it saves.
   ============================================ */

.gs-outcomes {
  /* "Flexible offering" illustration over the Giant Swarm Blue
     fallback. SVG hosted on HubSpot CDN. */
  background-color: var(--color-bg-dark);
  background-image: url('https://www.giantswarm.io/hubfs/Illustrations/gs23-bg-flexible-offering-v1.svg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 6rem 1.5rem;
  color: #fff;
}

.gs-outcomes__inner {
  max-width: var(--content-max);
  margin: 0 auto;
}

.gs-outcomes__header {
  text-align: center;
  max-width: var(--content-header);
  margin: 0 auto 3.5rem;
}

.gs-outcomes__title {
  font-size: var(--text-h2);
  color: #fff;
  margin: 0;
  text-wrap: balance;
}

/* ============================================
   Stat blocks — 3 across on desktop, no chrome
   ============================================ */

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

.gs-outcomes__stat {
  text-align: center;
}

.gs-outcomes__stat-value {
  /* Flat 4rem (no clamp) — these are the section's focal point
     and Marat wants them at full desktop size on mobile too.
     "30-40%" at 64px bold fits comfortably within a 375px iPhone
     SE viewport even with section padding. */
  font-size: 4rem;
  font-weight: var(--weight-bold);
  color: var(--color-brand-accent);
  line-height: 1;
  margin-bottom: 0.75rem;
}

.gs-outcomes__stat-title {
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  color: #fff;
  margin: 0 0 0.5rem;
}

.gs-outcomes__stat-desc {
  /* Standard body size — same scale as the rest of the page so
     the stats don't feel like fine-print. The explicit <br> in
     each desc controls line breaking, not font-size, so we don't
     need to shrink to make 2 lines work. */
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  /* On dark bg, the muted token (#727F8C) reads as dim against navy.
     #cbd5e1 = slate-300, lifts secondary text enough to stay legible
     while still reading as supporting copy. */
  color: #cbd5e1;
  margin: 0;
  /* No text-wrap: balance — each desc has an explicit <br> at the
     designer-chosen clause boundary. Balance would either be a no-op
     (when the manual break already wins) or would mess things up on
     narrow viewports. */
}

/* ============================================
   2-up testimonial grid
   ============================================ */

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

.gs-quote {
  /* Glass effect — same pattern as the customer-logos pill below
     the hero. Translucent white over the section's bg illustration
     + backdrop-blur creates the frosted-glass look, the soft shadow
     gives it lift against the bg. */
  /* Glass recipe matched to the customer-logos pill — both glass
     moments on the page read as the same material. */
  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);
  border-radius: 16px;
  padding: 2.25rem 2rem;
  margin: 0; /* reset <figure> */
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  /* margin-top: auto on author pushes the author row to the bottom
     when quotes have unequal lengths, so both cards align nicely. */
  height: 100%;
}

.gs-quote__stars {
  display: flex;
  gap: 0.25rem;
  /* Stars use the orange→coral CTA gradient (defined in section
     markup as <linearGradient id="gs-quote-star-gradient">). Each
     star path's fill references that gradient, so color changes
     happen in the markup defs, not here. */
}

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

.gs-quote__text {
  font-size: 1.0625rem;
  line-height: var(--leading-relaxed);
  font-weight: var(--weight-regular);
  color: #fff;
  margin: 0;
  text-wrap: pretty;
  font-style: normal; /* override <blockquote> ua italics */
  /* Fancy quote characters (&ldquo; / &rdquo;) live in the markup
     so they sit inline with the first/last words — pseudo-element
     quotes can mis-align across browsers. */
}

.gs-quote__author {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: auto; /* pin to bottom regardless of quote length */
  padding-top: 0.5rem;
}

.gs-quote__photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.15);
}

.gs-quote__meta {
  flex: 1;
  min-width: 0; /* allow long names/roles to wrap inside the flex row */
}

.gs-quote__name {
  font-weight: var(--weight-bold);
  color: #fff;
  font-size: 0.95rem;
  margin-bottom: 0.15rem;
}

.gs-quote__role {
  color: #cbd5e1;
  font-size: 0.85rem;
  line-height: var(--leading-snug);
}

.gs-quote__logo {
  /* Smaller (was 28px) — at this size the logos read as
     "attribution mark" rather than competing with the photo
     and name for attention. */
  height: 20px;
  width: auto;
  flex-shrink: 0;
  /* The captured logos (adidas, egger) are black-on-transparent SVGs.
     Invert flips them white for the dark bg — matches the live site's
     approach. If we ever ship white-versioned brand SVGs, drop this. */
  filter: invert(1) brightness(0.95);
  opacity: 0.7;
}

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

@media (max-width: 900px) {
  .gs-outcomes__stats {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    max-width: 480px;
  }
  .gs-quotes {
    grid-template-columns: 1fr;
    gap: 1rem;
    max-width: 600px;
  }
}

@media (max-width: 767px) {
  .gs-outcomes { padding: 3rem 1.5rem; }

  .gs-outcomes__header { margin-bottom: 2.5rem; }

  .gs-outcomes__stats {
    margin-bottom: 3rem;
    gap: 2rem;
  }

  /* Hardcoded 1.375rem (= desktop --text-h4) so the title stays
     at full desktop size on mobile. The global mobile heading
     scale would otherwise shift h4 from 22px → 18px, and we want
     these stat headlines to keep their punch on small screens. */
  .gs-outcomes__stat-title { font-size: 1.375rem; }

  .gs-quote {
    padding: 1.75rem 1.5rem;
  }
  .gs-quote__text { font-size: 1rem; }
}