/* Feature-ID: VIDEO-DETAIL-LAYOUT-002 -- replaces the migrated detail layout rules. */
.video-detail-section {
	color: var(--ui-text-secondary);
	display: flex;
	flex-direction: column;
}

.video-detail-section > .video-dynamic-content--offers,
.video-detail-section > .video-under-player-offers {
	order: 1;
}

.video-detail-section > .title-block {
	order: 2;
}

.video-detail-section > .video-detail-section__under-player-bar,
.wpst-vault-preview__detail > .video-detail-section__primary-actions {
	order: 3;
}

.video-detail-section > .video-fact-block,
.wpst-vault-preview__detail > .wpst-vault-preview__facts {
	order: 4;
}

.video-detail-section .title-block,
.wpst-vault-preview .title-block {
	align-items: flex-start;
	background: transparent;
	border: 0;
	box-shadow: none;
	display: flex;
	gap: var(--ui-space-2);
	margin: 0 0 var(--ui-space-2);
	overflow: visible;
	padding: 0;
}

.video-player[data-wpst-page-type="vid"],
.wpst-vault-preview > .wpst-vault-preview__player {
	margin-bottom: 5px;
}

.video-detail-section > .video-dynamic-content--offers,
.video-detail-section > .video-under-player-offers {
	margin: 0 0 var(--ui-space-4);
}

.video-detail-section .title-block h1.entry-title,
.wpst-vault-preview .title-block h1.entry-title {
	/* Bug-ID: VIDEO-DETAIL-TITLE-CLAMP-001 -- Legacy mobile rules must not
	 * reveal text beyond the two-line detail-title contract. */
	-webkit-box-orient: vertical !important;
	-webkit-line-clamp: 2 !important;
	border: 0;
	color: var(--ui-text);
	display: -webkit-box !important;
	flex: 0 1 auto;
	font-size: var(--ui-font-size-h1);
	font-weight: var(--ui-font-weight-semibold);
	line-clamp: 2 !important;
	line-height: var(--ui-line-card);
	margin: 0;
	max-height: 2.7em !important;
	min-width: 0;
	overflow: hidden !important;
	overflow-wrap: anywhere;
	padding: 0;
	text-overflow: ellipsis !important;
}

.video-detail-section__details-toggle {
	--ui-disclosure-accent: var(--ui-accent);
	flex: 0 0 auto;
	margin-top: 0 !important;
}

.video-detail__disclosure-content[hidden] {
	display: none;
}

.video-detail-section__under-player-bar,
.video-detail-section__primary-actions.video-fact-bar__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--ui-space-2);
}

.video-detail-section__under-player-bar,
.wpst-vault-preview__detail > .video-detail-section__primary-actions {
	margin: var(--ui-space-2) 0 var(--ui-space-3);
}

.video-detail-section__primary-actions.video-fact-bar__actions {
	box-sizing: border-box;
	justify-content: flex-start;
	margin-left: 0;
	width: 100%;
}

.video-fact-bar__rating .post-like {
	align-items: center;
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--ui-space-2);
}

/* Feature-ID: VIDEO-REPORT-FORM-001 -- Match report entry point to the
 * shared engagement controls and keep the review form usable on mobile. */
.video-fact-bar__report {
	align-items: center;
	display: inline-flex;
	height: var(--ui-control-height);
	justify-content: center;
	padding: 0;
	width: var(--ui-control-height);
}

.wpst-video-report-modal[hidden] {
	display: none;
}

.wpst-video-report-modal {
	align-items: center;
	display: flex;
	inset: 0;
	justify-content: center;
	overflow-y: auto;
	padding: var(--ui-space-4);
	position: fixed;
	scrollbar-width: none;
	z-index: 1000;
}

.wpst-video-report-modal::-webkit-scrollbar {
	display: none;
}

.wpst-video-report-modal__backdrop {
	background: rgba(0, 0, 0, .72);
	inset: 0;
	position: absolute;
}

.wpst-video-report-dialog {
	background: var(--ui-surface);
	border: 1px solid var(--ui-border-strong);
	box-sizing: border-box;
	color: var(--ui-text-secondary);
	max-width: 560px;
	overflow: visible;
	padding: var(--ui-space-5);
	position: relative;
	width: 100%;
	z-index: 1;
}

.wpst-video-report-dialog h2 {
	color: var(--ui-text);
	font-size: var(--ui-font-size-h3);
	font-weight: var(--ui-font-weight-semibold);
	margin: 0 0 var(--ui-space-2);
}

.wpst-video-report-dialog p {
	font-size: var(--ui-font-size-meta);
	line-height: 1.5;
	margin: 0 0 var(--ui-space-4);
}

.wpst-video-report-dialog fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

.wpst-video-report-dialog legend,
.wpst-video-report-message > span {
	color: var(--ui-text);
	display: block;
	font-size: var(--ui-font-size-meta);
	font-weight: var(--ui-font-weight-semibold);
	margin-bottom: var(--ui-space-2);
}

.wpst-video-report-option {
	align-items: center;
	color: var(--ui-text-secondary);
	display: flex;
	font-family: inherit;
	font-size: var(--ui-font-size-meta);
	gap: var(--ui-space-2);
	line-height: 1.4;
	padding: .45rem 0;
}

.wpst-video-report-option input {
	flex: 0 0 auto;
	margin: 0;
}

.wpst-video-report-message {
	display: block;
	margin-top: var(--ui-space-3);
}

.wpst-video-report-message textarea {
	background: #2b2b2b;
	border: 1px solid #5a5a5a;
	box-sizing: border-box;
	color: var(--ui-text);
	font: inherit;
	font-size: var(--ui-font-size-meta);
	min-height: 88px;
	padding: .65rem;
	resize: vertical;
	width: 100%;
}

.wpst-video-report-message textarea::placeholder {
	color: var(--ui-text-muted);
	opacity: 1;
}

.wpst-video-report-dialog__notice {
	color: var(--ui-text-secondary);
	font-size: var(--ui-font-size-meta);
	min-height: 1.4em;
	padding-top: var(--ui-space-3);
}

.wpst-video-report-dialog__actions {
	display: flex;
	gap: var(--ui-space-2);
	justify-content: flex-end;
	margin-top: var(--ui-space-3);
}

.wpst-video-report-cancel.ui-button {
	background: #2b2b2b !important;
	border-color: #5a5a5a !important;
	color: var(--ui-text-secondary) !important;
}

.wpst-video-report-dialog [type="submit"][disabled] {
	cursor: not-allowed;
	opacity: .5;
}

body.wpst-video-report-open {
	overflow: auto;
}

.video-detail-section .video-fact-bar {
	align-items: stretch;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.video-detail__collapsible-content > p {
	margin: 0;
}

.video-page-summary__facts {
	align-items: baseline;
	column-gap: var(--ui-space-3);
	display: grid;
	font-size: var(--ui-font-size-meta);
	grid-template-columns: max-content minmax(0, 1fr);
	line-height: 1.5;
	margin: var(--ui-space-3) 0 0;
	row-gap: var(--ui-space-1);
}

.video-page-summary__facts dt {
	color: var(--ui-text-secondary);
	font-weight: var(--ui-font-weight-semibold);
	margin: 0;
}

.video-page-summary__facts dd {
	color: var(--ui-text-secondary);
	font-weight: 400;
	margin: 0;
}

.video-detail__tags {
	border-top: 1px solid var(--ui-border);
	margin-top: var(--ui-space-4);
	padding-top: var(--ui-space-4);
	width: 100%;
}

/* Feature-ID: UI-TYPOGRAPHY-SCALE-001 -- Tags heading uses the shared
 * compact label size while retaining the approved semibold weight. */
.video-detail__tags-title {
	font-size: var(--ui-font-size-xs);
	font-weight: var(--ui-font-weight-semibold);
	margin-bottom: var(--ui-space-3);
}

.video-detail__tags-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ui-space-2);
}

.video-related-content {
	box-sizing: border-box;
	flex: 1 0 100%;
	margin: 0;
	padding: var(--ui-space-4) 0 0;
	width: 100%;
}

.video-related-content > .ui-section-title,
.video-related-content__group > .ui-subsection-title {
	margin-bottom: var(--ui-space-3);
}

.video-related-content__group + .video-related-content__group {
	margin-top: var(--ui-space-5);
}

.video-related-content__topics {
	margin: 0;
}

.video-detail__performers {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ui-space-3);
}

.video-detail__performer {
	align-items: center;
	display: inline-flex;
	gap: var(--ui-space-2);
}

.video-detail__performer-name {
	color: var(--ui-text);
	font-size: var(--ui-font-size-body);
	font-weight: var(--ui-font-weight-semibold);
}

@media only screen and (max-width: 767.98px) {
	.video-detail-section .title-block h1.entry-title,
	.wpst-vault-preview .title-block h1.entry-title {
		font-size: var(--ui-font-size-h1-mobile);
	}

}