/* ==========================================================================
   COMPONENT: Tabs — "What We Do" programme switcher with cross-fading imagery
   Full tablist ARIA with roving tabindex, handled by tabs.js.
   No-JS: all panels are visible and the tablist reads as an index.
   ========================================================================== */

.c-tabs { display: grid; gap: var(--sp-6); }

.c-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  position: relative;
  border-block-end: 1px solid var(--c-line);
  padding-block-end: var(--sp-3);
}

.c-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-2) var(--sp-4);
  font-family: var(--ff-utility);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  color: var(--c-text-muted);
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  white-space: nowrap;
  transition: color var(--d-fast) var(--e-out), background-color var(--d-fast) var(--e-out);
}

.c-tabs__tab:hover { color: var(--c-ink); background-color: var(--surface-sunken); }

.c-tabs__tab[aria-selected="true"] {
  color: var(--c-text-inv);
  background-color: var(--c-ink);
}

/* --------------------------------------------------------------------------
   PANELS — cross-fade. Panels are stacked in a grid cell so the container
   height is the tallest panel and switching causes zero layout shift.
   -------------------------------------------------------------------------- */

.c-tabs__panels { display: grid; }

.c-tabs__panel {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--d-base) var(--e-out), visibility 0s linear var(--d-base);
  pointer-events: none;
}

.c-tabs__panel[data-active="true"] {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
  pointer-events: auto;
}

/* Without JS every panel is simply shown, stacked normally. */
.no-js .c-tabs__panels { display: grid; gap: var(--sp-7); }
.no-js .c-tabs__panel {
  grid-area: auto;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.no-js .c-tabs__list { display: none; }

.c-tabs__panel-inner {
  display: grid;
  gap: var(--gap-col) var(--sp-7);
  align-items: center;
}

@media (min-width: 900px) {
  .c-tabs__panel-inner { grid-template-columns: 1.1fr 1fr; }
}

.c-tabs__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  aspect-ratio: 16 / 9;
  background-color: var(--surface-sunken);
}

.c-tabs__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform var(--d-slow) var(--e-out);
}

.c-tabs__panel[data-active="true"] .c-tabs__media img { transform: scale(1); }

.c-tabs__content { display: grid; gap: var(--sp-4); align-content: start; }

.c-tabs__stat {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding-block-start: var(--sp-3);
  border-block-start: 1px solid var(--c-line);
}

.c-tabs__stat-value {
  font-family: var(--ff-display);
  font-size: var(--fs-2xl);
  font-variant-numeric: tabular-nums;
  color: var(--c-verdigris-ink);
}

.c-tabs__stat-label {
  font-family: var(--ff-utility);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-text-muted);
}