/* ------------------------------------------------------------------
   Dalafisk – media with text
   ------------------------------------------------------------------
   Ported from HTMLdesigns/ (.varfor). Text column on the left, illustration
   on the right bleeding off the window edge.

   Design class names mapped to the theme's vocabulary:
     varfor            -> dalafisk-media-with-text
     varfor__text      -> dalafisk-media-with-text--content
     varfor__lead      -> dalafisk-media-with-text--lead
     brod              -> dalafisk-media-with-text--body
     varfor__fot       -> dalafisk-media-with-text--footer
     varfor__halsning  -> dalafisk-media-with-text--signature
     varfor__bild      -> dalafisk-media-with-text--media
     varfor__foto      -> dalafisk-media-with-text--image
     hjarta            -> dalafisk-media-with-text--inline-image
   ------------------------------------------------------------------ */

.dalafisk-media-with-text {
	/* This band is narrower than the rest of the page: the design centres it
	   at 1380px rather than the 1760px used elsewhere. */
	--dalafisk-story-width: 1380px;
	--dalafisk-story-gap: clamp(44px, 5vw, 72px);

	display: grid;
	grid-template-columns: calc((100% - var(--dalafisk-story-gap)) / 2 - 60px) minmax(0, 1fr);
	gap: var(--dalafisk-story-gap);
	align-items: stretch;
	padding: 92px max(24px, calc((100% - var(--dalafisk-story-width)) / 2));
}

.dalafisk-media-with-text--content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
	padding-block: 2px;
	margin-left: 50px;
}

.dalafisk-media-with-text--heading {
	font-size: clamp(24px, 2.75vw, 40px);
	line-height: 1.1;
	margin: 0;
}

/* Sized in em so it tracks the heading at every breakpoint. */
.dalafisk-media-with-text--inline-image {
	height: .85em;
	width: auto;
	display: inline-block;
	vertical-align: -.11em;
	margin: 0 .05em;
}

.dalafisk-media-with-text--lead {
	font-size: 16.5px;
	line-height: 1.65;
	color: var(--dalafisk-media-with-text-text, var(--dalafisk-text-2));
	font-weight: 500;
	margin: 0;
}

.dalafisk-media-with-text--body {
	font-size: 15.5px;
	color: var(--dalafisk-media-with-text-text, var(--dalafisk-text-2));
	line-height: 1.65;
	margin: 0;
}

.dalafisk-media-with-text--footer {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 6px;
	padding-top: 18px;
	border-top: 1px solid var(--dalafisk-media-with-text-line, var(--dalafisk-card-border));
}

.dalafisk-media-with-text--signature {
	display: flex;
	flex-direction: column;
	gap: 1px;
	font-size: 14.5px;
	margin: 0;
}
.dalafisk-media-with-text--signature span {
	font-size: 12.5px;
	color: var(--dalafisk-media-with-text-sub, var(--dalafisk-text-4));
}

/* ---------- illustration ---------- */
.dalafisk-media-with-text--media {
	position: relative;
	min-height: 462px;
	height: 100%;
	border-radius: 24px;
	overflow: hidden;
	background: var(--dalafisk-media-with-text-media-bg, var(--dalafisk-white));
	/* Runs off the right edge of the window. */
	margin-right: calc(-1 * max(24px, (100vw - var(--dalafisk-story-width)) / 2));
}

.dalafisk-media-with-text--image {
	position: absolute;
	left: 0;
	top: -9.5%;
	width: 100%;
	height: 119%;
	object-fit: contain;
	display: block;
}

/* Feathers all four edges into the page so the illustration has no hard
   border and reads as part of the paper rather than a placed photo. */
.dalafisk-media-with-text--media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(to right, #fff, rgba(255, 255, 255, 0) 10%),
		linear-gradient(to left, #fff, rgba(255, 255, 255, 0) 10%),
		linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0) 14%),
		linear-gradient(to top, #fff, rgba(255, 255, 255, 0) 14%);
}

/* ---------- scroll reveal ---------- */
.dalafisk-motion .dalafisk-media-with-text[data-dalafisk-reveal] {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .55s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
}
.dalafisk-motion .dalafisk-media-with-text[data-dalafisk-inview] {
	opacity: 1;
	transform: none;
}

@media (max-width: 920px) {
	.dalafisk-media-with-text {
		grid-template-columns: 1fr;
		gap: 26px;
	}
	/* Illustration first when stacked, so the band still opens with an image. */
	.dalafisk-media-with-text--media {
		order: -1;
		min-height: 0;
		height: 230px;
		margin-right: 0;
	}
	.dalafisk-media-with-text--content {
		padding-block: 0;
		margin-left: 0;
	}
}

@media (max-width: 640px) {
	.dalafisk-media-with-text {
		padding-block: 60px;
	}
	.dalafisk-media-with-text--heading {
		font-size: 26px;
	}
	.dalafisk-media-with-text--footer {
		padding-top: 15px;
	}
}