/* =========================================================================
 * Home - Industries grid: show more
 *
 * Pairs with ind-load-more.js. The fold is a class, never an inline style,
 * so it can never collide with another script writing style.display on the
 * same cards - hence !important.
 * ========================================================================= */

[data-ind-grid] > .a3-ind-card--folded {
  display: none !important;
}

.a3-ind-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 44px 0 4px;
}

.a3-ind-more__status {
  margin: 0;
  color: #71717A;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.2px;
}

.a3-ind-more__status span {
  color: #18181B;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Outline button.
 *
 * Geometry comes from global.css, which styles every <button> - 56px min
 * height, 2px border and border-radius:0 !important. Square is this site's
 * button language, so this only supplies the colour treatment and leaves the
 * shape alone rather than fighting an !important. */
.a3-ind-more__btn {
  border-color: #FF6900;
  background: transparent;
  color: #FF6900;
  font-size: 15px;
  letter-spacing: 0.1px;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.a3-ind-more__btn:hover,
.a3-ind-more__btn:focus-visible {
  background: #FF6900;
  color: #FFF;
  box-shadow: 0 10px 24px -10px rgba(255, 105, 0, 0.65);
}

.a3-ind-more__btn:focus-visible {
  outline: 2px solid #18181B;
  outline-offset: 3px;
}

.a3-ind-more__btn svg {
  transition: transform 0.2s ease;
}

.a3-ind-more__btn:hover svg {
  transform: translateY(2px);
}

@media (prefers-reduced-motion: reduce) {

  .a3-ind-more__btn,
  .a3-ind-more__btn svg {
    transition: none;
  }

  .a3-ind-more__btn:hover svg {
    transform: none;
  }
}

@media (max-width: 767px) {

  .a3-ind-more {
    padding: 30px 0 2px;
  }

  .a3-ind-more__btn {
    width: 100%;
    justify-content: center;
  }
}