/* gallery.css — GALLERY page only: filters, masonry artwork list and search UI */

.gallery-tools {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.scope-tabs {
  display: flex;
  border: 1px solid var(--line-strong);
  padding: 4px;
  gap: 4px;
  background: #f4f7f9;
}

.scope-tabs button {
  border: 0;
  background: transparent;
  color: var(--text-2);
  font: 650 12px var(--font-en);
  letter-spacing: .035em;
  min-height: 40px;
  padding: 8px 18px;
}

.scope-tabs button:hover {
  background: #e6eff5;
}

.scope-tabs button.is-active {
  background: var(--blue-deep);
  color: #fff;
}

.gallery-tools__right {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.search-field {
  position: relative;
  display: flex;
  align-items: center;
}

.search-field>span {
  position: absolute;
  left: 14px;
  font: 25px/1 var(--font-en);
  color: var(--text-2);
}

.search-field input {
  padding-left: 44px;
  width: 240px;
  font-size: 13px;
}

.gallery-mobile-filters {
  display: flex;
  gap: 12px;
  margin: 24px 0 0;
  flex-wrap: wrap;
}

.gallery-mobile-filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 148px;
  flex: 1;
  font-size: 12px;
  font-weight: 650;
}

.gallery-mobile-filters select {
  font-size: 13px;
}

.gallery-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 24px 0 16px;
}

.gallery-status p {
  font-size: 12px;
}

.active-filters {
  font-size: 12px;
  color: var(--blue) !important;
  text-align: right;
}

.gallery-masonry {
  columns: 3;
  column-gap: 16px;
}

.gallery-item {
  display: inline-block;
  width: 100%;
  margin: 0 0 16px;
  padding: 0;
  background: #fff;
  border: 1px solid var(--line);
  break-inside: avoid;
  text-align: left;
  transition: box-shadow .25s,border-color .25s;
}

.gallery-item:hover {
  box-shadow: var(--shadow);
  border-color: var(--line-strong);
}

.gallery-item .art-placeholder {
  height: auto;
  min-height: 0;
  aspect-ratio: var(--ratio, 3/4);
  transition: transform .25s;
}

.gallery-item:hover .art-placeholder {
  transform: scale(1.015);
}

.gallery-item__meta {
  padding: 12px 16px;
  display: grid;
  gap: 4px;
  background: #fff;
  position: relative;
}

.gallery-item__meta strong {
  font-size: 12px;
}

.gallery-item__meta small {
  font: 600 10px var(--font-en);
  color: var(--text-3);
}

.gallery-empty {
  padding: 64px 0;
  text-align: center;
}

.filter-check {
  display: block;
  padding: 6px 0;
  font-size: 12px;
  color: var(--text-2);
  cursor: pointer;
}

.filter-check input {
  accent-color: var(--blue);
  margin-right: 4px;
}

.gallery-item__visual {
  display: block;
  overflow: hidden;
  background: var(--surface-2);
}

.gallery-item__visual>img {
  display: block;
  width: 100%;
  height: auto;
}

.gallery-item__visual .art-placeholder {
  aspect-ratio: var(--ratio,3 / 4);
}

.panel-select {
  width: 100%;
  min-height: 42px;
  margin-top: 12px;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--text);
  border-radius: 6px;
  padding: 8px;
  font-size: 12px;
}

.panel-select:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.tag-filter-list {
  display: grid;
  gap: 4px;
  padding-top: 8px;
}

@media (max-width:680px) {
  .gallery-tools__right,
  .search-field,
  .search-field input {
    width: 100%;
  }

  .gallery-tools__right>.button {
    width: 100%;
  }

  .scope-tabs {
    width: 100%;
    justify-content: space-between;
  }

  .scope-tabs button {
    flex: 1;
    padding: 8px 5px;
  }

  .gallery-masonry {
    columns: 2;
    column-gap: 12px;
  }

  .gallery-item {
    margin-bottom: 12px;
  }

  .gallery-item__meta {
    padding: 8px 10px;
  }

  .gallery-item__meta strong {
    font-size: 11px;
  }

  .gallery-tools {
    padding-bottom: 20px;
  }
}

@media (max-width:380px) {
  .gallery-masonry {
    columns: 1;
  }
}

/* Real existing artwork images: preserve their native aspect ratio. */
.gallery-item__visual > .art-image {display:block;width:100%;height:auto;max-width:100%;}
.gallery-item__visual > .art-placeholder {min-height:180px;}
.gallery-item__meta strong {overflow-wrap:anywhere;}