/* Elementor flex containers size widgets to their content; force the Gallery
   widget wrapper to span the full width of its parent (same as FAQ). */
.elementor-element.elementor-widget-atletec-gallery {
	--container-widget-width: 100%;
	--container-widget-flex-grow: 1;
	width: 100%;
	max-width: 100%;
	flex-grow: 1;
}

.ate-gallery {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 1288px;
	margin: 0 auto;
	border: 5px solid #abff4f;
	border-radius: 40px;
	overflow: hidden;
}

.ate-gallery * {
	box-sizing: border-box;
}

.ate-gallery__glow {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 1015px;
	height: 1015px;
	max-width: 130%;
	pointer-events: none;
	z-index: 0;
}

.ate-gallery__glow img {
	display: block;
	width: 100%;
	height: 100%;
}

.ate-gallery__grid {
	--ate-gallery-r: 20px;
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 416px;
	gap: 20px;
}

.ate-gallery__item {
	position: relative;
	overflow: hidden;
	/* Per-position shape from inline --ate-r-d/-t/-m (see gallery.php);
	   tablet/mobile switch lives in the plugin's responsive inline CSS. */
	border-radius: var(--ate-r-d, 0);
	background-color: #ffffff;
}

.ate-gallery__item img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/* Lightbox trigger: the whole cell is the link. */
.ate-gallery__link {
	position: absolute;
	inset: 0;
	display: block;
	border-radius: inherit;
	cursor: zoom-in;
}

.ate-gallery__link img {
	transition: transform 0.35s ease;
}

.ate-gallery__link:hover img,
.ate-gallery__link:focus-visible img {
	transform: scale(1.03);
}

/* The link fills the cell, and the cell clips (overflow: hidden), so draw
   the focus ring inside. */
.ate-gallery__link:focus-visible {
	outline: 3px solid var(--ate-focus, #2667ff);
	outline-offset: -6px;
	box-shadow: inset 0 0 0 9px #ffffff;
}
