/* Hampakost Recept — enbart layout.
   Färg, typografi och avstånd styrs från Elementors Stil-flik. */

.hkr-kort { display: block; }

.hkr-topp {
	display: flex;
	gap: 32px;
	align-items: flex-start;
	margin-bottom: 32px;
}

.hkr-bild--topp .hkr-topp { flex-direction: column; }
.hkr-bild--topp .hkr-bildruta { flex: 0 0 auto !important; max-width: 100% !important; width: 100%; }

.hkr-bildruta { flex: 0 0 40%; max-width: 40%; }
.hkr-bild { width: 100%; height: auto; display: block; }

.hkr-huvud { flex: 1; min-width: 0; }
.hkr-titel { margin: 0 0 16px; }

.hkr-fakta { margin: 0; }
.hkr-fakta__rad {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 8px 0;
}
.hkr-fakta dt,
.hkr-fakta dd { margin: 0; }

.hkr-kolumner {
	display: flex;
	gap: 48px;
	align-items: flex-start;
	margin-bottom: 32px;
}
.hkr-kol { flex: 1; min-width: 0; }
.hkr-kol--ingredienser { flex: 0 0 38%; max-width: 38%; }

.hkr-rubrik { margin: 0 0 14px; }
.hkr-grupp { margin: 18px 0 8px; }

.hkr-ingredienser {
	list-style: none;
	margin: 0;
	padding: 0;
}
.hkr-ingredienser li { padding: 9px 0; }

.hkr-steg {
	margin: 0;
	padding-left: 1.3em;
}
.hkr-steg li { padding: 0 0 14px; }

.hkr-naring__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 32px;
}
.hkr-naring__lista li { display: flex; gap: 8px; }
.hkr-naring__label { opacity: .7; }

/* Listan från [receptlista] */
.hkr-lista {
	display: grid;
	grid-template-columns: repeat(var(--hkr-kolumner, 4), 1fr);
	gap: 24px;
}
.hkr-listkort { display: block; text-decoration: none; color: inherit; }
.hkr-listkort__bild { margin-bottom: 12px; overflow: hidden; }
.hkr-listkort__bild img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}
.hkr-listkort__tagg {
	display: block;
	font-size: 11px;
	letter-spacing: .05em;
	text-transform: uppercase;
	margin-bottom: 6px;
	opacity: .8;
}
.hkr-listkort__titel { margin: 0; font-size: 16px; }

@media (max-width: 880px) {
	.hkr-topp,
	.hkr-kolumner { flex-direction: column; }
	.hkr-bildruta,
	.hkr-kol--ingredienser { flex: 0 0 auto !important; max-width: 100% !important; }
	.hkr-lista { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
	.hkr-lista { grid-template-columns: 1fr; }
}