/* ==========================================================================
   AurumVia Custom Styles
   ========================================================================== */

/* ---------- Dimmed button style ---------- */
.wp-block-button.is-style-dimmed .wp-block-button__link {
	background: transparent;
	border: none;
	color: var(--wp--preset--color--foreground);
	opacity: 0.8;
	transition:
		opacity 0.2s ease,
		background-color 0.2s ease;
}

.wp-block-button.is-style-dimmed .wp-block-button__link:hover {
	background: rgba(0, 0, 0, 0.15);
	opacity: 1;
}

/* ---------- Smooth scroll ---------- */
html {
	scroll-behavior: smooth;
}

/* ---------- Line breaking ----------
   Stop a single word being stranded on the last line ("…Europe and the / USA.").
   `pretty` asks the browser to pull a word down from the previous line instead;
   `balance` evens out short headings across their lines. Both are progressive —
   a browser without support simply wraps as before. */
p,
li,
figcaption,
.wp-block-paragraph {
	text-wrap: pretty;
}

h1,
h2,
h3,
h4,
.wp-block-heading {
	text-wrap: balance;
}

/* ---------- Gold gradient text ---------- */
.text-gold-gradient,
mark.has-inline-color {
	background: linear-gradient(135deg, #c9a84c, #d4b96a) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	background-clip: text !important;
}

/* ---------- Gold border glow ---------- */
.gold-border-glow {
	box-shadow: 0 0 20px -5px rgba(201, 168, 76, 0.3);
}

/* ==========================================================================
   Header / Navbar
   ========================================================================== */
.site-header {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	transition:
		background-color 0.5s ease,
		backdrop-filter 0.5s ease,
		border-color 0.5s ease,
		box-shadow 0.5s ease,
		padding 0.35s ease;
	background-color: transparent !important;
	border-bottom: 1px solid transparent !important;
	box-shadow: none !important;
	overflow: visible !important;
}

.site-header:has(.is-menu-open) {
	overflow: visible !important;
	height: auto !important;
}

.site-header.scrolled {
	background-color: rgba(19, 19, 17, 0.9) !important;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(201, 168, 76, 0.1) !important;
	padding-top: 0.5rem !important;
	padding-bottom: 0.5rem !important;
}

/* Logo shrinks once the page is scrolled, handing the height back to the content.
   The width is set inline on the English and Russian logos — they are image
   blocks rather than the site-logo block — so these have to win with !important.
   The two headers share the .site-logo class, which is what keeps this to one rule. */
.site-header .site-logo img {
	transition:
		width 0.35s ease,
		height 0.35s ease;
}

.site-header.scrolled .site-logo img {
	width: 68px !important;
	height: auto !important;
}

@media (max-width: 781px) {
	/* A 100px mark is a quarter of a phone's width before scrolling even starts. */
	.site-header .site-logo img {
		width: 84px !important;
		height: auto !important;
	}

	.site-header.scrolled .site-logo img {
		width: 52px !important;
	}

	.site-header.scrolled {
		padding-top: 0.35rem !important;
		padding-bottom: 0.35rem !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-header .site-logo img {
		transition: none;
	}
}

/* WordPress core gives every group with a background `padding: 1.25em 2.375em`
   through a :where() rule. On a phone those sides eat roughly a fifth of the
   width, so halve them — vertical rhythm is left alone. The core rule carries
   zero specificity, so a plain class selector wins without !important, and
   groups that set their own padding inline are untouched either way. */
@media (max-width: 781px) {
	.wp-block-group.has-background {
		padding-left: 1.1875em;
		padding-right: 1.1875em;
	}
}

/* Full-width bands carry 6rem top and bottom. Neighbouring bands share the same
   background, so nothing marks the seam and the two paddings read as one gap —
   12rem, about two thirds of a phone screen with nothing in it. Halve them on
   mobile so the gaps stay smaller than the content they separate. The bands set
   their padding inline, hence !important. */
@media (max-width: 781px) {
	#par-mums,
	#pakalpojumi,
	#projekti,
	#partneri,
	#galerija {
		padding-top: 3rem !important;
		padding-bottom: 3rem !important;
	}

	/* 4rem under a section heading outweighs the spacing inside the section it
	   introduces, which is what makes the block feel top-heavy on a phone. */
	#par-mums > .wp-block-heading,
	#pakalpojumi > .wp-block-heading,
	#projekti > .wp-block-heading,
	#partneri > .wp-block-heading,
	#galerija > .wp-block-heading {
		margin-bottom: 2.25rem !important;
	}
}

/* Nav link colors & sliding underline */
.site-header .wp-block-navigation a {
	color: rgba(237, 232, 217, 0.8) !important;
	transition: color 0.3s ease;
	text-decoration: none !important;
	position: relative;
}

.site-header .wp-block-navigation a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 1px;
	background: #c9a84c;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}

.site-header .wp-block-navigation a:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}

.site-header .wp-block-navigation a:not(:hover)::after {
	transform: scaleX(0);
	transform-origin: right;
}

.site-header .wp-block-navigation a:hover {
	color: #c9a84c !important;
}

/* Mobile menu overlay */
.site-header .wp-block-navigation__responsive-container.is-menu-open,
.site-header
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-dialog {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	height: 100dvh !important;
	max-width: none !important;
	max-height: none !important;
	background-color: #131311 !important;
	z-index: 9999 !important;
	overflow-y: auto !important;
}

.site-header
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
}

.site-header
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 0.5rem;
}

.site-header
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item {
	display: flex !important;
	justify-content: center !important;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open a {
	color: rgba(237, 232, 217, 0.8) !important;
	font-size: 1.5rem;
	text-align: center !important;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open a:hover {
	color: #c9a84c !important;
}

/* Language switcher — the active button uses the fill style, which carries no border,
   while the others are outlined with a 1px border. Without a matching transparent
   border the active button renders 2px smaller than its neighbours. */
.lang-buttons .wp-block-button.is-style-fill .wp-block-button__link {
	border: 1px solid transparent;
}

/* Hover: an inactive language warms to gold, the active one lifts a shade. The
   !important matches the specificity of the nav link colours, which the cloned
   switcher inside the mobile menu would otherwise inherit. */
.lang-buttons .wp-block-button__link {
	transition:
		background-color 0.3s ease,
		border-color 0.3s ease,
		color 0.3s ease;
}

.lang-buttons .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: rgba(201, 168, 76, 0.16);
	border-color: #c9a84c;
	color: #c9a84c !important;
}

.lang-buttons .wp-block-button.is-style-fill .wp-block-button__link:hover {
	background: #d4b96a;
	color: #131311 !important;
}

/* The current language is not a destination, so it should not invite a click. */
.lang-buttons .wp-block-button__link[aria-current="page"] {
	cursor: default;
}

/* Lang buttons in mobile menu */
.mobile-lang-buttons {
	display: none !important;
}

.wp-block-navigation__responsive-container.is-menu-open .mobile-lang-buttons {
	display: flex !important;
	justify-content: center;
	margin-top: 2rem;
	gap: 0.5rem;
}

.site-header
	.wp-block-navigation__responsive-container.is-menu-open
	.mobile-lang-buttons
	a {
	font-size: 14px !important;
	text-decoration: none !important;
}

.site-header
	.wp-block-navigation__responsive-container.is-menu-open
	.mobile-lang-buttons
	a:hover {
	text-decoration: none !important;
}

.site-header
	.wp-block-navigation__responsive-container.is-menu-open
	.mobile-lang-buttons
	.is-style-fill
	a,
.site-header
	.wp-block-navigation__responsive-container.is-menu-open
	.mobile-lang-buttons
	.is-style-fill
	a:hover {
	color: var(--wp--preset--color--background) !important;
}

.site-header
	.wp-block-navigation__responsive-container.is-menu-open
	.mobile-lang-buttons
	.is-style-dimmed
	a,
.site-header
	.wp-block-navigation__responsive-container.is-menu-open
	.mobile-lang-buttons
	.is-style-dimmed
	a:hover {
	color: var(--wp--preset--color--foreground) !important;
}

/* Close button — match hamburger position */
.site-header .wp-block-navigation__responsive-container-close {
	font-size: 2rem !important;
	position: absolute !important;
	top: 1rem;
	right: 1rem;
}

/* Hamburger visible when scrolled */
.site-header .wp-block-navigation__responsive-container-open {
	z-index: 60;
}

/* Hamburger button color */
.site-header .wp-block-navigation__responsive-container-open,
.site-header .wp-block-navigation__responsive-container-close {
	color: #ede8d9 !important;
}

/* ==========================================================================
   Scroll animation (fade-in-up)
   ========================================================================== */
@keyframes fade-in-up {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.scroll-animate {
	opacity: 0;
	transition: opacity 0.1s;
}

.editor-styles-wrapper .scroll-animate {
	opacity: 1;
}

.scroll-animate.animate-fade-in-up {
	animation: fade-in-up 0.8s ease-out forwards;
}

/* ==========================================================================
   Before/After Slider
   ========================================================================== */
.before-after-slider {
	position: relative;
	cursor: ew-resize;
	user-select: none;
	-webkit-user-select: none;
	touch-action: none;
}

/* The comparison halves may be stills or clips, and both sides must be laid out
   identically for the divider to line up. */
.before-after-slider img,
.before-after-slider video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.before-after-slider .ba-after {
	position: absolute;
	inset: 0;
}

.before-after-slider .ba-before-clip {
	position: absolute;
	inset: 0;
	overflow: hidden;
	width: 50%;
}

/* The divider follows the cursor untransitioned so it tracks exactly, then eases
   back to the middle once the cursor leaves. Duration must match RETURN_MS in
   before-after.js. */
.before-after-slider.is-returning .ba-before-clip {
	transition: width 0.45s cubic-bezier(0.33, 1, 0.68, 1);
}

.before-after-slider.is-returning .ba-handle {
	transition: left 0.45s cubic-bezier(0.33, 1, 0.68, 1);
}

@media (prefers-reduced-motion: reduce) {
	.before-after-slider.is-returning .ba-before-clip,
	.before-after-slider.is-returning .ba-handle {
		transition: none;
	}
}

.before-after-slider .ba-before {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	object-fit: cover;
}

.before-after-slider .ba-handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	background: #c9a84c;
	z-index: 10;
	transform: translateX(-50%);
}

.before-after-slider .ba-handle-circle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #c9a84c;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #131311;
}

/* Demo sweep shown once when the slider scrolls into view — lifts the handle
   slightly so the movement reads as "this is draggable". */
.before-after-slider.is-demo .ba-handle-circle {
	transform: translate(-50%, -50%) scale(1.12);
	box-shadow: 0 0 0 6px rgba(201, 168, 76, 0.25);
}

.before-after-slider .ba-handle-circle {
	transition:
		transform 0.35s ease,
		box-shadow 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
	.before-after-slider .ba-handle-circle {
		transition: none;
	}
}

.before-after-slider .ba-label {
	position: absolute;
	bottom: 12px;
	z-index: 20;
	padding: 4px 12px;
	font-family: "DM Sans", sans-serif;
	font-size: 0.75rem;
	border-radius: 2px;
}

.before-after-slider .ba-label-before {
	left: 12px;
	background: rgba(19, 19, 17, 0.7);
	backdrop-filter: blur(4px);
	color: #ede8d9;
}

.before-after-slider .ba-label-after {
	right: 12px;
	background: rgba(201, 168, 76, 0.9);
	color: #131311;
}

/* ==========================================================================
   Gallery & Lightbox
   ========================================================================== */
.aurumvia-gallery .wp-block-image {
	border-radius: 2px;
	overflow: hidden;
	cursor: pointer;
}

.aurumvia-gallery .wp-block-image img {
	transition: transform 0.7s ease;
}

.aurumvia-gallery .wp-block-image:hover img {
	transform: scale(1.1);
}

/* Lightbox overlay */
.aurumvia-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(19, 19, 17, 0.95);
	backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.aurumvia-lightbox.active {
	opacity: 1;
	pointer-events: all;
}

.aurumvia-lightbox img {
	max-height: 85vh;
	max-width: 90vw;
	object-fit: contain;
	border-radius: 2px;
}

.aurumvia-lightbox-close,
.aurumvia-lightbox-prev,
.aurumvia-lightbox-next {
	position: absolute;
	background: none;
	border: none;
	color: rgba(237, 232, 217, 0.7);
	cursor: pointer;
	transition: color 0.3s ease;
	padding: 8px;
	z-index: 10;
}

.aurumvia-lightbox-close:hover,
.aurumvia-lightbox-prev:hover,
.aurumvia-lightbox-next:hover {
	color: #ede8d9;
}

.aurumvia-lightbox-close {
	top: 24px;
	right: 24px;
	font-size: 2rem;
	line-height: 1;
}

.aurumvia-lightbox-prev {
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 2.5rem;
}

.aurumvia-lightbox-next {
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 2.5rem;
}

/* ==========================================================================
   Marquee
   ========================================================================== */
@keyframes marquee {
	0% {
		transform: translateX(0);
	}
	100% {
		/* marquee.js measures one full set and sets --marquee-shift; the -50%
		   fallback only applies if the script has not run yet. */
		transform: translateX(calc(-1 * var(--marquee-shift, 50%)));
	}
}

.marquee-container {
	overflow: hidden !important;
}

.marquee-track {
	/* Spacing has to come from a margin on each logo, not flex gap. Gap only sits
	   *between* items, so a duplicated track of 2N logos has 2N-1 gaps and -50%
	   lands half a gap short of a whole set — a 32px jump on every loop. With a
	   trailing margin instead, every item advances the same distance and the two
	   halves line up exactly. */
	gap: 0 !important;

	/* The keyframe travels a fixed -50%, so duration sets distance-per-second
	   rather than speed; keep it at ~3s per logo so adding one does not speed
	   the whole marquee up. 13 logos x 3s = 39s. */
	animation: marquee 39s linear infinite;
	will-change: transform;
}

.marquee-track:hover {
	animation-play-state: paused;
}

.marquee-logo {
	width: 120px;
	flex-shrink: 0;
	/* Replaces the track's flex gap — see .marquee-track above. Needs !important:
	   the image block's own margin rules reset it to 0 otherwise, which closes the
	   loop correctly but leaves the logos touching. */
	margin-right: 4rem !important;
}

.marquee-logo img {
	opacity: 0.6;
	transition: opacity 0.3s ease;
	object-fit: contain;
	width: 100%;
	height: auto;
}

/* Disable marquee in Gutenberg editor */
.editor-styles-wrapper .marquee-container {
	overflow: visible !important;
}

.editor-styles-wrapper .marquee-track {
	animation: none;
	flex-wrap: wrap;
}

.marquee-logo:hover img {
	opacity: 1;
}

/* ==========================================================================
   Service Cards
   ========================================================================== */
/* Six service cards live in one columns block, and core forces columns to
   flex-wrap: nowrap above 782px — which would squeeze six cards into six narrow
   strips. Grid instead, so they wrap into rows of three. */
.services-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

.services-grid > .wp-block-column {
	flex-basis: auto !important;
	margin: 0 !important;
}

@media (max-width: 1080px) {
	.services-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 781px) {
	.services-grid {
		grid-template-columns: 1fr;
	}
}

.service-card {
	overflow: hidden;
	transition:
		transform 0.5s ease,
		box-shadow 0.5s ease;
}

/* Two-word service names wrap; 1.2 was too tight once they did. */
.service-card h3 {
	line-height: 1.3;
}

.service-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 0 20px -5px rgba(201, 168, 76, 0.3);
}

.service-card-image {
	overflow: hidden;
	margin-bottom: 0 !important;
	max-width: 100% !important;
}

.service-card-image img {
	width: 100% !important;
	aspect-ratio: 3/2;
	object-fit: cover;
	transition: transform 0.7s ease;
}

.service-card:hover .service-card-image img {
	transform: scale(1.05);
}

/* ==========================================================================
   Service Number Circles
   ========================================================================== */
.service-number.wp-block-group {
	width: 40px !important;
	height: 40px !important;
	min-width: 40px;
	flex-shrink: 0;
	margin: 0;
}

/* ==========================================================================
   Services Detail Cards
   ========================================================================== */
.services-detail .wp-block-column {
	transition: box-shadow 0.4s ease;
}

.services-detail .wp-block-column:hover {
	box-shadow: 0 4px 24px -4px rgba(201, 168, 76, 0.25);
}

/* ==========================================================================
   Hero specifics
   ========================================================================== */
.aurumvia-hero {
	position: relative;
	min-height: min(100vh, 56.25vw) !important;
	max-height: 100vh;
	overflow: hidden;
}

.aurumvia-hero .wp-block-cover__video-background {
	object-fit: cover;
	object-position: center center;
}

@media (max-width: 781px) {
	.aurumvia-hero {
		min-height: 80svh !important;
	}

	.aurumvia-hero .wp-block-cover__video-background {
		width: auto;
		height: 100%;
		min-width: 100%;
		object-position: center center;
	}
}

.aurumvia-hero .wp-block-cover__inner-container {
	position: relative;
}

/* Scroll indicator */
.aurumvia-hero::after {
	content: "";
	position: absolute;
	bottom: 32px;
	left: 50%;
	transform: translateX(-50%);
	width: 20px;
	height: 32px;
	border: 2px solid rgba(237, 232, 217, 0.3);
	border-radius: 9999px;
}

.aurumvia-hero::before {
	content: "";
	position: absolute;
	bottom: 38px;
	left: 50%;
	transform: translateX(-50%);
	width: 4px;
	height: 8px;
	background: #c9a84c;
	border-radius: 9999px;
	z-index: 1;
	animation: bounce 1.5s infinite;
}

@keyframes bounce {
	0%,
	100% {
		transform: translateX(-50%) translateY(0);
	}
	50% {
		transform: translateX(-50%) translateY(6px);
	}
}

/* ==========================================================================
   Contact Form 7 Styling
   ========================================================================== */
/* .wpcf7 {
	max-width: 480px;
} */

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
	width: 100%;
	box-sizing: border-box;
	background: #2a2a27;
	border: 1px solid rgba(201, 168, 76, 0.15);
	border-radius: 2px;
	padding: 12px 16px;
	color: #ede8d9;
	font-family: "DM Sans", sans-serif;
	font-size: 0.875rem;
	transition: border-color 0.3s ease;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus {
	outline: none;
	border-color: #c9a84c;
}

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
	color: #9a9080;
}

.wpcf7 input[type="submit"] {
	width: 100%;
	padding: 14px 32px;
	background: #c9a84c;
	color: #131311;
	font-family: "DM Sans", sans-serif;
	font-weight: 600;
	border: none;
	border-radius: 2px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.wpcf7 input[type="submit"]:hover {
	background: #d4b96a;
}

.wpcf7 .wpcf7-not-valid-tip {
	color: #ef4444;
	font-size: 0.75rem;
	margin-top: 4px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 781px) {
	.services-grid {
		flex-direction: column !important;
	}

	.about-stats .wp-block-column {
		flex-basis: auto !important;
	}
}

/* ==========================================================================
   Section rhythm
   ========================================================================== */
/* Full-width sections carry their own vertical padding. Without this, the default
   root block gap leaves a 24px strip of page background between them, which shows
   as a seam wherever two neighbouring sections share a background colour. */
.wp-site-blocks > .wp-block-group,
.wp-site-blocks > .wp-block-cover,
.wp-block-post-content > .wp-block-group,
.wp-block-post-content > .wp-block-cover {
	margin-block-start: 0;
}

/* Social links in footer and on the contact page */
.site-footer .wp-block-social-links .wp-social-link,
.contact-socials .wp-social-link {
	background: transparent !important;
	border: 1px solid rgba(237, 232, 217, 0.2);
	border-radius: 50%;
	color: #ede8d9 !important;
	transition:
		background-color 0.3s ease,
		border-color 0.3s ease,
		box-shadow 0.3s ease;
}

.site-footer .wp-block-social-links .wp-social-link svg,
.contact-socials .wp-social-link svg {
	fill: #ede8d9 !important;
}

.site-footer .wp-block-social-links .wp-social-link:hover,
.contact-socials .wp-social-link:hover {
	background: #1a1a18 !important;
	border-color: rgba(237, 232, 217, 0.35);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.site-footer .wp-block-social-links .wp-social-link:hover svg,
.contact-socials .wp-social-link:hover svg {
	fill: #ede8d9 !important;
}

/* Footer links */
.site-footer a {
	color: #9a9080 !important;
	text-decoration: none;
	transition: color 0.3s ease;
}

.site-footer a:hover {
	color: #c9a84c !important;
}
/* ==========================================================================
   Gallery masonry — stills and clips in one grid
   ========================================================================== */
/* Every tile keeps its own aspect ratio, so the grid uses a fine row unit and
   gallery-masonry.js converts each tile's measured height into a row span. That is
   the only way to get true masonry while still letting a tile span two columns —
   CSS multi-column can do the former, plain grid the latter, neither does both. */
.aurumvia-gallery-masonry {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	grid-auto-rows: 4px;
	gap: 12px;
	/* Let later tiles back-fill the holes a two-column tile leaves beside it. The
	   first tile is still placed first, so the lead clip keeps its position. */
	grid-auto-flow: row dense;
}

.gm-item {
	position: relative;
	margin: 0;
	/* Keep the tile at its content height rather than stretching it to fill the
	   rows the span reserved, which would distort the aspect ratio. */
	align-self: start;
	cursor: pointer;
}

/* Landscape clips take two columns so the motion reads at a usable size. */
.gm-item.is-wide {
	grid-column: span 2;
}

/* Below two columns' worth of width there is nothing to span. */
@media (max-width: 540px) {
	.gm-item.is-wide {
		grid-column: span 1;
	}
}

.gm-thumb {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 2px;
	background: #0d0d0c;
}

.gm-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition:
		transform 0.5s ease,
		opacity 0.3s ease;
}

.gm-item:hover img {
	transform: scale(1.04);
	opacity: 0.85;
}

/* Motion preview, layered over the poster and faded in once it starts. */
.aurumvia-video-preview {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}

.gm-item.is-previewing .aurumvia-video-preview {
	opacity: 1;
}

/* Play badge — clips only. */
.gm-item.is-video .gm-thumb::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	width: 54px;
	height: 54px;
	margin: -27px 0 0 -27px;
	border-radius: 50%;
	background: rgba(19, 19, 17, 0.6);
	border: 1px solid rgba(201, 168, 76, 0.7);
	backdrop-filter: blur(3px);
	transition:
		background-color 0.3s ease,
		transform 0.3s ease;
}

/* The arrow sits above the circle; at equal z-index ::after would win, as it
   paints later. */
.gm-item.is-video .gm-thumb::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 3;
	margin: -9px 0 0 -5px;
	border-style: solid;
	border-width: 9px 0 9px 14px;
	border-color: transparent transparent transparent #c9a84c;
	transition: border-left-color 0.3s ease;
}

.gm-item.is-video:hover .gm-thumb::after {
	background: rgba(201, 168, 76, 0.9);
	transform: scale(1.08);
}

.gm-item.is-video:hover .gm-thumb::before {
	border-left-color: #131311;
}

/* Video inside the lightbox */
.aurumvia-lightbox video {
	max-width: 92vw;
	max-height: 88vh;
	outline: none;
}