/* =========================================================================
   gallery.css · 照片与视频画廊（设计书 §4.5 / §7.1）
   背景保持奶油白，照片不加角色蒙版；只在卡片底边与来源徽章体现 🐰/🐶。
   ========================================================================= */

.gallery-layout {
  display: grid; gap: 16px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 16px var(--gutter) 40px;
}

/* 公共筛选区（芝士黄） */
.filter-bar {
  display: grid; gap: 10px;
  padding: 12px;
  border: 1px solid var(--cheese-border); border-radius: var(--radius-lg);
  background: var(--cheese-bg);
}
.filter-bar__row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.filter-bar__label { flex: none; width: 2.6em; color: var(--cheese-text); font-size: 13px; font-weight: 700; }
.filter-bar__row > .chip-row { flex: 1; min-width: 0; }
.select-wrap { position: relative; flex: 1; min-width: 0; max-width: 360px; }
.select-wrap::after {
  content: "▾";
  position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--cheese-text); pointer-events: none;
}
.filter-select {
  width: 100%; min-height: 40px;
  padding: 0 34px 0 14px;
  border: 1px solid var(--cheese-border); border-radius: var(--radius-pill);
  background: var(--bg-card); color: var(--cheese-text);
  font-size: 16px; font-weight: 600;
  -webkit-appearance: none; appearance: none;
}
.filter-select:disabled { opacity: .55; }

.gallery-note { color: var(--text-sub); font-size: 12px; }

.gallery-group { display: grid; gap: 12px; }
.gallery-group + .gallery-group { margin-top: 12px; }
.gallery-group__title {
  justify-self: start;
  padding: 3px 14px;
  border: 1px solid var(--cheese-border); border-radius: var(--radius-pill);
  background: var(--cheese-bg); color: var(--cheese-text);
  font-family: var(--font-display); font-size: 17px; font-weight: 600;
}

.gallery-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gallery-card {
  display: grid; width: 100%;
  padding: 0; overflow: hidden;
  border: 1px solid var(--border-soft);
  border-bottom: 3px solid var(--role-border);
  border-radius: 14px;
  background: var(--bg-card);
  text-align: left;
  box-shadow: var(--shadow-1);
}
.gallery-card__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--unknown-bg); }
.gallery-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease); }
.gallery-card:hover .gallery-card__media img { transform: scale(1.03); }
.gallery-card__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px;
  padding: 8px;
  color: var(--text-sub); font-size: 12px;
}
.gallery-card__meta .badge { font-size: 12px; }
.gallery-card__place { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (min-width: 768px) {
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}
@media (min-width: 1024px) {
  .gallery-layout { padding-top: 20px; }
  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
}