/* Pull the exposed filter block up into the banner's reserved space */
.views-exposed-form {
  position: relative !important;
  z-index: 2 !important;
  margin: -54px auto 24px !important;
  max-width: 640px !important;
}

/* BEF auto-submits on click via the Links widget - hide the Apply button */
.views-exposed-form .form-actions,
.views-exposed-form .views-submit-button {
  display: none !important;
}

/* Style the BEF "Links" filter as pill buttons */
.views-exposed-form .bef-links {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 10px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.views-exposed-form .bef-links li {
  margin: 0 !important;
}
.views-exposed-form .bef-links a {
  display: inline-block !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #E01A4F !important;
  background: #fff !important;
  padding: 12px 22px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background .15s ease, color .15s ease !important;
}
.views-exposed-form .bef-links a:hover {
  background: #f2f2f2 !important;
}
.views-exposed-form .bef-links li.active a,
.views-exposed-form .bef-links a.active {
  background: #1f1f1f !important;
  color: #fff !important;
}

@media (max-width: 480px) {
  .views-exposed-form .bef-links {
    gap: 8px !important;
  }
  .views-exposed-form .bef-links a {
    font-size: 13px !important;
    padding: 10px 16px !important;
  }
}

#block-icpn-drupal-theme-galleryfilter[id^="block-"]
{
	margin-bottom: 10px !important;
}
#block-icpn-drupal-theme-views-block-gallery-block-1[id^="block-"]
{
	text-align: left !important;
}

/* === Gallery grid === */
.views-view-responsive-grid {
  --views-responsive-grid--layout-gap: 28px !important;
}

.views-view-responsive-grid__item-inner {
  position: relative;
  background: #fff;
  padding: 25px 20px 26px;
  box-shadow: 0 6px 18px rgba(58, 58, 58, 0.12);
  font-family: var(--font-body, 'Nunito', Arial, Helvetica, sans-serif);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.views-view-responsive-grid__item-inner:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(58, 58, 58, 0.18);
}

/* Decorative pinned dot */
/* Base dot (fallback / 1st card in each cycle of 6) */
.views-view-responsive-grid__item-inner::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 15px;
  height: 15px;
  border-radius: 30%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  z-index: 2;
  background: #E01A4F;
}

/* Cycle through the campaign palette, 6 colors repeating */
.views-view-responsive-grid__item:nth-child(6n+1) .views-view-responsive-grid__item-inner::before { background: #E01A4F; }
.views-view-responsive-grid__item:nth-child(6n+2) .views-view-responsive-grid__item-inner::before { background: #F15946; }
.views-view-responsive-grid__item:nth-child(6n+3) .views-view-responsive-grid__item-inner::before { background: #F9C22E; }
.views-view-responsive-grid__item:nth-child(6n+4) .views-view-responsive-grid__item-inner::before { background: #53B3CB; }
.views-view-responsive-grid__item:nth-child(6n+5) .views-view-responsive-grid__item-inner::before { background: #AE90C3; }
.views-view-responsive-grid__item:nth-child(6n)   .views-view-responsive-grid__item-inner::before { background: #F6B0BD; }

/* === Media (image/video/audio/document) === */
.views-field-field-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #3A3A3A;
  cursor: pointer;
  margin-bottom: 10px;
}

/* neutralize Drupal's wrapper divs so they don't affect layout */
.views-field-field-media > div,
.views-field-field-media div {
  height: 100%;
  margin: 0;
}

.views-field-field-media img,
.views-field-field-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.views-field-field-media video::-webkit-media-controls {
  display: none !important;
}

.views-field-field-media.has-video::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 52px;
  transform: translate(-50%, -50%);
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polygon points='9,7 18,12 9,17' fill='%233A3A3A'/></svg>") no-repeat center / 40%;
  border-radius: 50%;
  box-shadow: 0 3px 8px rgba(0,0,0,0.25);
  pointer-events: none;
}
/* Audio / PDF: hide the raw native element (kept in DOM for JS to read
   its src/href) and show a centered icon inside the same aspect-ratio box
   used by image/video, instead of a separate fixed-height box. */
.views-field-field-media:has(audio) audio,
.views-field-field-media:has(.file a) span {
  display: none;
}

/* Tinted backgrounds instead of flat black, using the campaign palette */
.views-field-field-media:has(audio) {
  background: linear-gradient(135deg, rgba(83, 179, 203, 0.25), rgba(83, 179, 203, 0.45));
}

.views-field-field-media:has(.file a) {
  background: linear-gradient(135deg, rgba(174, 144, 195, 0.25), rgba(174, 144, 195, 0.45));
}

.views-field-field-media:has(audio)::after,
.views-field-field-media:has(.file a)::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 88px;
  height: 88px;
  transform: translate(-50%, -50%);
  background: #fff no-repeat center / 46%;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(58, 58, 58, 0.25);
  pointer-events: none;
}

.views-field-field-media:has(audio)::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%2353B3CB' d='M14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77zM16.5 12A4.5 4.5 0 0 0 14 7.97v8.05A4.5 4.5 0 0 0 16.5 12zM3 9v6h4l5 5V4L7 9H3z'/></svg>");
}

.views-field-field-media:has(.file a)::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23AE90C3' d='M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9l-7-7zm4 17H7V4h5v6h5v9z'/></svg>");
}

/* Small type badge, bottom-left of the media box, on top of the tint */
.views-field-field-media:has(audio)::before,
.views-field-field-media:has(.file a)::before {
  content: 'AUDIO';
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 3;
  font-family: var(--font-head, 'Montserrat', sans-serif);
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  color: #fff;
  background: rgba(58, 58, 58, 0.55);
  padding: 4px 9px;
  border-radius: 30px;
  pointer-events: none;
}

.views-field-field-media:has(.file a)::before {
  content: 'DOCUMENT';
}

/* === Submitter name === */
.views-field-field-submitter-name {
  font-family: var(--font-head, 'Montserrat', sans-serif);
  font-weight: 700;
  font-size: 1.05rem;
  color: #3A3A3A;
  text-transform: capitalize;
  margin-bottom: 6px;
}

/* === Event pill (single accent color) === */
.views-field-field-event {
  margin-bottom: 8px;
}

.views-field-field-event a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body, 'Nunito', Arial, Helvetica, sans-serif);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 30px;
  background: rgba(224, 26, 79, 0.12);
  color: #E01A4F;
  text-decoration: none;
}

.views-field-field-event a:hover {
  background: rgba(224, 26, 79, 0.2);
}

/* === Caption === */
.views-field-field-caption {
  font-size: 0.9rem;
  line-height: 1.4;
  color: #6b6b6b;
}

/* Give the grid room so tilted corners don't clip */
.views-view-responsive-grid__item-inner {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Alternate tilt: odd cards lean left, even cards lean right */
.views-view-responsive-grid__item:nth-child(odd) .views-view-responsive-grid__item-inner {
  transform: rotate(-2deg);
}

.views-view-responsive-grid__item:nth-child(even) .views-view-responsive-grid__item-inner {
  transform: rotate(2deg);
}

/* Straighten out + lift slightly on hover */
.views-view-responsive-grid__item-inner:hover {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: 0 10px 24px rgba(58, 58, 58, 0.18);
}

/* === Lightbox modal === */
.fisi-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 999;
  align-items: center;
  justify-content: center;
}
.fisi-modal-overlay.active {
  display: flex;
}
.fisi-modal-content {
  max-width: 90vw;
  max-height: 90vh;
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  position: relative;
}
.fisi-modal-content img,
.fisi-modal-content video {
  max-width: 100%;
  max-height: 80vh;
  display: block;
}
.fisi-modal-content audio {
  width: 400px;
  max-width: 80vw;
  display: block;
}
.fisi-modal-content iframe {
  width: 80vw;
  height: 80vh;
  border: none;
}
.fisi-modal-close {
  position: absolute;
  top: -40px;
  right: 0;
  color: #fff;
  font-size: 32px;
  cursor: pointer;
  background: none;
  border: none;
}


/* =========================================
   FILTER BAR
   ========================================= */
.ecpn-filterbar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 24px 16px !important;
}
/* =========================================
   BUTTON GROUP
   ========================================= */
.ecpn-filterbar__buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}
/* =========================================
   FILTER BUTTONS
   ========================================= */
.ecpn-filterbar__btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  height: 50px !important;
  padding: 12px 22px !important;
  border-radius: 999px !important;
  background: #F1F1F1 !important;
  color: #E01A4F !important;
  border: 2px solid #E01A4F !important;
  transition:
    background .15s ease,
    color .15s ease,
    border-color .15s ease !important;
}
.ecpn-filterbar__btn:hover {
  background: #fff !important;
  border-color: #2B7D91 !important;
}
.ecpn-filterbar__btn.is-active {
  background: #1f1f1f !important;
  border-color: #1f1f1f !important;
  color: #fff !important;
}
/* =========================================
   EVENT DROPDOWN
   ========================================= */
.ecpn-filterbar__dropdown {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  z-index: 20 !important;
}
.ecpn-filterbar__select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  display: block !important;
  width: auto !important;
  min-width: 300px !important;
  max-width: 100% !important;
  height: 50px !important;
  padding: 0 44px 0 20px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-overflow: ellipsis !important;
  color: #E01A4F !important;
  background-color: #fff !important;
  border: 2px solid #E01A4F !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  /* Arrow */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23E01A4F' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 16px !important;
  transition:
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease,
    box-shadow .2s ease !important;
}
/* Hover */
.ecpn-filterbar__select:hover {
  background-color: #fff7f9 !important;
  border-color: #E01A4F !important;
}
/* Focus */
.ecpn-filterbar__select:focus {
  outline: none !important;
  border-color: #E01A4F !important;
  box-shadow:
    0 0 0 3px rgba(224, 26, 79, .12) !important;
}
/* =========================================
   MODERN DROPDOWN PANEL
   Chrome / Edge 135+ only. Other browsers keep the
   native popup (smaller text + padding from above).
   ========================================= */
@supports (appearance: base-select) {
  .ecpn-filterbar__select,
  .ecpn-filterbar__select::picker(select) {
    appearance: base-select !important;
  }
  .ecpn-filterbar__select {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }
  .ecpn-filterbar__select {
    background-image: none !important; /* use the built-in picker icon */
  }
  .ecpn-filterbar__select::picker-icon {
    color: currentColor;
    transition: rotate .2s ease;
  }
  .ecpn-filterbar__select:open::picker-icon {
    rotate: 180deg;
  }

  /* Card panel */
  .ecpn-filterbar__select::picker(select) {
    width: anchor-size(width);
    min-width: anchor-size(width);
    max-width: anchor-size(width);
    box-sizing: border-box;
    margin-top: 10px;
    padding: 10px;
    border: 0;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(58, 58, 58, .18);
  }

  /* Rows */
  .ecpn-filterbar__select option {
    display: block !important;
    padding: 10px 16px 10px 12px !important;
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #3A3A3A !important;
    background: transparent !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background .15s ease, color .15s ease;
  }
  .ecpn-filterbar__select option:hover,
  .ecpn-filterbar__select option:focus-visible {
    background: #fff0f4 !important;
    color: #E01A4F !important;
  }

  /* No checkmark; selected row is tinted pink */
  .ecpn-filterbar__select option::checkmark {
    display: none !important;
  }
  .ecpn-filterbar__select option:checked {
    background: #fff0f4 !important;
    color: #E01A4F !important;
  }
}

/* =========================================
   MOBILE
   ========================================= */
@media (max-width: 700px) {
  .ecpn-filterbar {
    padding: 18px 12px !important;
    gap: 8px !important;
  }
  .ecpn-filterbar__buttons {
    gap: 8px !important;
  }
  .ecpn-filterbar__btn {
    height: 46px !important;
    font-size: 12px !important;
    padding: 10px 14px !important;
  }
  .ecpn-filterbar__select {
    min-width: 240px !important;
    max-width: 100% !important;
    height: 46px !important;
    font-size: 12px !important;
    padding: 0 40px 0 16px !important;
    background-position: right 14px center !important;
  }
}
/* =========================================
   VERY SMALL SCREENS
   ========================================= */
@media (max-width: 480px) {
  .ecpn-filterbar__buttons {
    width: 100% !important;
  }
  .ecpn-filterbar__btn {
    flex: 1 1 auto !important;
  }
  .ecpn-filterbar__dropdown {
    width: 100% !important;
    justify-content: center !important;
  }
  .ecpn-filterbar__select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 320px !important;
  }
}