/* Funktion feed on anvandningsomrade singles (views/feeds/funktion-feed.twig) */

.funktion-feed__grid {
	columns: 3;
	column-gap: var(--space-s);
}
@media screen and (max-width: 1025px) {
	.funktion-feed__grid {
		columns: 2;
	}
}
@media screen and (max-width: 767px) {
	.funktion-feed__grid {
		columns: 1;
	}
}

.funktion-feed__card {
	break-inside: avoid;
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	padding: var(--space-s);
	margin-bottom: var(--space-s);
	border: 1px solid var(--primary-subtle);
	border-radius: 8px;
}

/* Icon keeps its own size (capped); align-self stops the flex column from stretching it */
.funktion-feed__icon {
	align-self: flex-start;
	max-width: 60px;
	height: auto;
}

.funktion-feed__title {
	margin: 0;
}

.funktion-feed__list {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.funktion-feed__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.6rem 9px;
	font-size: 1.6rem;
	line-height: 1.3;
	color: var(--base);
	text-decoration: none;
	border-radius: 6px;
	transition: background-color 0.15s ease-out;
}
.funktion-feed__link:is(:hover, :focus-visible) {
	background-color: var(--primary-subtle-light);
	text-decoration: none;
}

.funktion-feed__chevron {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: var(--primary-subtle-light);
	color: var(--primary);
	transition: background-color 0.15s ease-out, color 0.15s ease-out;
}
/* viewBox is tight around the 4.5x9 path, so let the stroke and round caps paint outside it */
.funktion-feed__chevron svg {
	overflow: visible;
}
.funktion-feed__link:is(:hover, :focus-visible) .funktion-feed__chevron {
	background-color: var(--primary);
	color: var(--white);
}

/* ---------------------------------------------------------------
   Children feed on top-level funktion pages
   (views/feeds/funktion-children-feed.twig)
   --------------------------------------------------------------- */
.funktion-children-feed__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-s);
}
@media screen and (max-width: 1025px) {
	.funktion-children-feed__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media screen and (max-width: 767px) {
	.funktion-children-feed__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.funktion-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	padding: var(--space-s);
	border: 1px solid var(--primary-subtle);
	border-radius: 8px;
}
.funktion-card a.clickable-parent {
	color: inherit;
	text-decoration: none !important;
	outline: none !important;
}

/* Gradient border: fades in over 2.5s on hover (out in 0.5s) and spins one revolution per 2.5s. The light stop is
   --primary-ultra-light, far enough from --primary that the spin is visible.
   --funktion-card-angle is registered with @property so the conic-gradient angle can animate. */
@property --funktion-card-angle {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}
.funktion-card::before {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: 10px;
	padding: 3px;
	background: conic-gradient(from var(--funktion-card-angle), var(--primary) 0%, var(--primary-ultra-light) 50%, var(--primary) 100%);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity 0.5s ease-out; /* fade-out when hover ends */
	pointer-events: none;
}
.funktion-card:is(:hover, :focus-within)::before {
	opacity: 1;
	transition: opacity 2.5s ease-out; /* slow fade-in while hovering */
	animation: funktion-card-spin 2.5s linear infinite;
}
@keyframes funktion-card-spin {
	from {
		--funktion-card-angle: 0deg;
	}
	to {
		--funktion-card-angle: 360deg;
	}
}
@media (prefers-reduced-motion: reduce) {
	.funktion-card:is(:hover, :focus-within)::before {
		animation: none;
	}
}
.funktion-card:is(:hover, :focus-within) .funktion-feed__chevron {
	background-color: var(--primary);
	color: var(--white);
}

.funktion-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
}
.funktion-card__title {
	margin: 0;
}
.funktion-card__head .funktion-feed__chevron {
	margin-top: 0.1rem;
}
.funktion-card__text {
	margin: 0;
	font-size: var(--text-s);
	line-height: 1.5;
}