/*
 * Omslaget til artiklene som ikke har eget bilde (hh_blogg_omslag() i
 * inc/blogg.php) og kortene for artiklene (hh_blogg_kort()). Lastes på
 * /blogg/ og på artiklene.
 *
 * Flaten har temaets farge (--flate) og et mønster i aksentfargen
 * (--aksent): ringer for SEO, rutenett for WordPress, prikker for
 * WooCommerce, striper for vekst og annonser, og skrå linjer for guidene.
 * Helten står nede til høyre og løfter seg litt når kortet holdes over.
 */

.bl-omslag {
	--flate: #ecf5e0;
	--aksent: #336e10;
	--monster: color-mix(in srgb, var(--aksent) 13%, transparent);
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: var(--flate);
	isolation: isolate;
}

.bl-omslag::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: .9;
}

.bl-omslag[data-monster='ringer']::before {
	background: repeating-radial-gradient(circle at 74% 78%, transparent 0 26px, var(--monster) 26px 27.5px);
	-webkit-mask-image: radial-gradient(circle at 74% 78%, #000 0, transparent 72%);
	mask-image: radial-gradient(circle at 74% 78%, #000 0, transparent 72%);
}

.bl-omslag[data-monster='rutenett']::before {
	background:
		linear-gradient(var(--monster) 1px, transparent 1px) 0 0 / 28px 28px,
		linear-gradient(90deg, var(--monster) 1px, transparent 1px) 0 0 / 28px 28px;
	-webkit-mask-image: linear-gradient(200deg, #000 10%, transparent 80%);
	mask-image: linear-gradient(200deg, #000 10%, transparent 80%);
}

.bl-omslag[data-monster='prikker']::before {
	background: radial-gradient(circle, color-mix(in srgb, var(--aksent) 22%, transparent) 1.6px, transparent 2px) 0 0 / 20px 20px;
	-webkit-mask-image: linear-gradient(160deg, #000 0, transparent 75%);
	mask-image: linear-gradient(160deg, #000 0, transparent 75%);
}

.bl-omslag[data-monster='striper']::before {
	background: repeating-linear-gradient(0deg, transparent 0 22px, var(--monster) 22px 23.5px);
	-webkit-mask-image: linear-gradient(90deg, #000 0, transparent 85%);
	mask-image: linear-gradient(90deg, #000 0, transparent 85%);
}

.bl-omslag[data-monster='skra']::before {
	background: repeating-linear-gradient(-45deg, transparent 0 18px, var(--monster) 18px 19.5px);
	-webkit-mask-image: linear-gradient(135deg, #000 0, transparent 70%);
	mask-image: linear-gradient(135deg, #000 0, transparent 70%);
}

/* Et mykt lys i aksentfargen bak helten */
.bl-omslag-glod {
	position: absolute;
	right: -6%;
	bottom: -30%;
	z-index: -1;
	width: 70%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--aksent) 26%, transparent) 0%, transparent 68%);
}

.bl-omslag-helt {
	position: absolute;
	right: 7%;
	bottom: -6%;
	width: auto;
	height: 84%;
	max-width: 62%;
	object-fit: contain;
	object-position: bottom;
	filter: drop-shadow(0 18px 22px color-mix(in srgb, var(--aksent) 26%, transparent));
	transition: transform .5s cubic-bezier(.2, .7, .2, 1);
	transform-origin: 50% 100%;
}

/* Den utvalgte artikkelen på /blogg/ */
.bl-omslag--stor .bl-omslag-helt { right: 9%; height: 88%; }

/* Øverst i en artikkel: bredt, med temanavnet stort til venstre */
.bl-omslag--hero {
	aspect-ratio: 16 / 7;
	height: auto;
	border-radius: 28px;
}

.bl-omslag--hero .bl-omslag-helt { right: 8%; bottom: -4%; height: 92%; }

.bl-omslag-ord {
	position: absolute;
	left: 5%;
	bottom: 8%;
	color: color-mix(in srgb, var(--aksent) 82%, #000);
	font-family: var(--font-sans, 'Nunito'), system-ui, sans-serif;
	font-size: clamp(2.6rem, 1rem + 6vw, 6.5rem);
	font-weight: 700;
	line-height: .9;
	letter-spacing: -.02em;
	opacity: .9;
}

@media (max-width: 639px) {
	.bl-omslag--hero { aspect-ratio: 4 / 3; border-radius: 22px; }
	.bl-omslag--hero .bl-omslag-helt { right: 4%; height: 74%; }
}

/* ---------- Kortene for artiklene ----------
   På /blogg/ og under «Les videre» i artiklene. Fargene har reserver, så
   kortene ser riktige ut også uten plattform.css. */

.bl-kort {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 10px;
	border: 1px solid #ecebf3;
	border-radius: 26px;
	background: #fff;
	transition: transform .35s var(--pf-myk, cubic-bezier(.2, .7, .2, 1)), border-color .25s;
}

.bl-kort:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--aksent) 35%, #ecebf3); }
.bl-kort:has(.bl-kort-lenke:focus-visible) { outline: 3px solid #a020f0; outline-offset: 3px; }

.bl-kort-bilde {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 18px;
	background: var(--flate);
}

.bl-kort-foto { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--pf-myk, cubic-bezier(.2, .7, .2, 1)); }
.bl-kort:hover .bl-kort-foto { transform: scale(1.04); }
.bl-kort:hover .bl-omslag-helt { transform: translateY(-5%) rotate(-4deg) scale(1.04); }

/* Helten står litt forskjellig fra kort til kort, så rutenettet ikke blir
   en rekke like bilder */
:is(.bl-rutenett, .ar-videre-liste) .bl-omslag-helt { height: 76%; }
:is(.bl-rutenett, .ar-videre-liste) > li:nth-child(3n+2) .bl-omslag-helt { right: 50%; translate: 50% 0; }
:is(.bl-rutenett, .ar-videre-liste) > li:nth-child(3n) .bl-omslag-helt { right: auto; left: 9%; }
:is(.bl-rutenett, .ar-videre-liste) > li:nth-child(3n) .bl-omslag-glod { right: auto; left: -6%; }
.bl-rutenett > li:nth-child(6n+4) .bl-omslag-helt { height: 86%; bottom: -14%; }
.bl-rutenett > li:nth-child(6n+5) .bl-omslag-helt { rotate: 6deg; }

.bl-kort-tekst { display: flex; flex: 1; flex-direction: column; padding: 16px 12px 8px; }

.bl-kort-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--pf-gra, #6e6e7c); font-size: 13px; }

.bl-kort-tema {
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--flate);
	color: var(--aksent);
	font-weight: 600;
}

.bl-kort .bl-kort-tittel {
	--hh-fs: 1.25rem;
	--hh-lh: 1.28;
	margin-top: 12px;
	color: var(--pf-blekk, #0a0f1f);
	font-weight: 600;
	text-wrap: balance;
}

.bl-kort-lenke { color: inherit; text-decoration: none; }
.bl-kort-lenke::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.bl-kort-lenke:focus-visible { outline: none; }

.bl-kort-utdrag {
	display: -webkit-box;
	margin-top: 8px;
	overflow: hidden;
	color: var(--pf-gra, #6e6e7c);
	font-size: 15px;
	line-height: 1.5;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.bl-kort-fot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 18px;
	color: var(--pf-gra, #6e6e7c);
	font-size: 13px;
}

.bl-kort-pil { display: inline-flex; align-items: center; gap: 6px; color: var(--aksent); font-size: 14px; font-weight: 600; }
.bl-kort-pil svg { width: 16px; height: 16px; transition: transform .3s var(--pf-myk, cubic-bezier(.2, .7, .2, 1)); }
.bl-kort:hover .bl-kort-pil svg { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
	.bl-omslag-helt,
	.bl-kort,
	.bl-kort-foto,
	.bl-kort-pil svg { transition: none; }
	.bl-kort:hover { transform: none; }
}