/* ARN Media Grid — image and video gallery. Colors come from the Vendix palette. */

.arnsc-media-grid {
	--arnsc-mg-columns: 3;
	--arnsc-mg-gap: 12px;
	--arnsc-mg-ratio: 4 / 3;
	--arnsc-mg-row: 220px;
	--arnsc-mg-radius: 8px;
	--arnsc-mg-overlay: color-mix(in srgb, var(--vendix-color-bg-dark, #111827) 45%, transparent);
	--arnsc-mg-caption-bg: color-mix(in srgb, var(--vendix-color-bg-dark, #111827) 82%, transparent);
	--arnsc-mg-on-dark: #fff;
	--arnsc-mg-icon-color: var(--vendix-color-heading, #111827);
	--arnsc-mg-icon-bg: #fff;
	min-width: 0;
}

/* Filter */

.arnsc-media-grid__filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-block-end: 20px;
}

/* Two classes keep theme button:hover / [type="button"]:hover fills off the buttons. */
.arnsc-media-grid .arnsc-media-grid__filter-button {
	appearance: none;
	min-height: 36px;
	padding: 6px 16px;
	border: 1px solid var(--arnsc-mg-filter-border, var(--vendix-color-border, #d9dde5));
	border-radius: var(--arnsc-mg-filter-radius, 999px);
	background: var(--arnsc-mg-filter-bg, transparent);
	color: var(--arnsc-mg-filter-color, var(--vendix-color-text, #374151));
	font: inherit;
	font-size: 14px;
	line-height: 1.3;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.arnsc-media-grid__filter-button.is-active {
	border-color: var(--arnsc-mg-filter-active-bg, var(--vendix-color-primary, var(--vt-accent, #d71920)));
	background: var(--arnsc-mg-filter-active-bg, var(--vendix-color-primary, var(--vt-accent, #d71920)));
	color: var(--arnsc-mg-filter-active-color, var(--arnsc-mg-on-dark));
}

.arnsc-media-grid__filter-button:focus-visible,
.arnsc-media-grid__more-button:focus-visible,
.arnsc-media-grid__media:focus-visible,
.arnsc-media-grid__link:focus-visible {
	outline: 2px solid var(--vendix-color-primary, var(--vt-accent, #d71920));
	outline-offset: 2px;
}

/* Items: shared */

.arnsc-media-grid__items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.arnsc-media-grid__item {
	min-width: 0;
	margin: 0;
}

.arnsc-media-grid__figure {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
}

.arnsc-media-grid__media {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--arnsc-mg-radius);
	background: var(--vendix-color-bg-light, #f7f8fa);
	color: inherit;
	text-decoration: none;
}

/* Two classes: Elementor's ".elementor img { height: auto }" must not undo the fit. */
.arnsc-media-grid .arnsc-media-grid__image {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	border-radius: 0;
	object-fit: cover;
	transition: transform .5s ease, filter .4s ease;
}

.arnsc-media-grid__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--arnsc-mg-overlay);
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease;
}

/* Grid */

.arnsc-media-grid--grid .arnsc-media-grid__items,
.arnsc-media-grid--masonry .arnsc-media-grid__items,
.arnsc-media-grid--metro .arnsc-media-grid__items {
	display: grid;
	grid-template-columns: repeat(var(--arnsc-mg-columns), minmax(0, 1fr));
	gap: var(--arnsc-mg-gap);
}

.arnsc-media-grid--grid .arnsc-media-grid__media {
	aspect-ratio: var(--arnsc-mg-ratio);
}

/* Masonry: until the script measures the items it is a plain grid in natural heights. */

.arnsc-media-grid--masonry .arnsc-media-grid__items {
	align-items: start;
}

.arnsc-media-grid--masonry .arnsc-media-grid__media {
	aspect-ratio: var(--arnsc-mg-item-ratio, auto);
}

.arnsc-media-grid--masonry .arnsc-media-grid__image {
	height: auto;
}

.arnsc-media-grid--masonry.is-packed .arnsc-media-grid__items {
	grid-auto-rows: 1px;
	row-gap: 0;
}

.arnsc-media-grid--masonry.is-packed .arnsc-media-grid__item {
	margin-block-end: var(--arnsc-mg-gap);
}

/* Metro: fixed rows, tiles never wider than the columns on the screen. */

.arnsc-media-grid--metro .arnsc-media-grid__items {
	grid-auto-rows: var(--arnsc-mg-row);
	grid-auto-flow: dense;
}

.arnsc-media-grid--metro .arnsc-media-grid__item--wide,
.arnsc-media-grid--metro .arnsc-media-grid__item--large {
	grid-column: span 2;
}

/* Where the browser computes a span, a wide tile never spans more columns than there are. */
@supports (grid-column: span min(2, 3)) {
	.arnsc-media-grid--metro .arnsc-media-grid__item--wide,
	.arnsc-media-grid--metro .arnsc-media-grid__item--large {
		grid-column: span min(2, var(--arnsc-mg-columns));
	}
}

.arnsc-media-grid--metro .arnsc-media-grid__item--tall,
.arnsc-media-grid--metro .arnsc-media-grid__item--large {
	grid-row: span 2;
}

.arnsc-media-grid--metro .arnsc-media-grid__media {
	flex: 1 1 auto;
	min-height: 0;
}

/* Justified: rows of equal height, each image as wide as its own ratio. */

.arnsc-media-grid--justified .arnsc-media-grid__items {
	display: flex;
	flex-wrap: wrap;
	gap: var(--arnsc-mg-gap);
}

.arnsc-media-grid--justified .arnsc-media-grid__items::after {
	content: "";
	flex-grow: 1000000;
}

.arnsc-media-grid--justified .arnsc-media-grid__item {
	flex: calc(var(--arnsc-mg-item-ratio, 4 / 3)) 1 calc(var(--arnsc-mg-item-ratio, 4 / 3) * var(--arnsc-mg-row));
}

.arnsc-media-grid--justified .arnsc-media-grid__media {
	aspect-ratio: var(--arnsc-mg-item-ratio, 4 / 3);
}

/* Captions */

/* The caption is a <figcaption>: theme figcaption type (italic, small, gray) is reset. */
.arnsc-media-grid__caption {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	color: inherit;
	font-size: inherit;
	font-style: normal;
	line-height: inherit;
}

.arnsc-media-grid__title {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}

.arnsc-media-grid__description {
	font-size: 13px;
	line-height: 1.5;
}

.arnsc-media-grid__category {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	line-height: 1.4;
	text-transform: uppercase;
}

.arnsc-media-grid--caption-overlay .arnsc-media-grid__caption,
.arnsc-media-grid--caption-hover .arnsc-media-grid__caption {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	padding: 12px 14px;
	border-end-start-radius: var(--arnsc-mg-radius);
	border-end-end-radius: var(--arnsc-mg-radius);
	background: var(--arnsc-mg-caption-bg);
	color: var(--arnsc-mg-on-dark);
	pointer-events: none;
	transition: opacity .3s ease, transform .3s ease;
}

.arnsc-media-grid--caption-overlay .arnsc-media-grid__title,
.arnsc-media-grid--caption-hover .arnsc-media-grid__title {
	color: var(--arnsc-mg-title-color, var(--arnsc-mg-on-dark));
}

.arnsc-media-grid--caption-overlay .arnsc-media-grid__description,
.arnsc-media-grid--caption-hover .arnsc-media-grid__description {
	color: var(--arnsc-mg-description-color, color-mix(in srgb, var(--arnsc-mg-on-dark) 82%, transparent));
}

.arnsc-media-grid--caption-overlay .arnsc-media-grid__category,
.arnsc-media-grid--caption-hover .arnsc-media-grid__category {
	color: var(--arnsc-mg-category-color, var(--vendix-color-accent, var(--vt-accent, #d8b25b)));
}

.arnsc-media-grid--caption-below .arnsc-media-grid__caption {
	padding: 10px 2px 0;
	background: var(--arnsc-mg-caption-bg-below, transparent);
}

.arnsc-media-grid--caption-below .arnsc-media-grid__title {
	color: var(--arnsc-mg-title-color, var(--vendix-color-heading, #111827));
}

.arnsc-media-grid--caption-below .arnsc-media-grid__description {
	color: var(--arnsc-mg-description-color, var(--vendix-color-muted, #6b7280));
}

.arnsc-media-grid--caption-below .arnsc-media-grid__category {
	color: var(--arnsc-mg-category-color, var(--vendix-color-primary, var(--vt-accent, #d71920)));
}

/* Icons */

.arnsc-media-grid__svg {
	display: block;
	width: 22px;
	height: 22px;
}

.arnsc-media-grid__icon,
.arnsc-media-grid__play {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: grid;
	place-items: center;
	margin: auto;
	border-radius: 50%;
	pointer-events: none;
}

.arnsc-media-grid__icon {
	width: 46px;
	height: 46px;
	background: var(--arnsc-mg-icon-bg);
	color: var(--arnsc-mg-icon-color);
	opacity: 0;
	transition: opacity .3s ease;
}

.arnsc-media-grid__play {
	width: 56px;
	height: 56px;
	background: var(--vendix-color-primary, var(--vt-accent, #d71920));
	color: var(--arnsc-mg-on-dark);
}

.arnsc-media-grid__play .arnsc-media-grid__svg {
	margin-inline-start: 3px;
}

.arnsc-media-grid__link {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-end: 10px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--arnsc-mg-icon-bg);
	color: var(--arnsc-mg-icon-color);
}

.arnsc-media-grid__link .arnsc-media-grid__svg {
	width: 18px;
	height: 18px;
}

/* Hover (pointer devices only; touch screens keep captions and links visible). */

@media (hover: hover) {
	.arnsc-media-grid--caption-hover .arnsc-media-grid__caption {
		opacity: 0;
		transform: translateY(6px);
	}

	.arnsc-media-grid__item:hover .arnsc-media-grid__caption,
	.arnsc-media-grid__item:focus-within .arnsc-media-grid__caption {
		opacity: 1;
		transform: none;
	}

	.arnsc-media-grid__link {
		opacity: 0;
		transition: opacity .3s ease;
	}

	.arnsc-media-grid__item:hover .arnsc-media-grid__link,
	.arnsc-media-grid__item:focus-within .arnsc-media-grid__link,
	.arnsc-media-grid__item:hover .arnsc-media-grid__icon,
	.arnsc-media-grid__media:focus-visible .arnsc-media-grid__icon {
		opacity: 1;
	}

	/* A keyboard focus inside the item shows the same state as the pointer. */
	.arnsc-media-grid--hover-zoom .arnsc-media-grid__item:hover .arnsc-media-grid__image,
	.arnsc-media-grid--hover-zoom .arnsc-media-grid__item:focus-within .arnsc-media-grid__image {
		transform: scale(1.06);
	}

	.arnsc-media-grid--hover-grayscale .arnsc-media-grid__image {
		filter: grayscale(1);
	}

	.arnsc-media-grid--hover-grayscale .arnsc-media-grid__item:hover .arnsc-media-grid__image,
	.arnsc-media-grid--hover-grayscale .arnsc-media-grid__item:focus-within .arnsc-media-grid__image {
		filter: none;
	}

	.arnsc-media-grid--hover-blur .arnsc-media-grid__image {
		filter: blur(3px);
		transform: scale(1.04);
	}

	.arnsc-media-grid--hover-blur .arnsc-media-grid__item:hover .arnsc-media-grid__image,
	.arnsc-media-grid--hover-blur .arnsc-media-grid__item:focus-within .arnsc-media-grid__image {
		filter: none;
		transform: none;
	}

	.arnsc-media-grid--hover-dim .arnsc-media-grid__item:hover .arnsc-media-grid__media::after,
	.arnsc-media-grid--hover-dim .arnsc-media-grid__item:focus-within .arnsc-media-grid__media::after {
		opacity: 1;
	}
}

/* Load more */

.arnsc-media-grid__more {
	display: flex;
	justify-content: center;
	margin-block-start: 24px;
}

.arnsc-media-grid .arnsc-media-grid__more-button {
	appearance: none;
	min-height: 44px;
	padding: 10px 26px;
	border: 0;
	border-radius: 999px;
	background: var(--arnsc-mg-more-bg, var(--vendix-color-primary, var(--vt-accent, #d71920)));
	color: var(--arnsc-mg-more-color, var(--arnsc-mg-on-dark));
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

/* Phones */

@media (max-width: 767px) {
	.arnsc-media-grid__filter {
		flex-wrap: nowrap;
		margin-block-end: 16px;
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.arnsc-media-grid__filter::-webkit-scrollbar {
		display: none;
	}

	.arnsc-media-grid--filter-wrap .arnsc-media-grid__filter {
		flex-wrap: wrap;
		overflow-x: visible;
	}

	.arnsc-media-grid__filter-button {
		flex: 0 0 auto;
	}

	.arnsc-media-grid--justified .arnsc-media-grid__item {
		flex-basis: 100%;
	}

	.arnsc-media-grid--caption-overlay .arnsc-media-grid__caption,
	.arnsc-media-grid--caption-hover .arnsc-media-grid__caption {
		padding: 10px 12px;
	}
}

/* Reduced motion: the hover and focus states change at once. */

@media (prefers-reduced-motion: reduce) {
	.arnsc-media-grid .arnsc-media-grid__filter-button,
	.arnsc-media-grid .arnsc-media-grid__image,
	.arnsc-media-grid__media::after,
	.arnsc-media-grid--caption-overlay .arnsc-media-grid__caption,
	.arnsc-media-grid--caption-hover .arnsc-media-grid__caption,
	.arnsc-media-grid__icon,
	.arnsc-media-grid__link {
		transition: none;
	}
}