/*
 * ponticlaro/gallery, Column (column.php): one image after another, each the
 * column's full width, whole, with the same space below each.
 */
.ponticlaro-gallery.is-style-column {
  --column-gap: 32px;

  display: flex;
  flex-direction: column;
  gap: var(--column-gap);
}

.ponticlaro-gallery.is-style-column .ponticlaro-gallery__item > * {
  margin: 0;
}

.ponticlaro-gallery.is-style-column img {
  display: block;
  width: 100%;
  height: auto;
}

/*
 * A browser frame's picture carries room for its shadow on every side: 7% of
 * the window's width (SHADOW.margin in etc/ponticlaro-media/frames.js -- keep
 * the two in step). Drawn 14% wider and pulled back by 7% each way, the window
 * itself is the column's width and the item's box is exactly the window, so the
 * gap between two images is the gap above, not the gap plus two shadows. The
 * shadow still shows, overhanging the box. A margin's percentage is of the
 * column's width, as the shadow's room is of the window's.
 *
 * The overhang is transparent but would still take clicks -- in the editor it
 * lay over the text above and made it unreachable -- so the picture takes none:
 * a click on the window falls to the item's box, which is the window, and
 * zooms; a click on the shadow falls to whatever is beneath it.
 *
 * Phones and tablets size their shadow by their longest side, so they keep it.
 */
.ponticlaro-gallery.is-style-column [class*='is-frame-browser'] .ponticlaro-framed__image {
  width: 114%;
  max-width: none;
  margin: -7%;
  pointer-events: none;
}

@media (max-width: 991px) {
  /* The overhanging shadow, never wider than the page. */
  .ponticlaro-gallery.is-style-column {
    overflow-x: clip;
  }
}

@media (max-width: 767px) {
  .ponticlaro-gallery.is-style-column {
    --column-gap: 20px;
  }
}

/*
 * Between a gallery and what comes after it -- text, when a gallery is split
 * into parts with writing between them -- a pause larger than the gap between
 * images: 48px above the text, and 32px (after the text's own 16px margin)
 * below it, before the next part.
 */
.wp-block-ponticlaro-gallery:has(.is-style-column) + * {
  margin-top: 48px;
}

* + .wp-block-ponticlaro-gallery:has(.is-style-column) {
  margin-top: 32px;
}

/* Beside a section, on a wide screen, the first part starts level with it. */
@media (min-width: 992px) {
  .ponticlaro-section.is-aside + .wp-block-ponticlaro-gallery {
    margin-top: 0;
  }
}