/* Bootstrap is supplied by the site's theme. All extra rules stay plugin-scoped. */
.wwp-portfolio [hidden], .wwp-gallery [hidden] { display: none !important; }
.wwp-filter-option { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .75rem; cursor: pointer; }
.wwp-filter-count { margin-left: auto; opacity: .7; }
.wwp-card-image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; }
.wwp-project .card-title a { color: inherit; text-decoration: none; }
.wwp-project a:focus-visible, .wwp-gallery a:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.wwp-gallery figure { margin-bottom: 0; }
.wwp-description { white-space: pre-line; }
.wwp-project-logo { max-height: 160px; width: auto; object-fit: contain; }
.wwp-lightbox { width: min(1100px, 94vw); max-height: 94vh; padding: 1rem; border: 0; border-radius: .5rem; background: #fff; color: #212529; }
.wwp-lightbox::backdrop { background: rgb(0 0 0 / 85%); }
.wwp-lightbox-controls { display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; margin-bottom: 1rem; }
.wwp-lightbox-image { display: block; max-width: 100%; max-height: 65vh; width: auto; height: auto; margin: 0 auto 1rem; }
/* Canvas-style variant: compact filter toolbar, theme colours, open cards. */
.wwp-portfolio-canvas .wwp-project-grid { position: relative; }
.wwp-portfolio-canvas .wwp-filter-ghost { z-index: 1; user-select: none; }
.wwp-portfolio-canvas .wwp-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1.25rem; }
.wwp-portfolio-canvas .wwp-filters fieldset { min-width: 0; max-width: 100%; margin: 0 !important; }
.wwp-portfolio-canvas .wwp-filters legend { float: none; width: auto; margin: 0 0 .375rem; font-size: .875rem; line-height: 1.25; }
.wwp-portfolio-canvas .wwp-filter-bar { display: flex; flex-wrap: wrap; gap: 0; }
.wwp-portfolio-canvas .wwp-filter-option,
.wwp-portfolio-canvas .wwp-filter-all {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  padding: .5rem .75rem;
  border: 1px solid var(--bs-border-color, #dee2e6);
  background: var(--bs-body-bg, #fff);
  color: var(--bs-secondary-color, #6c757d);
  font: inherit;
  font-size: .875rem;
  line-height: 1.5;
  cursor: pointer;
}
.wwp-portfolio-canvas .wwp-filter-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.wwp-portfolio-canvas .wwp-filter-option:has(input:checked),
.wwp-portfolio-canvas .wwp-filter-all[aria-pressed="true"] {
  background: var(--cnvs-themecolor, var(--bs-primary, #0d6efd));
  border-color: var(--cnvs-themecolor, var(--bs-primary, #0d6efd));
  color: var(--bs-light, #fff);
}
.wwp-portfolio-canvas .wwp-filter-option:has(input:focus-visible),
.wwp-portfolio-canvas .wwp-filter-all:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; z-index: 1; }
.wwp-portfolio-canvas .wwp-filter-option:has(input:disabled) { opacity: .5; cursor: default; }
.wwp-portfolio-canvas [data-wwp-reset] { width: auto !important; padding: .5rem .75rem; font-size: .875rem; line-height: 1.5; }
.wwp-portfolio-canvas .wwp-project .card { border: 0; border-radius: 0; background: transparent; }
.wwp-portfolio-canvas .wwp-card-image { border-radius: 0; }
.wwp-portfolio-canvas .wwp-project .card-body { padding: 1rem .25rem; }
/* Without JavaScript the grid uses the full row and all project links remain visible. */
@media (min-width: 992px) { .wwp-portfolio .wwp-results:not(.wwp-filtered-results) { width: 100%; } }

/* Match col-12 py-2 on Picostrap's outer portfolio-page content column. */
#container-content-page > .row > div:has(.wwp-portfolio) {
  flex: 0 0 auto;
  width: 100%;
  margin-left: 0 !important;
  padding-top: .5rem !important;
  padding-bottom: .5rem !important;
}

/* Theme Bootstrap container caps full-width sections without expanding narrower columns. */
.wwp-carousel-container { width: 100%; min-width: 0; margin-inline: auto; box-sizing: border-box; }
/* Native scrolling keeps the carousel usable with touch, keyboard or no JavaScript. */
.wwp-carousel { --wwp-carousel-columns: 1; --wwp-carousel-gap: 1.5rem; container: wwp-carousel / inline-size; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.wwp-carousel-viewport { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.wwp-carousel-track { box-sizing: border-box; max-width: 100%; min-width: 0; display: flex; gap: var(--wwp-carousel-gap); overflow-x: auto; scroll-snap-type: x mandatory; padding: .25rem .25rem 1rem; }
.wwp-carousel-card { flex: 0 0 calc((100% - (var(--wwp-carousel-columns) - 1) * var(--wwp-carousel-gap)) / var(--wwp-carousel-columns)); min-width: 0; scroll-snap-align: start; display: flex; flex-direction: column; }
.wwp-carousel-image { display: block; }
.wwp-carousel .wwp-card-image { display: block; height: auto; border-radius: 0; }
.wwp-carousel-body { display: flex; flex-direction: column; flex: 1; padding: 1rem .25rem .25rem; }
.wwp-carousel-excerpt { margin-bottom: 0; overflow-wrap: anywhere; }
.wwp-carousel-controls { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .5rem; }
.wwp-carousel-arrow { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--bs-border-color, #dee2e6); border-radius: 50%; background: var(--bs-body-bg, #fff); color: var(--bs-body-color, #212529); font: inherit; font-size: 2rem; line-height: 1; }
.wwp-carousel-arrow:disabled { opacity: .4; }
.wwp-carousel-arrow:not(:disabled) { cursor: pointer; }
.wwp-carousel-arrow:focus-visible, .wwp-carousel-viewport:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
@container wwp-carousel (min-width: 600px) { .wwp-carousel-track { --wwp-carousel-columns: 2; } }
@container wwp-carousel (min-width: 1000px) {
  .wwp-carousel-columns-3 .wwp-carousel-track { --wwp-carousel-columns: 3; }
  .wwp-carousel-columns-4 .wwp-carousel-track { --wwp-carousel-columns: 4; }
}

/* Swiper is supplied by the theme; these structural rules avoid theme slider selectors. */
.wwp-carousel-viewport.wwp-swiper-active { position: relative; overflow: hidden; touch-action: pan-y; }
.wwp-swiper-active .wwp-carousel-track { position: relative; width: 100%; gap: 0; overflow: visible; padding: 0; scroll-snap-type: none; transition-property: transform; transition-timing-function: ease; transform: translate3d(0, 0, 0); box-sizing: content-box; }
.wwp-swiper-active .wwp-carousel-card { flex: 0 0 auto; height: auto; scroll-snap-align: none; transition-property: transform; }

.wwp-swiper-active .swiper-notification { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }