/* ============================================================
   St. James School — Faculty & Staff card grid
   Page class: faculty-staff (menu item 141)
   Gantry outline 11 (Gemini - School Outline) — Page Settings > Assets
   Layout reference: saintrosalie.com/about-us/staff
   Grid is container-driven (auto-fill), so it also reflows
   inside the 844px main column instead of the viewport.
   ============================================================ */

.faculty-staff .blogfaculty-staff {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  align-items: stretch;
  margin: 0;
}

.faculty-staff .blogfaculty-staff .items-row { margin: 0; }
.faculty-staff .blogfaculty-staff .items-row > [class*="span"] {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

/* ---------- the card ---------- */
.faculty-staff .blogfaculty-staff .item {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  background: #fff;
  border: 1px solid #e3e8f0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 9px rgba(34, 52, 94, 0.09);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.faculty-staff .blogfaculty-staff .item:hover {
  box-shadow: 0 10px 24px rgba(34, 52, 94, 0.18);
  transform: translateY(-2px);
}

/* ---------- photo: fixed 4:5 frame, never cropped off-centre ---------- */
.faculty-staff .blogfaculty-staff .item-image,
.faculty-staff .blogfaculty-staff .pull-left.item-image {
  float: none !important;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #eef1f6;
}

.faculty-staff .blogfaculty-staff .item-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  margin: 0;
  border: 0;
  border-radius: 0;
}

/* any stray image left inside the body text is not part of the card */
.faculty-staff .blogfaculty-staff .teacherbox img { display: none; }

/* ---------- text block ---------- */
.faculty-staff .blogfaculty-staff .teacherbox {
  flex: 1 1 auto;
  padding: 12px 10px 16px;
  text-align: center;
}

.faculty-staff .blogfaculty-staff .teacherbox p {
  margin: 0 0 2px;
  line-height: 1.45;
}

.faculty-staff .blogfaculty-staff .teacherbox strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #22345E;
}

.faculty-staff .blogfaculty-staff .teacherbox em,
.faculty-staff .blogfaculty-staff .teacherbox .staff-role {
  display: block;
  font-style: normal;
  font-size: 12.5px;
  color: #5a6478;
  margin-top: 2px;
}

.faculty-staff .blogfaculty-staff .teacherbox a {
  font-size: 12px;
  color: #1b4b8f;
  text-decoration: none;
  word-break: break-word;
}

.faculty-staff .blogfaculty-staff .teacherbox a:hover { text-decoration: underline; }

/* ---------- page heading ---------- */
.faculty-staff .page-header {
  margin: 0 0 18px;
  border: 0;
}

.faculty-staff .page-header h1,
.faculty-staff .page-header h2 {
  font-size: 30px;
  font-weight: 600;
  color: #22345E;
  margin: 0;
}

/* ---------- small screens ---------- */
@media (max-width: 520px) {
  .faculty-staff .blogfaculty-staff { gap: 16px; }
  .faculty-staff .blogfaculty-staff .teacherbox strong { font-size: 14px; }
}

/* the page heading is a child of the blog wrapper, so keep it out of the
   card grid — otherwise it eats the first cell of row 1 */
.faculty-staff .blogfaculty-staff > .page-header {
  grid-column: 1 / -1;
  margin: 0 0 4px;
}

/* ---------- single staff article view (item-page wrapper gets the
   page class appended too, hence the doubled name) ---------- */
.faculty-staff .item-pagefaculty-staff > img {
  float: none !important;
  display: block;
  margin: 0 auto 16px;
  max-width: 240px;
  height: auto;
  border-radius: 12px;
}

.faculty-staff .item-pagefaculty-staff .teacherbox { text-align: center; }

.faculty-staff .item-pagefaculty-staff .teacherbox strong {
  display: block;
  font-size: 20px;
  color: #22345E;
}

.faculty-staff .item-pagefaculty-staff .teacherbox em {
  display: block;
  font-style: normal;
  color: #5a6478;
  margin: 2px 0 8px;
}

/* page title across the top of the grid — override the theme's
   italic / uppercase h1 treatment so it reads as a page title */
.faculty-staff .blogfaculty-staff > .page-header {
  grid-column: 1 / -1;
  margin: 0 0 6px;
  padding: 0 0 10px;
  border-bottom: 2px solid #e3e8f0;
}

.faculty-staff .blogfaculty-staff > .page-header h1 {
  font-size: 32px;
  line-height: 1.2;
  font-weight: 600;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  color: #22345E;
  margin: 0;
  text-align: left;
}

/* ---------- equal card heights ----------
   The grid item used to be the .items-row wrapper, which is a plain block
   containing a floated span, so a shorter card (no email line) collapsed.
   Flattening the wrappers makes .item itself the grid cell, so it always
   fills the row height and .teacherbox (flex:1) absorbs the slack. */
.faculty-staff .blogfaculty-staff > .items-row,
.faculty-staff .blogfaculty-staff > .items-row > [class*="span"] {
  display: contents;
}

/* ---------- equal card heights (v2) ----------
   display:contents on the row wrappers broke the grid's auto-placement
   (every card landed in column 1 on its own row), so the wrappers stay in
   the grid and are turned into flex columns instead. The grid row sets the
   height, the flex chain passes it down, and .teacherbox (flex:1) absorbs
   the slack — so a card with no email line is exactly as tall as its
   neighbours. */
.faculty-staff .blogfaculty-staff > .items-row,
.faculty-staff .blogfaculty-staff > .items-row > [class*="span"] {
  display: block;
}

.faculty-staff .blogfaculty-staff > .items-row {
  display: flex;
  flex-direction: column;
}

.faculty-staff .blogfaculty-staff > .items-row > [class*="span"] {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  min-height: 100%;
}

.faculty-staff .blogfaculty-staff .item {
  flex: 1 1 auto;
  height: auto;
}

/* every row the same height, so a row of cards without an email line is
   exactly as tall as a row with one (1fr rows in an auto-height grid
   all resolve to the tallest row) */
.faculty-staff .blogfaculty-staff {
  grid-auto-rows: 1fr;
}

/* keep the page-title row out of the 1fr sizing, or the heading row swells
   to a card row's height */
.faculty-staff .blogfaculty-staff {
  grid-template-rows: auto;
}