/* ==========================================================================
   Portrait Card block (Figma 1709-2590)
   Transparent portrait clipped to a hexagon in one of three theme colours,
   with name + role beneath. Loaded in the editor and on the front end
   (functions/blocks.php → acf_register_block_type enqueue_style).
   ========================================================================== */

.pw-portrait-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

/* Sized to the (taller) portrait mask; the hexagon background sits at the
   bottom, the masked portrait fills the box and overhangs the hexagon top. */
.pw-portrait-card__media {
  position: relative;
  width: 205px;
  max-width: 100%;
  aspect-ratio: 204.583 / 227.173;
  margin: 0 auto;
}

/* Hexagon colour background (SVG), bottom-aligned. Recoloured via `fill`. */
.pw-portrait-card__hex {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 98.74%;
  height: auto;
}

.pw-portrait-card__hex path {
  fill: var(--pw-portrait-bg, #bd673d);
}

/* Portrait masked to the "shield" path, bottom-aligned over the hexagon. */
.pw-portrait-card__img,
.pw-portrait-card__placeholder {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-mask: url("portrait-mask.svg") center bottom / 100% 100% no-repeat;
          mask: url("portrait-mask.svg") center bottom / 100% 100% no-repeat;
}

.pw-portrait-card__img {
  object-fit: cover;
  object-position: top center;
}

.pw-portrait-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background-color: rgba(45, 42, 39, 0.08);
  color: #2d2a27;
  font-size: 13px;
  line-height: 1.3;
  text-align: center;
}

.pw-portrait-card__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #2d2a27;
  letter-spacing: 1px;
  line-height: 1.2;
}

.pw-portrait-card__name {
  margin: 0;
  font-family: 'Pure Sans', sans-serif;
  font-weight: 700;
  font-size: 20px;
}

.pw-portrait-card__role {
  margin: 0;
  font-family: 'Pure Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
}