/**
 * Fremhævet artikel – widget styles.
 *
 * No media queries: every responsive value comes from Elementor's own
 * responsive controls, which write CSS custom properties per breakpoint.
 * Media queries here would lose to Elementor's generated desktop CSS, because
 * that CSS has far higher specificity and media queries add none.
 *
 * Layout: image and card share one CSS grid. In the Overlay layout both sit in
 * the same grid cell, so the card lies on top of the image – but because it is
 * a real grid item and not absolutely positioned, the widget still grows if the
 * card ends up taller than the photo, instead of letting it spill over whatever
 * comes next on the page. Stacked, the card simply moves to a second row and is
 * pulled back up over the image with a negative margin.
 */

.mlfa {
	/* Layout (set by the Layout control) */
	--mlfa-media-area: 1 / 1 / 2 / 2;
	--mlfa-card-area: 1 / 1 / 2 / 2;
	--mlfa-card-justify: end;
	--mlfa-card-w-used: var(--mlfa-card-w);
	--mlfa-card-top-used: var(--mlfa-card-top);
	--mlfa-card-right-used: var(--mlfa-card-right);
	--mlfa-cta-mb: calc(-1 * (var(--mlfa-card-pb) + var(--mlfa-cta-overhang)));

	/* Raw values from the style controls */
	--mlfa-card-w: 55%;
	--mlfa-card-top: 80px;
	--mlfa-card-right: 0px;
	--mlfa-card-pull: 40px;

	/* Image */
	--mlfa-ratio: 16 / 9;
	--mlfa-image-fit: cover;

	/* Card */
	--mlfa-card-bg: #ffffff;
	/* Kept in step with the card's bottom padding by the Padding control, because
	   the button has to clear that padding before it can hang over the edge. */
	--mlfa-card-pb: 60px;

	/* Type */
	--mlfa-label-color: #6b6b6b;
	--mlfa-title-color: #3f8220;
	--mlfa-title-color-hover: #2c5c16;
	--mlfa-text-color: #333333;

	/* Button */
	--mlfa-cta-dir: row;
	--mlfa-cta-justify: flex-end;
	--mlfa-cta-overhang: 45px;
	--mlfa-cta-nudge: 0px;
	--mlfa-cta-gap: 14px;
	--mlfa-cta-icon-size: 1em;
	--mlfa-cta-color: #ffffff;
	--mlfa-cta-bg: #4fa12b;
	--mlfa-cta-color-hover: #ffffff;
	--mlfa-cta-bg-hover: #3f8220;

	--mlfa-transition: 250ms;

	position: relative;
	box-sizing: border-box;
	width: 100%;
}

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

/* ==========================================================================
   GRID
   ========================================================================== */

.mlfa__inner {
	display: grid;
	grid-template-columns: 1fr;
}

/* ==========================================================================
   IMAGE
   ========================================================================== */

.mlfa__media {
	grid-area: var(--mlfa-media-area);
	min-width: 0;
}

.mlfa .mlfa__image {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	aspect-ratio: var(--mlfa-ratio);
	object-fit: var(--mlfa-image-fit);
}

/* ==========================================================================
   CARD
   ========================================================================== */

.mlfa__card {
	grid-area: var(--mlfa-card-area);
	justify-self: var(--mlfa-card-justify);
	align-self: start;
	width: var(--mlfa-card-w-used);
	margin-block-start: var(--mlfa-card-top-used);
	margin-inline-end: var(--mlfa-card-right-used);
	padding: 60px;
	background-color: var(--mlfa-card-bg);
}

.mlfa .mlfa__label {
	display: block;
	margin: 0 0 22px 0;
	padding: 0;
	color: var(--mlfa-label-color);
	font-size: 13px;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mlfa .mlfa__title {
	margin: 0 0 24px 0;
	padding: 0;
	color: var(--mlfa-title-color);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.25;
	overflow-wrap: break-word;
}

/* The heading links, so it has to shed the theme's own link styling. */
.mlfa .mlfa__title-link {
	color: inherit;
	text-decoration: none;
	transition: color var(--mlfa-transition) ease;
}

.mlfa .mlfa__title-link:hover,
.mlfa .mlfa__title-link:focus-visible {
	color: var(--mlfa-title-color-hover);
}

.mlfa .mlfa__text {
	color: var(--mlfa-text-color);
	font-size: 17px;
	line-height: 1.6;
}

.mlfa .mlfa__text p {
	margin: 0 0 1.1em 0;
}

.mlfa .mlfa__text p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   BUTTON
   ========================================================================== */

/* The negative block-end margin pulls the card's bottom edge up past the button,
   which is what leaves the button hanging over the edge. It has to cancel the
   card's own bottom padding first, otherwise "Overhang: 45px" only eats into the
   padding and the button still sits inside the card. The card must therefore
   never get overflow:hidden. */
.mlfa__cta-wrap {
	display: flex;
	justify-content: var(--mlfa-cta-justify);
	margin-block-start: 34px;
	margin-block-end: var(--mlfa-cta-mb);
	margin-inline-end: var(--mlfa-cta-nudge);
}

.mlfa .mlfa__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-direction: var(--mlfa-cta-dir);
	gap: var(--mlfa-cta-gap);
	padding: 22px 36px;
	border: 0;
	background-color: var(--mlfa-cta-bg);
	color: var(--mlfa-cta-color);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition:
		background-color var(--mlfa-transition) ease,
		border-color var(--mlfa-transition) ease,
		color var(--mlfa-transition) ease;
}

.mlfa .mlfa__cta:hover,
.mlfa .mlfa__cta:focus-visible {
	background-color: var(--mlfa-cta-bg-hover);
	color: var(--mlfa-cta-color-hover);
	text-decoration: none;
}

.mlfa__cta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: var(--mlfa-cta-icon-size);
	line-height: 1;
}

.mlfa__cta-icon i {
	display: block;
	line-height: 1;
}

.mlfa__cta-icon svg {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* ==========================================================================
   FOCUS
   ========================================================================== */

.mlfa .mlfa__title-link:focus-visible,
.mlfa .mlfa__cta:focus-visible {
	outline: 2px solid var(--mlfa-cta-bg);
	outline-offset: 3px;
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.mlfa .mlfa__title-link,
	.mlfa .mlfa__cta {
		transition: none;
	}
}