/* =============================================================================
   PHOTOLOG IMAGE GROUPS — the justified row
   =============================================================================
   Two or more photos presented side by side as one statement (diptych,
   triptych, before/after). Rendered by portfolio/_photolog_group_media.html.

   Loaded by BOTH project shells: portfolio/project.html (classic) and
   portfolio/journal/project.html (journal). Journal deliberately does not load
   project.css, and forking these rules into journal.css would mean fixing every
   future bug twice — hence a small file of its own rather than a copy.

   The layout is pure CSS, no JS:

     flex-basis: 0  +  flex-grow: <aspect-ratio>   (set inline per photo)

   makes each item's width proportional to its aspect ratio, so the whole row
   shares one height and nothing is cropped. `aspect-ratio: var(--ar)` reserves
   the right box before the image loads, so the row does not reflow.
   ========================================================================== */

.pf-group-row {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  gap: var(--pf-group-gap, 0.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pf-group-item {
  flex-basis: 0;
  flex-shrink: 1;
  /* flex-grow is set inline from the photo's aspect ratio */
  aspect-ratio: var(--ar, 1.5);
  overflow: hidden;
  /* min-width: 0 means the row never wraps at desktop/tablet widths — a group
     is one row by definition, and that is what "justified by height" promises.
     Wrapping is introduced deliberately, per photo count, at phone widths only
     (see the media query at the bottom). */
  min-width: 0;
}

/* The box already carries the photo's own aspect ratio, so `cover` fills it
   without visibly cropping anything. It is `cover` rather than `contain` only
   to absorb sub-pixel rounding at the box edges. */
.pf-group-row .pf-group-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* styles.css sets a global `img { padding: 0 1.5pt }` on classic sites; the
     row owns its spacing via `gap`, so cancel it here. */
  padding: 0;
  margin: 0;
  /* ...and the same for the classic presets' natural-width cap, which applies
     to a lone photo but would fight the row. */
  max-width: none;
  /* lightbox.js binds to .gallery-image, so a grouped photo opens like any
     other. The cursor is the only thing that says so. */
  cursor: zoom-in;
}

/* --- phones ---------------------------------------------------------------
   Two decisions, and the second one is the subtle one.

   WHICH groups wrap. A diptych at half width and a triptych at a third still
   read, and splitting them destroys the composition — so 2 and 3 stay in one
   row at any width. Four or more wrap, using the count the template emits.

   HOW they wrap. The obvious `min-width: 50%` is wrong: it pins both items in a
   line to the same width, so a landscape and a portrait next to each other come
   out at different heights and the row stops being justified at all — the one
   thing this layout promises.

   Instead the floor is PROPORTIONAL to the photo's aspect ratio. That keeps the
   justification exact, and the proof is short: a line forms only while the
   floors fit, i.e. `unit * Σar ≤ line width`. Flexbox then hands each item
   `ar / Σar` of the line, which is `≥ unit * ar` — its own floor. So no floor is
   ever binding inside a line, widths stay exactly proportional to aspect ratio,
   and every line is justified independently.

   The unit is what decides how many fit: at 7rem a typical four-up breaks 2 + 2
   and a five-up 2 + 2 + 1, while four portraits still fit one row (they are
   narrow, so they earn it).
   ------------------------------------------------------------------------- */
@media (max-width: 30rem) {
  .pf-group-row {
    --pf-group-gap: 0.375rem;
  }

  .pf-group-row:not([data-count="2"]):not([data-count="3"]) .pf-group-item {
    min-width: calc(var(--ar, 1.5) * 7rem);
  }
}

/* =============================================================================
   TEXT CELLS — prose set INTO the row, not above or below it
   =============================================================================
   A Collage can hold a text block as one of its cells (Collage only; a Diashow
   shows one photo at a time and the API refuses prose in one). The cell takes a
   square's worth of the row's justification weight — see
   PortfolioProjectTextBlock.CELL_FLEX_GROW — so it behaves like any other item
   and the row stays justified.

   Two structural exceptions, both necessary:

     * NO aspect-ratio and NO overflow clip. Every photo cell is a fixed box
       with its content cropped to fit; text has to be allowed to be as tall as
       it is, and clipping it would silently swallow the owner's last sentence.
     * A min-width floor, despite `min-width: 0` being deliberate on photo cells
       (it is what keeps a group to one row). A photograph squeezed to 90px is
       still a photograph; a paragraph squeezed to 90px is a column of syllables.
       So a text cell is allowed to force the row to wrap — the one case where
       wrapping beats keeping the promise.

   Typography is set on the CELL, not on the text block inside it, and that is
   load-bearing: this stylesheet also loads on `simple` projects, where
   photolog_essay.css is absent and .pf-essay__text has no rules at all.
   Inherited values dress the prose there, and are overridden by
   .pf-essay__text's own (equal-specificity, explicit) rules wherever the essay
   sheet IS loaded. Nothing has to know which page it is on.

   The owner's own choices — typeface, size, alignment — deliberately still
   apply in here. Those are voice, and voice should survive its container. Only
   the two settings that are meaningless in a narrow cell are overruled below. */

.pf-group-item--text {
  aspect-ratio: auto;
  overflow: visible;
  /* Against a row of photographs, prose reads as a panel set into the wall
     rather than as a caption fallen to the top of it. */
  align-self: center;
  min-width: min(100%, 15rem);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--pfe-ink-muted, #4c4546);
  text-wrap: pretty;
}
.pf-group-item--text p { margin: 0 0 1.1em; }
.pf-group-item--text > * > *:last-child { margin-bottom: 0; }
/* Two columns inside one cell of an already-columnar row is a grid fighting
   itself, and the reading measure is gone either way. */
.pf-group-item--text .pf-essay__text--2col { columns: auto; }

/* --- Per-cell captions ----------------------------------------------------
   A row of photographs carries ONE caption for the whole group. The moment
   prose sits in the row that shared caption reads as if it belonged to the
   text — so a row WITH a text cell captions each photograph underneath itself
   instead, and the group's own caption slot stays for the group.

   The aspect ratio moves from the item to an inner media box, which is what
   lets a caption hang below without being counted into the ratio (and without
   being clipped by the overflow rule that crops the photograph). The row's
   `align-items: flex-start` then top-aligns the items, so every photograph
   still shares one height and one baseline — captions of different lengths
   hang below without disturbing that.

   A row with no text cell never matches any of this and renders exactly the
   markup and geometry it did before text cells existed. */
.pf-group-row--celltext {
  /* The row now ends in captions of its own, and the GROUP's caption follows
     directly beneath it. Without this the two sit on consecutive lines at the
     same left edge and read as one four-line caption — the reader cannot tell
     which words belong to the photograph and which to the collage. The gap is
     what separates the two voices. */
  margin-bottom: 0.75rem;
}
.pf-group-row--celltext .pf-group-item {
  aspect-ratio: auto;
  overflow: visible;
}
.pf-group-row--celltext .pf-group-item__media {
  display: block;
  aspect-ratio: var(--ar, 1.5);
  overflow: hidden;
}
.pf-group-cellcap {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin-top: 10px;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--pfe-ink-muted, #4c4546);
}
.pf-group-cellcap-title {
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pfe-ink, #1a1c1c);
}

@media (max-width: 30rem) {
  /* On a phone a text cell always takes the full width: sharing a line with a
     photograph at this size leaves neither of them room to be read or seen. */
  .pf-group-row .pf-group-item--text { min-width: 100%; }
}