/* ==========================================================================
   09 / Industries (structured, typography led)
   Pitch black. Big industry names in ruled rows on the 12 column grid.
   Hover: the name slides and takes the row's brand colour.
   ========================================================================== */

.ind {
  --ind-line: var(--color-gray-900);

  background: var(--color-pitch-black);
  color: var(--color-white);
}

/* ---- Head ---- */
.ind__head {
  align-items: end;
  row-gap: var(--space-5);
}

.ind__eyebrow {
  grid-column: 1 / -1;
  color: var(--color-gray-500);
}

.ind__title {
  grid-column: 1 / span 7;
  max-width: 14ch;
}

.ind__intro {
  grid-column: 9 / span 4;
  color: var(--color-gray-300);
}

.ind__mark {
  background-image: linear-gradient(var(--color-brand-red), var(--color-brand-red));
  background-repeat: no-repeat;
  background-position: 0 90%;
  background-size: 100% 0.22em;
  transition: background-size 900ms var(--ease-out) 200ms;
}

.js .ind:not(.is-inview) .ind__mark {
  background-size: 0% 0.22em;
}

/* ---- Rows ---- */
.ind__list {
  margin-top: var(--space-11);
  border-top: 1px solid var(--ind-line);
}

.ind-row--blue   { --row-color: var(--color-brand-blue); }
.ind-row--orange { --row-color: var(--color-brand-orange); }
.ind-row--red    { --row-color: var(--color-brand-red); }

.ind-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  align-items: baseline;
  padding-block: var(--space-7);
  border-bottom: 1px solid var(--ind-line);
}

.ind-row__index {
  grid-column: 1 / span 1;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--color-gray-500);
  font-variant-numeric: tabular-nums;
  transition: color var(--duration-base) ease;
}

.ind-row__name {
  grid-column: 2 / span 6;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-h2);
  letter-spacing: -0.02em;
  transition:
    color var(--duration-base) ease,
    transform 500ms var(--ease-out);
}

.ind-row__text {
  grid-column: 9 / span 4;
  color: var(--color-gray-500);
  transition: color var(--duration-base) ease;
}

.ind-row:hover .ind-row__index,
.ind-row:hover .ind-row__name {
  color: var(--row-color);
}

.ind-row:hover .ind-row__name {
  transform: translateX(var(--space-4));
}

.ind-row:hover .ind-row__text {
  color: var(--color-white);
}

/* ---- Reveal ---- */
.js .ind .ind-row {
  transition:
    opacity 600ms var(--ease-out),
    transform 600ms var(--ease-out);
  transition-delay: calc(var(--i) * 80ms + 150ms);
}

.js .ind:not(.is-inview) .ind-row {
  opacity: 0;
  transform: translateY(16px);
}

/* ---- Tablet ---- */
@media (max-width: 1024px) {
  .ind__title,
  .ind__intro {
    grid-column: 1 / -1;
  }

  .ind__list {
    margin-top: var(--space-10);
  }

  .ind-row__name {
    grid-column: 2 / span 7;
  }

  .ind-row__text {
    grid-column: 2 / -1;
    margin-top: var(--space-2);
  }
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  .ind__list {
    margin-top: var(--space-8);
  }

  .ind-row {
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: var(--space-3);
    padding-block: var(--space-5);
  }

  .ind-row__index {
    grid-column: 1;
  }

  .ind-row__name,
  .ind-row__text {
    grid-column: 2;
  }

  .ind-row__name {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
  }
}