/*
 * gallery.css
 * Image gallery subsystem styles for ChinesePixel.
 *
 * Sources:
 *   (a) Extracted from media/com_eventgallery/dist/eventgallery.css (EventGallery 3.12.6, MIT).
 *       Kept: #events item rules, .eventgallery-imagelist thumbnail grid, .eg-img.
 *       Dropped: cart, checkout, price, Google Photos, Flickr-remote, responsive-pricing,
 *                FontAwesome icon font, all unrelated components.
 *
 *   (b) Verbatim from the inline <style> block inside the Artworks category description
 *       (it was embedded in the Joomla article body, not in the component CSS).
 */

/* ── (a) Category listing — album tiles ─────────────────────────────────── */

#events .item-container {
  float: left;
  width: 33.3333333%;
  padding: 5px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* item-container-big carries no CSS rules in the original. */
#events .item-container-big {}

#events .item {
  float: left;
  padding: 0;
  margin: 0;
  cursor: pointer;
  width: 100%;
  -webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.5);
  box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.5);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#events .item a {
  text-decoration: none;
}

#events .item .eg-content {
  padding: 0;
  margin: 0;
  position: relative;
  overflow: hidden;
  /* Square crop: force 1:1 aspect ratio so the cover image is cropped square,
     matching the original eventgallery behaviour. */
  aspect-ratio: 1;
}

#events .item .eg-content .data {
  bottom: 0;
  color: #DDD;
  opacity: 0.8;
  position: absolute;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -ms-transition: all 0.5s;
  transition: all 0.5s;
  width: 100%;
  z-index: 222;
}

#events .item .eg-content:hover .data {
  opacity: 1;
  color: #EEE;
}

#events .item .eg-content .images {
  font-size: 0;
  margin: 0;
  padding: 0;
  z-index: 1;
  height: 100%;
}

/* Cover image fills the square eg-content and is cropped to cover it. */
#events .item .eg-content .images .event-thumbnail {
  height: 100%;
}

#events .item .eg-content .images img {
  opacity: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#events .item .eg-content:hover .images img {
  opacity: 1;
}

#events .item .eg-content .thumbnails img {
  padding: 0;
  margin: 0;
}

#events .item h2 { font-size: 1em; }
#events .item h3 { font-size: 0.9em; }

#events .item .date {
  height: 18px;
  font-size: 0.7em;
  margin: 0 10px;
}

#events .item .title {
  min-height: 60px;
  font-size: 1.2em;
  overflow: auto;
  margin: 0 10px;
  word-break: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

#events .item .imagecount,
#events .item .text,
#events .item .overallCount {
  font-size: 0.8em;
  margin: 0 10px;
}

#events .item .imagecount { float: left; }
#events .item .thumbnail  { margin-top: 0; }

/* ── (a) Album page — justified thumbnail grid ───────────────────────────── */

/* Bootstrap margin-reset. */
.eventgallery-thumbnails,
.event div.thumbnails {
  margin-left: 0;
}

/* Each thumbnail wrapper — sized by cnpx-gallery.js at runtime. */
.thumbnails .thumbnail-container {
  float: left;
  position: relative;
}

.thumbnails .thumbnail {
  margin: 3px;
  display: block;
  font-size: 0;
  line-height: 0;
}

/* Let the <a> shrink-wrap the img (width: auto from .thumbnail-container a).
   overflow: hidden clips the image to Bootstrap's border-radius.
   Bootstrap's padding:4px, border:1px and gallery.css margin:3px stay intact. */
.eventgallery-imagelist a.event-thumbnail.thumbnail {
  display: block;
  overflow: hidden;
}

/* ── PhotoSwipe playpause button ────────────────────────────────────────── */
/* The button uses FontAwesome 5 Solid (already bundled in the project).
   Initial state class is "play"; cnpx-lightbox.js toggles to "pause". */
.pswp .pswp__button--playpause {
  color: white;
  display: block;
  background: none;
  width: 44px;
  height: 44px;
}

.pswp .pswp__button--playpause::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 15px;
  color: white;
  display: block;
  text-align: center;
  line-height: 44px;
}

.pswp .pswp__button--playpause.play::before  { content: "\f04b"; }
.pswp .pswp__button--playpause.pause::before { content: "\f04c"; }

.pswp .pswp_hide { display: none !important; }

.thumbnail-container a {
  width: auto;
}

a.event-thumbnail {
  display: inline-block;
  position: relative;
}

img.eg-img {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

/* ── (a) Album page — event header ──────────────────────────────────────── */

.event .thumbnails .thumbnail img {
  margin: 0 !important;
}

/* ── (b) Inline overrides from the Artworks category description ─────────── */

#events .item .eg-content .data        { background-color: rgba(0,0,0,0.75); }
#events .item .eg-content:hover .data  { background-color: rgba(0,0,0,0.9); }

.eventgallery-category-headline {
  margin-top: 0px;
  font-size: 28px;
  line-height: 30px;
  font-family: 'My_Nevis', sans-serif;
  text-transform: uppercase;
  font-weight: normal;
  text-align: center;
  color: rgb(0, 0, 0);
}

#events .item .date      { font-weight: normal; }
#events .item .imagecount{ font-weight: normal; }