/*
 * Single portfolio pages (Uncode "sidebar" layout, without builder).
 *
 * portfolio.js tags the portfolio body row with:
 *   - "wr-split"          always (desktop split view: media and text scroll independently)
 *   - "wr-portrait-media" when the media column holds exactly one portrait video
 * and sets the CSS vars --wr-pane-h (viewport height minus header) and
 * --wr-video-max (video width so its height fits the viewport).
 */

/* ---------- Desktop: independent scrolling panes ---------- */
@media (min-width: 960px) {
	.wr-split {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
	/* Replace Uncode's table grid with flex so the columns can scroll */
	.wr-split > .row-inner {
		display: flex;
		width: 100%;
	}
	.wr-split > .row-inner > div[class*="col-lg-"] {
		display: block;
		height: var(--wr-pane-h, calc(100vh - 90px));
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.wr-split > .row-inner > div[class*="col-lg-"]::-webkit-scrollbar {
		display: none;
	}
	/* Keep the theme's column proportions */
	.wr-split > .row-inner > div[class*="col-lg-"]:not(.col-widgets-sidebar) {
		width: 66.6667%;
		flex: 0 0 66.6667%;
	}
	.wr-split > .row-inner > .col-widgets-sidebar {
		width: 33.3333%;
		flex: 0 0 33.3333%;
	}

	/* Portrait video: narrower black media pane, video centered, wider text.
	   Column direction: the pane can hold siblings besides the media block
	   (e.g. an empty .post-content) — a row-direction flex squeezed the
	   media to zero width when one was present. */
	.wr-split.wr-portrait-media > .row-inner > div[class*="col-lg-"]:not(.col-widgets-sidebar) {
		width: 45%;
		flex: 0 0 45%;
		background: #000;
		display: flex;
		flex-direction: column;
	}
	.wr-split.wr-portrait-media > .row-inner > .col-widgets-sidebar {
		width: 55%;
		flex: 0 0 55%;
	}
	.wr-split.wr-portrait-media > .row-inner > div[class*="col-lg-"]:not(.col-widgets-sidebar) > .row-container {
		width: 100%;
		/* safe vertical centering: autos collapse to 0 if content overflows */
		margin-top: auto;
		margin-bottom: auto;
	}
	.wr-split.wr-portrait-media > .row-inner > div[class*="col-lg-"]:not(.col-widgets-sidebar) .row-parent {
		padding: 0 !important;
	}
}

/* ---------- Portrait video sizing (all widths) ---------- */
.wr-portrait-media .post-media .tmb {
	max-width: min(500px, var(--wr-video-max, 500px));
	margin: 0 auto;
}

/* Mobile: black panel behind the video (on desktop the whole pane is black) */
@media (max-width: 959px) {
	.wr-portrait-media .post-media {
		background: #000;
		padding: 30px 15px;
	}
}