/* Feature showcase: a rail of tabs (icon, label, the customer's pain point)
   beside one panel at a time (screenshot, tags, heading, description, check
   list, benefit stat). Ported from NI26 styles/ni-components.css, section
   "1. Feature Showcase (nic-fs)". The screenshot frame is the shared .ni-media
   and the tags are the shared .ni-chip--tag (css/_components.css).

   Without JS the rail stays hidden (the hidden attribute in the markup) and
   every panel shows in order with its own label and pain point (__intro).
   module.js sets data-ni-ready on the root, shows the rail and hides the
   inactive panels with the hidden attribute. The active tab is the one with
   aria-selected="true"; no rule here sets display on a hidden element. */

.ni-feature-showcase {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}

/* No JS: the panels run full width, one after another. */
.ni-feature-showcase:not([data-ni-ready]) { grid-template-columns: minmax(0, 1fr); }

.ni-feature-showcase__rail[hidden],
.ni-feature-showcase__panel[hidden] { display: none; }

/* ---------- Tab rail ---------- */
.ni-feature-showcase__rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.ni-feature-showcase__tab {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  width: 100%;
  margin: 0;
  padding: var(--space-4) var(--space-5);
  font: inherit;
  color: inherit;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    border-color var(--duration-2) var(--ease-out),
    background var(--duration-2) var(--ease-out),
    box-shadow var(--duration-2) var(--ease-out);
}

.ni-feature-showcase__tab:hover {
  background: var(--surface-hover);
  border-color: var(--border-feature);
}

/* Active: blue edge on the left (an inset shadow, so inactive tabs keep an
   even 1px border), a lifted card and a filled icon. */
.ni-feature-showcase__tab[aria-selected="true"] {
  background: var(--surface);
  border-color: var(--border-feature);
  box-shadow: inset 3px 0 0 var(--ni-blue), var(--shadow-sm);
}

.ni-feature-showcase__tab:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.ni-feature-showcase__tab[aria-selected="true"]:focus-visible {
  box-shadow: inset 3px 0 0 var(--ni-blue), var(--shadow-focus);
}

.ni-feature-showcase__tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  flex: 0 0 var(--space-8);
  border-radius: var(--radius-md);
  background: var(--bg-feature);
  color: var(--ni-blue);
  transition:
    background var(--duration-2) var(--ease-out),
    color var(--duration-2) var(--ease-out);
}

.ni-feature-showcase__tab[aria-selected="true"] .ni-feature-showcase__tab-icon {
  background: var(--ni-blue);
  color: #fff;
}

.ni-feature-showcase__tab-text { flex: 1; min-width: 0; }

.ni-feature-showcase__tab-label {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  line-height: var(--lh-snug);
  color: var(--fg-strong);
}

.ni-feature-showcase__tab-pain {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  font-style: italic;
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

/* ---------- Panels ---------- */
.ni-feature-showcase__panels { min-width: 0; }

.ni-feature-showcase:not([data-ni-ready]) .ni-feature-showcase__panel + .ni-feature-showcase__panel { margin-top: var(--space-10); }

.ni-feature-showcase__panel {
  border-radius: var(--radius-xl);
  animation: ni-feature-showcase-in var(--duration-3) var(--ease-out);
}

.ni-feature-showcase__panel:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

@keyframes ni-feature-showcase-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* Label and pain point above a panel: shown without JS, and on phones for
   the pain point only (see the 560px block). */
.ni-feature-showcase__intro { margin: 0 0 var(--space-4); }
.ni-feature-showcase[data-ni-ready] .ni-feature-showcase__intro { display: none; }

.ni-feature-showcase__intro-label {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  line-height: var(--lh-snug);
  color: var(--fg-strong);
}

.ni-feature-showcase__intro-pain {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  font-style: italic;
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

.ni-feature-showcase__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
  padding: var(--space-8);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

/* No screenshot on the live page: the details run full width. */
.ni-feature-showcase__content--no-media { grid-template-columns: minmax(0, 1fr); }

.ni-feature-showcase__media,
.ni-feature-showcase__details { min-width: 0; }

.ni-feature-showcase__media { margin: 0; }

/* Editor-only stand-in for a missing screenshot (NI26 .nic-fs__shot). */
.ni-feature-showcase__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  aspect-ratio: 4 / 3;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--bg-deep);
  color: var(--fg-on-dark-muted);
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  text-align: center;
}

.ni-feature-showcase__placeholder span { max-width: 34ch; }

/* ---------- Details ---------- */
/* Two classes, so the margin wins over the shared .ni-chips reset whichever
   stylesheet loads first. */
.ni-feature-showcase .ni-feature-showcase__tags { margin-bottom: var(--space-4); }

.ni-feature-showcase .ni-feature-showcase__heading {
  margin: 0 0 var(--space-3);
  color: var(--fg-strong);
}

.ni-feature-showcase__desc {
  max-width: 64ch;
  margin: 0 0 var(--space-5);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}

.ni-feature-showcase__details > :last-child { margin-bottom: 0; }

.ni-feature-showcase__checks {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
}

.ni-feature-showcase__checks li {
  display: flex;
  gap: var(--space-2-5);
  align-items: flex-start;
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--fg);
}

.ni-feature-showcase__checks .ni-icon {
  width: 16px;
  height: 16px;
  margin-top: var(--space-0-5);
  color: var(--ni-blue);
}

.ni-feature-showcase__checks span { flex: 1; min-width: 0; }

.ni-feature-showcase__benefit {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  padding: var(--space-4) var(--space-5);
  background: var(--bg-feature);
  border: 1px solid var(--border-feature);
  border-radius: var(--radius-lg);
}

.ni-feature-showcase__benefit-stat {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-3xl);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--ni-blue);
}

.ni-feature-showcase__benefit-label {
  flex: 1 1 12ch;
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  color: var(--fg-muted);
}

/* ---------- Light blue band ---------- */
.ni-main .dnd-section:has([data-ni-bg="feature"]) .ni-feature-showcase__tab:not([aria-selected="true"]) { border-color: var(--border-feature); }

/* ---------- Navy band ----------
   Cards turn into light fills on the band, as NI Card Grid does. The class
   selectors here outrank the band's own heading and paragraph colors. */
.ni-main .dnd-section:has([data-ni-bg="dark"]) .ni-feature-showcase__tab,
.ni-main .dnd-section:has([data-ni-bg="dark"]) .ni-feature-showcase__content {
  background: var(--on-dark-fill);
  border-color: var(--on-dark-fill-strong);
  box-shadow: none;
}

.ni-main .dnd-section:has([data-ni-bg="dark"]) .ni-feature-showcase__tab:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.32);
}

.ni-main .dnd-section:has([data-ni-bg="dark"]) .ni-feature-showcase__tab[aria-selected="true"] {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow: inset 3px 0 0 var(--ni-blue-300);
}

.ni-main .dnd-section:has([data-ni-bg="dark"]) .ni-feature-showcase__tab:focus-visible,
.ni-main .dnd-section:has([data-ni-bg="dark"]) .ni-feature-showcase__panel:focus-visible { box-shadow: 0 0 0 3px var(--ni-blue-300); }

.ni-main .dnd-section:has([data-ni-bg="dark"]) .ni-feature-showcase__tab[aria-selected="true"]:focus-visible { box-shadow: inset 3px 0 0 var(--ni-blue-300), 0 0 0 3px var(--ni-blue-300); }

.ni-main .dnd-section:has([data-ni-bg="dark"]) .ni-feature-showcase__tab-icon {
  background: rgba(126, 180, 228, 0.14);
  color: var(--ni-blue-300);
}

.ni-main .dnd-section:has([data-ni-bg="dark"]) .ni-feature-showcase__tab[aria-selected="true"] .ni-feature-showcase__tab-icon {
  background: var(--ni-blue-300);
  color: var(--ni-blue-900);
}

.ni-main .dnd-section:has([data-ni-bg="dark"]) .ni-feature-showcase__tab-label,
.ni-main .dnd-section:has([data-ni-bg="dark"]) .ni-feature-showcase__intro-label,
.ni-main .dnd-section:has([data-ni-bg="dark"]) .ni-feature-showcase .ni-feature-showcase__heading { color: #fff; }

.ni-main .dnd-section:has([data-ni-bg="dark"]) .ni-feature-showcase__tab-pain,
.ni-main .dnd-section:has([data-ni-bg="dark"]) .ni-feature-showcase__intro-pain,
.ni-main .dnd-section:has([data-ni-bg="dark"]) .ni-feature-showcase__desc,
.ni-main .dnd-section:has([data-ni-bg="dark"]) .ni-feature-showcase__benefit-label { color: var(--fg-on-dark-muted); }

.ni-main .dnd-section:has([data-ni-bg="dark"]) .ni-feature-showcase__checks li { color: var(--fg-on-dark); }
.ni-main .dnd-section:has([data-ni-bg="dark"]) .ni-feature-showcase__checks .ni-icon { color: var(--ni-blue-300); }

.ni-main .dnd-section:has([data-ni-bg="dark"]) .ni-feature-showcase__tags .ni-chip--tag {
  background: rgba(126, 180, 228, 0.14);
  border-color: rgba(126, 180, 228, 0.32);
  color: var(--ni-blue-100);
}

.ni-main .dnd-section:has([data-ni-bg="dark"]) .ni-feature-showcase__benefit {
  background: var(--on-dark-fill);
  border-color: var(--on-dark-fill-strong);
}

/* Navy: yellow figures, as NI Stats does on the band. */
.ni-main .dnd-section:has([data-ni-bg="dark"]) .ni-feature-showcase__benefit-stat { color: var(--ni-yellow); }

/* Browsers without :has() paint the band on the module itself (_layout.css);
   these follow it. Kept apart because one unknown selector drops a whole rule. */
@supports not selector(:has(a)) {
  .ni-feature-showcase[data-ni-bg="dark"] .ni-feature-showcase__tab,
  .ni-feature-showcase[data-ni-bg="dark"] .ni-feature-showcase__content { background: var(--on-dark-fill); border-color: var(--on-dark-fill-strong); box-shadow: none; }
  .ni-feature-showcase[data-ni-bg="dark"] .ni-feature-showcase__tab[aria-selected="true"] { background: rgba(255, 255, 255, 0.12); box-shadow: inset 3px 0 0 var(--ni-blue-300); }
  .ni-feature-showcase[data-ni-bg="dark"] .ni-feature-showcase__tab-icon { background: rgba(126, 180, 228, 0.14); color: var(--ni-blue-300); }
  .ni-feature-showcase[data-ni-bg="dark"] .ni-feature-showcase__tab[aria-selected="true"] .ni-feature-showcase__tab-icon { background: var(--ni-blue-300); color: var(--ni-blue-900); }
  .ni-feature-showcase[data-ni-bg="dark"] .ni-feature-showcase__tab-label,
  .ni-feature-showcase[data-ni-bg="dark"] .ni-feature-showcase__intro-label,
  .ni-feature-showcase[data-ni-bg="dark"] .ni-feature-showcase__heading { color: #fff; }
  .ni-feature-showcase[data-ni-bg="dark"] .ni-feature-showcase__tab-pain,
  .ni-feature-showcase[data-ni-bg="dark"] .ni-feature-showcase__intro-pain,
  .ni-feature-showcase[data-ni-bg="dark"] .ni-feature-showcase__desc,
  .ni-feature-showcase[data-ni-bg="dark"] .ni-feature-showcase__benefit-label { color: var(--fg-on-dark-muted); }
  .ni-feature-showcase[data-ni-bg="dark"] .ni-feature-showcase__checks li { color: var(--fg-on-dark); }
  .ni-feature-showcase[data-ni-bg="dark"] .ni-feature-showcase__checks .ni-icon { color: var(--ni-blue-300); }
  .ni-feature-showcase[data-ni-bg="dark"] .ni-feature-showcase__benefit { background: var(--on-dark-fill); border-color: var(--on-dark-fill-strong); }
  .ni-feature-showcase[data-ni-bg="dark"] .ni-feature-showcase__benefit-stat { color: var(--ni-yellow); }
}

/* ---------- Breakpoints ---------- */

/* Rail beside a narrower panel: stack the screenshot over the details so
   neither column drops below a readable width. */
@media (max-width: 1100px) {
  .ni-feature-showcase[data-ni-ready] .ni-feature-showcase__content { grid-template-columns: minmax(0, 1fr); }
}

/* The rail becomes a wrapping row above the panel. */
@media (max-width: 960px) {
  .ni-feature-showcase { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }

  .ni-feature-showcase__rail { flex-flow: row wrap; }
  .ni-feature-showcase__tab { flex: 1 1 220px; width: auto; }

  /* Back to two columns: the panel has the full width again. */
  .ni-feature-showcase[data-ni-ready] .ni-feature-showcase__content { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ni-feature-showcase[data-ni-ready] .ni-feature-showcase__content--no-media { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .ni-feature-showcase .ni-feature-showcase__content,
  .ni-feature-showcase[data-ni-ready] .ni-feature-showcase__content {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    padding: var(--space-6);
  }
}

/* Phones: compact tabs in one column (icon and label only), so the panel
   starts high on the screen. The active tab's pain point moves to the top of
   its panel. */
@media (max-width: 560px) {
  .ni-feature-showcase__rail { flex-direction: column; gap: var(--space-2); }

  .ni-feature-showcase__tab {
    flex: none;
    width: 100%;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-2-5) var(--space-3-5);
  }

  .ni-feature-showcase__tab-icon {
    width: var(--space-7);
    height: var(--space-7);
    flex-basis: var(--space-7);
  }

  .ni-feature-showcase__tab-icon .ni-icon { width: 18px; height: 18px; }
  .ni-feature-showcase__tab-label { font-size: 15.5px; }
  .ni-feature-showcase__tab-pain { display: none; }

  .ni-feature-showcase[data-ni-ready] .ni-feature-showcase__intro { display: block; margin-bottom: var(--space-3); }
  .ni-feature-showcase[data-ni-ready] .ni-feature-showcase__intro-label { display: none; }

  .ni-feature-showcase[data-ni-ready] .ni-feature-showcase__intro-pain {
    margin: 0;
    padding-left: var(--space-3);
    border-left: 2px solid var(--border-feature);
  }

  .ni-main .dnd-section:has([data-ni-bg="dark"]) .ni-feature-showcase[data-ni-ready] .ni-feature-showcase__intro-pain { border-left-color: var(--on-dark-fill-strong); }

  .ni-feature-showcase .ni-feature-showcase__content,
  .ni-feature-showcase[data-ni-ready] .ni-feature-showcase__content { padding: var(--space-5); }

  .ni-feature-showcase__benefit-stat { font-size: var(--text-2xl); }
}

@media (prefers-reduced-motion: reduce) {
  .ni-feature-showcase__panel { animation: none; }

  .ni-feature-showcase__tab,
  .ni-feature-showcase__tab-icon { transition: none; }
}

/* Screenshot position "above": the screenshot takes the full panel width,
   with the details under it, at every size. Placed last and one class
   stronger than the breakpoint rules so it always wins. */
.ni-feature-showcase.ni-feature-showcase--above .ni-feature-showcase__content,
.ni-feature-showcase.ni-feature-showcase--above[data-ni-ready] .ni-feature-showcase__content {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}