/* The events list.
   Markup: layouts/events/events-list.html.

   A vertical list of strips. Each strip is [ date + title + short text ] with
   a thumbnail at the left, and the thumbnail enlarges over the page when
   clicked. */

.events {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

/* One grid, two arrangements of the same three parts, so the markup does not
   change between them — only where the picture sits.

   Wide screens keep the large picture: it spans both rows down the left, with
   the heading and the summary stacked beside it. There is room for it there,
   and it is the more inviting of the two.

     head    thumb
     summary thumb

   Phones cannot afford that. An 8rem picture is a third of the width, which
   squeezes the summary into a narrow column that wraps after two or three
   words, and it sets the strip's height whether the text fills it or not — so
   each strip carries a band of empty white. There the picture shrinks to sit
   beside the heading only, and the summary takes the whole width underneath:

     head    thumb
     summary summary

   The site is RTL, so the first column named is the right-hand one. `head
   thumb` therefore puts the heading at the reading start and the picture at
   the left, which is also the source order — nothing needs reordering. */
.event {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8rem;
  grid-template-areas:
    "head    thumb"
    "summary thumb";
  column-gap: 1.25rem;
  row-gap: 0.5rem;
  align-items: start;
  background: #fff;
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.event-head {
  grid-area: head;
  min-width: 0; /* let long words wrap instead of stretching the strip */
}

.event-date {
  display: block;
  font-size: 0.875rem;
  color: #555; /* mid-gray: #777 measures 4.48:1 here, just under AA */
}

.event-title {
  font-size: 1.25rem;
  line-height: 1.25;
  margin: 0.25rem 0 0.5rem;
}

.event-summary {
  grid-area: summary;
  min-width: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #555;
}

.event-empty {
  color: #555;
}


/* ------------------------------------------------------- the thumbnail */

/* Wide screens: a fixed square down the left of the strip, pinned to the top
   of the two rows it spans. */
.event-thumb {
  grid-area: thumb;
  display: block;
  align-self: start;
  width: 8rem;
  height: 8rem;
  cursor: zoom-in;
}

.event-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Hugo already crops to a square; this keeps it honest */
  display: block;
}




/* ------------------------------------------------ the control that opens it

   The checkbox pattern, as used by the nav: no JavaScript, and it still works
   with scripting off. The strip's square and the enlarged picture are two
   different files, both generated by Hugo from the one image in the event's
   folder. The thumbnail keeps its box while the picture is open — nothing in
   the list moves — so closing puts the reader back exactly where they were.
   The enlarged view itself is further down this file. */

.event-zoom {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0; /* not display:none — keeps focus order, toggles with Space */
}

.event-zoom:focus-visible ~ .event-thumb {
  outline: 3px solid #0b4f9e;
  outline-offset: 2px;
}

.event-zoom:checked ~ .event-thumb {
  cursor: zoom-out;
}




/* ------------------------------------------------------------ narrow screens */

/* Phones. The picture moves up beside the heading and the summary takes the
   full width beneath, as described at the top of this file. */
@media screen and (max-width: 30em) {
  .event {
    grid-template-columns: minmax(0, 1fr) 5rem;
    grid-template-areas:
      "head    thumb"
      "summary summary";
    column-gap: 0.875rem;
    padding: 1rem;
  }

  /* A square, pinned to the top of the heading — not stretched to match its
     height. Stretching looked right in the abstract and wrong on a phone: at
     414px the title wraps to two lines, so a fixed-width column stretched to
     that height gave a 64x78 vertical sliver, off-square, too small to make
     the photo out, and lopsided beside the heading. A plain square is smaller
     than the desktop 8rem but still legible, and it cannot be deformed by a
     heading of any length. */
  .event-thumb {
    align-self: start;
    width: 5rem;
    height: 5rem;
  }

  .event-title {
    font-size: 1.125rem;
  }
}


/* The enlarged view.

   Two real elements, not pseudo-elements: the label is the backdrop and the
   span inside it is the picture. An earlier version painted both as ::before
   and ::after on the thumbnail and they came out *under* the site header
   rather than over it, despite a z-index of 9000; two ordinary elements with a
   single z-index between them behave predictably.

   The picture is a CSS background rather than an <img>, and that is not a
   stylistic choice. The <img> version could not be made to load at the right
   moment without JavaScript: one that starts out display:none with
   loading="lazy" is never queued by Chrome, and revealing it does not start
   the load either — measured here, the enlarged copy still reported
   currentSrc of none 3.6s after being shown, i.e. the view stayed blank
   behind its backdrop indefinitely. A background image on a display:none
   element generates no box and so is not fetched, and is fetched when the
   :checked rule first paints it. */

.event-zoomed {
  display: none;
}

.event-zoom:checked ~ .event-zoomed {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  cursor: zoom-out;
  /* Below the accessibility widget (9999) and its skip link (10000) on
     purpose: a visitor who is mid-way through changing contrast or text size
     must not be locked away from those controls by an open image. */
  z-index: 9000;
}

/* Capped at the picture's own pixel size, passed in from Hugo, so a small
   photo is shown at its true size instead of being stretched to the viewport
   and going soft. `contain` then fits it inside that box. */
.event-zoomed-img {
  display: block;
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(92vw, var(--event-w, 92vw));
  height: min(92vh, var(--event-h, 92vh));
  background: var(--event-full) center / contain no-repeat;
}