/* OBJECT etc – hjerte (favoritt) og Følg-knapp. Brukes på hele siden. */

.hjerte {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--hjerte-str);
	height: var(--hjerte-str);
	padding: 0;
	border: 0;
	background: none;
	color: var(--hjerte-farge);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	opacity: var(--hjerte-synlighet);
	transition: opacity 0.3s ease;
}
.hjerte:hover,
.hjerte:focus-visible {
	opacity: 1;
}
.hjerte svg {
	width: 100%;
	height: auto;
	overflow: visible;
}
.hjerte path {
	fill: transparent;
	stroke: currentColor;
	stroke-width: 1.3;
	transition: fill 0.25s ease;
}
.hjerte.er-aktiv path {
	fill: var(--hjerte-fyll);
	stroke: var(--hjerte-farge);
}
.hjerte.slag svg {
	animation: hjerte-slag 0.4s ease;
}
@keyframes hjerte-slag {
	40% { transform: scale(1.25); }
}

/* På rutene: øverst til høyre inni bildet */
.hjerte--rute {
	position: absolute;
	top: calc(var(--grid-kant) + var(--hjerte-luft));
	right: calc(var(--grid-kant) + var(--hjerte-luft));
	z-index: 3;
	transition: opacity 0.3s ease;
}
/* Med mus: vises når man holder over ruten (alltid når det er valgt) */
@media (hover: hover) and (pointer: fine) {
	.rute .hjerte--rute:not(.er-aktiv) { opacity: 0; }
	.rute:hover .hjerte--rute { opacity: var(--hjerte-synlighet); }
	.rute .hjerte--rute:hover,
	.rute .hjerte--rute:focus-visible { opacity: 1; }
}

/* Følg-knapp: uten ramme. Lys grå før, sort når du følger. */
.folg-knapp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: calc(110 * var(--grid-enhet));
	padding: calc(9 * var(--grid-enhet)) calc(22 * var(--grid-enhet));
	border: 0;
	background: var(--folg-farge, rgba(0, 0, 0, 0.045));
	color: var(--grid-farge-tekst);
	font-family: var(--grid-font);
	font-size: calc(15 * var(--grid-enhet));
	line-height: 1.2;
	cursor: pointer;
	transition: background 0.3s ease, color 0.3s ease;
}
.folg-knapp:hover { background: var(--folg-farge-hover, rgba(0, 0, 0, 0.09)); }
.folg-knapp__pa { display: none; }
.folg-knapp.er-aktiv {
	background: var(--grid-farge-tekst);
	color: var(--hand-white);
}
.folg-knapp.er-aktiv .folg-knapp__av { display: none; }
.folg-knapp.er-aktiv .folg-knapp__pa { display: inline; }
.folg-knapp.er-aktiv .folg-knapp__pa::before { content: "✓ "; }

/* Mobil: hjertet 25 % mindre, men trykkflaten rundt er større enn selve hjertet */
.hjerte::after {
	content: "";
	position: absolute;
	inset: -12px;
}
.hjerte:not(.hjerte--rute):not(.hjerte--liten):not(.hjerte--galleri) { position: relative; }
@media (max-width: 767px) {
	:root { --hjerte-str: 14px; }
	.hjerte--liten { --hjerte-str: 12px; }
	.hjerte--rute::after { inset: -16px; }
}