/*
 * Primer 2026 design tokens for code components.
 *
 * Code components render inside a shadow root. CSS custom properties inherit
 * through it, so each token reads the matching Webflow variable from the
 * "Primer 2026" collection and falls back to the same literal value. That way
 * a component looks right both on the Webflow page and in the local playground.
 *
 * Fluid type and spacing are literal clamp() values: the Webflow API rejected
 * clamp() for size variables, so the p26-* classes in Webflow use these same
 * values directly. Keep both in sync.
 */
:host,
.p26-root {
  /* Color: aliases of existing brand variables */
  --p26-text-strong: var(--_primer-2026---color--text--strong, #20292c);
  --p26-text-default: var(--_primer-2026---color--text--default, #475a61);
  --p26-text-inverse: var(--_primer-2026---color--text--inverse, #ffffff);
  --p26-surface-base: var(--_primer-2026---color--surface--base, #ffffff);
  --p26-surface-subtle: var(--_primer-2026---color--surface--subtle, #f3f5f6);
  --p26-surface-hover: var(--_primer-2026---color--surface--hover, #f7f9fa);
  --p26-surface-inverse: var(--_primer-2026---color--surface--inverse, #262155);
  --p26-border: var(--_primer-2026---color--border--default, rgba(138, 159, 169, 0.32));
  --p26-accent: var(--_primer-2026---color--accent--primary, #6e37ff);
  --p26-accent-strong: var(--_primer-2026---color--accent--strong, #3c327b);
  --p26-accent-soft: var(--_primer-2026---color--accent--soft, #a8a6ff);
  --p26-accent-blue: var(--_primer-2026---color--accent--blue, #3366ff);
  --p26-highlight: var(--_primer-2026---color--highlight, #ffd966);
  --p26-focus: var(--_primer-2026---color--focus-ring, #0b89fd);

  /* Type */
  --p26-font-display: var(--_primer-2026---font--display, EightiesComeback), Georgia, serif;
  --p26-font-body: var(--_primer-2026---font--body, Rubik), Arial, sans-serif;
  --p26-type-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --p26-type-body-lg: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --p26-type-body: var(--_primer-2026---type--body, 1rem);
  --p26-type-small: var(--_primer-2026---type--small, 0.875rem);

  /* Space and shape */
  --p26-space-2xs: var(--_primer-2026---space--2xs, 0.25rem);
  --p26-space-xs: var(--_primer-2026---space--xs, 0.5rem);
  --p26-space-sm: var(--_primer-2026---space--sm, 1rem);
  --p26-space-md: var(--_primer-2026---space--md, 1.5rem);
  --p26-space-lg: clamp(2rem, 1.6rem + 1.6vw, 3rem);
  --p26-radius-sm: var(--_primer-2026---radius--sm, 8px);
  --p26-radius-md: var(--_primer-2026---radius--md, 12px);
  --p26-radius-lg: var(--_primer-2026---radius--lg, 20px);

  /* Motion */
  --p26-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --p26-duration-fast: 160ms;
  --p26-duration-base: 320ms;
}

/*
 * Section 7A customer stories carousel. Cards share one grid cell (height =
 * tallest card, so the section never jumps) and are offset with transforms
 * from --o (position relative to the active card).
 */
:host { display: block; }

.p26-stories {
  --cs-900: #20292c;
  --cs-700: #475a61;
  --cs-300: #8a9fa9;
  --cs-line: rgba(138, 159, 169, 0.24);
  --cs-card-bg: #f7f7f5;
  --cs-w: min(820px, calc(100vw - 9rem));
  --cs-gap: 1.5rem;
  color: var(--cs-900);
  font-family: Rubik, Arial, sans-serif;
  text-align: left;
}

.p26-stories *, .p26-stories *::before, .p26-stories *::after { box-sizing: border-box; }
.p26-stories :where(p, dl, dd, blockquote) { margin: 0; }

.p26-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.cs-viewport {
  overflow: clip;
  overflow-clip-margin: 2rem;
  touch-action: pan-y;
  user-select: none;
  cursor: grab;
}

.cs-viewport.is-dragging { cursor: grabbing; }

.cs-track {
  display: grid;
  justify-content: center;
  padding: 0.5rem 0 1.5rem;
}

.cs-card {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: var(--cs-w);
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  border: 1px solid var(--cs-line);
  border-radius: 28px;
  background: var(--cs-card-bg);
  box-shadow: 0 1px 2px rgba(32, 41, 44, 0.04), 0 18px 40px -28px rgba(32, 41, 44, 0.18);
  transform: translateX(calc(var(--o) * (var(--cs-w) + var(--cs-gap)) + var(--dx, 0px))) scale(0.94);
  opacity: 0.5;
  cursor: pointer;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
}

.cs-card.is-active { transform: translateX(var(--dx, 0px)); opacity: 1; cursor: auto; }
.cs-card[data-hidden] { opacity: 0; pointer-events: none; }
.cs-viewport.is-dragging .cs-card { transition: none; }

.cs-card__top { display: flex; align-items: center; gap: 0.6rem; min-height: 40px; }
.cs-logo { display: block; height: 28px; width: auto; max-width: 200px; object-fit: contain; object-position: left center; }
.cs-logo-name { color: var(--cs-900); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }

.cs-card__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 13.5rem;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: start;
}

.cs-summary { color: var(--cs-700); font-size: 0.9375rem; line-height: 1.5; margin-bottom: 1rem; }

.cs-quote p {
  color: var(--cs-900);
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem);
  font-weight: 500;
  line-height: 1.38;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.cs-metrics { display: flex; flex-direction: column; gap: 1.25rem; }
.cs-metric { padding-top: 1rem; border-top: 1px solid var(--cs-line); }
.cs-metric:first-child { padding-top: 0; border-top: 0; }
.cs-metric dt {
  color: var(--cs-900);
  font-family: EightiesComeback, Georgia, serif;
  font-size: clamp(1.75rem, 1.4rem + 1vw, 2.375rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.cs-metric dd { margin-top: 0.3rem; color: var(--cs-700); font-size: 0.875rem; line-height: 1.4; }

.cs-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; }
.cs-person { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.cs-photo { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #e9ecee; }
.cs-photo--empty { display: grid; place-items: center; color: var(--cs-700); font-weight: 500; }
.cs-person p { display: flex; flex-direction: column; min-width: 0; }
.cs-name { font-size: 0.9375rem; font-weight: 500; line-height: 1.35; }
.cs-role { color: var(--cs-700); font-size: 0.875rem; line-height: 1.4; }

.cs-link {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1.1rem;
  border-radius: 10px;
  background: var(--cs-900);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.cs-link:hover { background: #3c327b; }
.cs-link:focus-visible, .cs-btn:focus-visible { outline: 3px solid #0b89fd; outline-offset: 3px; }

.cs-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 0.5rem; }
.cs-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--cs-line);
  border-radius: 12px;
  background: #fff;
  color: var(--cs-900);
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}
.cs-btn:hover:not(:disabled) { background: #f3f5f6; }
.cs-btn:disabled { opacity: 0.35; cursor: default; }
.cs-count { min-width: 3.5rem; color: var(--cs-700); font-size: 0.875rem; text-align: center; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .cs-card { transition: none; }
}

/* Tablet: narrower cards, metrics move below the quote in a row. */
@media (max-width: 991px) {
  .p26-stories { --cs-w: min(680px, calc(100vw - 6rem)); --cs-gap: 1rem; }
  .cs-card__main { grid-template-columns: 1fr; }
  .cs-metrics { flex-direction: row; flex-wrap: wrap; gap: 1rem 1.5rem; }
  .cs-metric { flex: 1 1 9rem; padding-top: 0; border-top: 0; }
}

/* Phone: one card, vertical order logo → quote → metrics → person → link.
   Each card takes its own height (only the active card is in flow), so
   short stories don't carry the tallest story's empty space. */
@media (max-width: 599px) {
  .p26-stories { --cs-w: calc(100vw - 2.5rem); --cs-gap: 0.75rem; }
  .cs-track { position: relative; align-items: start; }
  .cs-card { align-self: start; gap: 1.25rem; padding: 1.5rem 1.25rem; border-radius: 22px; }
  .cs-card:not(.is-active) { position: absolute; top: 0.5rem; left: 50%; margin-left: calc(var(--cs-w) / -2); }
  .cs-card__top { min-height: 32px; }
  .cs-logo { max-width: 160px; transform: scale(0.85); transform-origin: left center; }
  .cs-logo-name { font-size: 1.25rem; }
  .cs-summary { display: none; }
  .cs-quote p { font-size: 1.125rem; line-height: 1.45; }
  .cs-metrics { flex-direction: column; gap: 0; }
  .cs-metric { display: block; flex: none; padding: 0.75rem 0; border-top: 1px solid var(--cs-line); }
  .cs-metric:first-child { padding-top: 0.75rem; border-top: 1px solid var(--cs-line); }
  .cs-metric dt { font-size: 1.625rem; }
  .cs-metric dd { margin-top: 0.15rem; font-size: 0.875rem; }
  .cs-card__foot { flex-direction: column; align-items: stretch; gap: 1rem; margin-top: 0; }
  .cs-photo { width: 40px; height: 40px; }
  .cs-link { justify-content: center; }
}