/* ARTWORK NOTES -------------------------------------------------------------
   Page ......... Faculty & Staff  (/about-us/faculty-staff)
   Linked from ... Gantry outline 14 > Page Settings > Assets (row "Staff Cards",
                   priority 0, so it loads after the Override row)
   Purpose ....... One consistent gap between each staff portrait and the name
                   below it.

   Why the cards differ. Each staff member is one article, and its HTML was
   hand-pasted at different times inside a Category Blog layout. A card holds
   its portrait inside .teacherbox and its name in a following block, and the
   space between the two comes from a different source on different cards:
     - a <br> straight after the portrait, which starts an empty line (~21px)
       whenever the portrait renders as a block
     - a portrait in its own <p>, whose 20.8px paragraph margin does the same
     - a name paragraph that already carries its own top margin
   So the gap was ~3px on some cards, ~28px on others and ~33px on the rest.

   The rules below remove every one of those sources and set a single 10px gap.
   Scoped to div.item, which is one staff card; the stylesheet is only linked
   on this page's outline.

   Careful: the name block has its own <br> tags (name / title / phone / email
   lines). Only breaks that follow the portrait may be removed, which is why
   rule 1 lists each portrait-side pattern instead of matching every <br>.
   -------------------------------------------------------------------------- */

/* 1. No phantom line: a <br> immediately after the portrait adds an empty
      line when the image renders as a block. Drop only those. */
html body div.item .teacherbox > br,
html body div.item .teacherbox > div > br,
html body div.item img + br,
html body div.item p:has(img) + br {
  display: none;
}

/* 2. The portrait, and the paragraph that may wrap it, carry no space of
      their own — otherwise an inline descender sits under the photo. */
html body div.item img {
  display: block;
  margin: 0 auto;
}

html body div.item p:has(img),
html body div.item div:has(> img) {
  margin-top: 0;
  margin-bottom: 0;
}

/* 3. One fixed gap above the name block. */
html body div.item p:has(strong):not(:has(img)) {
  margin-top: 10px;
}

/* 4. One card (Mrs. Diana Welch) opens its name with an empty <br> inside the
      <strong>, which leaves a blank line between the portrait and the name.
      Drop that leading break so the card matches the rest. */
html body div.item strong > br:first-child {
  display: none;
}

/* 5. Mrs. Welch's name shares the portrait's own paragraph, so there is no
      paragraph margin to fall back on. Give the name the same 10px lift the
      other cards get, so her card lines up with the rest of its row. */
html body div.item p:has(> img) > a > strong {
  display: block;
  margin-top: 10px;
}

/* 5b. The value the other cards resolve to is 13px (10px margin plus the
      inline leading that follows a block portrait). Match it exactly. */
html body div.item p:has(> img) > a > strong {
  margin-top: 13px;
}