/**
 * WPFlexStudio — Downloads widget.
 *
 * Grid: 4 items per row on desktop, 2 on tablet, 1 on mobile. Breakpoints
 * match Elementor's own default responsive breakpoints (Tablet: max-width
 * 1024px, Mobile: max-width 767px), same as the Members Grid widget.
 * Column count stays static CSS (fixed spec, not requested as a user
 * control). Grid gap and item gap are NOT static — they are exclusively
 * Elementor responsive controls (Style tab -> Layout), see the comment
 * below.
 */

.wpflexstudio-downloads,
.wpflexstudio-downloads *,
.wpflexstudio-downloads *::before,
.wpflexstudio-downloads *::after {
	box-sizing: border-box;
}

.wpflexstudio-downloads {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: start;
}

@media (max-width: 1024px) {
	.wpflexstudio-downloads {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.wpflexstudio-downloads {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
}

.wpflexstudio-downloads__item {
	display: flex;
	flex-direction: column;
	min-width: 0;
	position: relative;
	height: 100%;
}

.wpflexstudio-downloads__image-wrap {
	overflow: hidden;
	min-width: 0;
	flex-grow: 1;
}

.wpflexstudio-downloads__image {
	display: block;
	width: auto;
	height: 100% !important;
	max-height: 390px;
	transition: transform 0.3s ease;
	object-fit: cover;
}

.wpflexstudio-downloads__item:hover .wpflexstudio-downloads__image {
	transform: scale(1.03);
}

.wpflexstudio-downloads__text-wrap {
	position: absolute;
	bottom: 0;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: linear-gradient(to top, #000c 0%, #0000 100%);
}

.wpflexstudio-downloads__title,
.wpflexstudio-downloads__text {
	min-width: 0;
	overflow-wrap: break-word;
}

.wpflexstudio-downloads__link {
	display: block;
	min-width: 0;
	overflow-wrap: break-word;
	width: fit-content;
	text-decoration: none;
}

.wpflexstudio-downloads__link:hover {
	text-decoration: underline;
}

.wpflexstudio-downloads__editor-notice {
	padding: 16px;
	border: 1px dashed #d0d0d0;
	color: #6d6d6d;
	font-style: italic;
}