/* Pictures inside an article body: /article/<slug> and the /admin-news
   preview. The editor inserts this markup (public/resources/js/admin-news.js):

     <figure class="news-figure"><img ...><figcaption>...</figcaption></figure>
     <figure class="news-gallery"><a href=...><img ...></a> ...</figure>

   A single picture keeps its own shape; a tall one is capped in height so a
   portrait phone photo cannot fill three screens. A gallery crops every tile
   to the same box so mixed shapes still line up -- 3:2, or 9:16 when every
   picture in it is portrait (--tall); the link opens the full picture. */

.ap__content .news-figure {
  margin: 1.6rem 0;
  text-align: center;
}

.ap__content .news-figure img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(80vh, 900px);
  margin: 0 auto;
  border-radius: 10px;
}

.ap__content .news-figure figcaption {
  margin-top: 0.5rem;
  color: var(--subtext);
  font-size: 0.85rem;
  line-height: 1.5;
}

.ap__content .news-figure figcaption:empty {
  display: none;
}

.ap__content .news-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  margin: 1.6rem 0;
}

.ap__content .news-gallery a {
  display: block;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(127, 127, 127, 0.12);
}

.ap__content .news-gallery img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 0;
  transition: transform 0.25s ease;
}

.ap__content .news-gallery a:hover img {
  transform: scale(1.03);
}

.ap__content .news-gallery--tall {
  /* auto-fit: two posters share the row instead of leaving empty columns. */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* Phone-shaped: a 9:16 poster or portrait photo shows whole. */
.ap__content .news-gallery--tall img {
  aspect-ratio: 9 / 16;
}

@media (max-width: 520px) {
  .ap__content .news-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
}