/* ==========================================================================
   BISPL — HOME : "INDUSTRIES WE SERVE" ICON GRID
   --------------------------------------------------------------------------
   Scope : .bis-industry-grid only.
           That class is added to the existing .rs-brand-item-wrapper on the
           home page, so nothing here can reach any other brand/logo strip
           on the site. The theme's own grid, gaps and breakpoints are left
           exactly as they are — this file only adds the card treatment and
           the industry name.

   Behaviour
     • at rest        : the full card is on show — accent rule across the top,
                        icon centred in the body, industry name in the orange
                        bar along the bottom. Identical on every device, so
                        touch and pointer users see the same thing.
     • hover / focus  : the card lifts 6px onto a soft shadow and the icon
                        scales a touch. Nothing appears or moves position.
     • reduced motion : the lift is dropped, the card stays put.

   Tokens: --rs-theme-orange (#EA5F23) and the theme's surface variables,
   so light and dark both follow the site switcher.
   ========================================================================== */

.bis-industry-grid {
  --bis-ind-accent: var(--rs-theme-orange, #ea5f23);
  --bis-ind-radius: clamp(14px, 1.1vw, 20px);
  --bis-ind-ease: cubic-bezier(.16, .8, .2, 1);

  --bis-ind-surface: var(--rs-bg-primary, #f5f6f7);
  --bis-ind-border: rgba(17, 25, 31, .07);
  --bis-ind-shadow: 0 22px 44px -26px rgba(12, 20, 28, .38);

  /* the orange label bar is a FIXED height so every card in a row matches,
     even when a longer name wraps to two lines. The icon's rise is derived
     from it, so the icon always sits optically centred in the body above. */
  --bis-ind-bar-h: 46px;
  --bis-ind-icon-rise: calc(var(--bis-ind-bar-h) / 2);
}

html[data-theme="dark"] .bis-industry-grid {
  --bis-ind-border: rgba(255, 255, 255, .09);
  --bis-ind-shadow: 0 24px 46px -24px rgba(0, 0, 0, .85);
}

.bis-industry-grid *,
.bis-industry-grid *::before,
.bis-industry-grid *::after {
  box-sizing: border-box;
}


/* ==========================================================
   TILE
   The theme already sets background / size / centring on
   .rs-brand-item — only the card treatment is added here.
========================================================== */

.bis-industry-grid .rs-brand-item {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--bis-ind-border);
  border-radius: var(--bis-ind-radius);
  transition:
    transform .45s var(--bis-ind-ease),
    box-shadow .45s var(--bis-ind-ease),
    border-color .45s ease;
}

/* accent rule across the top — part of the resting card */
.bis-industry-grid .rs-brand-item::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--bis-ind-accent);
  pointer-events: none;
}


/* ---------- icon ---------- */

.bis-industry-grid .rs-brand-thumb {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* parked clear of the label bar so the icon reads as centred in the body */
  transform: translate3d(0, calc(var(--bis-ind-icon-rise) * -1), 0);
  transition: transform .45s var(--bis-ind-ease);
}

/* the theme animates the image to scale(1.2) on hover; a 20% jump is far
   too loud for a card that no longer changes state, so it is pinned to a
   calm settle instead */
.bis-industry-grid .rs-brand-thumb img {
  transition: transform .45s var(--bis-ind-ease);
}


/* ==========================================================
   INDUSTRY NAME  —  always on show
========================================================== */

.bis-industry-name {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--bis-ind-bar-h);
  padding: 6px 10px;

  background: var(--bis-ind-accent);
  color: #fff;

  font-size: clamp(11px, .78vw, 13px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .6px;
  text-align: center;
  text-transform: uppercase;

  pointer-events: none;
}


/* ==========================================================
   HOVER / FOCUS  (pointer devices only)
   Lift and shadow only — the card's contents do not change.
========================================================== */

@media (hover: hover) and (pointer: fine) {

  .bis-industry-grid .rs-brand-item:hover,
  .bis-industry-grid .rs-brand-item:focus-within {
    transform: translate3d(0, -6px, 0);
    border-color: transparent;
    box-shadow: var(--bis-ind-shadow);
  }

  .bis-industry-grid .rs-brand-item:hover .rs-brand-thumb img,
  .bis-industry-grid .rs-brand-item:focus-within .rs-brand-thumb img {
    transform: scale(1.06);
  }
}


/* ==========================================================
   RESPONSIVE
   The theme's own breakpoints drive the columns (4 / 3 / 2 /
   wrap) and the tile width. These only keep the label legible
   as the tile shrinks and grows. Only the bar height is set — the
   icon's rise follows it automatically.
========================================================== */

@media only screen and (max-width: 1600px) {

  .bis-industry-grid {
    --bis-ind-bar-h: 42px;
  }

  .bis-industry-name {
    letter-spacing: .4px;
  }
}

@media only screen and (max-width: 991px) {

  .bis-industry-name {
    font-size: 12px;
  }
}

@media only screen and (max-width: 767px) {

  .bis-industry-grid {
    --bis-ind-bar-h: 40px;
  }

  .bis-industry-name {
    padding: 5px 8px;
    font-size: 11px;
  }
}

/* single column — the tile goes full width, so the label can breathe */
@media only screen and (max-width: 480px) {

  .bis-industry-grid {
    --bis-ind-bar-h: 44px;
  }

  .bis-industry-name {
    font-size: 12px;
    letter-spacing: 1px;
  }
}

/* large desktop / 4K */
@media only screen and (min-width: 1921px) {

  .bis-industry-grid {
    --bis-ind-bar-h: 54px;
  }

  .bis-industry-name {
    font-size: 14px;
  }
}


/* ==========================================================
   REDUCED MOTION
   The resting card is unchanged; only the lift is dropped.
========================================================== */

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

  .bis-industry-grid .rs-brand-item,
  .bis-industry-grid .rs-brand-thumb,
  .bis-industry-grid .rs-brand-thumb img {
    transition-duration: .01ms !important;
  }

  .bis-industry-grid .rs-brand-item:hover,
  .bis-industry-grid .rs-brand-item:focus-within {
    transform: none;
  }

  .bis-industry-grid .rs-brand-item:hover .rs-brand-thumb img,
  .bis-industry-grid .rs-brand-item:focus-within .rs-brand-thumb img {
    transform: none;
  }
}

/* 4k Screen  */

@media (min-width:3001px) and (max-width:6000px) {

  .bis-industry-name {
    font-size: 17px;
  }
}