/*** Sidor i rutnät, filtrerat på topic ***/

/*
 * Kolumnerna räknar på rutnätets egen bredd via container queries,
 * inte på fönsterbredden, så det fungerar även i en smal Divi-kolumn.
 */

.tf-sidgrid-yta {
	--tf-fet: "Poppins Bold", Helvetica, Arial, Lucida, sans-serif;
	/*** Värden avlästa från sajtens befintliga kort på startsidan ***/
	--sidgrid-ram: rgba(46, 49, 146, 0.1);
	--sidgrid-skugga: 0 0 12px rgba(46, 49, 146, 0.04);
	--sidgrid-radie: 16px;
	--sidgrid-inre-radie: 6px;
	--sidgrid-luft: 16px;
	--sidgrid-kortbakgrund: #ffffff;

	container-type: inline-size;
	container-name: sidgrid;
}

/*** Högre specificitet än Divis listformatering ***/
.tf-sidgrid-yta ul.tf-sidgrid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.25rem, 3cqi, 2.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tf-sidgrid-yta li.tf-sidgrid__kort {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	margin: 0;
	padding: var(--sidgrid-luft);
	list-style: none;
	background: var(--sidgrid-kortbakgrund);
	border: 1px solid var(--sidgrid-ram);
	border-radius: var(--sidgrid-radie);
	box-shadow: var(--sidgrid-skugga);
}

.tf-sidgrid__media {
	overflow: hidden;
	border-radius: var(--sidgrid-inre-radie);
	aspect-ratio: 16 / 9;
	background: #eef1f6;
}

.tf-sidgrid__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.tf-sidgrid__kort:hover .tf-sidgrid__media img {
	transform: scale(1.04);
}

/*** Metarad: topic och publiceringsdatum ***/
.tf-sidgrid__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.tf-sidgrid__amne {
	font-family: var(--tf-fet);
	font-weight: 700;
	color: #3730a3;
}

.tf-sidgrid__avdelare {
	color: #9ca3af;
}

.tf-sidgrid__datum {
	font-family: var(--tf-fet);
	font-weight: 600;
	color: #4b5563;
}

.tf-sidgrid__titel {
	margin: 0;
	font-size: clamp(1.05rem, 2.4cqi, 1.4rem);
	line-height: 1.25;
}

.tf-sidgrid__titel a {
	color: inherit;
	text-decoration: none;
}

/*** Hela kortet klickbart utan att skärmläsaren läser upp allt som länktext ***/
.tf-sidgrid__titel a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.tf-sidgrid__titel a:focus-visible {
	outline: 3px solid #3730a3;
	outline-offset: 3px;
}

.tf-sidgrid__utdrag {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.55;
	color: #4b5563;
}

@container sidgrid (min-width: 520px) {
	.tf-sidgrid-yta ul.tf-sidgrid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@container sidgrid (min-width: 800px) {
	.tf-sidgrid-yta ul.tf-sidgrid {
		grid-template-columns: repeat(var(--sidgrid-kolumner, 3), 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tf-sidgrid__media img {
		transition: none;
	}

	.tf-sidgrid__kort:hover .tf-sidgrid__media img {
		transform: none;
	}
}

/*** Toppartikel: samma visuella språk som intervjuslidern, men statisk ***/

.tf-arkiv {
	--tf-fet: "Poppins Bold", Helvetica, Arial, Lucida, sans-serif;

	/*** Containern ligger här och inte på .tf-topp: en containerfråga kan inte styra containern själv ***/
	container-type: inline-size;
	container-name: topp;

	--topp-panel: #0e1a3c;
	--topp-text: #ffffff;
	--topp-dim: #c9d2e8;
	--topp-amne: #a5b4fc;
	--topp-radie: 16px;
}

/*** Ett värde styr luften före varje sektion i arkivet ***/
.tf-arkiv {
	--arkiv-sektion: 2.25rem;
}

.tf-arkiv > * + * {
	margin-top: var(--arkiv-sektion);
}

.tf-topp {
	display: grid;
	/*** minmax(0, 1fr): utan nollgolv växer bildkolumnen mot bildens egen bredd och trycker ut panelen ***/
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	min-height: 320px;
	overflow: hidden;
	background: var(--topp-panel);
	color: var(--topp-text);
	border-radius: var(--topp-radie);
}

.tf-topp__media {
	position: relative;
	min-width: 0;
	aspect-ratio: 11 / 10;
	background: #111319;
}

.tf-topp__bild {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 22%;
}

.tf-topp__badge {
	position: absolute;
	top: clamp(0.85rem, 2.4cqi, 1.75rem);
	left: clamp(0.85rem, 2.4cqi, 1.75rem);
	padding: 0.5em 1em;
	border-radius: 6px;
	background: #4338ca;
	color: #ffffff;
	font-size: clamp(0.62rem, 0.85cqi, 0.8rem);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.tf-topp__panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(0.6rem, 1.5cqi, 1.5rem);
	padding: clamp(1.25rem, 3.2cqi, 3.25rem);
	min-width: 0;
}

.tf-topp__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.tf-topp__amne {
	font-family: var(--tf-fet);
	font-weight: 700;
	color: var(--topp-amne);
}

.tf-topp__avdelare {
	color: #64748b;
}

.tf-topp__datum {
	font-family: var(--tf-fet);
	font-weight: 600;
	color: var(--topp-dim);
}

.tf-topp__titel {
	margin: 0;
	/*** Ärver Divis globala rubrikfont, med temats egen fallback-kedja ***/
	font-family: var(--et_global_heading_font), Helvetica, Arial, Lucida, sans-serif;
	font-size: clamp(1.15rem, 3.8cqi, 2.25rem);
	line-height: 1.12;

	display: -webkit-box;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-height: calc(1.12em * 4);
}

/*** Temat sätter h2 a i sajtens blå, som är oläsbar mot den mörka panelen ***/
.tf-arkiv .tf-topp__panel h2.tf-topp__titel,
.tf-arkiv .tf-topp__panel h2.tf-topp__titel a {
	color: var(--topp-text);
	text-decoration: none;
}

.tf-topp__titel a:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 3px;
}

.tf-topp__utdrag {
	margin: 0;
	font-size: clamp(0.85rem, 1.35cqi, 1.15rem);
	line-height: 1.55;
	color: var(--topp-dim);

	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-height: calc(1.55em * 3);
}

/*** Byline, samma uppbyggnad som i slidern ***/
.tf-topp__person {
	display: flex;
	align-items: center;
	gap: clamp(0.6rem, 1.1cqi, 0.9rem);
}

.tf-topp__avatar {
	width: clamp(38px, 3.4cqi, 56px);
	height: clamp(38px, 3.4cqi, 56px);
	border-radius: 50%;
	object-fit: cover;
	object-position: center 18%;
	flex: 0 0 auto;
	background: #111319;
}

/*** Eget porträtt är redan en närbild och centreras rakt av ***/
.tf-topp__avatar--egen {
	object-position: center center;
}

.tf-topp__persontext {
	display: flex;
	flex-direction: column;
	line-height: 1.35;
	min-width: 0;
}

.tf-topp__namn {
	font-family: var(--tf-fet);
	font-size: clamp(0.72rem, 1.05cqi, 0.95rem);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--topp-text);
}

.tf-topp__roll {
	font-size: clamp(0.78rem, 1.15cqi, 1rem);
	color: var(--topp-dim);
}

.tf-topp__knapp {
	font-family: var(--tf-fet);
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.85em 1.5em;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 6px;
	color: var(--topp-text);
	font-size: clamp(0.7rem, 1cqi, 0.9rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.tf-topp__knapp:hover,
.tf-topp__knapp:focus {
	background: rgba(255, 255, 255, 0.12);
	border-color: #ffffff;
	color: var(--topp-text);
}

.tf-topp__knapp:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 3px;
}

/*** Staplas när kortet är smalt, oavsett fönsterbredd ***/
@container topp (max-width: 700px) {
	.tf-topp {
		grid-template-columns: minmax(0, 1fr);
	}

	.tf-topp__media {
		aspect-ratio: 16 / 9;
	}

	.tf-topp__titel {
		font-size: clamp(1.35rem, 7cqi, 2rem);
		-webkit-line-clamp: 3;
		line-clamp: 3;
		max-height: calc(1.12em * 3);
	}

	.tf-topp__utdrag {
		font-size: clamp(0.9rem, 2.6cqi, 1.05rem);
	}
}

/*** Sidnumrering ***/

.tf-arkiv__sidor ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tf-arkiv__sidor li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tf-arkiv__sidor a,
.tf-arkiv__sidor span {
	font-family: var(--tf-fet);
	display: grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.75em;
	border: 1px solid var(--sidgrid-ram, rgba(46, 49, 146, 0.1));
	border-radius: 8px;
	background: #ffffff;
	color: #2e3192;
	font-size: 0.9rem;
	font-weight: 700;
	text-decoration: none;
}

.tf-arkiv__sidor a:hover {
	background: rgba(46, 49, 146, 0.06);
	color: #2e3192;
}

.tf-arkiv__sidor a:focus-visible {
	outline: 3px solid #2e3192;
	outline-offset: 3px;
}

.tf-arkiv__sidor .current {
	background: #2e3192;
	border-color: #2e3192;
	color: #ffffff;
}

.tf-arkiv__sidor .dots {
	border-color: transparent;
	background: none;
	min-width: 0;
	padding: 0 0.25em;
	color: #6b7280;
}

/*** Puff: senaste artikeln ur en topic ***/
/*
 * Värden avlästa från de handbyggda Divi-puffarna på startsidan:
 * rubrik 14px/500 uppercase #2e3192 med 1px teckenmellanrum,
 * artikelrubrik 20px/26px, brödtext 14.4px/23.8px, bildradie 6px.
 */

.tf-puff {
	--puff-blå: #2e3192;
	--puff-ram: rgba(46, 49, 146, 0.1);
	--puff-skugga: 0 0 12px rgba(46, 49, 146, 0.04);
	--puff-ikonbotten: rgba(46, 49, 146, 0.08);
	/*** Sajtens röda, tre steg mörkare så 14px-länken klarar AA (4,50:1) ***/
	--puff-hover: #DF342B;
	--tf-fet: "Poppins Bold", Helvetica, Arial, Lucida, sans-serif;
	--puff-rubrikfont: var(--tf-fet);
	--puff-textfont: "Poppins Regular", Helvetica, Arial, Lucida, sans-serif;

	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 16px;

	/*
	 * Ingen egen ram eller skugga: puffen ligger i en Divi-kolumn
	 * som redan har kortets ram, skugga och rundade hörn.
	 * Behövs de ändå, sätt dem på .tf-puff i Divis anpassade CSS.
	 */
}

.tf-puff__topp {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.tf-puff__etikett {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	min-width: 0;
}

.tf-puff__ikon {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--puff-ikonbotten);
	color: var(--puff-blå);
	font-size: 14px;
	line-height: 1;
}

/*
 * Divi deklarerar tre @font-face som alla heter FontAwesome:
 * regular 400, solid 900 och brands 400. Nästan alla ikoner i
 * gratisversionen finns bara i solid, därför vikt 900 här.
 */
.tf-puff__ikon--fa {
	font-family: FontAwesome;
	font-weight: 900;
}

/*** De få ikoner som finns i regular-snittet ***/
.tf-puff__ikon--fa-regular {
	font-family: FontAwesome;
	font-weight: 400;
}

.tf-puff__ikon--et {
	font-family: ETmodules;
}

.tf-puff__amne {
	font-family: var(--puff-rubrikfont);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--puff-blå);
}

.tf-puff__lank {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--puff-textfont);
	font-size: 14px;
	font-weight: 500;
	color: var(--puff-blå);
	text-decoration: none;
	white-space: nowrap;
}

.tf-puff__lank:hover,
.tf-puff__lank:focus {
	color: var(--puff-hover);
	text-decoration: none;
}

.tf-puff__lank:focus-visible {
	outline: 3px solid var(--puff-blå);
	outline-offset: 3px;
}

.tf-puff__pil {
	transition: transform 0.2s ease;
}

.tf-puff__lank:hover .tf-puff__pil {
	transform: translateX(3px);
}

.tf-puff__artikel {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.tf-puff__media {
	display: block;
	overflow: hidden;
	border-radius: 6px;
	aspect-ratio: 16 / 9;
	background: #eef1f6;
}

.tf-puff__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.tf-puff:hover .tf-puff__media img {
	transform: scale(1.04);
}

.tf-puff__meta {
	margin: 0;
	font-family: var(--puff-textfont);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #4b5563;
}

.tf-puff__titel {
	margin: 0;
	font-family: var(--puff-rubrikfont);
	font-size: 20px;
	font-weight: 500;
	line-height: 26px;
}

.tf-puff__titel a {
	color: var(--puff-blå);
	text-decoration: none;
}

.tf-puff__titel a:focus-visible {
	outline: 3px solid var(--puff-blå);
	outline-offset: 3px;
}

.tf-puff__utdrag {
	margin: 0;
	font-family: var(--puff-textfont);
	font-size: 14.4px;
	line-height: 23.8px;
	color: #121212;
}

@media (prefers-reduced-motion: reduce) {
	.tf-puff__media img,
	.tf-puff__pil {
		transition: none;
	}

	.tf-puff:hover .tf-puff__media img,
	.tf-puff__lank:hover .tf-puff__pil {
		transform: none;
	}
}

/*** Artikelserie: badge ovanför pillret ***/

/*** På sidor i en serie tar badgen topic-etikettens plats i sidhuvudet ***/
body.tf-har-serie .et_pb_section_0 p.featured {
	display: none;
}

.tf-serie-badge {
	display: block;
	width: fit-content;
	margin: 0 0 var(--igr-space-3, 0.75rem);
	padding: 0.1rem 0 0.1rem 0.65rem;
	border-left: 3px solid var(--igr-red-500);
	font-family: var(--igr-font-bold);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--igr-text-brand, #2e3192);
}

/*** Variant i sidhuvudet: vit text mot bilden, röd markör kvar ***/
.tf-serie-badge--hero {
	color: var(--igr-text-on-dark, #ffffff);
}

/*** Artikelserie: etikett ovanför rubriken ***/

.tf-serie-etikett {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--igr-space-2, 0.5rem);
	margin: 0 0 var(--igr-space-3, 0.75rem);
	padding: 0;
	font-family: var(--igr-font-body);
	font-size: var(--igr-text-xs, 0.75rem);
	font-weight: var(--igr-weight-semibold, 600);
	letter-spacing: var(--igr-tracking-md, 0.08em);
	line-height: var(--igr-leading-ui, 1.4);
	text-transform: uppercase;
	color: var(--igr-text-secondary, #374151);
}

.tf-serie-etikett__namn {
	font-weight: var(--igr-weight-bold, 700);
	color: var(--igr-text-brand, #2e3192);
}

.tf-serie-etikett__lank {
	color: inherit;
	text-decoration: none;
}

.tf-serie-etikett__lank:hover {
	color: var(--igr-link-hover, #df342b);
}

.tf-serie-etikett__avdelare {
	color: var(--igr-gray-400, #9ca3af);
}

/*** Genväg till seriens första del, finns från del 2 och framåt ***/
.tf-serie-etikett__start {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin-left: var(--igr-space-1, 0.25rem);
	padding-left: var(--igr-space-2, 0.5rem);
	border-left: 1px solid var(--igr-gray-300, #d1d5db);
	color: var(--igr-text-brand, #2e3192);
	text-decoration: none;
}

/*** Klickytan höjs till dryga 24px utan att etiketten växer ***/
.tf-serie-etikett__start::before {
	content: "";
	position: absolute;
	inset: -0.35rem -0.25rem;
}

.tf-serie-etikett__start:hover {
	color: var(--igr-link-hover, #df342b);
}

.tf-serie-etikett__start-pil {
	transition: transform 0.2s ease;
}

.tf-serie-etikett__start:hover .tf-serie-etikett__start-pil {
	transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
	.tf-serie-etikett__start-pil {
		transition: none;
	}

	.tf-serie-etikett__start:hover .tf-serie-etikett__start-pil {
		transform: none;
	}
}

/*** Artikelserie: serierutan efter innehållet ***/

/*** Samma bredd som Divis rader, eftersom rutan ligger utanför sektionerna ***/
.tf-serie-yta {
	width: 80%;
	max-width: 1080px;
	margin: 0 auto;
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

.tf-serie {
	padding: clamp(1.25rem, 3vw, 2rem);
	background: var(--igr-surface, #ffffff);
	border: 1px solid var(--igr-border-brand, rgba(46, 49, 146, 0.1));
	border-radius: 16px;
	box-shadow: 0 0 12px rgba(46, 49, 146, 0.04);
	font-family: var(--igr-font-body);
}

.tf-serie__overrubrik {
	margin: 0 0 var(--igr-space-1, 0.25rem);
	padding: 0;
	font-size: var(--igr-text-xs, 0.75rem);
	font-weight: var(--igr-weight-semibold, 600);
	letter-spacing: var(--igr-tracking-md, 0.08em);
	text-transform: uppercase;
	color: var(--igr-text-secondary, #374151);
}

.tf-serie .tf-serie__rubrik {
	margin: 0 0 var(--igr-space-5, 1.25rem);
	padding: 0;
	font-family: var(--igr-font-heading);
	font-size: var(--igr-text-h3, 1.5rem);
	line-height: var(--igr-leading-heading, 1.3);
	color: var(--igr-text-brand, #2e3192);
}

.tf-serie__rubrik a {
	color: inherit;
	text-decoration: none;
}

.tf-serie__rubrik a:hover {
	color: var(--igr-link-hover, #df342b);
}

/*** Högre specificitet än Divis listformatering ***/
.tf-serie ol.tf-serie__lista {
	display: grid;
	gap: var(--igr-space-2, 0.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tf-serie li.tf-serie__del {
	display: flex;
	align-items: baseline;
	gap: var(--igr-space-3, 0.75rem);
	margin: 0;
	padding: var(--igr-space-2, 0.5rem) var(--igr-space-3, 0.75rem);
	list-style: none;
	border-radius: 6px;
	line-height: var(--igr-leading-ui, 1.4);
}

.tf-serie li.tf-serie__del--aktuell {
	background: var(--igr-surface-brand, #edf2ff);
}

.tf-serie__nummer {
	flex: 0 0 auto;
	min-width: 1.5rem;
	font-family: var(--igr-font-bold);
	font-size: var(--igr-text-sm, 0.875rem);
	color: var(--igr-text-muted, #6b7280);
}

.tf-serie__del--aktuell .tf-serie__nummer {
	color: var(--igr-text-brand, #2e3192);
}

.tf-serie__titel {
	font-size: var(--igr-text-md, 1rem);
	color: var(--igr-link, #2e3192);
	text-decoration: none;
}

a.tf-serie__titel:hover {
	color: var(--igr-link-hover, #df342b);
	text-decoration: underline;
}

.tf-serie__del--aktuell .tf-serie__titel {
	font-family: var(--igr-font-semibold);
	color: var(--igr-text-strong, #1a202c);
}

.tf-serie__bladdra {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--igr-space-3, 0.75rem);
	margin-top: var(--igr-space-5, 1.25rem);
	padding-top: var(--igr-space-5, 1.25rem);
	border-top: 1px solid var(--igr-border, #e5e7eb);
}

.tf-serie__steg {
	display: flex;
	flex-direction: column;
	gap: var(--igr-space-1, 0.25rem);
	padding: var(--igr-space-3, 0.75rem) var(--igr-space-4, 1rem);
	border: 1px solid var(--igr-border, #e5e7eb);
	border-radius: 6px;
	text-decoration: none;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.tf-serie__steg--nasta {
	grid-column: -2;
	text-align: right;
}

.tf-serie__steg:hover {
	background: var(--igr-surface-tint, #f9fbfe);
	border-color: var(--igr-text-brand, #2e3192);
}

.tf-serie__steg-text {
	font-size: var(--igr-text-xs, 0.75rem);
	font-weight: var(--igr-weight-semibold, 600);
	letter-spacing: var(--igr-tracking-md, 0.08em);
	text-transform: uppercase;
	color: var(--igr-text-secondary, #374151);
}

.tf-serie__steg-titel {
	font-family: var(--igr-font-semibold);
	font-size: var(--igr-text-sm, 0.875rem);
	line-height: var(--igr-leading-ui, 1.4);
	color: var(--igr-link, #2e3192);
}

.tf-serie a:focus-visible,
.tf-serie-etikett a:focus-visible {
	outline: 3px solid var(--igr-focus, #2e3192);
	outline-offset: 3px;
	border-radius: 2px;
}

@media (max-width: 767px) {
	.tf-serie-yta {
		width: auto;
		padding-inline: 16px;
	}

	.tf-serie__steg--nasta {
		grid-column: auto;
	}
}

/*** Artikelserie: framstegsstreck, ett per del ***/

.tf-serie-etikett__framsteg {
	display: inline-flex;
	gap: 3px;
	margin-left: var(--igr-space-1, 0.25rem);
}

.tf-serie-etikett__streck {
	display: block;
	width: 14px;
	height: 3px;
	border-radius: 2px;
	background: var(--igr-gray-300, #d1d5db);
}

.tf-serie-etikett__streck--klar {
	background: var(--igr-text-brand, #2e3192);
}

/*** Variant i sidhuvudet: vit text på bildens mörka toning ***/
.tf-serie-etikett.tf-serie-etikett--hero {
	display: inline-flex;
	margin: 0 0 var(--igr-space-4, 1rem);
	padding: 0.4rem 0.85rem;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: rgba(255, 255, 255, 0.85);
}

.tf-serie-etikett--hero .tf-serie-etikett__namn,
.tf-serie-etikett--hero .tf-serie-etikett__del {
	color: var(--igr-text-on-dark, #ffffff);
}

.tf-serie-etikett--hero .tf-serie-etikett__avdelare {
	color: rgba(255, 255, 255, 0.5);
}

/*** Länkarna i sidhuvudets etikett: dämpad vit som blir helvit vid hover, utan understrykning ***/
.tf-serie-etikett--hero .tf-serie-etikett__lank,
.tf-serie-etikett--hero .tf-serie-etikett__start {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
}

.tf-serie-etikett--hero .tf-serie-etikett__lank:hover,
.tf-serie-etikett--hero .tf-serie-etikett__start:hover {
	color: var(--igr-text-on-dark, #ffffff);
}

.tf-serie-etikett--hero .tf-serie-etikett__lank:focus-visible,
.tf-serie-etikett--hero .tf-serie-etikett__start:focus-visible {
	outline-color: var(--igr-focus-on-dark, #ffffff);
}

.tf-serie-etikett--hero .tf-serie-etikett__streck {
	background: rgba(255, 255, 255, 0.3);
}

.tf-serie-etikett--hero .tf-serie-etikett__streck--klar {
	background: var(--igr-text-on-dark, #ffffff);
}

/*** Avdelaren före genvägen i samma ton som pillrets ram ***/
.tf-serie-etikett--hero .tf-serie-etikett__start {
	border-left-color: rgba(255, 255, 255, 0.35);
}

/*** Mobil: tre rader utan avdelare, typ, serienamn och del ***/
@media (max-width: 767px) {
	.tf-serie-etikett.tf-serie-etikett--hero {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		gap: 0.2rem 0.5rem;
		border-radius: 12px;
		padding: 0.6rem 0.85rem;
	}

	.tf-serie-etikett--hero .tf-serie-etikett__avdelare {
		display: none;
	}

	.tf-serie-etikett--hero .tf-serie-etikett__namn {
		grid-column: 1 / -1;
	}

	.tf-serie-etikett--hero .tf-serie-etikett__framsteg {
		margin-left: 0;
	}

	/*** Genvägen får en egen rad underst, utan lodrät avdelare ***/
	.tf-serie-etikett--hero .tf-serie-etikett__start {
		grid-column: 1 / -1;
		margin: 0.2rem 0 0;
		padding-left: 0;
		border-left: 0;
	}
}

/*** Seriekort: delnummer överst i kortet ***/

.tf-sidgrid__del {
	display: flex;
	align-items: center;
	gap: var(--igr-space-3, 0.75rem);
	margin: 0 0 var(--igr-space-3, 0.75rem);
	padding: 0;
}

.tf-sidgrid__delnummer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--igr-text-brand, #2e3192);
	color: var(--igr-text-on-dark, #ffffff);
	/*** Poppins, Playfair har gammaldags siffror som hamnar lågt i cirkeln ***/
	font-family: var(--igr-font-bold);
	font-size: 0.8rem;
	font-variant-numeric: lining-nums tabular-nums;
	line-height: 1;
}

.tf-sidgrid__deltext {
	font-size: var(--igr-text-2xs, 0.7rem);
	font-weight: var(--igr-weight-semibold, 600);
	letter-spacing: var(--igr-tracking-md, 0.08em);
	text-transform: uppercase;
	color: var(--igr-text-muted, #6b7280);
}

.tf-sidgrid__kort--serie:hover .tf-sidgrid__delnummer {
	background: var(--igr-blue-700, #3231d1);
}

/*** Serieöversikt på kategorisidorna, samma kortspråk som puffarna ***/

.tf-serieoversikt {
	container-type: inline-size;
	container-name: serieoversikt;
}

/*** Redaktionell avdelare: sektionsrubrik med linje ut till kanten ***/
.tf-arkiv h2.tf-avdelare,
.tf-serieoversikt h2.tf-avdelare {
	display: flex;
	align-items: center;
	gap: var(--igr-space-4, 1rem);
	margin: 0 0 var(--igr-space-4, 1rem);
	padding: 0;
	font-family: var(--igr-font-body);
	font-size: var(--igr-text-xs, 0.75rem);
	font-weight: var(--igr-weight-bold, 700);
	letter-spacing: var(--igr-tracking-md, 0.08em);
	line-height: var(--igr-leading-ui, 1.4);
	text-transform: uppercase;
	color: var(--igr-text-secondary, #374151);
}

/*** Direkt barn i arkivet: rubriken bär sektionens luft uppåt ***/
.tf-arkiv > h2.tf-avdelare {
	margin-top: var(--arkiv-sektion);
}

/*** Serierubriken ligger inuti sin nav, som redan fått luften ***/
.tf-serieoversikt h2.tf-avdelare {
	margin-top: 0;
}

.tf-arkiv h2.tf-avdelare + .tf-sidgrid-yta {
	margin-top: 0;
}

.tf-arkiv h2.tf-avdelare::after,
.tf-serieoversikt h2.tf-avdelare::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--igr-border, #e5e7eb);
}

/*** Högre specificitet än Divis listformatering ***/
.tf-serieoversikt ul.tf-serieoversikt__lista {
	display: grid;
	grid-template-columns: 1fr;
	/*** Samma mellanrum som artikelrutnätet under ***/
	gap: clamp(1.25rem, 3cqi, 2.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*** Ram, skugga och radie som korten i rutnätet ***/
.tf-serieoversikt li.tf-serieoversikt__kort {
	display: flex;
	flex-direction: column;
	gap: var(--igr-space-3, 0.75rem);
	margin: 0;
	padding: 16px;
	list-style: none;
	/*** Sval grå ton på 80 procent, utan ram, så att korten inte förväxlas med artiklarna ***/
	background: #f4f7f9;
	background: color-mix(in srgb, #f1f5f7 80%, #ffffff);
	/*** Varken ram eller skugga: tonen ensam bär kortet ***/
	border: 0;
	border-radius: 16px;
}

.tf-serieoversikt__topp {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.tf-serieoversikt__etikett {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	min-width: 0;
}

.tf-serieoversikt__ikon {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: rgba(46, 49, 146, 0.08);
	color: var(--igr-text-brand, #2e3192);
}

.tf-serieoversikt__namn {
	font-family: var(--igr-font-bold);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--igr-text-brand, #2e3192);
}

.tf-serieoversikt__lank {
	/*** Längst ned till höger, oavsett hur många rader namnet tar ***/
	margin-top: auto;
	align-self: flex-end;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--igr-font-body);
	font-size: 14px;
	font-weight: 500;
	color: var(--igr-text-brand, #2e3192);
	text-decoration: none;
	white-space: nowrap;
}

.tf-serieoversikt__lank:hover,
.tf-serieoversikt__lank:focus {
	color: var(--igr-link-hover, #df342b);
	text-decoration: none;
}

.tf-serieoversikt__pil {
	transition: transform 0.2s ease;
}

.tf-serieoversikt__lank:hover .tf-serieoversikt__pil {
	transform: translateX(3px);
}

.tf-serieoversikt__antal {
	font-size: var(--igr-text-2xs, 0.7rem);
	font-weight: var(--igr-weight-semibold, 600);
	letter-spacing: var(--igr-tracking-md, 0.08em);
	text-transform: uppercase;
	color: var(--igr-text-muted, #6b7280);
}

.tf-serieoversikt__senast {
	margin-bottom: var(--igr-space-1, 0.25rem);
	font-family: var(--igr-font-semibold);
	font-size: var(--igr-text-md, 1rem);
	line-height: var(--igr-leading-ui, 1.4);
	color: var(--igr-link, #2e3192);
	text-decoration: none;

	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

a.tf-serieoversikt__senast:hover {
	text-decoration: none;
}

.tf-serieoversikt a:focus-visible {
	outline: 3px solid var(--igr-focus, #2e3192);
	outline-offset: 3px;
	border-radius: 2px;
}

@container serieoversikt (min-width: 560px) {
	.tf-serieoversikt ul.tf-serieoversikt__lista {
		grid-template-columns: repeat(2, 1fr);
	}
}

@container serieoversikt (min-width: 900px) {
	.tf-serieoversikt ul.tf-serieoversikt__lista {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tf-serieoversikt__pil {
		transition: none;
	}
}

/*** Reservpresentation när artikeln saknar utvald bild ***/

.tf-sidgrid__media--reserv {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--igr-space-2, 0.5rem);
	/*** Samma toning som panelen i toppartikeln, en nyans lättare ***/
	background: linear-gradient(140deg, var(--igr-blue-900, #2e3192) 0%, var(--igr-navy, #0e1a3c) 100%);
	color: rgba(255, 255, 255, 0.85);
}

.tf-sidgrid__reservikon {
	display: grid;
	place-items: center;
	opacity: 0.7;
}

/*** Delnumret: siffran i cirkeln bär informationen, texten kompletterar ***/
.tf-sidgrid__deltext {
	font-size: var(--igr-text-2xs, 0.7rem);
}

/*** Seriepuff för smal kolumn, t.ex. bredvid nyhetslistan på startsidan ***/

.tf-seriepuff {
	padding: 16px;
	background: var(--igr-surface, #ffffff);
	border: 1px solid var(--igr-border-brand, rgba(46, 49, 146, 0.1));
	border-radius: 16px;
	box-shadow: 0 0 12px rgba(46, 49, 146, 0.04);
	font-family: var(--igr-font-body);
}

.tf-seriepuff .tf-seriepuff__rubrik {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin: 0 0 var(--igr-space-3, 0.75rem);
	padding: 0;
	font-family: var(--igr-font-bold);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--igr-text-brand, #2e3192);
}

.tf-seriepuff__ikon {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: rgba(46, 49, 146, 0.08);
	color: var(--igr-text-brand, #2e3192);
}

/*** Högre specificitet än Divis listformatering ***/
.tf-seriepuff ul.tf-seriepuff__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tf-seriepuff li.tf-seriepuff__rad {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin: 0;
	padding: var(--igr-space-3, 0.75rem) 0;
	list-style: none;
	border-top: 1px solid var(--igr-border-subtle, #f1f5f9);
}

.tf-seriepuff li.tf-seriepuff__rad:first-child {
	border-top: 0;
	padding-top: 0;
}

.tf-seriepuff li.tf-seriepuff__rad:last-child {
	padding-bottom: 0;
}

.tf-seriepuff__namn {
	font-family: var(--igr-font-semibold);
	font-size: var(--igr-text-sm, 0.875rem);
	line-height: var(--igr-leading-ui, 1.4);
	color: var(--igr-link, #2e3192);
	text-decoration: none;
}

a.tf-seriepuff__namn:hover {
	color: var(--igr-link-hover, #df342b);
}

a.tf-seriepuff__namn:focus-visible {
	outline: 3px solid var(--igr-focus, #2e3192);
	outline-offset: 3px;
	border-radius: 2px;
}

.tf-seriepuff__antal {
	font-size: var(--igr-text-2xs, 0.7rem);
	font-weight: var(--igr-weight-semibold, 600);
	letter-spacing: var(--igr-tracking-md, 0.08em);
	text-transform: uppercase;
	color: var(--igr-text-muted, #6b7280);
}