/* Extend the existing project components; the shared banners remain unchanged. */
.reference-filters .form-group { flex: 1 1 220px; width: auto !important; }
.reference-filters { scroll-margin-top: 110px; }
.project-card.reference-list-card:before { background-image: var(--reference-cover); }
.reference-list-card:focus-within:before, .reference-list-card:focus-within:after { opacity: 1; visibility: visible; }
.reference-list-card:focus-within .project-counter { color: #fff; }
.reference-list-card:focus-within .project-title h3 a { color: #fff; }
#reference-main-image { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: contain; background: #f3f3f3; }
.reference-thumbnails { display: flex; gap: 10px; overflow-x: auto; padding: 4px 0 10px; }
.reference-thumb { flex: 0 0 110px; height: 82px; padding: 0; overflow: hidden; background: transparent; border: 2px solid transparent; border-radius: 8px; }
.reference-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.reference-thumb.active { border-color: var(--primaryColor); }
.reference-thumb:hover { border-color: var(--primaryColor); }
.reference-gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border: 0; border-radius: 50%; background: #fff; color: var(--titleColor); box-shadow: 0 2px 12px #0002; font-size: 28px; display: grid; place-items: center; }
.reference-gallery-arrow:hover { background: var(--primaryColor); color: #fff; }
.reference-gallery-arrow--previous { left: 15px; }
.reference-gallery-arrow--next { right: 15px; }
.reference-thumb:focus-visible { outline: 2px solid var(--primaryColor); outline-offset: 2px; }
#reference-detail .project-pagination { border-top: 1px dashed rgba(0,0,0,.15); padding-top: 28px; }
#reference-detail [hidden] { display: none !important; }
#reference-detail .accordion-button { background: #f3f3f3; }
#reference-detail .project-desc { padding-bottom: 32px; }
#reference-detail .project-desc:after { height: 480px; max-height: 35%; }
@media (max-width: 767px) {
  .reference-filters .form-group { flex-basis: 100%; }
  #reference-detail .project-pagination a { font-size: 14px; }
}