/* ============================================
   Community — Partners.
   Replaces the live page's tabbed widget with 4 static cards
   in a 2×2 grid (per user request).

   Page-specific bits:
     - .gs-partners-hero      Strips the dark waves bg inherited
                              from .gs-uc-hero--centered so the
                              hero can sit on the white section
                              variant.
     - .gs-partners-section   Partner cards band with custom
                              illustrated bg (gs23-lp-bg-3.svg)
     - .gs-partner-card       Static partner card markup
     - .gs-partner-card__tag  Capability item: outlined coral
                              circle icon + label, with a thin
                              divider between columns
     - .gs-partners-cta       Closing CTA padding override
   ============================================ */

/* ─── Hero override ──────────────────────────────────────── */
/* The .gs-uc-hero--centered modifier from uc-modernization.css
   sets background-image: url('...lp-background-1.svg'). On a
   white hero, that dark navy SVG would render on top of the
   white bg. Strip it here. */
.gs-partners-hero {
  background-image: none;
}

/* ─── Partners section ───────────────────────────────────── */

.gs-partners-section {
  /* Custom illustrated bg requested for this section. The SVG
     is light-toned so it provides a textured backdrop without
     fighting the white partner cards on top. */
  background-image: url('https://430224.fs1.hubspotusercontent-na1.net/hubfs/430224/Illustrations/gs23-lp-bg-3.svg');
  background-color: var(--color-bg-muted);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Wider inner — cards spread out more than the standard
   --content-frame (1120px). Each card gets more horizontal
   space which keeps the labels comfortable as the inside
   padding grows too. */
.gs-partners-section .gs-wgs-section__inner {
  max-width: 1280px;
}

.gs-partners {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.gs-partner-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  padding: 6rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Logo top — left-aligned, capped height so different SVG
   aspects render proportionally. */
.gs-partner-card__logo {
  margin-bottom: 0.5rem;
}

.gs-partner-card__logo img {
  height: 44px;
  width: auto;
  max-width: 220px;
  display: block;
}

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

/* "What we do together" block — subtle separator above. */
.gs-partner-card__together {
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}

.gs-partner-card__together-title {
  font-size: var(--text-h5);
  font-weight: var(--weight-bold);
  color: var(--color-fg);
  margin: 0 0 0.5rem;
}

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

/* Capability tags — 2-column grid (2 items per row). Each tag
   pairs an outlined coral circle icon with a label.
   Left-column items get a thin vertical divider via ::after,
   sized to a fixed 32px height (matching the icon) and
   centered vertically — keeps the divider visually consistent
   even when neighboring labels wrap to 2 lines. */
/* Tags flow inline like prose: each tag is only as wide as its
   own content (icon + label, no extra padding). The space is
   provided by the flex container's column-gap; the divider sits
   in the MIDDLE of that gap. Tags themselves stay flush so the
   first one aligns with the card's left edge and the last one
   has no trailing whitespace. */
.gs-partner-card__tags {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 2.5rem;
  row-gap: 0.75rem;
}

.gs-partner-card__tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--color-fg-body);
}

/* Divider sits at the midpoint of the column gap — `right: -1.25rem`
   is half of the 2.5rem column-gap. */
.gs-partner-card__tag:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -1.25rem;
  top: 50%;
  width: 1px;
  height: 32px;
  transform: translateY(-50%);
  background: var(--color-border);
}

.gs-partner-card__tag-label {
  white-space: nowrap;
}

/* Outlined coral circle with a filled coral icon inside.
   Lucide is stroke-only, so the filled icon shapes come from
   inline SVGs (Heroicons-solid-style) per tag. */
.gs-partner-card__tag-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 1.5px solid var(--color-brand-accent);
  color: var(--color-brand-accent);
}

.gs-partner-card__tag-icon svg {
  width: 18px;
  height: 18px;
}

.gs-partner-card__tag-icon svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

.gs-partner-card__tag-label {
  /* Allow long labels to wrap inside the column instead of
     pushing past the divider. */
  min-width: 0;
}

/* Explicit 40px margin above the CTA. `margin-top: auto` was
   the previous approach to push the button to the bottom of
   tall stretched cards, but it absorbed any extra space added
   above it — so a fixed margin couldn't take effect. Dropping
   it in favor of a real 40px gap. Card heights still match
   within a row (CSS grid stretches them) — the CTA just sits
   at its natural position instead of pinned to the card's
   bottom edge. */
.gs-partner-card__cta {
  margin-top: 40px;
  align-self: flex-start;
}

@media (max-width: 900px) {
  .gs-partners {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
  }
  .gs-partner-card {
    padding: 2rem;
  }
  /* Stack tags to single column on mobile and drop dividers. */
  .gs-partner-card__tags {
    grid-template-columns: 1fr;
  }
  .gs-partner-card__tag:nth-child(odd):not(:last-child)::after {
    display: none;
  }
}

/* The .gs-partners-cta padding override that used to live here
   was lifted into the base .gs-cta--horizontal rule — every
   horizontal closing CTA gets the slim 3rem vertical padding
   by default now. */