/* ==========================================================================
   Staff & Board grid — layout, alignment, responsive
   QuezMedia · July 2026

   Loaded from header.php immediately AFTER responsive.css, so these rules win
   the cascade without needing !important (the one exception is noted inline).

   WHY THIS FILE EXISTS — do not fold these rules back into main-min.css:
     - main-min.css is minified and looks compiled from the assets/css/_*.css
       partials; a rebuild would silently erase anything added there.
     - style.css in the theme root is NOT loaded (header.php:61 is commented
       out). Editing it does nothing.

   Reverting all of this = delete the <link> in header.php. Nothing else.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. STAFF GRID
   Was: <li> at width:24% + display:inline-block inside FOUR separate <ul>s.
   Text-wrapping restarted at every <ul> boundary, so 15 people rendered as
   4,4,1,4,1,1 — the three orphan rows the client reported.

   The template now emits ONE <ul>. Grid then makes orphan rows structurally
   impossible: the browser fills each row of 4 and the remainder sits left-
   aligned in the last row. Adding a 16th person can never strand anyone.

   Grid also gives equal-height rows for free, which inline-block could not:
   inline-block aligned on the BASELINE, so cards of differing height staggered.
   -------------------------------------------------------------------------- */

.meet-team-iner ul.meet-teams {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  text-align: center;
}

/* The <ul> carries the .clearfix class, and at least FIVE stylesheets loaded on this site define
   .clearfix::before/::after { content:" "; display:table } — bootstrap.min.css, job-listings.css,
   general.min.css, eael.css, jquery-ui.css. A pseudo-element on a GRID container becomes a real
   grid item: ::before was measured at 280.5 x 531.9px, occupying row 1 / column 1 and pushing the
   4th person into row 2 (rendering 3/4/4/4 instead of 4/4/4/3).

   Invisible for years under the old inline-block layout; load-bearing the moment the parent became
   a grid. Killed here rather than at each source — whichever stylesheet wins, this still holds. */
.meet-team-iner ul.meet-teams::before,
.meet-team-iner ul.meet-teams::after {
  display: none;
}

/* beats .meet-team-iner ul li{width:24%} — a width on a grid item is honoured
   and would break the track sizing */
.meet-team-iner ul.meet-teams > li {
  width: auto;
  display: block;
  padding: 0;
}

/* stretch the card to the full height of its grid row */
.meet-team-iner ul.meet-teams > li .team-member {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Fixed image box. Every photo is already cropped to 241x361 server-side, so
   this changes nothing today — it is a guardrail so a future off-ratio upload
   cannot stretch one card and re-break the row. */
.meet-team-iner ul.meet-teams > li .team-member > div:first-child {
  aspect-ratio: 241 / 361;
  overflow: hidden;
}
.meet-team-iner ul.meet-teams > li .team-member > div:first-child img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  padding: 0;
}

/* The About NEOHCC page (hcc-about.php, page 6439) reuses this same .meet-teams grid
   for its Board of Directors, but crops those photos to 237x233 LANDSCAPE — not the
   241x361 portrait used for staff. Without this override the portrait box above would
   centre-crop every board headshot. Scoped to .meet-team-wrap-3, which exists only on
   that page; the homepage section is .meet-team-wrap#staff-board. */
.meet-team-wrap-3 .meet-team-iner ul.meet-teams > li .team-member > div:first-child {
  aspect-ratio: 237 / 233;
}

/* Reserve two lines for the name so every role starts at the same y, whether
   the name wraps or not. This is what lets us delete the hand-typed <br>. */
.meet-team-iner ul.meet-teams > li h5 {
  line-height: 1.25;
  min-height: 2.5em;
  margin-top: 18px;
  margin-bottom: 12px;
}

.meet-team-iner ul.meet-teams > li span {
  display: block;
  line-height: 1.35;
}

/* Optional organization / department line (team_organization). Inert until the
   field is populated — the template only prints <small> when it has a value.

   Sizing follows the theme's OWN treatment of this exact line on the board cards
   (.directors-itm small = 12px Gotham-Book at full opacity, against an 11px role):
   the organization sits at or just below the role's size, never faded. The first
   pass here used 13px at opacity .85 against a 16px role, which washed out to an
   orphan against the blue and matched nothing else on the page. Subordinate to the
   role, still clearly part of the card. */
.meet-team-iner ul.meet-teams > li small {
  display: block;
  margin-top: 4px;
  font-family: Gotham-Book;
  font-size: 14px;
  opacity: 1;
}


/* --------------------------------------------------------------------------
   2. BOARD GRIDS (NEOHCC + HBC)

   Slick's rows:2 builds a TABLE: .slick-track{display:table} and each
   .slick-slide is a {display:table-cell; vertical-align:middle} holding one
   COLUMN of two cards. Because the cells centre their content, a column of
   shorter cards floats down relative to its neighbours:

       column 1: 273+259 = 532 in a 542 cell -> offset (542-532)/2 =  5px
       column 3: 244+244 = 488 in a 542 cell -> offset (542-488)/2 = 27px
                                                            difference = 22px

   That 22px is exactly the measured gap between Maribel's column and
   Margaret's. Two fixes, belt and braces:
     (a) top-align the cells so a short column stops drifting downward;
     (b) reserve fixed line-boxes so cards are equal height in the first place.
   -------------------------------------------------------------------------- */

/* (a) !important is required here: the value comes from Slick's own stylesheet
   and this must beat it regardless of load order. */
.bd-sec-common .bd-slider-wrap .slick-slide {
  vertical-align: top !important;
}

/* (b) Reserve two lines for the name and two for the role, so every card is the
   same height no matter how long the name is. Removing "(Materion Corporation)"
   from the name field makes today's names one line — this keeps the row aligned
   even if a future name wraps anyway. */
.bd-sec-common ul li .directors-itm h6 {
  line-height: 1.3;
  min-height: 2.6em;
  margin-top: 12px;
  margin-bottom: 6px;
}

.bd-sec-common ul li .directors-itm span {
  line-height: 1.35;
  min-height: 2.7em;
}

/* (c) The organization line (team_organization), e.g. "Materion Corporation".
   The theme already styled .directors-itm small — 12px/18px, Gotham-Book — but the
   template never emitted it, so the organization had nowhere to go and ended up typed
   into the member's NAME. That is what pushed these cards out of alignment.

   min-height reserves the line whether or not a member has an organization. Without it
   the four members who have one render 18px taller than the two who do not — the exact
   measured delta, and the mirror image of the original bug. The staff grid needs no
   such rule: CSS grid equalises its rows for free.

   text-transform: the theme sets `capitalize` here, which renders the stored value
   "Bank of America" as "Bank Of America". Show what Jenice actually typed. */
.bd-sec-common ul li .directors-itm small {
  display: block;
  min-height: 1.5em;
  text-transform: none;
}

/* Square image box — same guardrail rationale as the staff photos above. */
.bd-sec-common ul li .directors-itm .drpr-img {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.bd-sec-common ul li .directors-itm .drpr-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}


/* --------------------------------------------------------------------------
   2b. MISSING-PHOTO PLACEHOLDER

   Emitted by dt360_team_photo() (functions.php) when a team member has no usable
   featured image. It fills exactly the box the <img> would have filled, so the card
   keeps its shape and the grid row keeps its height.

   This is a guardrail against a real, measured failure (2026-07-17): the old markup
   echoed an unescaped, empty src="" for a photoless member, which made the browser
   re-request the page as an image. ONE photoless board member collapsed BOTH board
   sliders to a single broken card and stopped Slick initialising. Adding a person
   and forgetting the photo must never be able to take down the section.
   -------------------------------------------------------------------------- */

.meet-team-iner ul.meet-teams > li .team-member > div:first-child img.team-noimg,
.bd-sec-common ul li .directors-itm .drpr-img img.team-noimg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #eceff1;
}


/* --------------------------------------------------------------------------
   3. RESPONSIVE
   Breakpoints mirror the existing ones in main-min.css (991 / 767 / 575) so
   the staff grid keeps stepping down exactly where the rest of the site does.
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
  .meet-team-iner ul.meet-teams { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
  .meet-team-iner ul.meet-teams { grid-template-columns: repeat(2, 1fr); }
}

/* THE MOBILE FIX.
   main-min.css dropped the grid to width:100% below 575px — one person per
   screen. 15 staff x ~543px = ~8,142px, about 9.6 phone screens of scrolling
   for this section alone. Holding 2-up cuts that to roughly a third.
   The max-width:90% + margin:0 auto below 575px also has to go, or the two
   columns get pinched with a gutter down the middle. */
@media (max-width: 575px) {
  .meet-team-iner ul.meet-teams {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .meet-team-iner ul.meet-teams > li .team-member {
    max-width: none;
    margin: 0;
    padding: 12px 10px;
  }
  .meet-team-iner ul.meet-teams > li h5 {
    font-size: 15px;
    margin-top: 12px;
    margin-bottom: 8px;
  }
  .meet-team-iner ul.meet-teams > li span { font-size: 13px; }
  .meet-team-iner ul.meet-teams > li small { font-size: 12px; }
}