/* ---------------------------------------------------------------------
 * /about/staff/ — Mrs. Taylor's Canva design, 2026-08-14.
 *
 * Loaded only by the staff page. Rendered by capture/staff-canva.mjs.
 * Built on hbm-modern.css's tokens; the flyer's palette is HBM navy and
 * white, so nothing new is introduced beyond the diamond crop.
 * ------------------------------------------------------------------ */

.hbm-staff-canva {
  --staff-navy: #14385c;
  --staff-deep: #0f2c49;
  background: #fff;
  overflow: hidden;
}

/* ------------------------------------------------------------ masthead */

.hbm-staff__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 34px 24px 24px;
}

/* Heavy and condensed, as on the flyer. Divi's stack has no condensed face,
   so the width comes from a horizontal squeeze rather than a font swap —
   transform-origin keeps it anchored to the left margin. */
.hbm-staff__heading {
  margin: 0 0 22px;
  color: var(--staff-navy);
  font-size: clamp(40px, 6.6vw, 76px);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  transform: scaleX(0.86);
  transform-origin: left center;
}

.hbm-staff__logo {
  display: block;
  width: min(330px, 100%);
  height: auto;
}

.hbm-staff__brochures {
  flex: 0 0 auto;
  width: min(228px, 28%);
  height: auto;
  transform: rotate(4deg);
}

/* --------------------------------------------------------- navy panel */

/* On the flyer the navy is not a full-width band — it fills the left of the
   page and its right edge runs away on a diagonal, with the photo ribbon
   straddling that edge and spilling onto the white beyond it. The navy is
   therefore a clipped layer UNDERNEATH the content rather than the section's
   own background, so clipping it cannot clip the photographs too. */
.hbm-staff__panel {
  position: relative;
  padding: 40px 0 52px;
  background: transparent;
  overflow: hidden;
}

.hbm-staff__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--staff-navy);
  clip-path: polygon(0 0, 60% 0, 76% 100%, 0 100%);
}

.hbm-staff__panel > * {
  position: relative;
}

/* The thin rule with a dot that opens the panel on the flyer. */
.hbm-staff__rule {
  display: block;
  width: min(1180px, 100%);
  height: 2px;
  margin: 0 auto 34px;
  background: rgba(255, 255, 255, 0.28);
  position: relative;
}

.hbm-staff__rule::after {
  content: "";
  position: absolute;
  right: 22%;
  top: 50%;
  width: 13px;
  height: 13px;
  background: #fff;
  border-radius: 50%;
  transform: translateY(-50%);
}

/* Wider than the page on purpose: the ribbon runs off the right-hand edge on
   the flyer rather than stopping politely inside a column. */
.hbm-staff__people {
  width: min(1320px, 118%);
  margin: 0 auto;
  padding: 0 0 0 24px;
  list-style: none;
}

/* Couple cut-out | name | diamond photograph. Columns are sized to their
   content rather than stretched across the page — letting the middle column
   flex opened a void down the centre that the flyer does not have. The rows
   step right one after another, which is what draws the diagonal, and the
   diamonds meet at their vertices to form the chain. */
.hbm-staff__person {
  display: grid;
  /* The middle column is a fixed width, not max-content. Sized to its text,
     it varied with the length of each name — "Olivier Broc, General Director"
     is far wider than "Bob Taylor, President" — which pushed every diamond to
     a different x and made the spacing between photographs impossible to keep
     even. Fixing it puts all four diamonds on one axis, so the stagger below
     is the only thing that moves them. */
  grid-template-columns: 190px 250px 340px;
  justify-content: start;
  align-items: center;
  gap: 22px;
  /* The diamonds interlock rather than sit in a queue — each row rides up
     into the one above so their vertices meet, which is what makes the
     photographs read as one woven ribbon instead of four separate crops.
     Half the diamond's height, so every gap in the chain is identical. */
  margin-top: -170px;
}

.hbm-staff__person:first-child { margin-top: 0; }

/* The ribbon zigzags: it does not step steadily rightwards. Even rows swing
   out towards the edge and odd rows fall back, by the same distance each
   time so the chain reads as one regular weave. */
.hbm-staff__person:nth-child(2n) { padding-left: 170px; }

.hbm-staff__couple {
  width: 100%;
  height: auto;
  justify-self: center;
}

.hbm-staff__couple--none {
  display: block;
}

.hbm-staff__id {
  display: block;
  color: #fff;
  font-size: clamp(18px, 2.2vw, 30px);
  line-height: 1.32;
  text-align: left;
  font-weight: 300;
}

.hbm-staff__name,
.hbm-staff__title {
  display: block;
}

.hbm-staff__title {
  color: rgba(255, 255, 255, 0.86);
}

/* The rotated-square crop. clip-path keeps the photo upright inside the
   diamond, which rotating a wrapper would not. */
/* White sits between neighbouring photographs on the flyer, so the outer
   diamond is white and the image inside is scaled fractionally smaller —
   clip-path ignores borders, so the frame has to come from the layer under
   it showing through. */
.hbm-staff__diamond {
  display: block;
  aspect-ratio: 1;
  width: 100%;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  background: #fff;
}

.hbm-staff__diamond img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  transform: scale(0.965);
}

/* -------------------------------------------------------- button bar */

.hbm-staff__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 48px;
  padding: 26px 24px 30px;
  background: var(--staff-deep);
}

.hbm-staff__link {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

.hbm-staff__link:hover,
.hbm-staff__link:focus-visible {
  color: #cfe0ef;
}

.hbm-staff__linkicon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 50%;
}

.hbm-staff__linkicon svg {
  width: 22px;
  height: 22px;
}

/* ------------------------------------------------------- breakpoints */

@media (max-width: 980px) {
  .hbm-staff__person {
    grid-template-columns: 130px 170px 200px;
    gap: 14px;
    /* -100px pulled each row so far up that the couple photograph in the row
       below printed over the name in the row above — between 721 and 980px
       "Oliv" of Olivier Broc rendered white on top of Bob Taylor's suit. The
       interlock is gentler here, and the couple drops clear of it. */
    margin-top: -60px;
  }
  .hbm-staff__person:nth-child(2n) { padding-left: 60px; }
  .hbm-staff__couple { margin-top: 20px; width: min(130px, 100%); }
}

@media (max-width: 720px) {
  .hbm-staff__top {
    flex-direction: column;
    align-items: center;
    padding: 34px 18px 22px;
    text-align: center;
  }
  .hbm-staff__logo { margin: 0 auto; }
  .hbm-staff__brochures { width: min(230px, 62%); }

  /* The diagonal cannot survive a narrow screen — each person becomes a
     centred card instead, photograph first. */
  .hbm-staff__person,
  .hbm-staff__person:nth-child(2),
  .hbm-staff__person:nth-child(3),
  .hbm-staff__person:nth-child(4) {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 10px;
    padding-left: 0;
    margin-bottom: 30px;
  }

  .hbm-staff__diamond { width: min(230px, 66%); order: -1; }
  .hbm-staff__couple { width: min(200px, 58%); }
  .hbm-staff__couple--none { display: none; }
  .hbm-staff__id { text-align: center; }
  .hbm-staff__rule::after { right: 12%; }
  .hbm-staff__links { gap: 16px; flex-direction: column; align-items: center; }
}

/* The flyer sets the street address under the wordmark. HBM-Logo-2026.png only
   carries the city line, so the street comes in as text rather than by
   commissioning a second logo file. Matches brand.config.json. */
.hbm-staff__address {
  margin: 8px 0 0;
  color: var(--staff-navy);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

@media (max-width: 720px) {
  .hbm-staff__address { text-align: center; }
  /* The diagonal reads as a mistake once the ribbon stacks; square it off. */
  .hbm-staff__panel::before { clip-path: none; }
  .hbm-staff__people { width: 100%; padding: 0 16px; }
}

/* ---------------------------------------------------------------------
 * Mrs. Taylor, 2026-08-15: faded wheat behind the staff band instead of
 * flat navy, and the logo out of the masthead.
 *
 * The wheat is the same photograph the home page's contact band uses, so
 * the two ends of the site agree. It is washed out heavily — the point is a
 * background, not a picture — which flips the band from light-on-dark to
 * dark-on-light, so the names and the diagonal edge invert with it.
 * ------------------------------------------------------------------ */

.hbm-staff__panel::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.88)),
    url("/wp-content/uploads/2026/08/hbm-wheat-band.jpg");
  background-size: cover;
  background-position: center 45%;
  background-color: #f3ece0;
}

/* Dark type now that the band is light. */
.hbm-staff__id { color: var(--staff-navy); font-weight: 400; }
.hbm-staff__title { color: #4a5c6e; }
.hbm-staff__rule { background: rgba(20, 56, 92, 0.22); }
.hbm-staff__rule::after { background: var(--staff-navy); }

/* The diamonds framed themselves in white against navy; against wheat they
   need a darker separation or they dissolve into the background. */
.hbm-staff__diamond { background: var(--staff-navy); }

/* ---------------------------------------------------------------------
 * In Memory Of — Dr. Roy Chestnut, restored 2026-08-15.
 * Its own section after the staff, deliberately quieter than the band
 * above it: cream rather than wheat, a rule instead of a diamond.
 * ------------------------------------------------------------------ */

.hbm-staff__memorial {
  padding: 44px 24px 52px;
  background: #f7f3ea;
  border-top: 3px solid var(--staff-navy);
}

.hbm-staff__memorial-kicker {
  width: min(940px, 100%);
  margin: 0 auto 22px;
  color: #7b6a4e;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
}

.hbm-staff__memorial-inner {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  width: min(940px, 100%);
  margin: 0 auto;
}

.hbm-staff__memorial-photo {
  flex: 0 0 auto;
  width: min(300px, 38%);
  height: auto;
  border: 5px solid #fff;
  border-radius: 4px;
  box-shadow: 0 6px 20px rgba(20, 56, 92, 0.16);
}

.hbm-staff__memorial-body h2 {
  margin: 0;
  color: var(--staff-navy);
  font-size: 27px;
  line-height: 1.2;
}

.hbm-staff__memorial-role {
  margin: 4px 0 16px;
  color: #7b6a4e;
  font-size: 15px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.hbm-staff__memorial-body p {
  margin: 0 0 12px;
  color: var(--hbm-ink, #1f2a36);
  font-size: 16px;
  line-height: 1.65;
}

.hbm-staff__memorial-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.hbm-staff__memorial-btn {
  display: inline-block;
  padding: 9px 18px;
  color: var(--staff-navy);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid var(--staff-navy);
  border-radius: 8px;
}

.hbm-staff__memorial-btn:hover,
.hbm-staff__memorial-btn:focus-visible {
  color: #fff;
  background: var(--staff-navy);
}

@media (max-width: 720px) {
  .hbm-staff__memorial-inner { flex-direction: column; align-items: center; text-align: center; }
  .hbm-staff__memorial-photo { width: min(280px, 72%); }
  .hbm-staff__memorial-links { justify-content: center; }
}

/* ---------------------------------------------------------------------
 * Mrs. Taylor, 2026-08-17.
 *
 * Four rulings, in her order:
 *   1. the brochures enlarged and stood upright;
 *   2. the masthead remade as the home page's wheat field, carrying "Meet
 *      Our Staff" where "Serving Others…" is set, with the brochures
 *      standing where the group of people stand in that photograph;
 *   3. the wheat behind the staff band dropped for a lighter navy with
 *      white type — and the ribbon itself evened up;
 *   4. the Chestnut photograph squared.
 * ------------------------------------------------------------------ */

.hbm-staff-canva {
  /* Lighter than the flyer's --staff-navy, which is kept for type and
     borders that need to hold their own against white. */
  --staff-band: #1d5183;
}

/* ---------------------------------------------------------- wheat hero */

/* The home page's banner has its headline and its group of people baked
   into the PNG, so neither can be moved or removed in CSS. hbm-wheat-hero
   .jpg is that same photograph with the headline painted out and the people
   cropped away, leaving the field, the treeline and the sunset — the frame
   the rest of this hero is built on. */
.hbm-staff__top {
  position: relative;
  align-items: center;
  gap: 40px;
  width: 100%;
  max-width: none;
  min-height: clamp(300px, 33vw, 470px);
  padding: 46px clamp(24px, 6vw, 92px);
  background-image: url("/wp-content/uploads/2026/08/hbm-wheat-hero.jpg");
  background-size: cover;
  background-position: center 14%;
  background-color: #e8c98b;
}

/* The field is bright and the type over it is white, so the left-hand side
   is dropped a stop to keep the headline legible without tinting the
   photograph as a whole. */
.hbm-staff__top::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(31, 46, 22, 0.42) 0%, rgba(31, 46, 22, 0.16) 46%, rgba(31, 46, 22, 0) 68%);
}

.hbm-staff__brand {
  position: relative;
  width: min(660px, 100%);
}

/* Set as the banner sets it: white, heavy, two lines' worth of presence.
   The horizontal squeeze that stood in for a condensed face on white is
   dropped here — over a photograph it read as a printing fault. */
.hbm-staff__heading {
  margin: 0 0 14px;
  color: #fff;
  font-size: clamp(38px, 6vw, 82px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.015em;
  transform: none;
  text-shadow: 0 2px 18px rgba(20, 34, 12, 0.5);
}

.hbm-staff__address {
  margin: 0;
  color: #fff;
  font-size: clamp(14px, 1.4vw, 17px);
  font-weight: 600;
  text-shadow: 0 1px 10px rgba(20, 34, 12, 0.6);
}

/* Standing where the people stand in the home page banner: upright, and
   large enough to hold that side of the picture on their own. The
   photograph was taken with the fan on its side, so the covers read
   sideways — hbm-staff-brochures-upright.png is the same fan turned a
   quarter-turn, which stands each pamphlet on its foot and sets its cover
   the right way up. The 4° tilt the flyer added goes with it. */
.hbm-staff__brochures {
  position: relative;
  width: min(470px, 46%);
  transform: none;
  filter: drop-shadow(0 18px 30px rgba(20, 34, 12, 0.42));
}

/* ------------------------------------------------------- staff band */

/* The wheat wash of 2026-08-15 is withdrawn: flat navy again, a lighter one
   than the flyer's, and the type back to white.
   The diagonal right edge goes with it. It existed so the photo ribbon could
   straddle the boundary between navy and white; once the diamonds line up on
   a single axis there is no boundary left to straddle, and the clip left a
   bare white wedge down one side of the band and a bare navy one down the
   other. Full width, with the ribbon centred in it. */
.hbm-staff__panel::before {
  background-image: none;
  background-color: var(--staff-band);
  clip-path: none;
}

.hbm-staff__people,
.hbm-staff__rule {
  width: min(1040px, 100%);
  margin: 0 auto;
  padding-left: 0;
}

.hbm-staff__rule { margin-bottom: 30px; }

.hbm-staff__id { color: #fff; font-weight: 400; }
.hbm-staff__title { color: rgba(255, 255, 255, 0.86); }
.hbm-staff__rule { background: rgba(255, 255, 255, 0.3); }
.hbm-staff__rule::after { background: #fff; }

/* Against navy the diamonds are framed in white again, as on the flyer. */
.hbm-staff__diamond { background: #fff; }

/* The couple photographs sat level with the name beside them, which put
   them low in the row. Lifting them sets each couple between the title
   above and the name it belongs to — the Taylors between "President" and
   "Vicki Taylor", the Brocs between "General Director" and "Allison Broc". */
.hbm-staff__couple {
  align-self: start;
  margin-top: 46px;
}

/* --------------------------------------------------------- memorial */

/* Nearly square. The source is a wide snapshot, so the crop comes off the
   sides rather than stretching the two of them out of shape. */
.hbm-staff__memorial-photo {
  width: min(300px, 38%);
  aspect-ratio: 1 / 1.06;
  object-fit: cover;
  object-position: 52% 38%;
}

@media (max-width: 720px) {
  .hbm-staff__top {
    min-height: 0;
    padding: 34px 20px 30px;
    background-position: center 28%;
  }
  .hbm-staff__top::before {
    background: linear-gradient(180deg, rgba(31, 46, 22, 0.34), rgba(31, 46, 22, 0.18));
  }
  .hbm-staff__brochures { width: min(260px, 66%); }
  .hbm-staff__couple { align-self: center; margin-top: 0; }

  /* The interlock is a property of the diagonal ribbon, and the ribbon does
     not survive a narrow screen — each person becomes a stacked card, so the
     rows must not ride up into one another. Without this the negative margin
     set for the wide layout pulls every diamond over the name above it. */
  .hbm-staff__person { margin-top: 0; }

  .hbm-staff__people,
  .hbm-staff__rule { width: 100%; padding: 0 16px; }
}

/* QA, 2026-08-17: the rule's dot sat at 77% along its length with nothing to
   pair it to — a flyer flourish that reads on this page as a stray mark.
   Centred, where it looks deliberate. */
.hbm-staff__rule::after { right: 50%; transform: translate(50%, -50%); }