/**
 * Page Group components.
 *
 * Shared by the WPBakery Page Group Pages element and Page Group Pages widget.
 */

.moonshot-page-groups {
	--page-groups-border: rgba(18, 24, 40, 0.12);
	--page-groups-muted: #667085;
	--page-groups-surface: #fff;
	--page-groups-gap: 1.25rem;
}

.moonshot-page-groups *,
.moonshot-page-groups *::before,
.moonshot-page-groups *::after {
	box-sizing: border-box;
}

body .moonshot-page-groups > .moonshot-page-groups__items {
	display: grid;
	gap: var(--page-groups-gap);
}

body .moonshot-page-groups > .moonshot-page-groups__items > .moonshot-page-groups__item {
	margin: 0;
}

body .moonshot-page-groups .moonshot-page-groups__item > .moonshot-page-groups__image {
	display: block;
	overflow: hidden;
}

body .moonshot-page-groups .moonshot-page-groups__item > .moonshot-page-groups__image > img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	transition: transform 180ms ease;
}

body .moonshot-page-groups .moonshot-page-groups__item:hover > .moonshot-page-groups__image > img {
	transform: scale(1.025);
}

body .moonshot-page-groups .moonshot-page-groups__item > .moonshot-page-groups__content {
	min-width: 0;
}

body .moonshot-page-groups .moonshot-page-groups__content > .moonshot-page-groups__title {
	padding: 0!important;
	margin: 0!important;
	color: inherit!important;
	font-size: 1rem!important;
	line-height: 1.25!important;
}

body .moonshot-page-groups .moonshot-page-groups__content > .moonshot-page-groups__title > a {
	color: inherit!important;
	text-decoration: none!important;
}

body .moonshot-page-groups .moonshot-page-groups__content > .moonshot-page-groups__title > a:hover,
body .moonshot-page-groups .moonshot-page-groups__content > .moonshot-page-groups__title > a:focus-visible {
	text-decoration: underline!important;
	text-underline-offset: 0.15em;
}

body .moonshot-page-groups .moonshot-page-groups__content > .moonshot-page-groups__terms {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0 0 0.7rem;
}

body .moonshot-page-groups .moonshot-page-groups__content > .moonshot-page-groups__terms > .moonshot-page-groups__term {
	display: inline-flex!important;
	padding: 0.2rem 0.55rem!important;
	border-radius: 999px!important;
	background: rgba(18, 24, 40, 0.07)!important;
	color: inherit!important;
	font-size: 0.72rem!important;
	font-weight: 600!important;
	letter-spacing: 0.02em!important;
	line-height: 1.3!important;
	text-decoration: none!important;
}

/* Card grid. */
.moonshot-page-groups.is-layout-card-grid .moonshot-page-groups__items {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.moonshot-page-groups.is-layout-card-grid.columns-1 .moonshot-page-groups__items {
	grid-template-columns: minmax(0, 1fr);
}

.moonshot-page-groups.is-layout-card-grid.columns-2 .moonshot-page-groups__items {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.moonshot-page-groups.is-layout-card-grid.columns-4 .moonshot-page-groups__items {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

body .moonshot-page-groups.is-layout-card-grid .moonshot-page-groups__item {
	overflow: hidden;
	border: 1px solid var(--page-groups-border);
	border-radius: 0.75rem;
	background: var(--page-groups-surface)!important;
	box-shadow: 0 0.2rem 0.8rem rgba(18, 24, 40, 0.05);
	transition: box-shadow 180ms ease, transform 180ms ease;
}

body .moonshot-page-groups.is-layout-card-grid .moonshot-page-groups__item:hover {
	box-shadow: 0 0.65rem 1.5rem rgba(18, 24, 40, 0.1);
	transform: translateY(-2px);
}

body .moonshot-page-groups.is-layout-card-grid .moonshot-page-groups__image {
	aspect-ratio: 16 / 9;
}

body .moonshot-page-groups.is-layout-card-grid .moonshot-page-groups__content {
	padding: 1rem 1.1rem 1.15rem!important;
}

/* Shared Text Cards layout for WPBakery components and sidebar widgets. */
.moonshot-page-groups.is-layout-text-cards .moonshot-page-groups__items,
.moonshot-page-groups.is-layout-light-text-cards .moonshot-page-groups__items {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.moonshot-page-groups.is-layout-text-cards.columns-1 .moonshot-page-groups__items,
.moonshot-page-groups.is-layout-light-text-cards.columns-1 .moonshot-page-groups__items {
	grid-template-columns: minmax(0, 1fr);
}

.moonshot-page-groups.is-layout-text-cards.columns-2 .moonshot-page-groups__items,
.moonshot-page-groups.is-layout-light-text-cards.columns-2 .moonshot-page-groups__items {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.moonshot-page-groups.is-layout-text-cards.columns-4 .moonshot-page-groups__items,
.moonshot-page-groups.is-layout-light-text-cards.columns-4 .moonshot-page-groups__items {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

body .moonshot-page-groups.is-layout-text-cards .moonshot-page-groups__item {
	overflow: hidden;
	border-radius: 0.75rem;
	background: #000!important;
	color: #fff!important;
}

body .moonshot-page-groups.is-layout-text-cards .moonshot-page-groups__content {
	padding: 1.25rem!important;
}

body .moonshot-page-groups.is-layout-text-cards .moonshot-page-groups__content > .moonshot-page-groups__title,
body .moonshot-page-groups.is-layout-text-cards .moonshot-page-groups__content > .moonshot-page-groups__title > a {
	color: #fff!important;
}

body .moonshot-page-groups.is-layout-text-cards .moonshot-page-groups__content > .moonshot-page-groups__terms > .moonshot-page-groups__term {
	background: rgba(255, 255, 255, 0.16)!important;
	color: #fff!important;
}

/* Light Text Cards adapt to the theme's html.dark-mode state. */
body .moonshot-page-groups.is-layout-light-text-cards .moonshot-page-groups__item {
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 0.75rem;
	background: rgba(255, 255, 255, 0.08)!important;
	color: #000!important;
}

body .moonshot-page-groups.is-layout-light-text-cards .moonshot-page-groups__content {
	padding: 1.25rem!important;
}

body .moonshot-page-groups.is-layout-light-text-cards .moonshot-page-groups__content > .moonshot-page-groups__title,
body .moonshot-page-groups.is-layout-light-text-cards .moonshot-page-groups__content > .moonshot-page-groups__title > a {
	color: #000!important;
}

html.dark-mode body .moonshot-page-groups.is-layout-light-text-cards .moonshot-page-groups__item {
	border-color: rgba(255, 255, 255, 0.15);
	color: #fff!important;
}

html.dark-mode body .moonshot-page-groups.is-layout-light-text-cards .moonshot-page-groups__content > .moonshot-page-groups__title,
html.dark-mode body .moonshot-page-groups.is-layout-light-text-cards .moonshot-page-groups__content > .moonshot-page-groups__title > a {
	color: #fff!important;
}

html.dark-mode body .moonshot-page-groups.is-layout-light-text-cards .moonshot-page-groups__content > .moonshot-page-groups__terms > .moonshot-page-groups__term {
	background: rgba(255, 255, 255, 0.16)!important;
	color: #fff!important;
}

/* Shared variable palette for WPBakery components and sidebar widgets. */
.moonshot-page-groups.is-layout-text-cards .has-variable-palette.palette-1 { background: #1d2730!important; }
.moonshot-page-groups.is-layout-text-cards .has-variable-palette.palette-2 { background: #222d35!important; }
.moonshot-page-groups.is-layout-text-cards .has-variable-palette.palette-3 { background: #263139!important; }
.moonshot-page-groups.is-layout-text-cards .has-variable-palette.palette-4 { background: #17232b!important; }
.moonshot-page-groups.is-layout-text-cards .has-variable-palette.palette-5 { background: #1b252d!important; }
.moonshot-page-groups.is-layout-text-cards .has-variable-palette.palette-6 { background: #18302c!important; }
.moonshot-page-groups.is-layout-text-cards .has-variable-palette.palette-7 { background: #1c3731!important; }
.moonshot-page-groups.is-layout-text-cards .has-variable-palette.palette-8 { background: #203a34!important; }
.moonshot-page-groups.is-layout-text-cards .has-variable-palette.palette-9 { background: #244039!important; }
.moonshot-page-groups.is-layout-text-cards .has-variable-palette.palette-10 { background: #1b2c2a!important; }
.moonshot-page-groups.is-layout-text-cards .has-variable-palette.palette-11 { background: #272b3a!important; }
.moonshot-page-groups.is-layout-text-cards .has-variable-palette.palette-12 { background: #2d2d40!important; }
.moonshot-page-groups.is-layout-text-cards .has-variable-palette.palette-13 { background: #332f46!important; }
.moonshot-page-groups.is-layout-text-cards .has-variable-palette.palette-14 { background: #393249!important; }
.moonshot-page-groups.is-layout-text-cards .has-variable-palette.palette-15 { background: #40344e!important; }
.moonshot-page-groups.is-layout-text-cards .has-variable-palette.palette-16 { background: #2b3036!important; }
.moonshot-page-groups.is-layout-text-cards .has-variable-palette.palette-17 { background: #30343a!important; }
.moonshot-page-groups.is-layout-text-cards .has-variable-palette.palette-18 { background: #34363e!important; }
.moonshot-page-groups.is-layout-text-cards .has-variable-palette.palette-19 { background: #292f35!important; }
.moonshot-page-groups.is-layout-text-cards .has-variable-palette.palette-20 { background: #232b32!important; }

/* Thumbnail and text list. */
.moonshot-page-groups.is-layout-media-list .moonshot-page-groups__item {
	display: grid;
	grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr);
	gap: 1rem;
	align-items: center;
	padding-bottom: var(--page-groups-gap);
	border-bottom: 1px solid var(--page-groups-border);
}

.moonshot-page-groups.is-layout-media-list .moonshot-page-groups__item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.moonshot-page-groups.is-layout-media-list .moonshot-page-groups__item.has-no-image {
	grid-template-columns: minmax(0, 1fr);
}

.moonshot-page-groups.is-layout-media-list .moonshot-page-groups__image {
	align-self: stretch;
	min-height: 7rem;
	border-radius: 0.55rem;
}

/* Compact links. */
.moonshot-page-groups.is-layout-compact-links {
	--page-groups-gap: 0;
}

.moonshot-page-groups.is-layout-compact-links .moonshot-page-groups__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.8rem;
	align-items: center;
	padding: 0.8rem 0;
	border-bottom: 1px solid var(--page-groups-border);
}

.moonshot-page-groups.is-layout-compact-links .moonshot-page-groups__item:first-child {
	padding-top: 0;
}

.moonshot-page-groups.is-layout-compact-links .moonshot-page-groups__item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.moonshot-page-groups.is-layout-compact-links .moonshot-page-groups__item.has-no-image {
	grid-template-columns: minmax(0, 1fr);
}

.moonshot-page-groups.is-layout-compact-links .moonshot-page-groups__image {
	width: 4rem;
	aspect-ratio: 1;
	border-radius: 0.45rem;
}

body .moonshot-page-groups.is-layout-compact-links .moonshot-page-groups__content > .moonshot-page-groups__title {
	font-size: 1rem;
}

body .moonshot-page-groups.is-layout-compact-links .moonshot-page-groups__content > .moonshot-page-groups__terms {
	margin-bottom: 0.4rem;
}

/* Narrow widget adjustments. */
.moonshot-page-groups--widget {
	--page-groups-gap: 1rem;
}

.moonshot-page-groups--widget.is-layout-media-list .moonshot-page-groups__item {
	grid-template-columns: 5.25rem minmax(0, 1fr);
	gap: 0.75rem;
}

.moonshot-page-groups--widget.is-layout-media-list .moonshot-page-groups__image {
	min-height: 4.75rem;
}

body .moonshot-page-groups.moonshot-page-groups--widget .moonshot-page-groups__content > .moonshot-page-groups__title {
	font-size: 1rem;
}

@media (max-width: 900px) {
	.moonshot-page-groups.is-layout-card-grid.columns-4 .moonshot-page-groups__items,
	.moonshot-page-groups.is-layout-text-cards.columns-4 .moonshot-page-groups__items,
	.moonshot-page-groups.is-layout-light-text-cards.columns-4 .moonshot-page-groups__items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.moonshot-page-groups.is-layout-card-grid .moonshot-page-groups__items,
	.moonshot-page-groups.is-layout-text-cards .moonshot-page-groups__items,
	.moonshot-page-groups.is-layout-light-text-cards .moonshot-page-groups__items {
		grid-template-columns: minmax(0, 1fr);
	}

	.moonshot-page-groups.is-layout-media-list .moonshot-page-groups__item {
		grid-template-columns: minmax(0, 1fr);
	}

	.moonshot-page-groups.is-layout-media-list .moonshot-page-groups__image {
		aspect-ratio: 16 / 9;
	}

	.moonshot-page-groups--widget.is-layout-media-list .moonshot-page-groups__item {
		grid-template-columns: 5.25rem minmax(0, 1fr);
	}

	.moonshot-page-groups--widget.is-layout-media-list .moonshot-page-groups__image {
		aspect-ratio: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	body .moonshot-page-groups .moonshot-page-groups__item > .moonshot-page-groups__image > img,
	.moonshot-page-groups.is-layout-card-grid .moonshot-page-groups__item {
		transition: none;
	}
}
