/**
 * Sekel 3D viewer.
 *
 * Lives inside the navy Sekel band on the homepage, so the block paints its
 * own light stage and leaves the surrounding text colours alone. Colours are
 * written out rather than taken from --kf-* because the shortcode can also be
 * dropped on a page that never loads startsida.css.
 */

.kf-3d {
	--kf-3d-navy: #132d45;
	--kf-3d-gold: #f2cf24;
	/* The render sits on its own grey gradient. The stage repeats it so the
	   letterboxing around a portrait image reads as part of the picture. */
	--kf-3d-bg: linear-gradient(180deg, #3e434c 0%, #a2a5aa 52%, #b8bcbf 100%);
	display: grid;
	gap: 24px;
	align-items: center;
}

.kf-3d-head {
	max-width: 52ch;
}

.kf-3d-specs {
	display: grid;
	gap: 6px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.kf-3d-specs li {
	position: relative;
	padding-left: 14px;
	font-size: 13px;
	line-height: 1.5;
	opacity: 0.7;
}

.kf-3d-specs li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--kf-3d-gold);
}

.kf-3d-eyebrow {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--kf-3d-gold);
}

.kf-3d-title {
	margin: 0 0 8px;
	font-size: clamp(19px, 1.8vw, 24px);
	line-height: 1.25;
	color: inherit;
}

.kf-3d-text {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
	color: inherit;
	opacity: 0.75;
}

/* The stage owns the height; the viewer is laid inside it. model-viewer ships
   its own 300×150 default size and `contain: strict`, so an aspect-ratio on
   the element itself is ignored and the canvas collapses to 150 px. Filling an
   absolutely positioned box is the one sizing the library cannot override, and
   it also means the section does not jump when 3D replaces the photo. */
.kf-3d-panel {
	display: grid;
	gap: 14px;
}

.kf-3d-stage {
	position: relative;
	display: block;
	width: 100%;
	/* Close to the render's own 880 × 950, so the picture is shown whole
	   instead of cropping the frame's head and sill away. */
	aspect-ratio: 1 / 1;
	margin: 0;
	overflow: hidden;
	border-radius: 4px;
	background: var(--kf-3d-bg);
}

.kf-3d-viewer {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.kf-3d.is-live .kf-3d-poster,
.kf-3d.is-live .kf-3d-start,
.kf-3d.is-live .kf-3d-note {
	display: none;
}

.kf-3d-poster {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.kf-3d-start {
	position: absolute;
	inset: auto 0 0 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: max-content;
	margin: 0 auto 18px;
	padding: 11px 20px;
	border: 0;
	border-radius: 3px;
	background: var(--kf-3d-gold);
	color: var(--kf-3d-navy);
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(19, 45, 69, 0.25);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.kf-3d-start:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 22px rgba(19, 45, 69, 0.3);
}

.kf-3d-start:disabled {
	cursor: progress;
	opacity: 0.75;
	transform: none;
}

.kf-3d-start-ic {
	display: inline-flex;
}

/* Swapped for a spinner-free word so there is no extra paint work while the
   2 MB model is on the wire. */
.kf-3d-start.is-busy::after {
	content: " — laddar…";
	text-transform: none;
	letter-spacing: 0;
	font-weight: 600;
}

.kf-3d-note {
	position: absolute;
	inset: 12px 12px auto auto;
	margin: 0;
	padding: 5px 9px;
	border-radius: 3px;
	background: rgba(19, 45, 69, 0.75);
	color: #fff;
	font-size: 11px;
	line-height: 1.3;
}

.kf-3d-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 18px;
}

.kf-3d-slider {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 240px;
	min-width: 0;
}

.kf-3d-slider.is-unavailable {
	display: none;
}

.kf-3d-slider-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0.85;
}

.kf-3d-slider input[type="range"] {
	flex: 1 1 auto;
	min-width: 0;
	accent-color: var(--kf-3d-gold);
}

.kf-3d-slider-value {
	min-width: 3.2em;
	font-size: 13px;
	font-weight: 700;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.kf-3d-sides {
	display: inline-flex;
	border: 1px solid currentColor;
	border-radius: 3px;
	overflow: hidden;
	opacity: 0.85;
}

/* Woodmart capitalises every word in a button, which turns "Tillbaka till
   bild" into "Tillbaka Till Bild". Listed one by one rather than as
   `.kf-3d button` so the deliberately uppercase "Visa i 3D" is left alone. */
.kf-3d-controls button,
.kf-3d-retry {
	text-transform: none;
	letter-spacing: normal;
	min-height: 0;
	line-height: 1.3;
}

.kf-3d-side {
	padding: 7px 14px;
	border: 0;
	background: none;
	color: inherit;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}

.kf-3d-side.is-active {
	background: var(--kf-3d-gold);
	color: var(--kf-3d-navy);
}

.kf-3d-back {
	padding: 7px 0;
	border: 0;
	background: none;
	color: inherit;
	font-family: inherit;
	font-size: 13px;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	opacity: 0.75;
}

.kf-3d-back:hover {
	opacity: 1;
}

.kf-3d-error {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 24px;
	background: rgba(19, 45, 69, 0.88);
	color: #fff;
	text-align: center;
	font-size: 14px;
}

.kf-3d-retry {
	padding: 9px 18px;
	border: 0;
	border-radius: 3px;
	background: var(--kf-3d-gold);
	color: var(--kf-3d-navy);
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

@media (min-width: 900px) {
	.kf-3d {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		gap: 48px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kf-3d-start {
		transition: none;
	}
}