/*
 * blog.css — bara enskilda inlägg.
 *
 * Brödtexten, brödsmulorna och listkorten bor i content.css, som laddas
 * på nästan varje sida. Det här är spalten bredvid texten och de smala
 * korten i den — regler som ingen annan vy använder, och som därför inte
 * ska ligga i en fil som hela sajten hämtar.
 *
 * Lagren är deklarerade i base.css. Skriv aldrig !important här.
 */

@layer layout {
	.entry-layout {
		display: grid;
		gap: var(--space-xl);
	}

	/*
	 * Samma brytpunkt som butikens filterspalt: först när det finns plats
	 * för både en läsbar textspalt och en panel bredvid blir det två
	 * spalter. Under det lägger sig panelen efter texten, där den läses
	 * som "vidare läsning" och inte som en meny man hoppade över.
	 */
	@media (min-width: 1024px) {
		.entry-layout {
			grid-template-columns: minmax(0, 1fr) 17rem;
			align-items: start;
		}

		.entry-side {
			position: sticky;
			inset-block-start: var(--space-l);
		}
	}
}

@layer components {
	.entry__media {
		margin: 0 0 var(--space-l);
	}

	.entry__media img {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
		border-radius: var(--radius-card);
		object-fit: cover;
	}

	/*
	 * "Read next" längst ned i texten. Tre kort i stället för tre
	 * punkter: raden ligger efter en utläst artikel, och det som ska
	 * hämta upp en läsare där är en bild, inte en understruken rad.
	 *
	 * `auto-fit` och inte tre fasta spalter — listan har tre länkar i
	 * dag, men det är redaktörens val och inte ett kontrakt.
	 */
	.read-next {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
		gap: var(--space-s);
		margin-block-start: var(--space-s);
	}

	.read-next__card {
		display: flex;
		flex-direction: column;
		gap: var(--space-2xs);
		color: var(--color-ink);
		text-decoration: none;
	}

	.read-next__media img {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
		border-radius: var(--radius-card);
		object-fit: cover;
	}

	/* Utan bild: märket på plattan, så korten behåller sin höjd. */
	.read-next__media--empty {
		display: grid;
		place-items: center;
		aspect-ratio: 4 / 3;
		border-radius: var(--radius-card);
		background: var(--color-surface-warm);
	}

	.read-next__rings {
		width: 45%;
		height: auto;
		color: var(--color-accent);
	}

	.read-next__title {
		font-size: var(--step--1);
		font-weight: 600;
		line-height: 1.35;
	}

	.read-next__card:hover .read-next__title,
	.read-next__card:focus-visible .read-next__title {
		color: var(--color-accent-ink);
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}

	.entry-side__block + .entry-side__block {
		margin-block-start: var(--space-l);
		padding-block-start: var(--space-l);
		border-block-start: 1px solid var(--color-line);
	}

	.entry-side__title {
		margin: 0 0 var(--space-s);
		font-size: var(--step-0);
		font-weight: 600;
		letter-spacing: -0.01em;
		color: var(--color-ink);
	}

	.side-cats {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.side-cats__link {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--space-2xs);
		padding-block: var(--space-2xs);
		color: var(--color-body);
		text-decoration: none;
	}

	.side-cats__link:hover,
	.side-cats__link:focus-visible {
		color: var(--color-ink);
	}

	.side-cats__link.is-current {
		color: var(--color-accent-ink);
		font-weight: 600;
	}

	.side-cats__count {
		font-size: var(--step--1);
		color: var(--color-ink-muted);
		font-variant-numeric: tabular-nums;
	}

	.side-posts {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.side-post + .side-post {
		margin-block-start: var(--space-s);
		padding-block-start: var(--space-s);
		border-block-start: 1px solid var(--color-line);
	}

	.side-post__link {
		display: grid;
		grid-template-columns: 4.5rem 1fr;
		gap: var(--space-2xs);
		align-items: start;
		color: var(--color-body);
		text-decoration: none;
	}

	.side-post__media img {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 1;
		border-radius: var(--radius-card);
		background: var(--color-surface-warm);
		object-fit: cover;
	}

	.side-post__title {
		display: block;
		font-size: var(--step--1);
		font-weight: 600;
		line-height: 1.3;
		color: var(--color-ink);
	}

	.side-post__link:hover .side-post__title,
	.side-post__link:focus-visible .side-post__title {
		color: var(--color-accent-ink);
	}

	.side-post__date {
		display: block;
		margin-block-start: var(--space-3xs);
		font-size: var(--step--1);
		color: var(--color-ink-muted);
	}
}