/* Photographs sit in lines that wrap onto the next line. Nothing scrolls
   sideways, nothing moves, nothing is cropped. Each figure is sized from the
   --photo-ratio already in the markup, so the picture's place on the page is
   correct from the first paint, before the photograph itself has downloaded. */

.event-photo-row,
.event-photo-row--landscape,
.event-photo-row--portrait,
body[data-page="culture"] .culture-gallery{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  overflow:visible;
  gap:22px;
  max-width:none;
  margin-bottom:22px;
  padding-bottom:0;
  align-items:flex-start;
}

.event-shot,
body[data-page="culture"] .gal-shot{
  flex:0 0 auto;
  width:auto;
  max-width:100%;
  margin:0;
  height:clamp(200px,calc(33vw - 60px),430px);
  aspect-ratio:var(--photo-ratio,auto);
}

/* the link around each photograph has to carry the figure's box, or the
   picture inside it falls back to its own size and overruns everything below */
.event-shot>a,
.event-shot>.photo-open,
body[data-page="culture"] .gal-shot>a,
body[data-page="culture"] .gal-shot>.photo-open{
  display:block;
  height:100%;
  width:100%;
}

.event-shot img,
body[data-page="culture"] .gal-shot img{
  height:100%;
  width:100%;
  object-fit:contain;
  display:block;
  background:var(--pale);
}

@media (min-width:961px){
  .event-story{grid-template-columns:1.25fr 1fr;column-gap:56px;align-items:start}
  .event-story>*{max-width:none}
  .event-story .culture-copy{max-width:520px}
  .event-lead{max-width:clamp(320px,52vw,760px)}
  .event-lead img{aspect-ratio:auto;object-fit:contain;width:100%;height:auto}
  .event-section-heading{max-width:860px}
  .event-gallery-section{padding-block:48px 16px}
  body[data-page="culture"] .culture-entry{display:block}
  body[data-page="culture"] .culture-entry>.culture-copy{max-width:860px;margin-bottom:22px}
  body[data-page="culture"] .culture-entry>.culture-photo{max-width:clamp(320px,52vw,760px);margin:0 0 22px}
  body[data-page="culture"] .culture-entry>.culture-photo img{aspect-ratio:auto;object-fit:contain}
}

@media (max-width:640px){
  .event-shot,
  body[data-page="culture"] .gal-shot{height:auto;width:100%;aspect-ratio:auto}
  .event-shot>a,
  .event-shot>.photo-open,
  body[data-page="culture"] .gal-shot>a,
  body[data-page="culture"] .gal-shot>.photo-open{height:auto;width:100%}
  .event-shot img,
  body[data-page="culture"] .gal-shot img{height:auto;width:100%}
}

/* The typing cursor is blue wherever someone types */
input,textarea,select,[contenteditable]{caret-color:var(--blue)}

/* Photographs do not open when tapped or clicked. The link stays in the HTML
   so search engines still see the full-size file; it just does nothing. */
.event-shot>a,
.event-shot>.photo-open,
body[data-page="culture"] .gal-shot>a,
body[data-page="culture"] .gal-shot>.photo-open,
.culture-photo>a,
.culture-photo>.photo-open,
.event-lead>a,
.event-lead>.photo-open,
.garba-shot>a,
.garba-shot>.photo-open{
  pointer-events:none;
  cursor:default;
}


/* box hugs the photograph — some figures carry an inline flex-grow that would
   stretch the box wider than the picture and leave a gap inside the border */
.event-shot,
body[data-page="culture"] .gal-shot{
  flex-grow:0 !important;
  flex-shrink:0 !important;
  flex-basis:auto !important;
}

/* photo-frame — three photographs were put inside a 3:2 window that hid part of
   the picture and scaled it up. The window is switched off: the whole photograph
   is shown, at its own size, with the line tight around it like every other. */
.event-shot .photo-frame,
body[data-page="culture"] .gal-shot .photo-frame{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:auto;
  overflow:visible;
  border:0;
}
.event-shot .photo-frame img,
body[data-page="culture"] .gal-shot .photo-frame img{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  transform:none !important;
  object-fit:contain;
  border:1px solid var(--line);
}