/*
 * The gallery, as the chitalishte's visitors know it from the Joomla site.
 *
 * Event Gallery's own stylesheet lays the album name over the photograph on a
 * dark wash, three across with no gutter. The old site overrode both, and this
 * is that result written out directly: a white card inset from its neighbours,
 * the picture filling the top of it, and the name and the count underneath,
 * centred. Writing it out rather than fighting a component's rules is the
 * whole point of the theme drawing the gallery itself.
 */

/*
 * The title of a gallery page is a page title like any other, so nothing is
 * said about it here. Two rules used to be: they cut it to 1.9rem and took the
 * rule from under it, which is why the gallery's heading was half the size of
 * every other page's and sat on its own. .page-header and .page-title in
 * custom.css draw it now.
 */

/* ------------------------------------------------- the list of albums */

#events { margin: 0 -24px; }
#events:after { content: ""; display: block; clear: both; }

#events .item-container {
  position: relative;
  float: left;
  width: 33.3333%;
  padding: 0;
  box-sizing: border-box;
  cursor: pointer;
}
/* a square tile: the card is absolute inside it, so the box has to make room */
#events .item-container:after { content: ""; display: block; padding-top: 100%; }

/*
 * Inset the card, not the container. The card is absolute with width:auto and
 * left/right offsets; padding on the container would resolve its 100% against
 * the padding box and leave the gap looking like a hairline whatever the value.
 */
#events .item-container .item {
  position: absolute;
  left: 24px; right: 24px; top: 24px; bottom: 24px;
  width: auto; height: auto;
  background: #fff;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--rule, #E5DDD0);
  transition: box-shadow .2s ease, transform .2s ease;
}
#events .item-container:hover .item {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px var(--rule-strong, #D8CDB8);
}

#events .item .eg-content { display: flex; flex-direction: column; height: 100%; }

/* the picture gives up whatever room the caption takes */
#events .item .eg-content .images { order: 1; flex: 1 1 0; min-height: 0; overflow: hidden; margin: 0; padding: 0; font-size: 0; }
#events .item .eg-content .images .event-thumbnail,
#events .item .eg-content .images .event-thumbnail > a { display: block; height: 100%; }
#events .item .eg-content .images img { display: block; width: 100%; height: 100%; object-fit: cover; }

#events .item .eg-content .data {
  order: 2;
  flex: 0 0 auto;
  padding: 10px 14px 12px;
  background: #fff;
  color: var(--main-text-color, #241F1C);
}

/* two lines as a minimum, not a height: a long name still grows */
#events .item .eg-content .data .title {
  margin: 0;
  min-height: 36px;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  word-break: break-word;
}
#events .item .eg-content .data .imagecount {
  margin: 3px 0 0;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  color: var(--secondary-text-color, #5A5048);
}

#events .eg-nocover { display: block; width: 100%; height: 100%; background: #ede7dc; }

@media (max-width: 991px) {
  #events { margin: 0 -14px; }
  #events .item-container .item { left: 14px; right: 14px; top: 14px; bottom: 14px; }
}
@media (max-width: 767px) {
  #events { margin: 0 -8px; }
  #events .item-container { width: 50%; }
  #events .item-container .item { left: 8px; right: 8px; top: 8px; bottom: 8px; }
  #events .item .eg-content .data { padding: 8px 10px 10px; }
  #events .item .eg-content .data .title { font-size: 12px; }
}
@media (max-width: 479px) { #events .item-container { width: 100%; } }

/* the pages: see custom.css, which every page loads -- these buttons serve
   the article listings as well now */

/* ---------------------------------------------------------- one album */

.eg-page .event .text { margin-bottom: 1.25rem; color: var(--secondary-text-color, #5A5048); }

.eventgallery-thumbnails.eventgallery-imagelist { display: flex; flex-wrap: wrap; gap: 8px; }
.eventgallery-thumbnails .thumbnail-container { flex: 1 1 260px; height: 250px; }
.eventgallery-thumbnails .thumbnail-container a.event-thumbnail {
  display: block; width: 100%; height: 100%;
  padding: 0; overflow: hidden; border-radius: 3px;
  background: #f4f0ea;
  box-shadow: 0 0 0 1px var(--rule, #E5DDD0);
}
.eventgallery-thumbnails .thumbnail-container img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .35s ease;
}
.eventgallery-thumbnails .thumbnail-container a:hover img { transform: scale(1.05); }
@media (max-width: 767px) { .eventgallery-thumbnails .thumbnail-container { flex-basis: 150px; height: 160px; } }

.eg-page .eg-back { margin-top: 1.5rem; }

/* ------------------------------------------------------- the viewer */

.eg-viewer {
  position: fixed; inset: 0; z-index: 2000;
  display: none; align-items: center; justify-content: center;
  background: rgba(20, 16, 14, .93);
  padding: 40px 64px 64px;
}
.eg-viewer.is-open { display: flex; }
.eg-viewer-image { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 3px; }
.eg-viewer-caption {
  position: absolute; left: 0; right: 0; bottom: 16px;
  padding: 0 24px; text-align: center; color: #eee; font-size: 14px;
}
.eg-viewer-close,
.eg-viewer-nav {
  position: absolute; z-index: 1;
  background: none; border: 0; color: #fff; cursor: pointer;
  line-height: 1; opacity: .75; transition: opacity .2s ease;
}
.eg-viewer-close:hover,
.eg-viewer-nav:hover { opacity: 1; }
.eg-viewer-close { top: 10px; right: 18px; font-size: 40px; }
.eg-viewer-nav { top: 50%; transform: translateY(-50%); font-size: 64px; padding: 0 16px; }
.eg-viewer-prev { left: 4px; }
.eg-viewer-next { right: 4px; }
@media (max-width: 767px) {
  .eg-viewer { padding: 48px 8px 56px; }
  .eg-viewer-nav { font-size: 44px; padding: 0 6px; }
}