.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.filter-btn {
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  min-height: 2.75rem;
  padding: 0.5rem var(--space-sm);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--tile-chrome-soft);
  color: var(--color-text-muted);
  cursor: pointer;
  touch-action: manipulation;
  transition:
    border-color var(--dur-mid) var(--ease-out),
    color var(--dur-mid) var(--ease-out),
    background var(--dur-mid) var(--ease-out),
    transform var(--dur-fast) var(--ease-spring),
    box-shadow var(--dur-mid) var(--ease-out);
}

.filter-btn:hover,
.filter-btn:focus-visible {
  color: var(--color-text);
  border-color: var(--color-accent);
  transform: translateY(-1px);
}

.filter-btn.is-active {
  background: var(--glass-fill-hover);
  color: var(--color-accent-bright);
  border-color: rgba(82, 183, 136, 0.45);
  box-shadow: var(--glow-emerald-tight);
}

.gallery-wrap {
  max-width: 1400px;
  margin: 0 auto;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-sm);
}

@media (min-width: 900px) {
  .gallery-grid .gallery-item:nth-child(8n + 1),
  .gallery-grid .gallery-item:nth-child(8n + 6) {
    grid-column: span 2;
    aspect-ratio: 16 / 10;
  }
}

.gallery-item {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: var(--tile-chrome-soft);
  box-shadow: var(--photo-radiance);
  cursor: pointer;
  touch-action: manipulation;
  transition:
    box-shadow var(--dur-mid) var(--ease-fade),
    border-color var(--dur-mid) var(--ease-fade),
    transform var(--dur-fast) var(--ease-spring);
}

.gallery-item:hover,
.gallery-item:focus-visible {
  border-color: rgba(82, 183, 136, 0.25);
  box-shadow: var(--photo-radiance-hover);
}

.gallery-item:not(.gallery-item--enter) img {
  transition: transform 420ms var(--ease-out);
}

.gallery-item:not(.gallery-item--enter):hover img,
.gallery-item:not(.gallery-item--enter):focus-visible img {
  transform: scale(1.045);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-item:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.gallery-item.is-hidden {
  display: none;
}

/* Fixed column counts + uniform tile ratio → even rows (no ragged masonry). */
.featured-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}

@media (min-width: 520px) {
  .featured-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 880px) {
  .featured-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-md);
  }
}

.section--strip-bleed .featured-strip {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-left: max(var(--space-lg), env(safe-area-inset-left, 0px));
  padding-right: max(var(--space-lg), env(safe-area-inset-right, 0px));
  box-sizing: border-box;
}

/* Same 4:5 frame as main gallery grid — blur + cover read as one rounded tile. */
.featured-strip .gallery-item {
  aspect-ratio: 4 / 5;
  width: 100%;
  min-width: 0;
  isolation: isolate;
  border: none;
  background: transparent;
  box-shadow: none;
}

/* Blurred same-image backdrop fills rounded rect (no visible “frame” gap). */
.featured-strip .gallery-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background-color: var(--color-bg);
  background-image: var(--gallery-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(var(--featured-thumb-blur)) saturate(1.12);
  transform: scale(1.14);
  opacity: 0.92;
  pointer-events: none;
}

.featured-strip .gallery-item:hover,
.featured-strip .gallery-item:focus-visible {
  border-color: transparent;
  box-shadow:
    0 0 0 1px rgba(82, 183, 136, 0.22),
    0 18px 44px rgba(0, 0, 0, 0.42);
}

.featured-strip .gallery-item img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .featured-strip .gallery-item::before {
    filter: none;
    transform: none;
    opacity: 0.4;
  }
}

.gallery-empty,
.review-empty {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  grid-column: 1 / -1;
}

.gallery-empty code,
.review-empty code {
  color: var(--color-accent-bright);
}

.gallery-empty--icon::before,
.review-empty--icon::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-accent),
    transparent
  );
  margin-bottom: var(--space-md);
}