/* Defines the gallery grid on photo-related pages */

:root {
  --max-gallery-width: 1600px;
}

main:has(.gallery) {
  /* Override normal rule that lessens the width by --fake-side-margin */
  width: 100%;
  max-width: var(--max-gallery-width);
}

section:has(.gallery) {
  max-width: var(--max-gallery-width);

  & > :not(.gallery) {
    max-width: var(--max-content-width);
    /* All non-gallery children still have to have the fake padding/margin. */
    width: calc(100% - (var(--fake-side-margin) * 2));
    margin-left: auto;
    margin-right: auto;
  }
}

.gallery {
  --row-height: 360px;

  display: grid;
  grid-auto-flow: dense;
  grid-auto-rows: var(--row-height);

  width: 100%;
  max-width: var(--max-gallery-width);
  gap: 4px;

  figure {
    place-self: stretch;
    margin: 0;
  }

  img, video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
  }

  /* Captions display additional information upon hover inside a gallery element. */
  figure:has(figcaption) {
    position: relative;

    &:hover {
      figcaption { opacity: 1; }
    }

    figcaption {
      line-height: 1lh;
      font-size: 10.5pt;
      padding: 8px;

      /* Element is invisible until we hover. */
      opacity: 0;
      transition: opacity 0.25s;

      position: absolute;
      bottom: 0;
      border-radius: 0 0 2px 2px;
      /* Can't add margin the normal way, because we're using position:
         absolute. */
      width: calc(100% - 16px);

      background-color: rgba(255, 255, 255, 0.93);
      color: #000000;
    }

    img, video {
      border-radius: 4px;
    }

    background-color: rgba(0, 0, 0, 0.08);
    border-radius: 4px;
  }


  /* On my Pixel 7 most of the photo isn't visible if the row height is set to
    its normal value. I think this is due to the pixel density of the display,
    so we use a value relative to the display height here. */
  @media (resolution > 1x) {
    --row-height: 30vh;
  }

  @media (width < 800px) {
    /* On smaller displays, show one column. */
    grid-template: var(--row-height) / 1fr;

    .wide { grid-column: span 2; }
    .tall { grid-row: span 2; }
  }

  @media ((width >= 800px) and (width < 1700px)) {
    /* Within this range, the aspect ratio starts to get a little funky if we
       keep the height hard-coded to a single value. We make it relative to the
       width because the width of the grid cells is relative to the width of
       the viewport. This way, if the width increases, the aspect ratio stays
       roughly the same. */
    --row-height: 30vw;

    /* For medium-sized windows, we use two columns. */
    grid-template: var(--row-height) / 1fr 1fr;

    .large, .wide, .col-2-large, .col-2-wide {
      grid-column: span 2;
    }
    .large, .tall, .col-2-large, .col-2-tall {
      grid-row: span 2;
    }
  }

  @media (width >= 1700px) {
    /* Wider windows, such as a fullscreened laptop window, get a view with 3
       columns. */
    grid-template: var(--row-height) / 1fr 1fr 1fr;

    .large, .wide, .col-3-large, .col-3-wide {
      grid-column: span 2;
    }
    .large, .tall, .col-3-large, .col-3-tall {
      grid-row: span 2;
    }

  }
}