/* ==========================================================================
   Step cards, with photographs.

   Randy, in BugHerd against /preschool/, September 21, 2026: "Replace the
   numbers in each section with images to show the children in care. Look for
   a parent and child for the Gym-n-Learn box."

   The old card opened with a 58px tinted square holding a numeral. Fine as a
   wayfinding device, useless at showing anybody — which is his point. Four
   numerals in a row tell a parent the order of things and nothing about the
   place their child would be spending the morning.

   Amy, on the first pass: "remove the numbers. maybe make the scale larger."

   So the numeral is gone entirely — no badge either — and the photograph now
   bleeds to the edges of the card rather than sitting inside its padding.
   279x209 against the 231x144 it started at, which is about 75% more picture
   for the same card.

   Worth knowing if the numbers are ever wanted back: the Preschool block they
   were removed from is "Programs, ages and days" — three options and a
   footnote, not a sequence, so numbering it was arguably wrong to begin with.
   The Gymnastics block IS a sequence ("Four steps to your first class"), and
   that is the one place where losing the numerals costs something real.

   4:3 rather than 16:10. A wider crop suited the numeral-sized slot; at full
   card width it turns every photograph into a letterbox and throws away the
   part of the frame with the faces in it.

   Loaded by templates/page.mjs.
   ========================================================================== */

.pillar__shot{
  /* Bleeds to the card's padding box. The card keeps its 6px coloured top
     border above this, which is what still identifies the card. */
  margin:-28px -24px 1.25rem;
  /* 22px, not the card's 28px: the top border sits outside the padding box,
     so the inner corner is tighter than the outer one and a matching 28px
     would leave a sliver of white in each top corner. */
  border-radius:22px 22px 0 0;
  overflow:hidden;
  aspect-ratio:4/3;
  line-height:0;
  background:var(--bg-alt,#f6f6f6);
}

/* Normalises both children this slot can hold: a real <img>, and the labelled
   placeholder that layout.mjs renders when the CMS has no photograph yet. The
   placeholder brings its own aspect-ratio, which would otherwise fight the
   one above. */
.pillar__shot > *{
  width:100%;
  height:100%;
  display:block;
  aspect-ratio:auto;
}
.pillar__shot img{object-fit:cover}

/* The placeholder's label is sized for a large slot and needs to stop
   shouting inside a card this narrow. It stays legible on purpose — these
   are the outstanding shots, and the build prints every one of them. */
.pillar__shot .ph__label{font-size:.74rem;line-height:1.32}
.pillar__shot .ph__tag{font-size:.6rem}

/* Lily pad numbers on a numbered steps block (BugHerd #193). The pad sits on
   the card's top-left corner and overlaps it a little, as Natalie sketched. */
.pillar--num{position:relative}
.pillar__pad{
  position:absolute;top:-22px;left:-16px;z-index:2;width:70px;height:70px;
  display:grid;place-items:center;filter:drop-shadow(0 4px 8px rgba(18,0,82,.25));
}
.pillar__pad svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(0)}
.pillar__pad b{position:relative;color:#fff;font-family:var(--display);font-weight:800;
  font-size:2rem;line-height:1;text-shadow:0 1px 3px rgba(0,0,0,.3);margin:6px 4px 0 0}