/* ==========================================================================
   Simple pages: About, Kontakt and Impressum / Datenschutz
   All three run on the default template, so this file loads on all three. It
   holds exactly one thing: the card that frames a run of prose images. Every
   colour token, every surface pair and every scale token comes from style.css.
   Nothing is redefined here.

   Loaded automatically by the @auto entry in snippets/head.php, which resolves
   assets/css/templates/<template>.css for the current template. There is no
   registration step, the file name is the wiring.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The figure card
   Same construction as .gallery-card in templates/project.css section 2 and
   .project-card on the home grid: flat fill, --rule-w ink rule, --radius
   corners and a hard offset shadow with no blur at --shadow-x.

   The template wraps every unbroken run of image blocks in one of these, so
   the About page's two photos share a single frame instead of carrying one
   each. See templates/default.php for the run logic.

   It carries .s-cream itself, exactly as .gallery-card does, so --surface and
   --on-surface are cream and ink inside it whatever colour the page behind it
   is. That is redundant on About today, which is cream already, and it is kept
   anyway: the card should not change meaning the day a simple page gets a
   colour, and half a convention is worse than none.

   Note what that costs here and why it is not a bug: cream on cream gives the
   card no fill contrast, so it reads as an outline plus its shadow. That is
   what was asked for. Do not tint it to compensate, a second cream would be a
   seventh palette colour.

   margin-block, not just a bottom margin: the shadow hangs --shadow-x below
   the border box without taking up any layout space, so the paragraph after
   the card needs more clearance than a paragraph after a paragraph. Adjacent
   margins collapse, so this is a floor, not an addition: the larger of this
   and the neighbouring <p> margin wins.

   No negative margins and no 100vw. The shadow fits to the right because
   .content carries padding-inline: var(--gutter) and --gutter is at least as
   wide as --shadow-x at every breakpoint.
   -------------------------------------------------------------------------- */

.figure-card {
  /* Stacked by default. Two portrait photos side by side at 375px are each
     under 170px wide, which is too small to read a face in, so the phone gets
     one column and the row starts at 768px below. */
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap) * 0.5);

  margin-block: var(--gap);
  padding: calc(var(--gap) * 0.5);
  background: var(--surface);
  color: var(--on-surface);
  border: var(--rule-w) solid var(--c-ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-x) var(--shadow-x) 0 var(--c-ink);
}

/* flex-grow is the image's own aspect ratio, not 1, and the basis is still
   zero: in a row where every figure is shown at the same height H, a figure
   whose image has ratio r wants width H * r, so giving each figure a grow
   factor of r splits the row's width in exactly that proportion and every
   photo comes out the same height. That is the ratio-by-flex-grow maths, not
   an approximation of it. Two photos with different intrinsic ratios used to
   get equal-width columns and therefore different heights, an empty strip of
   cream under the shorter one and a card bottom edge that matched neither
   photo. See site/snippets/blocks/image.php for where --ratio comes from.

   The 1 fallback inside var() is load bearing, not defensive noise: an image
   whose ratio could not be computed (external URL, missing file, zero
   height, see the block snippet's guards) emits no --ratio at all, and
   without the fallback an unset custom property in a flex-grow position
   resolves to nothing usable, not to a sane default. Falling back to 1 keeps
   that figure at today's equal-width behaviour instead of collapsing to zero
   width and vanishing from the row.

   min-width: 0 is the usual flex trap. A flex item's automatic minimum size is
   its content's min-content width, which for a replaced element is its
   intrinsic width, so a wide photo would refuse to shrink below it and push
   the card past the content area.

   margin: 0 is also set on .content figure in style.css section 10, and it is
   repeated here on purpose. Kirby's block snippet emits a bare <figure>, which
   carries a user agent margin of 1em on all four sides, and that margin inside
   a card is not air, it is a visible inset of the page colour. The card owns
   its own interior rather than inheriting that guarantee from somewhere else.
   -------------------------------------------------------------------------- */
.figure-card figure {
  flex: var(--ratio, 1) 1 0;
  min-width: 0;
  margin: 0;
}

/* The image fills its column.

   max-width and max-height both override style.css section 10, and both have
   to: 75% of the column would leave a ragged right edge inside the frame, and
   the 20vw height cap at 768px is worse than it looks. When a replaced element
   has a width and hits a max-height, the browser scales the width down with it
   to keep the aspect ratio, so the photo would shrink away from its own column
   and sit left of centre in it. Both caps exist for a bare prose image sitting
   on the page, which is a different situation, so they are overridden here
   rather than removed there. Same specificity as section 10, this file loads
   after style.css, so it wins on order.

   display: block removes the descender gap an inline replaced element leaves
   under itself, which would otherwise show as a sliver of cream between the
   photo and the bottom of the card.

   The radius is derived from --radius rather than reusing it, the same call
   as the gallery images inside .gallery-card: a corner nested inside a rounded
   box and drawn at the parent's own radius reads pinched, because it has less
   surface to sweep across before it has to close.

   No ink rule on the image. The card is the frame now, that is the entire
   point of this treatment, and a rule inside a rule reads as a double edge. */
.figure-card figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: none;
  height: auto;
  border-radius: calc(var(--radius) * 0.6);
}

@media screen and (min-width: 768px) {
  .figure-card {
    flex-direction: row;

    /* No align-items here on purpose. It used to be flex-start, back when
       every figure got an equal-width column and different aspect ratios
       therefore produced different heights: flex-start kept two mismatched
       photos hanging from one top line instead of floating against each
       other's centres. Now that the flex-grow above sizes each column by its
       own image's ratio, every figure in the row comes out the same height,
       measured in the browser at 1280px: flex-start, stretch and centre all
       render the row identically to well under a pixel. With nothing left
       to align, the property is dead weight, so it is left out rather than
       kept as a hedge. Reintroduce it only if a run ever mixes an image
       whose --ratio could not be computed (the var() falls back to 1) with
       one that could, since that pairing can still differ in height. */
  }
}