/* ============================================
   Tabs — pill-shaped triggers in a single pill container,
   with edge fades when the rail overflows.

   Visual recipe mirrors the homepage "Platform Capabilities"
   tabs (sections/platform-capabilities.css) — dark navy pill
   container with subtle border, individual tabs as transparent
   pills that fill in to lighter on active.

   Structure:
     .gs-wgs-tabs__shell     — OPTIONAL flex row that adds prev/next
                               arrow buttons around the pill. When
                               present, tabs.js wires the arrow
                               clicks to scroll the rail and toggles
                               visibility based on overflow. Omit it
                               and the pill renders standalone.
     .gs-wgs-tabs__arrow--*  — left/right scroll arrows. Desktop-only.
     .gs-wgs-tabs__list-wrap — pill chrome + absolute-positioned
                               fade gradients
     .gs-wgs-tabs__list      — flex scroll rail (the actual tabs)
     .gs-wgs-tabs__fade--*   — left/right gradient edges
     .gs-wgs-tabs__trigger   — individual tab pill
     .gs-wgs-tabs__panel     — content panel (hidden via [hidden])

   tabs.js toggles .gs-wgs-tabs__list-wrap--overflow on the wrap
   when scrollWidth > clientWidth → CSS opacity-fades gradients in.
   ============================================ */

/* ─── Shell + arrows (optional) ───────────────────────────────
   Flex row that brackets the pill with left/right scroll arrows.
   Arrows are desktop-only and only visible when the rail overflows. */

.gs-wgs-tabs__shell {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 auto 3rem;
  max-width: 100%;
}

/* When the shell wraps the pill, the inner pill's bottom margin
   conflicts with the shell's. Strip the inner margin — the shell
   carries the spacing now. */
.gs-wgs-tabs__shell .gs-wgs-tabs__list-wrap {
  margin: 0;
  flex: 0 1 auto;
}

/* Arrows are part of the layout but visually transparent at rest —
   they fade in only when the user hovers (or focuses into) the shell.
   Same behavior as the homepage capabilities arrows. */
.gs-wgs-tabs__arrow {
  display: none;                /* off by default; switched on at desktop+overflow */
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(0, 38, 69, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.gs-wgs-tabs__arrow:hover {
  background: rgba(0, 38, 69, 0.9);
  border-color: rgba(255, 255, 255, 0.5);
}

.gs-wgs-tabs__arrow:focus-visible {
  outline: none;
  border-color: var(--color-brand-accent);
}

/* Disabled = scrolled to that edge already. Stays in flow but
   stays transparent so the user doesn't try to click a no-op. */
.gs-wgs-tabs__arrow[disabled] {
  opacity: 0 !important;
  cursor: default;
  pointer-events: none;
}

/* Desktop-only AND overflow-only. tabs.js adds .has-overflow to the
   shell when scrollWidth > clientWidth. Arrows live in the layout
   but only fade visible on hover/focus-within of the shell. */
@media (min-width: 1024px) {
  .gs-wgs-tabs__shell.has-overflow .gs-wgs-tabs__arrow {
    display: inline-flex;
  }
  .gs-wgs-tabs__shell.has-overflow:hover .gs-wgs-tabs__arrow,
  .gs-wgs-tabs__shell.has-overflow:focus-within .gs-wgs-tabs__arrow {
    opacity: 1;
  }
}

.gs-wgs-tabs__list-wrap {
  position: relative;
  background: #002645;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 999px;
  padding: 0.5rem;
  margin: 0 auto 3rem;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;     /* clips the fades cleanly to the pill */
}

.gs-wgs-tabs__list {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.gs-wgs-tabs__list::-webkit-scrollbar { display: none; }

/* Edge fades — fade FROM solid pill bg TO transparent so tabs that
   sit under the fade gradient appear to dissolve toward the edge.
   Opacity defaults to 0; tabs.js toggles --overflow on the wrap
   when the list overflows, which fades them in. */
.gs-wgs-tabs__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 48px;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.gs-wgs-tabs__list-wrap--overflow .gs-wgs-tabs__fade {
  opacity: 1;
}

.gs-wgs-tabs__fade--left {
  left: 0;
  border-top-left-radius: 999px;
  border-bottom-left-radius: 999px;
  background: linear-gradient(90deg, rgba(0, 38, 69, 1) 0%, rgba(0, 38, 69, 0) 100%);
}

.gs-wgs-tabs__fade--right {
  right: 0;
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
  background: linear-gradient(270deg, rgba(0, 38, 69, 1) 0%, rgba(0, 38, 69, 0) 100%);
}

.gs-wgs-tabs__trigger {
  flex: 0 0 auto;
  min-width: 120px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.8rem 2rem;
  font-family: inherit;
  font-size: 0.85rem;
  line-height: 1.2;
  font-weight: var(--weight-medium);
  background: transparent;
  color: #e5e7eb;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease,
              box-shadow 0.2s ease, border-color 0.2s ease;
}

.gs-wgs-tabs__trigger:hover {
  background: rgba(148, 163, 184, 0.15);
}

.gs-wgs-tabs__trigger[aria-selected="true"] {
  background: rgba(148, 163, 184, 0.15);
  color: #fff;
  font-weight: 600;
  border-color: rgba(148, 163, 184, 0.6);
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.31),
    0 12px 24px rgba(15, 23, 42, 0.46);
}

.gs-wgs-tabs__trigger:focus-visible {
  outline: 2px solid var(--color-brand-accent);
  outline-offset: 2px;
}

.gs-wgs-tabs__panel[hidden] {
  display: none;
}