/* =====================================================================
   Event pages: the gallery index and the six event write-ups.

   Two things live here that the main stylesheet does not cover:

   1. .ev-*    the heading, standfirst and call-to-action band these
               pages use, which are spaced differently from the rest of
               the site (the old page builder gave them their own values)
   2. .pgal    the photo galleries, in the three shapes the old site
               used: a column gallery ("pin"), a big-picture gallery
               ("asym") and a fixed-height strip ("square")

   Phone first, like site.css. The gallery shapes change at 768px, and
   the picture captions stop being permanent at 1025px because that is
   where the old site swapped them for a hover.
   ===================================================================== */

/* ------------------------------------------------------- page framing */

/* an event write-up: title, standfirst, galleries, all in one column */
.ev-section { padding: 30px 0; }
.ev-section > .container { padding-inline: 15px; text-align: center; }

/* the gallery index: its row runs the full width of the window */
.ev-wide { padding: 50px 15px; text-align: center; }

/* the live event titles are set in the light-bold 600 weight */
.ev-title {
  margin: 0;
  padding: 0;
  font-weight: 600;
  font-size: 28px;
  line-height: 1.5;
  color: var(--blue);
}
.ev-section .ev-title { text-align: left; }

.ev-subtitle {
  margin: 9px 0 8px;
  padding: 2px 0;
  font: 300 18px/1.4 var(--font-head);
  color: var(--ink-strong);
}

.ev-subtitle--after { margin-top: 5px; }

.ev-lead { margin: 9px 0 8px; padding: 2px 0; }
.ev-lead--narrow { width: 672px; max-width: 100%; margin: 15px auto 8px; line-height: 1.5; }

.ev-subhead { margin: 25px 0 8px; padding: 2px 0; font-size: 18px; text-align: left; }
.ev-section .pgal { margin: 10px 0; }
.ev-wide .pgal { margin: 28px 0 10px; }
.ev-section .pgal--square { margin: 15px 0 10px; }
.ev-copy { margin: 15px 0 8px; padding: 2px 0; line-height: 1.5; text-align: left; }

/* the deep blue band at the foot of the gallery index */
.ev-cta { padding: 30px 0; background: var(--blue-dark); color: var(--white); text-align: center; }
.ev-cta__title { margin: 0 0 19px; color: var(--white); font-size: 28px; line-height: 1.2; }
/* on a phone the old site stretched this button across the column */
.ev-cta .btn { display: flex; width: auto; margin: 0; }

/* ----------------------------------------------------------- galleries

   Every gallery is a box with a small padding, so that the space around
   the outside matches the space between the pictures. --pgal-gap is that
   space; the pictures themselves crop to a fixed shape.                */

.pgal { --pgal-gap: 0px; padding: var(--pgal-gap); }
.pgal--gap10 { --pgal-gap: 6px; }
.pgal--square { --pgal-gap: 6px; }

.pgal__row { display: flex; flex-wrap: wrap; gap: var(--pgal-gap); }
.pgal__row + .pgal__row, .pgal__more .pgal__row { margin-top: var(--pgal-gap); }
.pgal__col { display: grid; gap: var(--pgal-gap); align-content: start; flex: none; }

.pgal__tile {
  display: block;
  position: relative;
  overflow: hidden;
  background: #f2f2f2;
}
.pgal__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pgal__tile--low { aspect-ratio: 4 / 3; }
.pgal__tile--high { aspect-ratio: 4 / 5; }

/* phone: a column gallery becomes two columns, or one where the old
   site kept the pictures in their original order (.pgal--unwind)      */
.pgal--pin .pgal__col { width: calc((100% - var(--pgal-gap)) / 2); }
.pgal--pin .pgal__col--split { display: contents; }
.pgal--pin .pgal__col--split > * { width: calc((100% - var(--pgal-gap)) / 2); }

.pgal--unwind .pgal__row { display: grid; grid-template-columns: minmax(0, 1fr); }
.pgal--unwind .pgal__col { display: contents; }
.pgal--unwind .pgal__col:nth-child(1) > :nth-child(1) { order: 1; }
.pgal--unwind .pgal__col:nth-child(2) > :nth-child(1) { order: 2; }
.pgal--unwind .pgal__col:nth-child(3) > :nth-child(1) { order: 3; }
.pgal--unwind .pgal__col:nth-child(1) > :nth-child(2) { order: 4; }
.pgal--unwind .pgal__col:nth-child(2) > :nth-child(2) { order: 5; }
.pgal--unwind .pgal__col:nth-child(3) > :nth-child(2) { order: 6; }

/* the fixed-height strip of house pictures */
.pgal--square .pgal__col { width: 100%; }
.pgal--square .pgal__tile { height: 184px; }

/* the big-picture gallery. The shapes repeat every eight pictures:
   big, half, half, long, half, half, long, big. On a phone each cycle
   is one square, two half squares and one wide strip.                 */
.pgal--asym {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pgal-gap);
}
.pgal--asym > * { aspect-ratio: 1; }
.pgal--asym > :nth-child(4n + 1) { grid-column: 1 / -1; }
.pgal--asym > :nth-child(4n) { grid-column: 1 / -1; aspect-ratio: 2 / 1; }

/* picture captions. On a phone and a tablet they sit on the picture all
   the time; from desktop up they appear when you point at it.         */
.pgal__cap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 23px;
  background: rgba(93, 93, 93, .4);
  color: var(--white);
  font: 700 22px/1.3 var(--font-head);
  text-align: left;
}

/* "View more": a checkbox with no script behind it. On a phone the old
   site showed half as many rows, so there are two hidden blocks: the
   wide one comes back by itself from tablet width up.                  */
.pgal__toggle { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pgal__more { display: none; }
.pgal__toggle:checked ~ .pgal__more { display: block; }
.pgal__more-btn {
  display: block;
  padding: 3px 6px;
  text-align: left;
  color: var(--blue-link);
  cursor: pointer;
}
.pgal__more-btn:hover { color: var(--blue-dark); }
.pgal__toggle:checked ~ .pgal__more-btn .pgal__more-open,
.pgal__more-btn .pgal__more-shut { display: none; }
.pgal__toggle:checked ~ .pgal__more-btn .pgal__more-shut { display: inline; }
.pgal__toggle:focus-visible ~ .pgal__more-btn { outline: 3px solid var(--blue); outline-offset: 2px; }

/* --------------------------------------------- tablet and up: the real
   layouts, which tablets share with desktops                          */
@media (min-width: 768px) {
  .ev-section { padding: 70px 0 30px; }
  .ev-section > .container { padding-inline: var(--gutter); }
  .ev-wide { padding: 100px 20px; }

  /* the old theme sat its big headings on a half-height line; the space
     above and below the title only matches the old site with it */
  .ev-title { margin: 8px 0; padding: 2px 0; font-size: 50px; line-height: .5; }
  .ev-section .ev-title { text-align: center; }
  .ev-subtitle { margin-top: 5px; font-size: 25px; }
  .ev-lead { margin-top: 16px; }
  .ev-lead--narrow { max-width: calc(100% - 129px); }
  .ev-subhead { margin-top: 40px; font-size: 25px; }
  .ev-section .pgal { margin: 40px 0 10px; }
  .ev-section .pgal--square { margin: 20px 0; }

  .ev-cta { padding: 100px 0; }
  .ev-cta__title { margin-top: 30px; font-size: 50px; }
  .ev-cta .btn { display: inline-flex; margin: 13px 0 30px; }

  /* the gallery index sits in from the left, as it does today */
  .ev-wide .pgal { margin: 15px 0 0 126px; }

  /* galleries: five pixels of air, ten on the gallery index */
  .pgal { --pgal-gap: 5px; }
  .pgal--gap0 { --pgal-gap: 0px; }
  .pgal--gap10 { --pgal-gap: 10px; }

  .pgal__row { flex-wrap: nowrap; }
  .pgal--unwind .pgal__row { display: flex; }
  .pgal--unwind .pgal__col { display: grid; }
  .pgal--unwind .pgal__col > * { order: 0; }

  .pgal--pin .pgal__col--split { display: grid; }

  .pgal--c2 .pgal__col { width: calc((100% - var(--pgal-gap)) / 2); }
  .pgal--c3 .pgal__col { width: calc((100% - 2 * var(--pgal-gap)) / 3); }
  .pgal--c4 .pgal__col { width: calc((100% - 3 * var(--pgal-gap)) / 4); }
  .pgal--c5 .pgal__col { width: calc((100% - 4 * var(--pgal-gap)) / 5); }

  .pgal__more--wide { display: block; }

  .pgal--square .pgal__tile { height: 215px; }

  .pgal--asym {
    grid-template-columns: repeat(10, 1fr);
    grid-auto-flow: row dense;
  }
  .pgal--asym > * { aspect-ratio: auto; }
  .pgal--asym > :nth-child(8n + 1) { grid-column: 1 / span 4; grid-row: span 2; }
  .pgal--asym > :nth-child(8n + 2) { grid-column: 5 / span 3; }
  .pgal--asym > :nth-child(8n + 3) { grid-column: 8 / span 3; }
  .pgal--asym > :nth-child(8n + 4) { grid-column: 5 / span 6; }
  .pgal--asym > :nth-child(8n + 5) { grid-column: 1 / span 3; }
  .pgal--asym > :nth-child(8n + 6) { grid-column: 4 / span 3; }
  .pgal--asym > :nth-child(8n + 7) { grid-column: 1 / span 6; }
  .pgal--asym > :nth-child(8n + 8) { grid-column: 7 / span 4; grid-row: span 2; }
  .pgal--asym > :nth-child(8n + 2),
  .pgal--asym > :nth-child(8n + 3),
  .pgal--asym > :nth-child(8n + 5),
  .pgal--asym > :nth-child(8n + 6) { aspect-ratio: 6 / 5; }
  .pgal--asym > :nth-child(8n + 4),
  .pgal--asym > :nth-child(8n + 7) { aspect-ratio: 12 / 5; }
  /* the two big pictures take their height from the two rows they span */
  .pgal--asym > :nth-child(8n + 1),
  .pgal--asym > :nth-child(8n + 8) { aspect-ratio: auto; }
}

/* the strip of house pictures is four across on a tablet */
@media (min-width: 768px) and (max-width: 1024px) {
  .pgal--t4 .pgal__col { width: calc((100% - 3 * var(--pgal-gap)) / 4); }
}

/* ------------------------------------------------ desktop: captions on
   hover, the way the old site behaved with a mouse                     */
@media (min-width: 1025px) {
  /* visibility, not just opacity: it keeps the caption out of the
     accessibility tree while it is hidden, and it is the only way a
     full-page screenshot leaves it out. */
  .pgal__cap {
    align-items: center;
    justify-content: center;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    transform: scale(1.05);
    transition: visibility .3s, opacity .3s ease-out, transform .3s ease-out;
  }
  .pgal__tile:hover .pgal__cap,
  .pgal__tile:focus-visible .pgal__cap {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
  }
}

/* The galleries the live site gave a hover zoom to carry .pgal--zoom; the
   picture grows by six per cent inside its frame. */
.pgal--zoom .pgal__tile img { transition: transform .2s ease-out; }
.pgal--zoom .pgal__tile:hover img,
.pgal--zoom .pgal__tile:focus-visible img { transform: scale(1.06); }