.team-tiles-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  grid-auto-rows:220px;
  gap:0;
}
.team-tiles-card{
  display:flex;
  overflow:hidden;
  position:relative;
}
.team-tiles-pos-right{ flex-direction:row; }
.team-tiles-pos-left{ flex-direction:row-reverse; }
.team-tiles-pos-bottom{ flex-direction:column; }
.team-tiles-pos-top{ flex-direction:column-reverse; }

.team-tiles-photo{
  flex:1 1 50%;
  position:relative;
  overflow:hidden;
  background:#333333;
}
.team-tiles-photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.team-tiles-panel{
  flex:1 1 50%;
  position:relative;
  background:var(--team-tiles-color,#2B3493);
  color:#fff;
  overflow:hidden;
}
.team-tiles-panel .team-tiles-fill{
  position:absolute; inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:14px 16px;
}
.team-tiles-reveal .team-tiles-panel .team-tiles-fill{
  opacity:0;
  transform:translateY(8px);
  transition-property:opacity, transform;
  transition-timing-function:ease;
}
.team-tiles-reveal .team-tiles-card:hover .team-tiles-panel .team-tiles-fill,
.team-tiles-reveal .team-tiles-card:focus-within .team-tiles-panel .team-tiles-fill{
  opacity:1;
  transform:translateY(0);
}
.team-tiles-idle{
  position:absolute; inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
  transition-property:opacity;
  transition-timing-function:ease;
}
.team-tiles-card:hover .team-tiles-idle,
.team-tiles-card:focus-within .team-tiles-idle{
  opacity:0;
}

.team-tiles-name{ font-weight:700; font-size:1.05rem; margin:0 0 6px; }
.team-tiles-role{ font-size:.72rem; line-height:1.4; margin:0 0 8px; }
.team-tiles-role p{ margin:0 0 4px; }
.team-tiles-role p:last-child{ margin-bottom:0; }
.team-tiles-big{ font-size:.66rem; letter-spacing:.04em; margin:0; }

/* Safari/WebKit auto-detects "BIG 12345678901" as a phone number and
   silently wraps it in an invisible tel: link with its own default
   link color, overriding our own color control. Force it to inherit. */
.team-tiles-big a[href^="tel"]{
  color: inherit;
  text-decoration: none;
  pointer-events: none;
  cursor: default;
}

/* Tablet: the 5-column mosaic band only reads well at full desktop width.
   Drop to a plain uniform 2-column grid instead of trying to preserve the
   band math at a size it wasn't designed for; every card gets the same
   photo-left/panel-right orientation for a consistent, tidy grid. */
@media (min-width:768px) and (max-width:1024px){
  .team-tiles-grid{ grid-template-columns:repeat(2, 1fr); }
  .team-tiles-card{
    grid-column:auto !important;
    grid-row:auto !important;
    flex-direction:row !important;
  }
}

/* Mobile: single column, photo stacked above the panel. */
@media (max-width:767px){
  /* !important here too: Elementor emits its own "Row height" rule as
     ".elementor-element-{id} .team-tiles-grid { grid-auto-rows: ... }",
     which outranks this plain class selector on specificity alone,
     with no media query involved. Without !important it pins every
     breakpoint to the desktop row height and clips the panel clean off
     the stacked mobile card. */
  .team-tiles-grid{ grid-template-columns:1fr; grid-auto-rows:auto !important; }
  .team-tiles-card{
    grid-column:1 / -1 !important;
    grid-row:auto !important;
    flex-direction:column !important;
    height:auto !important;
  }
  .team-tiles-photo, .team-tiles-panel{ flex:none; height:260px; }

  /* No hover on touchscreens: skip the reveal interaction entirely and
     always show the name/role/BIG number, regardless of the widget's
     "Reveal info on hover" setting. */
  .team-tiles-panel .team-tiles-fill{
    opacity:1 !important;
    transform:none !important;
  }
  .team-tiles-idle{
    display:none !important;
  }

  /* Mobile stacks real members with no structural gaps to complete, a
     filler tile here would just be a stray empty color bar at the end. */
  .team-tiles-filler{
    display:none !important;
  }
}