/**
 * Free community page — adapter styles for the live template. The page styles
 * are the generated port in community-post.css (tools/port-tv-css.py); this
 * only covers what the static mock didn't have.
 */

/* Desktop: right column (Welcome video + Join button) pinned under the sticky
 * header (top set by community-post.js), only where the screen is tall enough
 * to show all of it. Phones use the bottom join bar instead. */
@media (min-width: 701px) and (min-height: 820px) {
	.ts-cp .cp-hero-side { position: sticky; top: var(--ts-cp-top, 120px); align-self: start; }
}
@media (max-width: 700px) {
	/* TS-JOIN-BAR v1: room under the footer so the fixed bar never covers it. */
	body.has-join-bar { padding-bottom: 96px; }
}

/* Real avatar image in the round host badge. */
.ts-cp .cp-avatar { overflow: hidden; }
.ts-cp .cp-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

/* Cover image (16:9, also the directory card) fills the mock's placeholder box. */
.ts-cp .cp-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Welcome video — real video under the mock's play button + label. */
.ts-cp .cp-video { position: relative; overflow: hidden; margin-bottom: 28px; }
.ts-cp .cp-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; } /* full frame — vertical clips get side bars, not a crop */
.ts-cp .cp-video-play, .ts-cp .cp-video-label { position: relative; z-index: 2; }
.ts-cp .ts-vc-playing .cp-video-label { opacity: 0; }
/* #350: the box only holds the shared lightbox tile (video-banner.css). */
.ts-cp .cp-video.cp-video--lb { display: block; aspect-ratio: auto; background: none; border-radius: 12px; }
.ts-cp .cp-video.cp-video--lb::before { display: none; }
.ts-cp .cp-video--lb .seller-welcome-video { width: 100%; }
.ts-cp .ts-vc-playing::before { opacity: 0; }

/* Join buttons are links here. */
.ts-cp a.cp-btn { text-decoration: none; }
.ts-cp .cp-shop-price .woocommerce-Price-amount { font-weight: inherit; }