/* ==========================================================================
   VDPL Next - Technology
   Eight groups on one page. The layout's whole job is to stop that reading as
   one long list: each group is a two-column band with its own heading column,
   every other one tinted, and a jump list above them.
   ========================================================================== */

.t-jump { padding-bottom: var(--s-4); }

.t-group {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--s-6) var(--s-12);
  align-items: start;
  padding: var(--s-8) var(--s-6);
  border-radius: var(--r-lg);
  scroll-margin-top: calc(var(--s-20) + var(--s-6));
}
@media (max-width: 900px) {
  .t-group { grid-template-columns: 1fr; gap: var(--s-4); padding: var(--s-6) var(--s-4); }
}

/* Tint rather than a rule between groups. A border makes eight groups look
   like a table; a tint makes them look like eight things. */
.t-group--alt { background: var(--c-surface-2); }

.t-group__head { display: flex; flex-direction: column; gap: var(--s-2); }
.t-group__head p { max-width: 34ch; }

.t-group__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  background: var(--c-accent-wash);
  color: var(--c-accent-text);
}

.t-group__count { margin-top: auto; padding-top: var(--s-2); }

.t-group__items { align-content: flex-start; }

/* ---- Hero visual ---------------------------------------------------------
   Built from the page's own data rather than from an uploaded image. The
   chips are marked aria-hidden: every one of them is repeated verbatim in the
   groups below, and a screen reader should not have to hear the stack twice
   before reaching it. */

.t-hero {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  padding: var(--s-8);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  box-shadow: var(--e-md);
}

.t-hero__counts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--c-line-soft);
}
/* No size override — the stat figure comes from the shared component so it
   matches the same figure on the home page and the capability pages. */

.t-hero__chips { gap: var(--s-2); }
.t-hero__chips .c-pill { box-shadow: none; background: var(--c-surface-2); }

/* The last row fades rather than stopping flat, which reads as a sample of a
   longer list instead of the whole of a short one. */
.t-hero__chips {
  max-height: 132px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}

/* ---- Technology anchors --------------------------------------------------
   The 85 retired /technologies/{slug}/ pages redirect here with the
   technology as a fragment. Landing halfway down a list of 53 chips with no
   indication of which one you were sent to is disorienting, so the target
   chip announces itself for a moment. */

.t-group__items .c-pill {
  scroll-margin-top: calc(var(--s-20) + var(--s-10));
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.t-group__items .c-pill:target {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-accent-ink);
  animation: t-landed 2.4s var(--ease) 1;
}

@keyframes t-landed {
  0%, 60% { box-shadow: 0 0 0 6px var(--c-accent-ring); }
  100%    { box-shadow: 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .t-group__items .c-pill { transition: none; }
  .t-group__items .c-pill:target { animation: none; }
}