/* =========================================================================
   Block: Latest News / Kunskap (sunbird/latest-news) — Figma 1333:5718
   Sektionshuvud (rubrik + "Se alla artiklar"-länk) + 3-kolumns artikelkort
   (bild över text-block). Texten ovanpå kortbilden är inbränd i bilden (ej HTML).
   Endast Figma-värden. Sektions-padding via Padding-klon (default m = 64→144).
   ========================================================================= */

/* Grid-areas så "Se alla artiklar"-länken kan flyttas: desktop = uppe till höger
   (rad 1), mobil = under korten (sista raden). Se mobil-media nedan. */
.latest-news__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"head link"
		"grid grid";
	column-gap: 2rem;
	row-gap: 4rem; /* 64px: header → kort */
	align-items: center; /* rubrik + länk centrerade vertikalt i rad 1 (Figma items-center) */
}

/* Vid ≥1460 (Figma-canvasbredd) tas inner-gutter bort → content får full
   1460-bredd som i Figma (px-230 på 1920 = container-marginal). Ger 470px-kort. */
@media (min-width: 1460px) {
	.latest-news__inner {
		padding-inline: 0;
	}
}

.latest-news__heading {
	grid-area: head;
	margin: 0;
}

/* Utan rubrik OCH utan länk (t.ex. tack-sidan): head/link-raden tas bort —
   en tom explicit grid-rad lämnar annars row-gap (64px desktop / 40px mobil,
   plus tom link-rad under korten i mobil) som fantomavstånd. Dubblad klass
   ger specificitet 0,2,0 → vinner över mobil-medians omdefinition (0,1,0)
   oavsett ordning. */
.latest-news__inner.latest-news__inner--no-head {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "grid";
}

/* "Se alla artiklar": Inter Tight SemiBold 24px, understruken text + pil 24px.
   Desktop = uppe till höger, vertikalt centrerad mot rubriken. */
.latest-news__see-all {
	grid-area: link;
	justify-self: end;
	align-self: center;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-heading);
	font-weight: var(--fw-semibold);
	font-size: 1.5rem; /* 24px */
	line-height: var(--leading-snug); /* 1.2 */
	color: var(--color-text);
	white-space: nowrap;
	transition: color 0.15s ease; /* hover → coral (begärd effekt) */
}
.latest-news__see-all-text {
	text-decoration: underline;
	text-underline-position: from-font;
}

/* Pil delas av header- och kort-länk (Figma size-24).
   transition för hover-translate (begärd effekt). */
.latest-news__arrow {
	width: 24px;
	height: 24px;
	flex: none;
	transition: transform 0.15s ease;
}

/* --- Kort-grid: 3 kolumner, gap 24, top-justerade ---------------------- */
.latest-news__grid {
	grid-area: grid;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	align-items: start;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.latest-news__item {
	display: flex;
}

.latest-news__card {
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* --- Kort-bild (text inbränd i bilden) -------------------------------- */
.latest-news__card-media {
	display: block;
	width: 100%;
	aspect-ratio: 410 / 207.65; /* Figma */
	overflow: hidden;
	background-color: var(--color-neutral-200); /* fallback om bild saknas */
}
.latest-news__card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* Hover-zoom (begärd effekt, avsteg från no-effects-policyn). 0.4s justerbart. */
	transition: transform 0.4s ease;
}

/* --- Text-block under bilden (py 24, gap 24) -------------------------- */
.latest-news__text {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-block: 24px;
	width: 100%;
}

/* Meta-rad: kategorier (vänster) ↔ lästid (höger) */
.latest-news__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding-block: 6px;
	width: 100%;
}
.latest-news__cats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.latest-news__cat {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	font-family: var(--font-body);
	font-weight: var(--fw-regular);
	font-size: var(--text-body-m); /* 14px */
	line-height: var(--leading-normal); /* 1.5 */
	color: var(--color-text);
	white-space: nowrap;
}
/* Liten vertikal markör före varje kategori (Figma 4×13). */
.latest-news__cat-bar {
	width: 4px;
	height: 13px;
	flex: none;
	background-color: var(--color-text); /* #2d2d2b */
}
.latest-news__readtime {
	font-family: var(--font-body);
	font-weight: var(--fw-regular);
	font-size: var(--text-body-m); /* 14px */
	line-height: var(--leading-normal);
	color: var(--color-text);
	white-space: nowrap;
}

/* Titel + ingress (gap 16) */
.latest-news__titles {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
}
/* Specificitet-boost (.latest-news …) så Bold 700 vinner över base .h6
   (extrabold <1024) oavsett stilmallarnas laddningsordning. */
.latest-news .latest-news__card-title {
	margin: 0;
	font-weight: var(--fw-bold); /* Figma: Inter Tight Bold 700 (även <1024) */
	color: var(--color-text);
}
.latest-news__excerpt {
	margin: 0;
	color: var(--color-text);
}
/* Trunkera excerpten till 2 rader (användarbegärt). Klampas på en INRE span, inte på
   <p>:n: <p> är flex-item i .latest-news__titles → -webkit-box blockifieras (Safari/iOS
   tappar då -webkit-line-clamp). Spannen är ej flex-item → -webkit-box gäller. */
.latest-news__excerpt-clamp {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

/* Kort-länk "Läs hela artikeln": Inter Tight SemiBold 16px, understruken + pil. */
.latest-news__card-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	font-family: var(--font-heading);
	font-weight: var(--fw-semibold);
	font-size: var(--text-button); /* 16px */
	line-height: var(--leading-snug); /* 1.2 */
	color: var(--color-text);
	white-space: nowrap;
	transition: color 0.15s ease; /* hover → coral (begärd effekt) */
}
.latest-news__card-link-text {
	text-decoration: underline;
	text-underline-position: from-font;
}

/* --- Hover (uttryckligen begärda effekter, ej i Figma) --------------- */
@media (hover: hover) {
	/* Kortbild: zoomas in lite vid hover (scale 1.05), klipps av media-overflow. */
	.latest-news__card-media:hover .latest-news__card-img {
		transform: scale(1.05);
	}
	/* Länkar: text + pil → coral, och pilen glider 4px åt höger. */
	.latest-news__see-all:hover,
	.latest-news__card-link:hover {
		color: var(--color-link); /* coral #fb575d */
	}
	.latest-news__see-all:hover .latest-news__arrow,
	.latest-news__card-link:hover .latest-news__arrow {
		transform: translateX(4px);
	}
}

/* Reducerad rörelse: ingen zoom/pil-förflyttning (färgskiftet behålls). */
@media (prefers-reduced-motion: reduce) {
	.latest-news__card-img,
	.latest-news__arrow {
		transition: none;
	}
	.latest-news__card-media:hover .latest-news__card-img,
	.latest-news__see-all:hover .latest-news__arrow,
	.latest-news__card-link:hover .latest-news__arrow {
		transform: none;
	}
}

/* --- 2 kolumner: sista ENSAMMA kortet (udda antal → ensamt i sista raden)
   spänner hela bredden och blir horisontellt — bild | text 50/50 (samma
   beteende som Guides-blocket). Korten är redan media + .latest-news__text. -- */
@media (max-width: 1180px) and (min-width: 769px) {
	.latest-news__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.latest-news__grid .latest-news__item:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
	.latest-news__grid .latest-news__item:last-child:nth-child(odd) .latest-news__card {
		flex-direction: row;
		align-items: stretch;
		gap: 24px;
	}
	.latest-news__grid .latest-news__item:last-child:nth-child(odd) .latest-news__card-media {
		flex: 1 1 0; /* 50%-spalt */
		aspect-ratio: auto; /* bilden fyller kortets höjd i st.f. ~2:1 */
	}
	.latest-news__grid .latest-news__item:last-child:nth-child(odd) .latest-news__text {
		flex: 1 1 0; /* 50%-spalt */
		justify-content: center; /* texten centrerad vertikalt bredvid bilden */
	}
}

/* --- Mobil (≤768) — PROVISORISK (egen Figma-mobilnod ej tillgänglig) ----
   Header stackas, korten blir 1 kolumn, tightare gaps. */
@media (max-width: 768px) {
	.latest-news__inner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"head"
			"grid"
			"link";
		row-gap: 2.5rem; /* 40px */
	}
	/* Länken hamnar centrerad under korten, mindre (16px) och utan pil (enl design). */
	.latest-news__see-all {
		justify-self: center;
		align-self: auto;
		font-size: var(--text-button); /* 16px (mindre än desktop 24px) */
	}
	.latest-news__see-all .latest-news__arrow {
		display: none;
	}
	.latest-news__grid {
		grid-template-columns: 1fr;
		gap: 2rem; /* 32px */
	}
}