.cc-case-hub {
	--ccch-grid-min: 16rem;
	--ccch-gap: 1rem;
	--ccch-surface: #fff;
	--ccch-overlay: rgb(0 0 0 / 88%);
	--ccch-control: #fff;
	display: block;
}

.cc-case-hub-visually-hidden {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

.cc-case-hub-snap-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ccch-grid-min)), 1fr));
	gap: var(--ccch-gap);
}

.cc-case-hub-snap-card {
	display: flex;
	min-inline-size: 0;
	flex-direction: column;
}

.cc-case-hub-snap-card__media,
.cc-case-hub-snap-card__thumb {
	display: block;
	overflow: hidden;
}

.cc-case-hub-snap-card__image,
.cc-case-hub-snap-card__thumb-image {
	display: block;
	inline-size: 100%;
	max-inline-size: 100%;
	block-size: auto;
}

.cc-case-hub-snap-card__gallery,
.cc-case-hub-snap-card__actions {
	display: grid;
	gap: calc(var(--ccch-gap) / 2);
}

.cc-case-hub-snap-card__actions {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	align-items: center;
}

.cc-case-hub-snap-card__action {
	display: inline-flex;
	min-block-size: 2.75rem;
	align-items: center;
	justify-content: center;
}

.cc-case-hub-snap-card__action[aria-disabled="true"] {
	opacity: 0.7;
	pointer-events: none;
}

.cc-case-hub-snap-card__thumbs {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: calc(var(--ccch-gap) / 2);
}

.cc-case-hub-snap-card__thumb-image {
	aspect-ratio: 1;
	object-fit: cover;
}

.cc-case-hub-snap-card__body,
.cc-case-hub-snap-groups {
	display: grid;
	gap: var(--ccch-gap);
}

.cc-case-hub-snap-card__terms,
.cc-case-hub-pagination__list {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--ccch-gap) / 2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cc-case-hub-snap-group + .cc-case-hub-snap-group,
.cc-case-hub-pagination {
	margin-block-start: var(--ccch-gap);
}

.cc-case-hub-pagination__link,
.cc-case-hub-pagination__current {
	display: inline-flex;
	min-inline-size: 2rem;
	min-block-size: 2rem;
	align-items: center;
	justify-content: center;
}

.cc-case-hub-snap-card__media:focus-visible,
.cc-case-hub-snap-card__thumb:focus-visible,
.cc-case-hub-snap-card__term a:focus-visible,
.cc-case-hub-snap-card__action:focus-visible,
.cc-case-hub-pagination__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.cc-case-hub-lightbox-open {
	overflow: hidden;
}

.cc-case-hub-lightbox {
	position: fixed;
	z-index: 999999;
	inset: 0;
	display: grid;
	place-items: center;
	padding: var(--ccch-gap, 1rem);
	background: var(--ccch-overlay, rgb(0 0 0 / 88%));
}

.cc-case-hub-lightbox[hidden] {
	display: none;
}

.cc-case-hub-lightbox__panel {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	inline-size: min(100%, 80rem);
	max-block-size: calc(100vh - 2rem);
}

.cc-case-hub-lightbox__image {
	display: block;
	max-inline-size: 100%;
	max-block-size: calc(100vh - 2rem);
	margin: auto;
}

.cc-case-hub-lightbox__close,
.cc-case-hub-lightbox__previous,
.cc-case-hub-lightbox__next {
	min-inline-size: 2.75rem;
	min-block-size: 2.75rem;
	border: 1px solid currentColor;
	background: var(--ccch-surface, #fff);
	color: currentColor;
	cursor: pointer;
}

.cc-case-hub-lightbox__close {
	position: absolute;
	z-index: 1;
	inset-block-start: 0;
	inset-inline-end: 0;
}

/* Explorer structure only; appearance belongs to the selected theme. */
.cc-case-hub.ccch-explorer { width: 100%; max-width: 88rem; margin-inline: auto; }
.cc-case-hub .ccch-explorer__filters { display: block; margin-block-end: 1rem; min-width: 0; }
.cc-case-hub .ccch-explorer__primary-row, .cc-case-hub .ccch-explorer__advanced-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; min-width: 0; }
.cc-case-hub .ccch-explorer__field { flex: 1 1 100%; min-width: 0; max-width: 100%; }
.cc-case-hub .ccch-explorer__field label { display: block; margin-block-end: 0.25rem; }
.cc-case-hub .ccch-explorer__filters select { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; min-height: 2.75rem; }
.cc-case-hub .ccch-explorer__advanced { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.cc-case-hub .ccch-explorer__advanced summary { box-sizing: border-box; min-height: 2.75rem; padding: 0.65rem; cursor: pointer; }
.cc-case-hub .ccch-explorer__advanced[open] { flex-basis: 100%; order: 4; }
.cc-case-hub .ccch-explorer__advanced-row { margin-block-start: 0.75rem; }
.cc-case-hub .ccch-explorer__detail-only { min-width: 0; overflow-wrap: anywhere; padding-block: 0.5rem; }
.cc-case-hub .ccch-explorer__submit { flex: 0 0 auto; order: 3; width: auto; min-height: 2.75rem; max-width: 100%; }
@media (min-width: 640px) { .cc-case-hub .ccch-explorer__field { flex-basis: calc(50% - 0.75rem); } }
@media (min-width: 1024px) { .cc-case-hub .ccch-explorer__field { flex: 0 1 18rem; min-width: min(14rem, 100%); max-width: 20rem; } }
.cc-case-hub.ccch-explorer .ccch-explorer__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ccch-explorer-gap, 1rem); list-style: none; padding: 0; margin: 0; }
.cc-case-hub .ccch-explorer__item { min-width: 0; margin: 0; padding: 0; }
.cc-case-hub .ccch-explorer__media { position: relative; display: block; overflow: hidden; }
.cc-case-hub .ccch-explorer__media img { display: block; width: 100%; height: auto; aspect-ratio: 40 / 21; object-fit: cover; }
.cc-case-hub .ccch-explorer__area-stamp, .cc-case-hub .ccch-explorer__detail-badge { position: absolute; box-sizing: border-box; max-width: calc(50% - 0.75rem); overflow-wrap: anywhere; white-space: normal; }
.cc-case-hub .ccch-explorer__area-stamp { inset-inline-start: 0.5rem; inset-block-start: 0.5rem; }
.cc-case-hub .ccch-explorer__detail-badge { inset-inline-end: 0.5rem; inset-block-end: 0.5rem; }
.cc-case-hub .cc-case-hub-gallery__media { display: block; }
.cc-case-hub .cc-case-hub-gallery__media:focus-visible { outline: 3px solid currentColor; outline-offset: -3px; }
.cc-case-hub .ccch-explorer__more { display: inline-flex; min-height: 2.75rem; align-items: center; margin-block: 1rem; }
.cc-case-hub.ccch-explorer a:focus-visible, .cc-case-hub.ccch-explorer button:focus-visible, .cc-case-hub.ccch-explorer summary:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
@media (min-width: 640px) { .cc-case-hub.ccch-explorer .ccch-explorer__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cc-case-hub.ccch-explorer .ccch-explorer__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.cc-case-hub-gallery__request {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.5rem;
}

.cc-case-hub-gallery {
	width: 100%;
	max-width: 88rem;
	margin-inline: auto;
}

.cc-case-hub-gallery .cc-case-hub-gallery__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ccch-gallery-gap, 1rem);
	list-style: none;
	padding: 0;
	margin: 0;
}

.cc-case-hub-gallery .cc-case-hub-gallery__item {
	min-width: 0;
	padding: 0;
	margin: 0;
	overflow: hidden;
}

.cc-case-hub-gallery .cc-case-hub-gallery__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 40 / 21;
	object-fit: cover;
}

@media (min-width: 640px) {
	.cc-case-hub-gallery .cc-case-hub-gallery__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.cc-case-hub-gallery .cc-case-hub-gallery__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Term Cloud is archive navigation, independent of Explorer filter state. */
.cc-case-hub.ccch-term-cloud .ccch-term-cloud__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.cc-case-hub.ccch-term-cloud .ccch-term-cloud__item { flex: 0 1 auto; min-width: 0; max-width: 100%; margin: 0; padding: 0; }
.cc-case-hub.ccch-term-cloud .ccch-term-cloud__link { display: inline-block; box-sizing: border-box; max-width: 100%; padding: 0.4rem 0.75rem; overflow-wrap: anywhere; }

.cc-case-hub-lightbox__close:focus-visible,
.cc-case-hub-lightbox__previous:focus-visible,
.cc-case-hub-lightbox__next:focus-visible {
	outline: 2px solid var(--ccch-control, #fff);
	outline-offset: 2px;
}