/* Villalivet Tidningen: bläddringsvy. Mobilen först, uppslag från 820 px. */
.vlti-flip {
	--fl-mork: #16201a;
	--fl-linje: #e4e7e2;
	margin: 2rem 0;
	outline: none;
}
.vlti-flip:focus-visible { outline: 3px solid #1f6b45; outline-offset: 4px; border-radius: 14px; }

.vlti-flip-scen {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	background: #f1efe9;
	border-radius: 14px;
	padding: 1rem .75rem;
}
.vlti-flip-blad {
	display: flex;
	gap: 4px;
	justify-content: center;
	align-items: flex-start;
	width: 100%;
	max-width: 1100px;
	cursor: pointer;
}
.vlti-flip-sida { margin: 0; position: relative; flex: 1 1 0; min-width: 0; }
.vlti-flip-sida img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 6px 20px rgba(22, 32, 26, .18);
}
.vlti-flip-sida figcaption {
	position: absolute;
	bottom: 6px;
	right: 8px;
	font-size: .72rem;
	font-weight: 700;
	color: #4c5750;
	background: rgba(255, 255, 255, .88);
	border-radius: 99px;
	padding: 2px 8px;
}
.vlti-flip-blad.ar-uppslag .vlti-flip-sida:first-child img { border-radius: 4px 2px 2px 4px; }
.vlti-flip-blad.ar-uppslag .vlti-flip-sida:last-child img { border-radius: 2px 4px 4px 2px; }

.vlti-flip-nav {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	min-height: 48px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--fl-mork);
	box-shadow: 0 2px 8px rgba(22, 32, 26, .18);
	cursor: pointer;
	transition: transform .15s, opacity .15s;
}
.vlti-flip-nav:hover { transform: scale(1.06); }
.vlti-flip-nav:disabled { opacity: .35; cursor: default; transform: none; }
.vlti-flip-nav:focus-visible { outline: 3px solid #1f6b45; outline-offset: 2px; }

.vlti-flip-rad {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem;
	margin-top: .75rem;
}
.vlti-flip-rakn { font-size: .95rem; font-weight: 700; color: #4c5750; margin-right: auto; }
.vlti-flip-knapp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--fl-linje);
	border-radius: 10px;
	background: #fff;
	color: var(--fl-mork);
	font: inherit;
	font-size: .95rem;
	font-weight: 700;
	text-decoration: none !important;
	cursor: pointer;
}
.vlti-flip-knapp:hover { background: #f6f5f1; }

.vlti-flip-miniatyrer {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
	gap: .6rem;
	margin-top: .9rem;
	max-height: 380px;
	overflow-y: auto;
	padding: .25rem;
}
.vlti-flip-miniatyrer[hidden] { display: none; }
.vlti-flip-mini-knapp {
	position: relative;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 6px;
	background: none;
	cursor: pointer;
	min-height: 44px;
}
.vlti-flip-mini-knapp img { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 2px 6px rgba(22, 32, 26, .14); }
.vlti-flip-mini-knapp span {
	position: absolute;
	bottom: 4px;
	right: 4px;
	font-size: .7rem;
	font-weight: 700;
	background: rgba(255, 255, 255, .9);
	border-radius: 99px;
	padding: 1px 6px;
}
.vlti-flip-mini-knapp:hover { border-color: #1f6b45; }

.vlti-flip.ar-helskarm {
	background: #16201a;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.vlti-flip.ar-helskarm .vlti-flip-scen { background: transparent; }
.vlti-flip.ar-helskarm .vlti-flip-rakn { color: #c9d1ca; }
.vlti-flip.ar-helskarm .vlti-flip-blad { max-height: 82vh; }
.vlti-flip.ar-helskarm .vlti-flip-sida img { max-height: 82vh; width: auto; margin: 0 auto; }

@media (max-width: 819px) {
	.vlti-flip-scen { padding: .6rem .35rem; }
	.vlti-flip-nav { width: 44px; height: 44px; }
	.vlti-flip-rakn { width: 100%; margin-right: 0; }
	.vlti-flip-knapp { flex: 1 1 auto; }
	.vlti-flip-miniatyrer { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); max-height: 300px; }
}