/* =========================================================
   INBÄDDAT INNEHÅLL MED KLICK FÖR ATT LADDA

   Rutan har samma höjd som inbäddningen kommer att få, så
   att sidan inte hoppar när innehållet laddas.
   ========================================================= */

/* Rutan är kompakt, inte lika hög som inbäddningen kommer att bli.
   Layoutförskjutningen när innehållet laddas sker inom 500 ms efter ett
   klick, och räknas därför inte som CLS. Att i stället reservera hela
   höjden gav 865 px tom yta som besökaren fick skrolla förbi. */
.enil-inbaddning {
	position: relative;
	margin-block: var(--enil-rum-6);
	background: var(--enil-varm);
	border: 1px solid var(--enil-kant);
	border-radius: var(--enil-radie);
	overflow: hidden;
}

.enil-inbaddning__ruta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--enil-rum-3);
	padding: var(--enil-rum-8);
	max-width: 42rem;
	text-align: left;
}

.enil-inbaddning__rubrik {
	margin: 0;
	font-size: var(--enil-text-lg);
	font-weight: 600;
	color: var(--enil-bla);
}

.enil-inbaddning__text {
	margin: 0;
	max-width: none;
	color: var(--enil-text);
}

.enil-inbaddning__not {
	margin: 0;
	max-width: none;
	font-size: var(--enil-text-xs);
	color: var(--enil-text-dampad);
}

/* Laddad: ramen fyller hela ytan. */
.enil-inbaddning--laddad {
	background: var(--enil-vit);
	border-color: var(--enil-kant);
}

.enil-inbaddning--laddad iframe {
	display: block;
	width: 100%;
	height: var(--enil-inbaddning-hojd, 600px);
	border: 0;
}

@media (max-width: 600px) {
	.enil-inbaddning__ruta {
		padding: var(--enil-rum-5);
	}
}

/* Inbäddningar med fast bredd, till exempel anmälningsformuläret
   på 370 px. Innehållet i en iframe från annan origin kan inte
   skala, så width:100% klipper av det. Rutan får i stället exakt
   sin bredd och centreras i textspalten. */
.enil-inbaddning--fast {
	max-width: 100%;
	width: fit-content;
	margin-inline: auto;
}

.enil-inbaddning--fast.enil-inbaddning--laddad iframe {
	width: var(--enil-inbaddning-bredd, 100%);
	max-width: 100%;
}

/* Smalare skärm än ramen: scrolla i sidled hellre än att klippa. */
@media (max-width: 420px) {
	.enil-inbaddning--fast.enil-inbaddning--laddad {
		overflow-x: auto;
	}

	.enil-inbaddning--fast.enil-inbaddning--laddad iframe {
		max-width: none;
	}
}