/*
  Industries page. Scoped to body.page-industries.
  Uses the shared base (pd-base.css): hero, intro split, dark card band, CTA band.
  This file only adds what is specific to this page.
*/

.page-industries {
  --pd-hero-min: clamp(520px, 46vw, 640px);
  --pd-tint: .5;
  --pd-tint-video: .92;
}

.page-industries main > .hero h1 { max-width: 800px; }

/* Jump links to the six industries (hero) */
.page-industries .industry-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 0;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid #7fe3ee4d;
}

.page-industries .industry-jump a {
  padding: 3px 10px;
  border-left: 1px solid #3fd0e0;
  color: #dff3f6;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .4px;
  line-height: 1.5;
  text-decoration: none;
  text-shadow: 0 1px 10px #03121b99;
  transition: color .2s ease, text-decoration-color .2s ease;
}

.page-industries .industry-jump a:first-child { padding-left: 0; border-left: 0; }

.page-industries .industry-jump a:hover,
.page-industries .industry-jump a:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: #3fd0e0;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.page-industries .industry-jump a:focus-visible { outline: 3px solid var(--pd-aqua); outline-offset: 4px; }

@media (max-width: 760px) {
  .page-industries .industry-jump { display: none; }
}

/* Balanced rows on narrower desktops, instead of leaving one link stranded. */
@media (min-width: 761px) and (max-width: 1199px) {
  .page-industries .industry-jump {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-industries .industry-jump a:nth-child(3n + 1) {
    padding-left: 0;
    border-left: 0;
  }
}

/* Distribute the hero links across the available row. */
@media (min-width: 1200px) {
  .page-industries .industry-jump { justify-content: space-between; }
  .page-industries .industry-jump a { padding-inline: 0; border-left: 0; }
}
@media (min-width: 761px) and (max-width: 1199px) {
  .page-industries .industry-jump a { text-align: center; }
}

/* Equal flexible gaps with a separator centered in each gap. */
@media (min-width: 1200px) {
  .page-industries .industry-jump { column-gap: 0; }
  .page-industries .industry-jump a {
    flex: 1 1 auto;
    text-align: center;
    border-left: 1px solid #3fd0e0;
  }
  .page-industries .industry-jump a:first-child { border-left: 0; }
}