/* Altermedia Image Card — enkele kaart.
 * De widget vult de breedte van zijn Elementor-grid/container-cel. Het
 * label-bandje is inline-block (breedte = inhoud) en wrapt bij smalle kolommen
 * i.p.v. af te kappen. Skinnable waarden via Elementor-selectors (CSS-vars).
 */

.am-card {
	display: block;
	position: relative;
	width: 100%;
	text-decoration: none;
	color: inherit;
}

.am-card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #e9e9e9;
}

.am-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 400ms ease;
}

a.am-card:hover .am-card__media img,
a.am-card:focus-visible .am-card__media img {
	transform: scale(1.04);
}

a.am-card:focus-visible {
	outline: 2px solid #00c3de;
	outline-offset: 2px;
}

/* ---- Label-bandje: absoluut linksonder, óver de foto ---- */
.am-card__label {
	position: absolute;
	left: 0;
	bottom: var(--am-overlap, 22px);   /* afstand vanaf onderkant foto */
	z-index: 2;
	display: inline-block;          /* breedte = inhoud -> niet fixed */
	max-width: calc(100% - 8px);    /* nooit breder dan de kaart */
	box-sizing: border-box;
	padding: 6px 30px 3px 10px;     /* rechts ruimer i.v.m. schuine kant */
	background-color: transparent;
	background-image: linear-gradient(
		var(--am-angle, 118deg),
		var(--am-blue, #00c3de) var(--am-solid, 79%),
		#FFFFFF00 0%
	);
	color: #fff;
	font-weight: 700;
	line-height: 1.15;
	text-transform: uppercase;
	overflow-wrap: anywhere;        /* lange woorden breken i.p.v. afkappen */
}

/* ============================================================
 * Altermedia Download Card — icoon (blauw) + rode CTA-pill.
 * Eén kaart per widget; vult de Elementor-grid/container-cel.
 * ============================================================ */

.am-dlcard {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	text-align: center;
	height: 100%;                 /* gelijke hoogte in een grid-rij */
	box-sizing: border-box;
	padding: 30px 24px;
	background-color: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	text-decoration: none;
	color: inherit;
	transform-origin: center;
	transition: transform .25s ease, box-shadow .25s ease;
	will-change: transform;
}

/* Hover: kaart vergroot subtiel en licht op. */
.am-dlcard:hover {
	transform: scale(1.04);
	box-shadow: 0 14px 34px rgba(0, 0, 0, .12);
	z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
	.am-dlcard { transition: none; }
	.am-dlcard:hover { transform: none; }
}

.am-dlcard__icon {
	margin-bottom: 20px;
	line-height: 0;
}

.am-dlcard__icon img {
	display: block;
	width: 130px;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

.am-dlcard__icon svg {
	width: 130px;
	height: auto;
	fill: var(--am-icon-color, #00c3de);
}

.am-dlcard__icon i {
	font-size: 130px;
	color: var(--am-icon-color, #00c3de);
}

/* CTA-pill: jouw recept (padding 10/20, radius 30) in Altermedia-rood. */
.am-dlcard__cta {
	display: inline-block;
	margin: 0;
	padding: 10px 20px;
	border-radius: 30px;
	background-color: #E72B2B;
	color: #fff;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}

.am-dlcard__cta:hover,
.am-dlcard__cta:focus-visible {
	background-color: #c41f1f;
	color: #fff;
}

a.am-dlcard:focus-visible,
.am-dlcard__cta:focus-visible {
	outline: 2px solid #E72B2B;
	outline-offset: 2px;
}