/**
 * CSB Bank 11 — Director / Senior-Management biography cards (About Us).
 *
 * Restores the D7 "BM-holder / BM-overlay" flip-card behaviour: each person's
 * photo + name/role is shown on the card face, and clicking the card slides up
 * an overlay that reveals the full biography (the node body). Ported from the
 * D7 theme css/bootstrap.css (.BM-holder / .BM-overlay rules, lines ~2741-2772)
 * so it is NOT entangled with style.css / parity-fixes.css (owned elsewhere).
 *
 * Markup is produced by:
 *   templates/views/views-view-unformatted--about-board-of-directors.html.twig
 *   templates/views/views-view-fields--about-board-of-directors.html.twig
 *   (+ the matching about-senior-management templates)
 */

.BM-row { margin-left: -15px; margin-right: -15px; }

/* GRID WRAP FIX: the cards are floated Bootstrap columns (.col-sm-6 .col-md-3).
   With floats, an unequal-height card (e.g. the Chairman, whose name wraps to two
   lines) leaves a "ledge" that makes a later card wrap one column early, so a hole
   appears in the row and the next card drops down (seen on Board of Directors:
   Saxena pushed below an empty 4th slot). Making the row a flex-wrap container lays
   the fixed-width columns out cleanly N-per-row regardless of individual height,
   with no dependency on jquery.matchHeight. Gated to >=768px so the single-column
   mobile stack (where columns have no Bootstrap width) is left untouched. */
@media (min-width: 768px) {
  .BM-row { display: flex; flex-wrap: wrap; }
}

.BM-holder {
  padding-top: 15px;
  border: 1px solid transparent;
  margin-bottom: 10px;
  padding-bottom: 30px;
  overflow: hidden;
  position: relative;
}
.BM-holder h4 { line-height: 20px; padding-top: 20px; }

.BM-holder:not(.push):hover {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
  border: 1px solid #dbdbdb;
  cursor: pointer;
  background: #eaeaea;
}

.image-wrapper { transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1) 0s; }
.BM-holder .image-wrapper {
  background-color: #fafafa;
  overflow: hidden;
  position: relative;
  transform: scale(1.01);
  transform-origin: center center 0;
}
.BM-holder:hover:not(.push) .image-wrapper {
  overflow: hidden;
  transform: scale(1.05);
  transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}
.BM-holder .image-wrapper img { width: 100%; }

.BM-overlay {
  background: #fff;
  height: 100%;
  width: 100%;
  left: 0;
  top: 100%;
  padding: 20px;
  position: absolute;
  overflow: auto;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.BM-holder.active .BM-overlay { top: 0; }

a.bmclose {
  background: #ff6600 none repeat scroll 0 0;
  border-radius: 50%;
  color: #fff;
  display: inline-block;
  height: 20px;
  line-height: 16px;
  position: absolute;
  right: 10px;
  top: 7px;
  width: 20px;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  padding-left: 1px;
  z-index: 2;
}

.content-m { height: 100%; }
.content-m p { text-align: justify; }

/* ---------------------------------------------------------------------------
 * D7 PARITY (known-open): uniform 227x256 photo grid crop.
 * Board of Directors & Senior Management Team tabs on /about-us.
 *
 * D11 renders each card as:
 *   .BM-holder > .BM-holder-inner > .image-wrapper > <img width="227" height="256">
 * The <img> points at the RAW original file (no Drupal image style, no
 * /styles/ derivative) but carries hardcoded width="227" height="256"
 * attributes. The source photos are NOT all 227x256 (confirmed on
 * http://csb-d11.ddev.site/about-us: .jpg/.png files of mixed sizes), so the
 * fixed attrs stretch/distort them and the grid goes ragged.
 *
 * D7's img instead used class="width100" (bootstrap.css:2857
 * .width100{width:100%!important;height:auto!important}) and the source grid
 * read as a uniform cropped block.
 *
 * Fix: lock the wrapper to the D7 227:256 ratio and let the image cover-crop
 * it, so every card is identical regardless of the source file's real
 * dimensions. The existing `.BM-holder .image-wrapper` rule above already sets
 * overflow:hidden/position:relative; these rules add the ratio box + crop and,
 * being later in the file, win over the earlier `img{width:100%}` declaration.
 * --------------------------------------------------------------------------- */
/* ROOT CAUSE of the "cards cut to thin strips until a 2nd refresh":
   jquery.matchHeight.js runs on .BM-holder to equalise card heights, but the
   Board/Senior grids live in quicktabs panes that are display:none on load.
   matchHeight measures a hidden pane as height 0 and pins `style="height:0px"`
   on every card; when you open the tab the cards stay collapsed (a ~47px strip
   showing the top of each photo) until matchHeight happens to recompute. On a
   2nd refresh the images are cached and it measures correctly — hence the flaky
   behaviour.
   Fix: opt these cards out of JS height-locking (height:auto wins over
   matchHeight's inline height via !important), and give the image box a fixed
   227:256 ratio in CSS so the grid stays uniform without matchHeight and the box
   reserves its height even before the (lazy) photo loads. */
.BM-holder { height: auto !important; }
.BM-holder .image-wrapper { aspect-ratio: 227 / 256; overflow: hidden; }
.BM-holder .image-wrapper img { width: 100%; height: 100%; object-fit: cover; display: block; }