/* ————————————————————————————————————————————
   lil bit cycling v2 — galleries in rows by shape

   An uncropped gallery (inc/gallery.php groups its figures into rows and
   gives each its shape as --r, width over height). In a row every figure
   grows in proportion to its shape from a zero basis, so the widths come
   out proportional to the shapes — which is the same as saying the
   pictures share one height — and together they fill the column. A short
   last row that would tower over the others takes fixed widths instead
   (--share of the tallest full row's width) and sits at the left.
   ———————————————————————————————————————————— */

.wp-block-gallery.lbc-gallery-rows {
  --lbc-gap: var(--wp--style--unstable-gallery-gap, 16px);
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--lbc-gap);
}
.lbc-gallery-row {
  display: flex;
  align-items: flex-start;
  gap: var(--lbc-gap);
  width: 100%;
}
.wp-block-gallery.lbc-gallery-rows .lbc-gallery-row > figure.wp-block-image {
  flex: calc(var(--r, 1.5) * 1000) 1 0%;
  width: auto;
  min-width: 0;
  margin: 0;
}
.wp-block-gallery.lbc-gallery-rows .lbc-gallery-row.is-short > figure.wp-block-image {
  flex: 0 0 calc((100% - var(--gaps, 0) * var(--lbc-gap)) * var(--share, 1));
}
.wp-block-gallery.lbc-gallery-rows .lbc-gallery-row > figure.wp-block-image > a,
.wp-block-gallery.lbc-gallery-rows .lbc-gallery-row > figure.wp-block-image > a > img,
.wp-block-gallery.lbc-gallery-rows .lbc-gallery-row > figure.wp-block-image > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--r, 1.5);
  object-fit: cover; /* only ever a hair, when the file's size and the shape disagree */
}

/* phones: a row divided by shape is fine at 1100px and cruel at 360px, so
   the rows dissolve — portraits two up (cut to a common 2:3 so they line
   up), everything else the full width, in document order */
@media (max-width: 600px) {
  .wp-block-gallery.lbc-gallery-rows { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .lbc-gallery-row { display: contents; }
  /* widths as flex-basis: core sets the figures' width with an id selector
     (:not(#individual-image)), which nothing else outranks — a basis does */
  .wp-block-gallery.lbc-gallery-rows .lbc-gallery-row > figure.lbc-full,
  .wp-block-gallery.lbc-gallery-rows .lbc-gallery-row.is-short > figure.lbc-full { flex: 0 0 100%; }
  .wp-block-gallery.lbc-gallery-rows .lbc-gallery-row > figure.lbc-half,
  .wp-block-gallery.lbc-gallery-rows .lbc-gallery-row.is-short > figure.lbc-half { flex: 0 0 calc(50% - var(--lbc-gap) / 2); }
  .wp-block-gallery.lbc-gallery-rows .lbc-gallery-row > figure.lbc-half > a > img,
  .wp-block-gallery.lbc-gallery-rows .lbc-gallery-row > figure.lbc-half > img { aspect-ratio: 2 / 3; }
}