/* FULL CSS — replicated from existing module
   Adaptations:
   - Added background: var(--color-bg-dark) on section so the dark
     surrounding exists in our standalone Loom context (the original
     relied on a dark parent wrapper from the HubSpot page setup).
   - Fixed typo: ##009fff → #009fff in .fa-check rule. */

.gs-platform-capabilities {
  /* Section-specific bg illustration on top of the darkest blue
     fallback. SVG hosted on HubSpot CDN. */
  background-color: var(--color-bg-darkest);
  background-image: url('https://www.giantswarm.io/hubfs/Illustrations/gs26-bg-platform-capabilities-v2.svg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 6rem 1.5rem;
  color: #f9fafb;
}

.gs-platform-capabilities__inner {
  /* Standard card/grid frame for sections #4-#7 (was 1120 — outlier
     in the original module CSS, now aligned with the system). */
  max-width: var(--content-frame);
  margin: 0 auto;
}

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

.gs-platform-capabilities__title {
  color: #fff;
}

.gs-platform-capabilities__subtitle {
  color: rgba(255, 255, 255, 0.8);
}

/* =========================
   Tabs (arrows OUTSIDE pill)
   ========================= */

.gs-tabs-shell {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2rem;
}

/* Pill wrapper (same look as before) */
.gs-platform-capabilities__tabs-wrap {
  position: relative;
  flex: 1 1 auto;
  border-radius: 999px;
  padding: 0.5rem;
  background: #002645;
  border: 1px solid rgba(148, 163, 184, 0.3);
  overflow: hidden; /* clips fades cleanly */
}

/* Rail */
.gs-tabs-rail {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding: 0 8px;
  scrollbar-width: none;
}

.gs-tabs-rail::-webkit-scrollbar {
  display: none;
}

/* Tabs */
.gs-tab {
  flex: 0 0 auto;
  min-width: 120px;
  border: none;
  border-radius: 999px;
  padding: 0.8rem 2rem;
  font-size: 0.85rem;
  line-height: 1.2;
  background: transparent;
  color: #e5e7eb;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

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

.gs-tab.gs-tab--active {
  background: rgba(148, 163, 184, 0.15);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.31), 0 12px 24px rgba(15, 23, 42, 0.46);
  font-weight: 600;
  border: 1px solid rgba(148, 163, 184, 0.6);
}

/* Fades */
.gs-tabs-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 48px;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* JS toggles this class on the pill wrapper */
.gs-platform-capabilities__tabs-wrap.gs-tabs--overflow .gs-tabs-fade {
  opacity: 1;
}

.gs-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-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%);
}

/* Arrows (outside the pill, same size/feel as before) */
.gs-tabs-arrow {
  width: 40px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(0, 38, 69, 0.65);
  color: rgba(255, 255, 255, 0.9);
  display: none; /* only on desktop + overflow */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s ease, background 0.2s ease;
  opacity: 0;
}

.gs-tabs-arrow span {
  font-size: 18px;
  line-height: 1;
  transform: translateY(-1px);
  margin-bottom: 2px;
}

/* Show arrows only on desktop, and only if overflow exists (JS toggles on .gs-tabs-shell) */
@media (min-width: 1024px) {
  .gs-tabs-shell.gs-tabs--overflow .gs-tabs-arrow {
    display: inline-flex;
  }

  .gs-tabs-shell.gs-tabs--overflow:hover .gs-tabs-arrow,
  .gs-tabs-shell.gs-tabs--overflow:focus-within .gs-tabs-arrow {
    opacity: 1;
  }

  .gs-tabs-arrow:hover {
    background: rgba(0, 38, 69, 0.85);
  }
}

/* Disabled arrows are hidden for cleanliness */
.gs-tabs-arrow[disabled] {
  opacity: 0 !important;
  cursor: default;
  pointer-events: none;
}

/* =========================
   Panels (your original)
   ========================= */

.gs-platform-capabilities__panels {
  border-radius: 1.5rem;
  background: radial-gradient(circle at top left, #013056, #002645);
  border: 1px solid rgba(148, 163, 184, 0.3);
  padding: 1.75rem 1.5rem;
}

.gs-panel {
  animation: gs-fade-in 0.2s ease-out;
}

@keyframes gs-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.gs-panel__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr);
  gap: 2.5rem;
  align-items: flex-start;
}

.gs-panel__visual {
  border-radius: 1.25rem;
}

.gs-panel__visual_inner {
  border: 1px dashed rgba(148, 163, 184, 0.5);
  border-radius: 6px;
  padding: 1.25rem;
  background: linear-gradient(145deg, rgba(0, 27, 49, 0.52), rgba(0, 159, 255, 0.22));
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.45);
  margin-bottom: 2rem;
}

.gs-panel__content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.gs-panel__eyebrow {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #009fff;
  margin-bottom: 0.5rem;
}

.gs-panel__description {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #e5e7eb;
  margin-bottom: 0.2rem;
}

.gs-panel__headline {
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
  color: #fff;
}

.gs-panel__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.3rem;
  font-size: 0.9rem;
  color: #e5e7eb;
}

.gs-panel__bullets li > i.fa-check {
  color: #009fff;
}

.gs-panel__bullets_main > li {
  background: #ffffff12;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 6px;
  border-left: 3px solid #009fff;
}

.fa-angle-double-right {
  color: #009fff;
}

.gs-panel__bullets > i {
  display: table-cell;
}

.fa-check {
  color: #009fff !important;
  padding-right: 0.2rem;
}

.gs-panel__bullets > span {
  display: table-cell;
  color: #fff;
}

.gs-panel__meta,
.gs-panel__compare {
  padding-top: 0.75rem;
}

.gs-panel__meta {
  background: #ffffff12;
  padding: 20px;
  border-radius: 6px;
  border-left: 3px solid #009fff;
  border-top: none;
}

.gs-panel__compare {
  border: 1px dashed rgba(148, 163, 184, 0.5);
  padding: 20px;
  border-radius: 6px;
}

.gs-panel__metric {
  font-weight: 700;
  margin: 0.15rem 0;
  color: #fff;
  font-size: 1.25rem;
}

.gs-panel__note {
  font-size: 0.85rem;
  color: #e5e7eb;
  margin: 0;
}

.gs-panel__compare h4,
.gs-panel__meta h4 {
  margin-bottom: 0.3rem;
  color: #a9becf;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03rem;
}

.gs-panel__compare p {
  font-size: 0.9rem;
  color: #e5e7eb;
  margin: 0;
}

.gs-panel__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

/* Responsive */
@media (max-width: 900px) {
  .gs-panel__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .gs-panel__visual {
    order: 1;
  }

  .gs-panel__content {
    order: 2;
  }
}

@media (max-width: 640px) {
  .gs-platform-capabilities {
    padding: 2.5rem 1.5rem;
  }

  .gs-tab {
    font-size: 0.8rem;
    background: rgba(148, 163, 184, 0.08);
  }

  .gs-platform-capabilities__panels {
    padding: 1.25rem;
  }

  /* no arrows on mobile/tablet */
  .gs-tabs-arrow {
    display: none !important;
  }
}