/* Retail Execution — Section 4: sticky same-screen card stack */

.retail-command {
  --rc-navy: #071a33;
  --rc-gold: #f2a11b;
  --rc-bg: #f6f8fa;
  --rc-muted: #5b6b7c;
  --rc-header: 72px;
  --rc-intro-h: 148px;
  --rc-stack-gap: 40px;
  --rc-card-top: calc(var(--rc-header) + var(--rc-intro-h));
  position: relative;
  background: var(--rc-bg);
  color: var(--rc-navy);
  overflow: visible;
}

.retail-command__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 30% at 50% 6%, rgba(242, 161, 27, 0.045), transparent 70%),
    var(--rc-bg);
}

.retail-command__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(7, 26, 51, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7, 26, 51, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
}

.retail-command__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: 24px;
}

/* Title stays on screen; opaque so unstuck cards never bleed through */
.retail-command__intro {
  position: sticky;
  top: var(--rc-header);
  z-index: 40;
  margin: 0 auto;
  padding: 20px 12px 16px;
  text-align: center;
  background: var(--rc-bg);
  box-shadow: 0 18px 24px -12px var(--rc-bg);
}

.retail-command__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rc-muted);
}

.retail-command__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rc-gold);
  box-shadow: 0 0 0 4px rgba(242, 161, 27, 0.16);
}

.retail-command__title {
  margin: 0 0 10px;
  font-family: var(--font-display, "Bricolage Grotesque", sans-serif);
  font-size: clamp(1.7rem, 3vw, 2.45rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.12;
}

.retail-command__lede {
  margin: 0 auto;
  max-width: 52ch;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--rc-muted);
}

.retail-command__deck {
  position: relative;
  width: min(92%, 1400px);
  margin: 8px auto 0;
  padding-bottom: 4vh;
}

.rc-card {
  position: sticky;
  top: calc(var(--rc-card-top) + (var(--rc-i, 0) * var(--rc-stack-gap)));
  box-sizing: border-box;
  min-height: clamp(400px, 54vh, 520px);
  /* Scroll runway between cards only — not after the last one */
  margin: 0 0 38vh;
  padding: 22px clamp(28px, 4.5vw, 64px) clamp(28px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(7, 26, 51, 0.1);
  box-shadow: 0 16px 40px rgba(7, 26, 51, 0.08);
  transition: box-shadow 0.35s ease;
  overflow: hidden;
}

.rc-card:last-child {
  /* Short exit so the stack can settle, then the next section starts */
  margin-bottom: 10vh;
}

.rc-card.is-active {
  box-shadow:
    0 22px 48px rgba(7, 26, 51, 0.12),
    0 0 0 1px rgba(242, 161, 27, 0.1);
}

/*
 * Stacked (covered) cards: keep only the header strip visible.
 * Prevents two full cards looking “merged” while the next one rises.
 */
.rc-card.is-stacked .rc-card__chips,
.rc-card.is-stacked .rc-card__body {
  opacity: 0;
  visibility: hidden;
}

.rc-card__eyebrow {
  margin: 0 0 6px;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rc-muted);
  line-height: 1.2;
}

.rc-card__heading {
  margin: 0 0 16px;
  font-family: var(--font-display, "Bricolage Grotesque", sans-serif);
  font-size: clamp(1.25rem, 2.2vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.15;
  color: var(--rc-navy);
}

.rc-card.is-stacked .rc-card__heading {
  margin-bottom: 0;
}

.rc-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.rc-card__chips li {
  padding: 8px 14px;
  border-radius: 999px;
  background: #f3f5f8;
  border: 1px solid rgba(7, 26, 51, 0.08);
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--rc-navy);
}

.rc-card__body {
  display: grid;
  gap: 14px;
  width: 100%;
}

.rc-card__body p {
  margin: 0;
  width: 100%;
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  line-height: 1.65;
  color: var(--rc-muted);
}

@media (prefers-reduced-motion: reduce) {
  .rc-card {
    position: relative;
    top: auto !important;
    margin-bottom: 16px;
    overflow: visible;
  }

  .rc-card.is-stacked .rc-card__chips,
  .rc-card.is-stacked .rc-card__body {
    opacity: 1;
    visibility: visible;
  }

  .retail-command__intro {
    position: relative;
    top: auto;
    box-shadow: none;
  }

  .retail-command__deck {
    padding-bottom: 0;
  }
}