/* ============================================================
   Hybrid Renovations — Careers Criteria
   ------------------------------------------------------------
   Scoped under .hr-careers-criteria. Tokens only. The only
   hardcoded colours are #fff (heading) and #C7D2DC (body) on the
   dark tiles; the navy gradient is built from var(--hr-navy) via
   color-mix. Green appears once: the tile numbers. No animation,
   so no reduced-motion block belongs here.
   ============================================================ */

/* Half the usual section padding top and bottom, so this sits closer to the
   modules above and below it. */
.hr-careers-criteria { padding: calc(var(--section-y) / 2) 0; }
.hr-careers-criteria *,
.hr-careers-criteria *::before,
.hr-careers-criteria *::after { box-sizing: border-box; }

.hr-careers-criteria__w {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.hr-careers-criteria__header {
  max-width: 680px;
  margin: 0 auto clamp(24px, 3vw, 36px);
  text-align: center;
}
.hr-careers-criteria__eyebrow {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-display); font-size: .75rem; font-weight: var(--fw-extrabold);
  letter-spacing: .14em; text-transform: uppercase; color: var(--hr-blue);
}
.hr-careers-criteria h2 {
  margin: 0;
  font-family: var(--font-display); font-size: clamp(21px, 2.7vw, 32px);
  font-weight: var(--fw-extrabold); line-height: 1.12; letter-spacing: -.018em; color: var(--hr-navy);
}

/* ---------- The tiled container ----------
   Column count from the item count; three fixed rows the tiles share:
   a 1fr spacer that pushes content to the base, then heading, then body. */
.hr-careers-criteria__g {
  display: grid;
  grid-template-columns: repeat(var(--cc-n, 3), minmax(0, 1fr));
  grid-template-rows: 1fr auto auto;
  gap: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}
.hr-careers-criteria__r {
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;      /* adopt the parent's spacer/heading/body rows */
  position: relative;
  isolation: isolate;
  min-height: 290px;
  padding: var(--sp-6);
  background: var(--hr-surface-alt); /* shows through when no photo is set */
}
.hr-careers-criteria__r img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
/* Contrast guardrail: keeps the caption legible over any uploaded photo. */
.hr-careers-criteria__r::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--hr-navy) 20%, transparent) 25%,
    color-mix(in srgb, var(--hr-navy) 95%, transparent) 100%);
}
.hr-careers-criteria__spacer { grid-row: 1; }
.hr-careers-criteria__head   { grid-row: 2; }
.hr-careers-criteria__body   { grid-row: 3; }

.hr-careers-criteria__num {
  display: block; margin-bottom: var(--sp-2);
  font-family: var(--font-display); font-size: .6875rem; font-weight: var(--fw-extrabold);
  letter-spacing: .14em; text-transform: uppercase; color: var(--hr-green);
}
.hr-careers-criteria__h {
  margin: 0;
  font-family: var(--font-display); font-size: 1.125rem; font-weight: var(--fw-extrabold);
  line-height: 1.2; color: #fff;
}
.hr-careers-criteria__body,
.hr-careers-criteria__body p {
  margin: 0;
  font-family: var(--font-sans); font-size: .8125rem; line-height: 1.6; color: #C7D2DC;
}
.hr-careers-criteria__body p + p { margin-top: var(--sp-2); }

/* Fallback where subgrid is unsupported: bottom-anchor each tile with flex and
   accept minor heading misalignment rather than breaking the layout. */
@supports not (grid-template-rows: subgrid) {
  .hr-careers-criteria__r { display: flex; flex-direction: column; justify-content: flex-end; }
  .hr-careers-criteria__spacer { display: none; }
}

/* Desktop / tablet: under subgrid the empty 1fr spacer row collapses to 0, and
   the grid's overflow:hidden clips any tile min-height — so the tiles (and the
   photos filling them) came out short. Give the spacer row a real height so the
   row tracks, and therefore every tile and its photo, grow ~30% taller. Width
   is unchanged. The min-height covers the non-subgrid flex fallback. */
@media (min-width: 881px) {
  .hr-careers-criteria__g { grid-template-rows: 163px auto auto; }
  .hr-careers-criteria__r { min-height: 320px; }
}

/* ---------- Mobile (<=880px): one column, tiles stack with a hairline ---------- */
@media (max-width: 880px) {
  .hr-careers-criteria__g { grid-template-columns: 1fr; grid-template-rows: none; }
  .hr-careers-criteria__r {
    grid-row: auto; grid-template-rows: none;
    display: flex; flex-direction: column; justify-content: flex-end;
  }
  .hr-careers-criteria__spacer { display: none; }
  .hr-careers-criteria__r + .hr-careers-criteria__r {
    border-top: 1px solid color-mix(in srgb, #fff 16%, transparent);
  }
}