/*
 * BNSS Models design system
 * Shared tokens and final component normalization for public views and previews.
 */
:root {
  --mam-space-1: 4px;
  --mam-space-2: 8px;
  --mam-space-3: 12px;
  --mam-space-4: 16px;
  --mam-space-5: 24px;
  --mam-space-6: 32px;
  --mam-radius-sm: 10px;
  --mam-radius-md: 14px;
  --mam-radius-lg: 18px;
  --mam-control-height: 44px;
  --mam-focus-color: var(--mam-filter-accent, #5b8fd9);
  --mam-focus-ring: 0 0 0 3px color-mix(in srgb, var(--mam-focus-color) 28%, transparent);
}

.mam-gallery-wrap,
.mam-profile-wrap,
.mam-filters-modern,
.mam-filter-popup {
  box-sizing: border-box;
}

.mam-gallery-wrap *,
.mam-profile-wrap *,
.mam-filters-modern *,
.mam-filter-popup * {
  box-sizing: border-box;
}

.mam-filters-modern,
.mam-filters-modern.mam-filters-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--mam-filter-gap, 28px) !important;
  padding: var(--mam-space-4) !important;
  border-radius: var(--mam-radius-lg) !important;
  overflow: visible !important;
}

.mam-filters-modern > * + * {
  margin-top: 0 !important;
}

.mam-filters-modern input:not([type="range"]),
.mam-filters-modern select,
.mam-filters-modern button {
  min-height: var(--mam-control-height) !important;
  border-radius: var(--mam-radius-md) !important;
}

.mam-filters-modern input:focus-visible,
.mam-filters-modern select:focus-visible,
.mam-filters-modern button:focus-visible,
.mam-list-card a:focus-visible,
.mam-profile-wrap a:focus-visible,
.mam-profile-wrap button:focus-visible {
  outline: 2px solid var(--mam-focus-color) !important;
  outline-offset: 2px !important;
  box-shadow: var(--mam-focus-ring) !important;
}

.mam-filter-label {
  margin-bottom: var(--mam-filter-label-gap, var(--mam-space-2)) !important;
}

.mam-filter-foot {
  padding-top: 0 !important;
}

.mam-filter-reset,
.mam-filter-apply,
.mam-list-open-profile {
  line-height: 1.2 !important;
  transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease !important;
}

.mam-filter-reset:hover,
.mam-filter-apply:hover,
.mam-list-open-profile:hover {
  transform: translateY(-1px);
}

.mam-gallery-filtering .mam-gallery {
  opacity: .64;
  transition: opacity .16s ease;
}

.mam-gallery-filter-empty,
.mam-gallery-empty,
.mam-profile-empty {
  padding: var(--mam-space-4);
  border-radius: var(--mam-radius-md);
  line-height: 1.5;
}

.mam-gallery-summary {
  display: flex;
  align-items: center;
  justify-content: var(--mam-summary-justify, space-between);
  gap: var(--mam-space-3);
  margin: 0 0 var(--mam-summary-margin, 16px);
  line-height: 1.4;
  color: var(--mam-summary-color, var(--mam-secondary, #666));
  font-family: var(--mam-summary-font, var(--mam-font, inherit));
  font-size: var(--mam-summary-size, 14px);
  font-weight: var(--mam-summary-weight, 700);
  font-style: var(--mam-summary-style, normal);
  text-decoration: var(--mam-summary-decoration, none);
  text-align: var(--mam-summary-align, left);
}

.mam-gallery-summary-bottom {
  margin: var(--mam-summary-margin, 16px) 0 0;
}

.mam-gallery-count { font-weight: inherit; }
.mam-filter-chips[hidden] { display: none !important; }
.mam-filter-chip {
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration: inherit;
  cursor: pointer;
}

.mam-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--mam-space-2);
  margin: var(--mam-space-5) 0;
}

.mam-pagination button {
  min-width: 40px;
  min-height: 40px;
  padding: 7px 10px;
  border: 1px solid currentColor;
  border-radius: var(--mam-radius-sm);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.mam-pagination button.is-current {
  background: var(--mam-focus-color);
  border-color: var(--mam-focus-color);
  color: #fff;
}

.mam-pagination button:disabled { cursor: default; opacity: .45; }

.mam-list-overlay-row,
.mam-list-info h3,
.mam-list-info p,
.mam-list-info dd {
  overflow-wrap: anywhere;
}

@media (max-width: 980px) {
  :root { --mam-control-height: 44px; }
  .mam-filters-modern,
  .mam-filters-modern.mam-filters-stack { padding: var(--mam-space-3) !important; }
}

@media (max-width: 767px) {
  .mam-filters-modern,
  .mam-filters-modern.mam-filters-stack { gap: var(--mam-filter-gap, 28px) !important; }
  .mam-filters-modern > * + * { margin-top: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .mam-gallery-wrap *,
  .mam-profile-wrap *,
  .mam-filters-modern * {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}