/* TK Media — frontend block / shortcode styles. Independent of TK Landing
   so both plugins can coexist. */

.tk-media {
	--tkm-aspect: 16 / 9;
	--tkm-radius: 18px;
	--tkm-cols: 4;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	margin: 16px 0;
}
.tk-media * { box-sizing: border-box; }

.tk-media-empty {
	padding: 14px 18px;
	border-radius: 8px;
	background: rgba(0,0,0,0.06);
	color: rgba(0,0,0,0.6);
	font-size: 13px;
	font-style: italic;
}

/* Language picker — shown above the card when 2+ language alternatives are
   attached. Switches the underlying card / launcher target on change. */
.tk-media-lang-picker-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	font-size: 13px;
}
.tk-media-lang-picker-label {
	color: inherit;
	opacity: 0.75;
	font-weight: 600;
}
.tk-media-lang-picker {
	padding: 4px 8px;
	border: 1px solid rgba(0,0,0,0.18);
	border-radius: 6px;
	background: rgba(0,0,0,0.04);
	color: inherit;
	font-size: 13px;
	cursor: pointer;
}
.tk-media-lang-picker:focus { outline: 2px solid #ffd54a; outline-offset: 2px; }

/* SINGLE */
.tk-media-single { display: block; max-width: 100%; }
.tk-media-single-image .tk-media-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--tkm-radius);
}
.tk-media-caption {
	margin: 8px 0 0;
	font-size: 13px;
	color: inherit;
	opacity: 0.75;
}

/* CARD (video / pdf) */
.tk-media-card {
	position: relative;
	display: block;
	width: 100%;
	border-radius: var(--tkm-radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	background: #1c1c25;
	transition: transform 200ms cubic-bezier(.2,.7,.2,1);
}
.tk-media-card:hover { transform: translateY(-3px); }
.tk-media-card-art {
	display: block;
	width: 100%;
	aspect-ratio: var(--tkm-aspect);
	background-size: cover;
	background-position: center;
	background-color: #1c1c25;
}
/* When .tk-media-card-art is a <video> element (no curated thumbnail
   available — the v0.2.17 first-frame fallback), make it size and crop
   like the static span version. object-fit: cover matches background-
   size: cover; the inline preload="metadata" + #t=0.5 hint in the
   render guarantees a real frame paints. */
video.tk-media-card-art,
.tk-media-card-video {
	object-fit: cover;
	object-position: center;
}
.tk-media-card-badge {
	position: absolute;
	top: 10px; left: 10px;
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: 999px;
	background: rgba(0,0,0,0.7);
	color: #fff;
}
.tk-media-card-video .tk-media-card-badge { background: #b32d2e; }
.tk-media-card-pdf   .tk-media-card-badge { background: #c9a14a; color: #1c1208; }
.tk-media-card-title {
	display: block;
	padding: 10px 14px 14px;
	color: rgba(255,255,255,0.92);
	font-size: 14px;
	font-weight: 600;
}

/* ROW */
.tk-media-row {
	position: relative;
}
.tk-media-row-title {
	margin: 0 0 12px;
	font-size: clamp(18px, 1.6vw, 24px);
	font-weight: 700;
	letter-spacing: -0.01em;
}
.tk-media-row-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--tkm-cols) - 1) * 14px) / var(--tkm-cols));
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding-bottom: 8px;
}
.tk-media-row-track::-webkit-scrollbar { display: none; }
.tk-media-row-track > * { scroll-snap-align: start; }

.tk-media-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 0;
	background: rgba(0,0,0,0.55);
	color: #fff;
	font-size: 16px;
	cursor: pointer;
	opacity: 0;
	transition: opacity 200ms;
}
.tk-media-arrow-prev { left: 6px; }
.tk-media-arrow-next { right: 6px; }
.tk-media-row:hover .tk-media-arrow,
.tk-media-row:focus-within .tk-media-arrow { opacity: 1; }
.tk-media-row-noarrows .tk-media-arrow { display: none; }
.tk-media-arrow:hover { background: rgba(0,0,0,0.78); }

/* ROWS (multi) */
.tk-media-rows .tk-media-row + .tk-media-row { margin-top: 28px; }

@media (max-width: 700px) {
	.tk-media-row-track { grid-auto-columns: 60%; }
	.tk-media-arrow     { display: none; }
}

/* CARD AUTO-PLAY — v0.2.25. The in-card <video> plays muted+looped, but the
   card itself is a link to the modal; pointer-events:none lets clicks reach
   the parent <a> so the click-to-modal behavior survives. object-fit:cover
   keeps the video filling the card frame at any aspect ratio. */
.tk-media-card-video.tk-media-card-autoplay {
	pointer-events: none;
	object-fit: cover;
	width: 100%;
	height: 100%;
}

/* AMBIENT VIDEO — Render style "Ambient" v0.2.27. Pure decorative autoplay.
   No surrounding <a>, no controls, no modal — just a video playing on the
   page. pointer-events:none means clicks fall through to whatever is behind
   it (theme background, sibling elements). aspect-ratio reserves the frame
   even before the video loads. */
.tk-media-single .tk-media-ambient-video {
	display: block;
	width: 100%;
	max-width: 100%;
	aspect-ratio: var(--tkm-aspect, 16 / 9);
	object-fit: cover;
	border-radius: var(--tkm-radius, 18px);
	background: #000;
	pointer-events: none;
}

/* INLINE PLAYER (video + PDF) — Render style "Inline player" v0.2.24 */
.tk-media-single .tk-media-inline-video {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: var(--tkm-radius, 18px);
	background: #000;
}
.tk-media-single .tk-media-inline-pdf-wrap {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: var(--tkm-aspect, 16/9);
	border-radius: var(--tkm-radius, 18px);
	overflow: hidden;
	background: #1a1a1a;
}
.tk-media-single .tk-media-inline-pdf {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}
.tk-media-single .tk-media-caption {
	margin: 8px 0 0;
	font-size: 14px;
	color: inherit;
	opacity: 0.85;
}