/* ==========================================================================
   Pictures inside a prose page.

   BugHerd #33, Randy, on the Happiness Guarantee: "Can we add the Happiness
   guarantee logo to this page and at least one image of a child having a
   blast?"

   Prose pages were words only — the block list in templates/prose.mjs had no
   image type at all — so this is the styling for the one that was added.

   Two shapes, because the page needs two different things. A photograph runs
   the full width of the 44rem prose column and is cropped to 16:10. A badge is
   artwork, not a photograph: it keeps its own proportions, sits centred, and
   is capped at 220px so a 500x500 logo does not become a 700px block in the
   middle of a paragraph.

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

.prose__figure{
  margin:2.25rem 0;
  line-height:0;
}

.prose__figure > .ph,
.prose__figure > img{
  width:100%;
  height:auto;
  display:block;
  border-radius:var(--card-radius,24px);
}

.prose__figure > img{
  aspect-ratio:16/10;
  object-fit:cover;
}

.prose__figure figcaption{
  margin-top:.75rem;
  font-size:var(--step--1);
  line-height:1.5;
  color:var(--text-soft);
  text-align:center;
}

/* Artwork, not a photograph. */
.prose__figure--badge{
  text-align:center;
}
.prose__figure--badge > img,
.prose__figure--badge > .ph{
  width:auto;
  max-width:min(220px,60%);
  margin-inline:auto;
  aspect-ratio:auto;
  border-radius:0;
}

/* ==========================================================================
   Headshots on Meet Our Team.

   BugHerd #51, Randy: "We need to get the tops of our heads in the image:)"

   I read that as a reshoot request and left the ticket open for one. It was
   not. Both portraits in the bucket have generous room above the head — the
   crop on this site is what removes it.

   A team card draws a SQUARE window onto a portrait photograph. object-fit:
   cover keeps the full width and trims the top and bottom equally, so on a
   2:3 portrait the visible band is the middle two thirds and the top sixth of
   the frame — where the top of a head lives — is outside it.

   object-position slides that window rather than scaling anything: at 18% it
   sits near the top of the photograph, so the head is comfortably inside and
   what gets lost is a little shirt at the bottom, which is the right thing to
   lose. Nothing is re-cropped in the bucket and no photograph is enlarged.

   Scoped to .team because it is only true of portraits. A wide photograph in
   a card still wants its own centre.
   ========================================================================== */
.team .program__media img{
  object-position:50% 18%;
}

/* Desktop: a badge at the top of a written page sits in the empty column to
   the right of the text, large, instead of a small mark above it with half
   the page blank beside the words (Randy, BugHerd #117, Happiness Guarantee,
   10/15/2026: "I don't love the desktop layout of this page."). */
@media (min-width:1100px){
  .prose:has(> .prose__figure--badge:first-child){position:relative}
  .prose > .prose__figure--badge:first-child{
    position:absolute;top:0;left:calc(100% + clamp(2.5rem,5vw,5rem));
    width:clamp(220px,22vw,320px);margin:0;
  }
  .prose > .prose__figure--badge:first-child > img{max-width:100%;width:100%}
}

/* A photo that needs its own shape (BugHerd #261: the medal photo, cropped
   to leave the coach out). */
.prose__figure--natural > img{aspect-ratio:auto;max-width:640px;margin-inline:auto}