/*
 * Kort: Vunnet mål
 * Mobil (<1024): Figma 185:1400 — bredd 260, titel 20px (2 rader), utdrag 14px (2 rader).
 * Desktop:       Figma 107:9203 — bredd 405, titel 23px, utdrag 18px (3 rader).
 * Inlägg (--post): Figma 155:1098 — fyllande foto (cover), författare vänster + datum höger på samma rad.
 */

.c-case-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.5rem;
	height: 100%;
	padding: 1.5rem;
	border-radius: 1rem;
	background-color: #fff;
	/* Figma drop-shadow (lager med alpha 0 utelämnade). */
	filter:
		drop-shadow(0 46px 13.5px rgba(17, 43, 80, 0.02))
		drop-shadow(0 20px 10px rgba(17, 43, 80, 0.03))
		drop-shadow(0 5px 5.5px rgba(17, 43, 80, 0.03));
}

.c-case-card__media {
	overflow: hidden;
	width: 100%;
	aspect-ratio: 1;
	border-radius: 0.5rem;
	background-color: #fff;
}

.c-case-card__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.c-case-card__tag {
	padding: 0.5rem;
	border-radius: 0.25rem;
	background-color: var(--color-brand-800);
	color: #fff;
	font-size: 0.625rem; /* 10px */
	line-height: 1.15;
	text-transform: uppercase;
	white-space: nowrap;
}

.c-case-card__content {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.5rem;
	width: 100%;
}

.c-case-card__text {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 100%;
}

.c-case-card__date {
	font-size: var(--font-size-body-s);
	line-height: var(--line-height-body);
	color: var(--color-brand-900);
}

.c-case-card__title {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-family: var(--font-family-heading);
	font-size: 1.25rem; /* 20px — H6 mobile */
	font-weight: 400;
	line-height: var(--line-height-heading);
	color: var(--color-brand-1000);
}

.c-case-card__excerpt {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-size: var(--font-size-body-m);
	line-height: var(--line-height-body);
	color: var(--color-brand-900);
}

/* Inlägg — Figma 155:1098 (--post) */
.c-case-card--post .c-case-card__image {
	object-fit: cover;
}

.c-case-card__meta {
	display: flex;
	justify-content: space-between;
	gap: 1rem; /* 16px (härledd — Figma har ingen fast gap, raden är space-between) */
	width: 100%;
	color: var(--color-brand-900);
	font-size: var(--font-size-body-s); /* 12px */
	line-height: var(--line-height-body);
	white-space: nowrap;
}

.c-case-card__author {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Länken är c-text-link; håller sig i botten när korten är lika höga. */
.c-case-card__link {
	margin-top: auto;
}

@media (min-width: 1024px) {
	.c-case-card__title {
		display: block;
		font-size: var(--font-size-h6); /* 23px */
	}

	.c-case-card__excerpt {
		font-size: var(--font-size-body-l);
		-webkit-line-clamp: 3;
	}
}

/*
 * Kontaktkort i inläggslistan — Figma 155:1142.
 * Bakgrundsbild (cover, radie 16), samma skugga som korten, padding 56/24, rubrik H4 (35 desktop / 25 mobil) + text 18/1.5,
 * vit textlänk 24 under. Mobil: höjd efter innehåll (härledd).
 */
.c-contact-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.5rem; /* 24px */
	height: 100%;
	padding: 3.5rem 1.5rem; /* 56px 24px */
	border-radius: 1rem; /* 16px */
	color: var(--color-bg-white);
	/* Figma drop-shadow (lager med alpha 0 utelämnade) — samma som .c-case-card. */
	filter:
		drop-shadow(0 46px 13.5px rgba(17, 43, 80, 0.02))
		drop-shadow(0 20px 10px rgba(17, 43, 80, 0.03))
		drop-shadow(0 5px 5.5px rgba(17, 43, 80, 0.03));
}

.c-contact-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 1rem; /* 16px */
	object-fit: cover;
}

.c-contact-card__content {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.5rem; /* 24px */
}

.c-contact-card__text-container {
	display: flex;
	flex-direction: column;
	gap: 1rem; /* 16px */
}

.c-contact-card__title {
	color: inherit;
	font-family: var(--font-family-heading);
	font-size: var(--font-size-h4); /* 35px desktop / 25px mobil */
	font-weight: 400;
	line-height: var(--line-height-heading);
}

.c-contact-card__text {
	font-size: var(--font-size-body-l); /* 18px */
	line-height: var(--line-height-body);
}

/* Dubbel klass → vinner över .c-text-link (Brand/1000). */
.c-contact-card .c-contact-card__link.c-text-link {
	color: var(--color-bg-white);
}