.chg-empty { padding: var(--sp-8); text-align: center; color: var(--ink-soft); background: var(--surface); border-radius: var(--radius-md); }
.chg-filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-end: var(--sp-8); }
.chg-filter { padding: var(--sp-2) var(--sp-5); min-block-size: 2.75rem; border: 0.0625rem solid var(--line); border-radius: var(--radius-btn); background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; transition: border-color var(--tr-fast), background var(--tr-fast), color var(--tr-fast); }
.chg-filter:hover { border-color: var(--accent); color: var(--accent); }
.chg-filter.is-active { background: var(--accent); border-color: var(--accent); color: var(--surface); }

.chg-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 17rem; grid-auto-flow: dense; gap: var(--sp-4); }
.chg-item { margin: 0; min-inline-size: 0; }
.chg-item--wide { grid-column: span 2; grid-row: span 2; }
.chg-item[hidden] { display: none; }
.chg-open { position: relative; display: block; inline-size: 100%; block-size: 100%; padding: 0; border: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-deep); cursor: zoom-in; text-align: start; }
.chg-img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--tr-med); }
.chg-open:hover .chg-img, .chg-open:focus-visible .chg-img { transform: scale(1.05); }
.chg-open:focus-visible { outline: 0.1875rem solid var(--accent); outline-offset: 0.1875rem; }
.chg-cap { position: absolute; inset-inline: 0; inset-block-end: 0; display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-10) var(--sp-5) var(--sp-4); background: linear-gradient(to top, color-mix(in srgb, var(--bg-deep) 88%, transparent), transparent); color: var(--ink-invert); }
.chg-cap__title { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-body); line-height: 1.3; }
.chg-cap__type { font-size: var(--fs-small); color: var(--accent-ondark); }
.chg-count { position: absolute; inset-block-start: var(--sp-3); inset-inline-start: var(--sp-3); padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-btn); background: color-mix(in srgb, var(--bg-deep) 70%, transparent); color: var(--ink-invert); font-size: var(--fs-small); font-weight: 600; }

.chg-box { padding: 0; border: 0; inline-size: 100vw; max-inline-size: 100vw; block-size: 100dvh; max-block-size: 100dvh; margin: 0; background: color-mix(in srgb, var(--bg-deep) 96%, transparent); color: var(--ink-invert); }
.chg-box::backdrop { background: color-mix(in srgb, var(--bg-deep) 70%, transparent); }
.chg-box__inner { position: relative; display: grid; place-items: center; block-size: 100%; padding: var(--sp-16) var(--sp-16) var(--sp-8); }
.chg-box__fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); max-inline-size: 100%; max-block-size: 100%; }
.chg-box__img { display: block; max-inline-size: min(100%, 75rem); max-block-size: calc(100dvh - 12rem); inline-size: auto; block-size: auto; object-fit: contain; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.chg-box__cap { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); text-align: center; max-inline-size: 44rem; }
.chg-box__title { font-family: var(--font-heading); font-size: var(--fs-h3); color: var(--ink-invert); }
.chg-box__desc { font-size: var(--fs-small); color: color-mix(in srgb, var(--ink-invert) 80%, transparent); }
.chg-box__desc:empty { display: none; }
.chg-box__pos { font-size: var(--fs-small); color: var(--accent-ondark); }
.chg-box__close, .chg-box__nav { position: absolute; display: grid; place-items: center; border: 0.0625rem solid color-mix(in srgb, var(--ink-invert) 25%, transparent); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--bg-deep) 60%, transparent); color: var(--ink-invert); cursor: pointer; font: inherit; line-height: 1; transition: background var(--tr-fast), border-color var(--tr-fast); }
.chg-box__close { inset-block-start: var(--sp-4); inset-inline-end: var(--sp-4); inline-size: 2.75rem; block-size: 2.75rem; font-size: 1.25rem; }
.chg-box__nav { inset-block-start: 50%; translate: 0 -50%; inline-size: 3rem; block-size: 3rem; font-size: 2rem; }
.chg-box__prev { inset-inline-start: var(--sp-4); }
.chg-box__next { inset-inline-end: var(--sp-4); }
.chg-box__close:hover, .chg-box__nav:hover { background: var(--accent); border-color: var(--accent); }
.chg-box__close:focus-visible, .chg-box__nav:focus-visible { outline: 0.1875rem solid var(--lime); outline-offset: 0.125rem; }
.chg-box__nav[hidden] { display: none; }

@media (max-width: 64rem) {
  .chg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 14rem; }
}
@media (max-width: 48rem) {
  .chg-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 16rem; }
  .chg-item--wide { grid-column: auto; grid-row: span 1; }
  .chg-box__inner { padding: var(--sp-16) var(--sp-3) var(--sp-6); }
  .chg-box__nav { inset-block-start: auto; inset-block-end: var(--sp-4); translate: none; }
  .chg-box__img { max-block-size: calc(100dvh - 14rem); }
}
@media (prefers-reduced-motion: reduce) {
  .chg-img, .chg-filter { transition: none; }
  .chg-open:hover .chg-img { transform: none; }
}