/* ============================================
   Card components — pillar + feature.

   Both share the boxed-icon recipe (44×44 rounded square w/
   light-tint bg, 20×20 vivid icon). Pillars use coral; features
   use blue. They diverge on the card chrome + hover behavior:

   .gs-wgs-pillar (coral, brand-editorial):
     - Static 2px coral border, coral-tinted soft shadow
     - Hover: lift only, no color change
       (coral is brand-editorial, never an interactive accent)

   .gs-wgs-feature (blue, interactive accent):
     - 1.5px grey border by default → blue on hover
     - Hover: lift + inset box-shadow trick (fakes thicker border
       without reflowing the box)
     - 3-up grid by default; `.gs-wgs-features--4up` flips to 2×2

   Both stack on tablet/mobile (≤900px), capped at 480px centered.
   ============================================ */

/* ─── Pillar cards (coral) ────────────────── */

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

.gs-wgs-pillar {
  background: var(--color-bg);
  border: 2px solid var(--color-brand-accent);
  border-radius: 24px;
  padding: 2.75rem 2rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 18px 40px rgba(246, 89, 84, 0.1);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.gs-wgs-pillar:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(246, 89, 84, 0.16);
}

.gs-wgs-pillar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: #ffe9e7;       /* light coral */
  border-radius: 10px;
  margin: 0 0 1.25rem;
  color: var(--color-brand-accent);
  line-height: 1;
}

.gs-wgs-pillar__icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

.gs-wgs-pillar__title {
  font-size: var(--text-h5);
  color: var(--color-fg);
  margin: 0 0 0.75rem;
  text-wrap: balance;
}

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

/* ─── Feature cards (blue hover) ──────────── */

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

/* 4-up variant — used on /giant-swarm-advantage/ §4 (Edge).
   Renders as a 2×2 grid (not 1×4). Icon styling is the same;
   only the grid layout changes. */
.gs-wgs-features--4up {
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.gs-wgs-feature {
  background: var(--color-bg);
  border: 1.5px solid #e3e6ec;
  border-radius: 16px;
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

.gs-wgs-feature:hover {
  border-color: var(--color-accent);
  transform: translateY(-6px);
  box-shadow:
    inset 0 0 0 0.5px var(--color-accent),
    0 12px 24px rgba(0, 38, 69, 0.1);
}

.gs-wgs-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: #e8f4ff;       /* light blue */
  border-radius: 10px;
  margin: 0 0 1.25rem;
  color: var(--color-accent);
  line-height: 1;
}

.gs-wgs-feature__icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

.gs-wgs-feature__title {
  font-size: var(--text-h5);
  color: var(--color-fg);
  margin: 0 0 0.75rem;
  text-wrap: balance;
}

/* Larger-title variant — bumps the title a step up the scale
   (h5 -> h4). Opt-in modifier on .gs-wgs-features so the two other
   live pages using plain .gs-wgs-feature (giant-swarm-advantage,
   smarter-platform-engineering) keep their current size. */
.gs-wgs-features--lg-title .gs-wgs-feature__title {
  font-size: var(--text-h4);
}

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

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

@media (max-width: 900px) {
  .gs-wgs-pillars {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    justify-items: center;
  }
  .gs-wgs-pillar {
    max-width: 480px;
    width: 100%;
  }

  .gs-wgs-features {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    justify-items: center;
  }
  .gs-wgs-feature {
    max-width: 480px;
    width: 100%;
  }
}

@media (max-width: 767px) {
  /* 4-up features collapse to single col same as the 3-up. */
  .gs-wgs-features--4up {
    grid-template-columns: 1fr;
  }
}