/* Industry Cards -- six-up icon tiles that light up on hover. */

.industrycards-block {
  background: var(--bellco-bg-alt);
  border-top: 1px solid var(--bellco-divider);
  padding: 96px 0;
}

.industrycards-block--center .industrycards-head {
  text-align: center;
}

.industrycards-block--center .industrycards-head .bellco-eyebrow {
  justify-content: center;
}

.industrycards-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--bellco-gap-sm);
}

.industrycards-grid[data-count="5"] { grid-template-columns: repeat(5, 1fr); }
.industrycards-grid[data-count="4"] { grid-template-columns: repeat(4, 1fr); }
.industrycards-grid[data-count="3"] { grid-template-columns: repeat(3, 1fr); }

/* Cards Per Row, when the editor pins it. Same specificity as the data-count
   rules above, so it has to sit after them to win. */
.industrycards-grid[data-columns="6"] { grid-template-columns: repeat(6, 1fr); }
.industrycards-grid[data-columns="5"] { grid-template-columns: repeat(5, 1fr); }
.industrycards-grid[data-columns="4"] { grid-template-columns: repeat(4, 1fr); }
.industrycards-grid[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }

.industrycards-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 16px;
  background: var(--bellco-bg-card);
  border: 1px solid var(--bellco-hairline);
  border-radius: var(--bellco-radius);
  overflow: hidden;
  text-decoration: none;
  overflow: hidden;
  transition: background 0.25s;
}

a.industrycards-item:hover {
  background: var(--bellco-bg-card);
}

.industrycards-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: var(--bellco-radius-sm);
  margin-bottom: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--bellco-mint);
  opacity: 0.35;
  transition: opacity 0.25s, border-color 0.25s, background 0.25s;
}

a.industrycards-item:hover .industrycards-icon {
  opacity: 1;
  border-color: rgba(139, 217, 186, 0.6);
  background: rgba(139, 217, 186, 0.1);
}

.industrycards-title {
  font-family: var(--font1);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
  color: rgba(242, 242, 240, 0.7);
  margin-bottom: 6px;
  transition: color 0.25s;
}

a.industrycards-item:hover .industrycards-title {
  color: #ffffff;
}

.industrycards-desc {
  font-family: var(--font1);
  font-size: 14px;
  line-height: 1.4;
  color: var(--bellco-muted);
}

.industrycards-more {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  font-family: var(--font1);
  font-size: var(--bellco-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bellco-mint);
  opacity: 0;
  transition: opacity 0.25s;
}

a.industrycards-item:hover .industrycards-more {
  opacity: 1;
}

/* Mint rule that draws across the bottom on hover. */
.industrycards-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--bellco-mint);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
}

a.industrycards-item:hover::after {
  transform: scaleX(1);
}

@media (max-width: 1199px) {
  .industrycards-block {
    padding: 72px 0;
  }

  .industrycards-grid,
  .industrycards-grid[data-count="5"],
  .industrycards-grid[data-count="4"],
  .industrycards-grid[data-count="3"],
  .industrycards-grid[data-columns="6"],
  .industrycards-grid[data-columns="5"],
  .industrycards-grid[data-columns="4"],
  .industrycards-grid[data-columns="3"] {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .industrycards-block {
    padding: 56px 0;
  }

  .industrycards-grid,
  .industrycards-grid[data-count="5"],
  .industrycards-grid[data-count="4"],
  .industrycards-grid[data-count="3"],
  .industrycards-grid[data-columns="6"],
  .industrycards-grid[data-columns="5"],
  .industrycards-grid[data-columns="4"],
  .industrycards-grid[data-columns="3"] {
    grid-template-columns: repeat(2, 1fr);
  }

  .industrycards-icon {
    width: 60px;
    height: 60px;
    /* Touch has no hover, so the icon has to read at full strength. */
    opacity: 1;
  }

  .industrycards-more {
    display: none;
  }
}