/* ════════════════════════════════════════════════════════
   KCP VIDEO SHOWCASE — Page Styles
   Follows KeyCoachPro design system:
   Teal #02667f · Gold #e8a020 · Ink #16110a · Cream #f2ece2
   Fonts: Bebas Neue (display) · DM Sans (body) · Space Mono (mono)
════════════════════════════════════════════════════════ */

/* ── Page wrapper ── */
.kcp-showcase-wrap {
	background: var(--kcp-cream);
	padding: 0;
}

/* ══════════════════════════════════════════
   ROW STRUCTURE
══════════════════════════════════════════ */
.kcp-showcase-row {
	padding: 48px 48px 56px;
	border-bottom: 2.5px solid var(--kcp-ink);
}
.kcp-showcase-row:last-child { border-bottom: none; }

/* Row backgrounds by slug class */
.kcp-row-bg-paid    { background: linear-gradient(135deg, #0a1628 0%, #12233d 60%, #0d1e35 100%); }
.kcp-row-bg-passed  { background: var(--kcp-cream); }
.kcp-row-bg-audition{ background: var(--kcp-white); }

/* ── Row header ── */
.kcp-row-header {
	display: flex; align-items: center;
	justify-content: space-between;
	margin-bottom: 28px;
}
.kcp-row-label {
	display: flex; align-items: center; gap: 16px;
}
.kcp-row-icon { font-size: 28px; line-height: 1; }
.kcp-row-title {
	font-family: var(--kcp-ff-display); font-size: 40px;
	letter-spacing: 2px; line-height: 1; margin: 0;
}
.kcp-row-desc {
	font-size: 12px; color: var(--kcp-ink-light);
	margin: 4px 0 0; font-family: var(--kcp-ff-mono);
	letter-spacing: .5px;
}
/* Paid row — light text on dark bg */
.kcp-row-bg-paid .kcp-row-desc { color: rgba(255,255,255,.5); }
.kcp-row-bg-paid .kcp-row-title { color: #e8a020; }

/* ── Row navigation arrows ── */
.kcp-row-nav {
	display: flex; align-items: center; gap: 10px;
}
.kcp-nav-arrow {
	width: 36px; height: 36px; border-radius: 6px;
	display: flex; align-items: center; justify-content: center;
	border: 2px solid var(--kcp-ink); background: var(--kcp-white);
	color: var(--kcp-ink); cursor: pointer; transition: all .2s;
	flex-shrink: 0;
}
.kcp-nav-arrow:hover {
	background: var(--kcp-teal); border-color: var(--kcp-teal); color: #fff;
}
.kcp-nav-arrow:disabled {
	opacity: .3; cursor: not-allowed;
}
.kcp-nav-count {
	font-family: var(--kcp-ff-mono); font-size: 11px;
	color: var(--kcp-ink-light); letter-spacing: 1px; min-width: 48px; text-align: center;
}
/* Paid row nav — on dark bg */
.kcp-row-bg-paid .kcp-nav-arrow {
	border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff;
}
.kcp-row-bg-paid .kcp-nav-arrow:hover {
	background: var(--kcp-teal); border-color: var(--kcp-teal);
}
.kcp-row-bg-paid .kcp-nav-count { color: rgba(255,255,255,.4); }

/* ── Empty state ── */
.kcp-row-empty {
	padding: 40px; text-align: center;
	font-size: 14px; color: var(--kcp-ink-light);
	border: 2px dashed var(--kcp-cream-dark); border-radius: 6px;
}
.kcp-row-bg-paid .kcp-row-empty {
	border-color: rgba(255,255,255,.1); color: rgba(255,255,255,.4);
}

/* ══════════════════════════════════════════
   CARD TRACK (scrollable grid)
══════════════════════════════════════════ */
.kcp-card-track-wrap {
	overflow: hidden; /* hides the scrollbar, arrows drive navigation */
	position: relative;
}
.kcp-card-track {
	display: flex; gap: 16px;
	transition: transform .35s cubic-bezier(.25,.46,.45,.94);
	will-change: transform;
}

/* ══════════════════════════════════════════
   VIDEO CARD
══════════════════════════════════════════ */
.kcp-video-card {
	flex: 0 0 calc(25% - 12px); /* 4 cards visible */
	min-width: 220px;
	background: var(--kcp-white);
	border: 2px solid var(--kcp-ink);
	border-radius: 8px;
	overflow: hidden;
	transition: transform .2s, box-shadow .2s;
	display: flex; flex-direction: column;
}
.kcp-video-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(0,0,0,.12);
}
/* Paid row cards — dark-bordered on dark bg */
.kcp-row-bg-paid .kcp-video-card {
	border-color: rgba(255,255,255,.15);
	background: rgba(255,255,255,.05);
}
.kcp-row-bg-paid .kcp-video-card:hover {
	background: rgba(255,255,255,.1);
	box-shadow: 0 12px 32px rgba(0,0,0,.4);
}

/* ── Card media ── */
.kcp-card-media {
	position: relative; aspect-ratio: 16/9;
	overflow: hidden; flex-shrink: 0;
	/* Default: teal gradient shown before video loads (passed row) */
	background: linear-gradient(135deg, #012f3a 0%, #02667f 100%);
}
/* Paid row — dark navy matches the row bg */
.kcp-row-bg-paid .kcp-card-media {
	background: linear-gradient(135deg, #060d1a 0%, #0d1e35 100%);
}
/* Audition row — dark neutral */
.kcp-row-bg-audition .kcp-card-media {
	background: linear-gradient(135deg, #111 0%, #2a2a2a 100%);
}
.kcp-card-video {
	width: 100%; height: 100%; object-fit: cover;
	display: block; cursor: pointer;
}
.kcp-card-overlay {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	background: rgba(0,0,0,.35);
	transition: background .2s;
}
.kcp-card-overlay.hidden { background: transparent; }
.kcp-card-overlay.hidden .kcp-card-play-btn { opacity: 0; pointer-events: none; }

.kcp-card-play-btn {
	background: none; border: none; cursor: pointer;
	padding: 0; transition: transform .2s, opacity .2s;
	display: flex; align-items: center; justify-content: center;
}
.kcp-card-play-btn:hover { transform: scale(1.12); }
.kcp-card-play-btn.playing svg circle { fill: rgba(2,102,127,.75); }

.kcp-card-stage-badge {
	position: absolute; top: 8px; left: 8px;
	font-family: var(--kcp-ff-mono); font-size: 8px;
	font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
	color: #fff; padding: 3px 8px; border-radius: 3px;
}

.kcp-card-progress {
	position: absolute; bottom: 0; left: 0; right: 0;
	height: 3px; background: rgba(255,255,255,.2);
}
.kcp-card-progress-fill {
	height: 100%; width: 0; background: var(--kcp-teal);
	transition: width .1s linear;
}

/* ── Card body ── */
.kcp-card-body { padding: 12px 14px 8px; flex: 1; }
.kcp-card-title {
	font-family: var(--kcp-ff-display); font-size: 17px;
	letter-spacing: .5px; color: var(--kcp-ink); line-height: 1.2;
	margin: 0 0 6px; display: -webkit-box;
	-webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kcp-row-bg-paid .kcp-card-title { color: #fff; }

.kcp-card-author {
	display: flex; align-items: center; gap: 6px;
	font-size: 12px; color: var(--kcp-ink-light); margin-bottom: 4px;
}
.kcp-row-bg-paid .kcp-card-author { color: rgba(255,255,255,.55); }
.kcp-card-avatar { border-radius: 50%; width: 20px; height: 20px; object-fit: cover; }

.kcp-card-meta {
	font-family: var(--kcp-ff-mono); font-size: 10px;
	color: var(--kcp-cream-dark); letter-spacing: .5px;
}
.kcp-row-bg-paid .kcp-card-meta { color: rgba(255,255,255,.3); }

/* ── Card actions / counts row ── */
.kcp-card-actions {
	display: flex; align-items: center; gap: 6px;
	padding: 8px 14px 12px; border-top: 1px solid var(--kcp-cream-mid);
	flex-wrap: wrap;
}
.kcp-row-bg-paid .kcp-card-actions {
	border-top-color: rgba(255,255,255,.08);
}

.kcp-card-react,
.kcp-card-comments-btn,
.kcp-card-share-btn {
	background: none; border: none; cursor: pointer;
	font-size: 12px; color: var(--kcp-ink-light);
	display: flex; align-items: center; gap: 3px;
	padding: 4px 6px; border-radius: 4px; transition: all .2s;
	font-family: var(--kcp-ff-body);
}
.kcp-card-react:hover,
.kcp-card-comments-btn:hover,
.kcp-card-share-btn:hover { background: var(--kcp-cream); color: var(--kcp-ink); }
.kcp-row-bg-paid .kcp-card-react,
.kcp-row-bg-paid .kcp-card-comments-btn,
.kcp-row-bg-paid .kcp-card-share-btn { color: rgba(255,255,255,.5); }
.kcp-row-bg-paid .kcp-card-react:hover,
.kcp-row-bg-paid .kcp-card-comments-btn:hover,
.kcp-row-bg-paid .kcp-card-share-btn:hover {
	background: rgba(255,255,255,.1); color: #fff;
}
.kcp-card-react.kcp-reacted { color: #e0405a; }

.kcp-card-open-btn {
	margin-left: auto; font-size: 11px; padding: 5px 12px;
	letter-spacing: .5px;
}

/* ══════════════════════════════════════════
   VIDEO PLAYER in single.php (shortcode)
══════════════════════════════════════════ */
.kcp-video-player-wrap {
	width: 100%; margin: 0 0 28px;
	border-radius: 8px; overflow: hidden;
	border: 2px solid var(--kcp-ink);
	background: var(--kcp-ink);
}
.kcp-video-player {
	width: 100%; display: block;
	max-height: 540px; background: #000;
}

/* ══════════════════════════════════════════
   POST META — reaction/comment/share counts
   shown on single.php below the video
══════════════════════════════════════════ */
.kcp-video-post-counts {
	display: flex; align-items: center; gap: 16px;
	padding: 16px 0; margin-bottom: 24px;
	border-bottom: 2px solid var(--kcp-cream-mid);
}
.kcp-post-count-react {
	display: flex; align-items: center; gap: 6px;
	background: none; border: 2px solid var(--kcp-cream-mid);
	border-radius: 20px; padding: 6px 14px;
	font-size: 13px; font-weight: 700; cursor: pointer;
	color: var(--kcp-ink); transition: all .2s;
	font-family: var(--kcp-ff-body);
}
.kcp-post-count-react:hover {
	border-color: #e0405a; color: #e0405a; background: rgba(224,64,90,.05);
}
.kcp-post-count-react.kcp-reacted {
	border-color: #e0405a; color: #e0405a; background: rgba(224,64,90,.06);
}
.kcp-post-count-item {
	font-size: 13px; color: var(--kcp-ink-light);
	display: flex; align-items: center; gap: 4px;
}
.kcp-post-share-btn {
	background: var(--kcp-teal); color: #fff;
	border: none; border-radius: 20px; padding: 6px 16px;
	font-size: 12px; font-weight: 700; cursor: pointer;
	letter-spacing: .5px; transition: all .2s;
	font-family: var(--kcp-ff-body);
}
.kcp-post-share-btn:hover { background: var(--kcp-teal-dark); transform: translateY(-1px); }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 1100px) {
	.kcp-video-card { flex: 0 0 calc(33.333% - 11px); }
}
@media (max-width: 900px) {
	.kcp-showcase-row { padding: 36px 24px 44px; }
	.kcp-video-card { flex: 0 0 calc(50% - 8px); }
	.kcp-row-title { font-size: 32px; }
}
@media (max-width: 600px) {
	.kcp-showcase-row { padding: 28px 16px 36px; }
	.kcp-video-card { flex: 0 0 calc(100% - 0px); }
	.kcp-row-header { flex-direction: column; align-items: flex-start; gap: 12px; }
	.kcp-row-title { font-size: 26px; }
	.kcp-card-actions { gap: 4px; }
	.kcp-card-open-btn { width: 100%; text-align: center; margin-left: 0; margin-top: 4px; }
}

/* ── Fullscreen button ── */
.kcp-card-fullscreen-btn {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 10;
	background: rgba(0,0,0,.55);
	border: none;
	border-radius: 5px;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #fff;
	opacity: 0;
	transition: opacity .2s, background .2s;
	flex-shrink: 0;
	padding: 0;
}
.kcp-card-media:hover .kcp-card-fullscreen-btn,
.kcp-card-video:not([paused]) ~ .kcp-card-fullscreen-btn {
	opacity: 1;
}
/* Always show when playing */
.kcp-video-card:has(.kcp-card-video:not([paused])) .kcp-card-fullscreen-btn { opacity: 1; }
.kcp-card-fullscreen-btn:hover { background: var(--kcp-teal); }

/* ── Login tooltip ── */
.kcp-login-tip {
	position: absolute;
	bottom: calc(100% + 6px);
	left: 0;
	background: var(--kcp-ink);
	color: #fff;
	font-size: 12px;
	padding: 5px 10px;
	border-radius: 5px;
	white-space: nowrap;
	z-index: 100;
	pointer-events: auto;
}
.kcp-login-tip a { color: var(--kcp-gold); text-decoration: underline; }
.kcp-login-tip::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 12px;
	border: 5px solid transparent;
	border-top-color: var(--kcp-ink);
}

/* Comments button clickable cursor */
.kcp-card-comments-btn { cursor: pointer; }