/**
 * PVR Media Gallery block ([pvr_media_gallery]).
 *
 * Scoped to .pvr-gallery only; consumes the Design-tab CSS variables from
 * pvr-frontend.css (accent, borders, radius, muted text) so light/dark
 * schemes and custom colors apply automatically.
 */

.pvr-gallery {
  margin: 0 0 24px;
}

.pvr-gallery .pvr-widget-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.pvr-gallery__count {
  font-size: 0.65em;
  color: var(--pvr-muted-color, #94a3b8);
  font-weight: 600;
  vertical-align: super;
}

/* ---- Media type chips (All / Photos / Videos) ---- */
.pvr-gallery__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.pvr-gallery__chip {
  appearance: none;
  border: 1px solid var(--pvr-border-color, #e5e7eb);
  background: var(--pvr-card-bg, #fff);
  color: var(--pvr-text-color, #111827);
  font: inherit;
  font-size: 14px;
  line-height: 1;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pvr-gallery__chip:hover {
  border-color: var(--pvr-accent-color, #2563eb);
}

.pvr-gallery__chip.is-active {
  background: var(--pvr-accent-color, #2563eb);
  border-color: transparent;
  color: #fff;
}

/* ---- Live category / manufacturer dropdowns ---- */
.pvr-gallery__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.pvr-gallery__filter {
  border: 1px solid var(--pvr-border-color, #e5e7eb);
  background: var(--pvr-card-bg, #fff);
  color: var(--pvr-text-color, #111827);
  font: inherit;
  font-size: 14px;
  line-height: 1.3;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  max-width: 300px;
}

.pvr-gallery__filter:hover {
  border-color: var(--pvr-accent-color, #2563eb);
}

/* ---- Grid ---- */
.pvr-gallery__grid {
  display: grid;
  grid-template-columns: repeat(var(--pvr-gallery-cols, 4), minmax(0, 1fr));
  gap: 10px;
  align-content: start;
}

/* The UA [hidden] rule loses to the author `display: grid` above. */
.pvr-gallery__grid[hidden] {
  display: none;
}

/* The modal grid keeps its fixed ribbon ratio (base rule in pvr-frontend.css);
   inline gallery tiles flow with the page in the configured format
   (--pvr-gallery-ratio, set from the shortcode ratio attribute / settings —
   default 2:3). */
.pvr-gallery__grid .pvr-grid-media-item {
  height: auto;
  aspect-ratio: var(--pvr-gallery-ratio, 2 / 3);
}

.pvr-gallery__grid .pvr-grid-skeleton {
  height: auto;
  aspect-ratio: var(--pvr-gallery-ratio, 2 / 3);
}

@media (max-width: 1024px) {
  .pvr-gallery__grid {
    grid-template-columns: repeat(min(var(--pvr-gallery-cols, 4), 3), minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .pvr-gallery__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
}

/* ---- Empty state & scroll sentinel ---- */
.pvr-gallery__empty {
  margin: 18px 0 0;
  padding: 24px 16px;
  text-align: center;
  color: var(--pvr-muted-color, #6b7280);
  background: var(--pvr-card-bg-soft, #f8fafc);
  border: 1px dashed var(--pvr-border-color, #e5e7eb);
  border-radius: var(--pvr-radius, 12px);
}

.pvr-gallery__empty[hidden] {
  display: none;
}

.pvr-gallery__sentinel {
  height: 1px;
}

.pvr-gallery__sentinel[hidden] {
  display: none;
}

/* ---- Focus & tap conventions (see AGENTS.md) ---- */
.pvr-gallery__chip:focus:not(:focus-visible),
.pvr-gallery__filter:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.pvr-gallery__chip,
.pvr-gallery__filter,
.pvr-gallery .pvr-grid-media-item {
  -webkit-tap-highlight-color: transparent;
}