/*
 * Kontradiktion — media presentation on pieces: images (+ lightbox), video,
 * the bespoke audio player, remote embeds, interactive iframes, captions.
 * Which of these escape the prose column is decided by the breakout grid in
 * piece.css. Part of the split stylesheet set — see base.css for the map.
 */

/* --- Image piece --- */
.k-piece__image {
	margin: 1.5rem 0;
}

/* Native image lightbox ("Förstora vid klick", enabled in includes/embeds.php),
   dressed in the brand: black scrim, white controls. Core inlines light colours
   (scrim background, fill:#000 on the buttons) — hence the !importants. */
body.k-site .wp-lightbox-overlay .scrim {
	background-color: var(--k-bg) !important;
	opacity: 0.94;
}
body.k-site .wp-lightbox-overlay .wp-lightbox-close-button,
body.k-site .wp-lightbox-overlay .wp-lightbox-navigation-button {
	fill: var(--k-fg) !important;
	color: var(--k-fg);
}

/* --- Preview piece: a poster that links to a full-screen work --- */
.k-preview__poster img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
}
.k-preview__cta {
	margin-top: 1rem;
}

/* --- Ratio boxes and the height budget ------------------------------------
   Everything below sizes itself from a CSS aspect-ratio rather than an
   intrinsic one, so it cannot shrink the way an <img> does (piece.css): with a
   definite width the ratio DICTATES the height, and a max-height would only
   letterbox the frame. So each ratio box is capped by WIDTH instead —
   budget × ratio — which lands it at exactly the budget height and keeps the
   frame the right shape.

   The ratio is a custom property so the cap and the aspect-ratio are computed
   from one number; a variant only has to restate --k-ratio. Outside a piece
   surface --k-media-max-h is undefined, the calc is invalid at computed-value
   time and max-width falls back to `none` — i.e. the cap is inert wherever the
   budget doesn't apply, which is what we want. */

/* --- Video piece: inline responsive embed (vimeo/youtube) or self-hosted video --- */
.k-video {
	--k-ratio: 16 / 9;
	position: relative;
	width: 100%;
	max-width: calc(var(--k-media-max-h) * (var(--k-ratio)));
	aspect-ratio: var(--k-ratio);
	margin: 1.5rem auto;
}
.k-video iframe,
.k-video video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
/* Native block video (new-edition wp:video pattern): centred in the column.
   Width/height sizing lives in piece.css with the other replaced media, so the
   height budget has room to work. */
.k-piece .wp-block-video video,
.k-piece__video video {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Remote embeds (Vimeo/YouTube …): the iframe fills its figure and keeps a
   ratio via CSS instead of its fixed width/height attributes; WP's
   wp-embed-aspect-* classes override the 16:9 default. */
.k-piece .wp-block-embed iframe {
	--k-ratio: 16 / 9;
	display: block;
	width: 100%;
	max-width: calc(var(--k-media-max-h) * (var(--k-ratio)));
	height: auto;
	aspect-ratio: var(--k-ratio);
	margin-inline: auto;
	border: 0;
	background: #000;
}
.k-piece .wp-embed-aspect-4-3 iframe {
	--k-ratio: 4 / 3;
}
.k-piece .wp-embed-aspect-1-1 iframe {
	--k-ratio: 1 / 1;
}
/* Portrait: the 24rem cap is usually tighter than the height budget, but on a
   short window it isn't — take whichever binds first. */
.k-piece .wp-embed-aspect-9-16 iframe {
	--k-ratio: 9 / 16;
	max-width: min(24rem, calc(var(--k-media-max-h) * (var(--k-ratio))));
}

/* --- Sound piece: bespoke brand player -------------------------------------
   piece-audio.js swaps native <audio controls> for .k-player (play/pause, a
   hairline seek line, tabular times, mute + volume). Stays at the prose
   measure — it's an instrument panel, not artwork — but fills that full
   width. Native controls are the no-JS fallback. */
.k-piece .wp-block-audio {
	width: 100%;
	margin-inline: 0;
}
.k-piece .wp-block-audio audio {
	display: block;
	width: 100%;
}
.k-player {
	box-sizing: border-box; /* no global reset on this site — width:100% must include the padding/border */
	display: flex;
	align-items: center;
	gap: 1.1rem;
	width: 100%;
	padding: 0.85rem 1.1rem;
	border: 1px solid var(--k-rule);
}
.k-player__toggle {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	padding: 0;
	background: transparent;
	color: inherit;
	border: 1px solid currentColor;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.k-player__toggle:hover,
.k-player__toggle:focus-visible {
	background: var(--k-fg);
	color: var(--k-bg);
}
.k-player__icon {
	width: 0.85rem;
	height: 0.85rem;
	fill: currentColor;
}
.k-player__icon--play {
	margin-left: 2px; /* optically centre the triangle */
}
.k-player__icon--pause {
	display: none;
}
.k-player.is-playing .k-player__icon--play {
	display: none;
}
.k-player.is-playing .k-player__icon--pause {
	display: block;
}
.k-player__time {
	flex: 0 0 auto;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	color: var(--k-muted);
	font-variant-numeric: tabular-nums;
}
/* Sliders (seek + volume): a hairline whose left part is full white; the input
   itself is taller than the line for a usable touch/click target. */
.k-player__seek,
.k-player__volume {
	--k-played: 0%;
	appearance: none;
	-webkit-appearance: none;
	height: 1.25rem;
	margin: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
}
.k-player__seek {
	flex: 1 1 auto;
	min-width: 0;
}
.k-player__volume {
	flex: 0 0 4.5rem;
}
.k-player__seek::-webkit-slider-runnable-track,
.k-player__volume::-webkit-slider-runnable-track {
	height: 1px;
	background: linear-gradient(to right, var(--k-fg) var(--k-played), var(--k-rule) var(--k-played));
}
.k-player__seek::-moz-range-track,
.k-player__volume::-moz-range-track {
	height: 1px;
	background: linear-gradient(to right, var(--k-fg) var(--k-played), var(--k-rule) var(--k-played));
}
.k-player__seek::-webkit-slider-thumb,
.k-player__volume::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 0.55rem;
	height: 0.55rem;
	margin-top: -0.25rem; /* sit centred on the 1px track */
	border: 0;
	border-radius: 50%;
	background: var(--k-fg);
}
.k-player__seek::-moz-range-thumb,
.k-player__volume::-moz-range-thumb {
	width: 0.55rem;
	height: 0.55rem;
	border: 0;
	border-radius: 50%;
	background: var(--k-fg);
}
.k-player__seek:focus-visible,
.k-player__volume:focus-visible {
	outline: 1px solid var(--k-fg);
	outline-offset: 4px;
}
/* Mute: a quiet bare-icon toggle (play stays the one circled, primary control). */
.k-player__mute {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--k-muted);
	cursor: pointer;
}
.k-player__mute:hover,
.k-player__mute:focus-visible {
	color: var(--k-fg);
}
.k-player__mute .k-player__icon {
	width: 1rem;
	height: 1rem;
}
.k-player__icon--muted {
	display: none;
}
.k-player.is-muted .k-player__icon--sound {
	display: none;
}
.k-player.is-muted .k-player__icon--muted {
	display: block;
}
/* Volume wrapper: invisible on desktop — the mute button and slider fall
   through as ordinary flex items of .k-player, laid out inline as before. On
   phones it turns into the anchor for a pop-up (below). The pop-up's own mute
   toggle only exists on phones. */
.k-player__vol,
.k-player__pop,
.k-player__pop-track {
	display: contents;
}
.k-player__pop-mute {
	display: none;
}

/* Phones: an inline volume slider starves the seek line, so collapse it into a
   pop-up. The mute icon becomes the trigger; tapping it stands a vertical
   slider (the desktop one, rotated) above the row, dismissed on tap-away, blur
   or Escape (see piece-audio.js). iOS ignores JS volume — cosmetic there;
   Android honours it. */
@media (max-width: 600px) {
	.k-player {
		gap: 0.6rem;
		padding: 0.85rem 0.9rem;
	}
	.k-player__vol {
		display: block;
		position: relative;
		flex: 0 0 auto;
	}
	.k-player__pop {
		display: none;
		position: absolute;
		bottom: calc(100% + 0.6rem);
		left: 50%;
		width: 2.8rem;
		margin-left: -1.4rem; /* centre the box over the icon */
		flex-direction: column;
		align-items: center;
		gap: 0.35rem;
		padding: 0.6rem 0 0.4rem;
		background: var(--k-bg);
		border: 1px solid var(--k-rule);
		z-index: 2;
	}
	.k-player__vol.is-open .k-player__pop {
		display: flex;
	}
	/* Holds the upright slider; a fixed box so the rotated (out-of-flow) slider
	   still reserves column height. */
	.k-player__pop-track {
		display: block;
		position: relative;
		width: 100%;
		height: 5.5rem;
	}
	/* The slider is the desktop one stood upright: centre its own box in the
	   track, then rotate about that centre so it can't drift off-axis. */
	.k-player__volume {
		position: absolute;
		top: 50%;
		left: 50%;
		flex: none;
		width: 5rem; /* the slider's length */
		transform: translate(-50%, -50%) rotate(-90deg);
	}
	/* Mute toggle inside the pop-up — same quiet bare-icon treatment as the row. */
	.k-player__pop-mute {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 1.9rem;
		height: 1.9rem;
		padding: 0;
		background: transparent;
		border: 0;
		color: var(--k-muted);
		cursor: pointer;
	}
	.k-player__pop-mute:hover,
	.k-player__pop-mute:focus-visible {
		color: var(--k-fg);
	}
	.k-player__pop-mute .k-player__icon {
		width: 1.1rem;
		height: 1.1rem;
	}
}

/* --- Embedded interactive (custom HTML/JS/CSS) piece --- */
.k-embed__frame {
	--k-ratio: 16 / 10;
	position: relative;
	width: 100%;
	max-width: calc(var(--k-media-max-h) * (var(--k-ratio)));
	aspect-ratio: var(--k-ratio);
	margin: 1.5rem auto;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 4px;
	overflow: hidden;
	background: #0b0b0c;
}
.k-embed__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* One caption voice for every kind of media — small, italic, muted, centred,
   echoing the byline. (.k-piece prefix keeps these winning their old
   specificity ties against piece.css, which loads after this file.) */
.k-piece .wp-element-caption,
.k-piece .k-embed__caption {
	font-size: 0.85rem;
	font-style: italic;
	color: var(--k-muted);
	text-align: center;
	margin: 0.9rem 0 0;
}