/* ── Brentwood Video Text — editor styles ──────────────────────────────────────── */

.bw-video-text .bw-vt-row {
	display: flex;
	align-items: stretch;
	min-height: 240px;
}

.bw-video-text .bw-vt-col {
	flex: 1;
	min-width: 0;
}

/* layout proportions (mirror style.css) */
.bw-video-text--layout-1 .bw-vt-video-col {
	flex: 0 0 calc(60% + 2rem);
	margin-right: -2rem;
	position: relative;
	z-index: 1;
}
.bw-video-text--layout-1 .bw-vt-text-col {
	flex: 0 0 40%;
	position: relative;
	z-index: 0;
}
.bw-video-text--layout-1 .bw-vt-text-inner { padding-left: 4rem; }

.bw-video-text--layout-2 .bw-vt-text-col  { flex: 0 0 30%; }
.bw-video-text--layout-2 .bw-vt-video-col { flex: 0 0 70%; }

.bw-video-text--layout-3 .bw-vt-text-col  { flex: 0 0 30%; }
.bw-video-text--layout-3 .bw-vt-video-col { flex: 0 0 70%; }

.bw-video-text--layout-4 .bw-vt-video-col { flex: 0 0 65%; }
.bw-video-text--layout-4 .bw-vt-text-col  { flex: 0 0 35%; }

.bw-video-text--layout-5 .bw-vt-video-col { flex: 0 0 50%; }
.bw-video-text--layout-5 .bw-vt-text-col  { flex: 0 0 50%; }

.bw-video-text--layout-7 .bw-vt-video-col { flex: 0 0 50%; }
.bw-video-text--layout-7 .bw-vt-text-col  { flex: 0 0 50%; }

/* layout 6: full-width single video, shown as a wide banner (no text col) */
.bw-video-text--layout-6 .bw-vt-row { display: block; }
.bw-video-text--layout-6 .bw-vt-video-col { flex: none; width: 100%; }
.bw-video-text--layout-6 .bw-vt-video-wrapper { aspect-ratio: 3 / 1; }

/* video wrapper in editor: use aspect-ratio instead of the padding-bottom:56.25%
   trick used on the frontend. The padding-bottom trick requires children to be
   position:absolute; in the editor that causes layout conflicts with Gutenberg.
   aspect-ratio gives the wrapper a real height so children can fill it normally. */
.bw-video-text .bw-vt-video-wrapper {
	width: 100%;
	position: relative;
	aspect-ratio: 16 / 9;
	height: auto !important;
	padding-bottom: 0 !important;
	overflow: hidden;
}

/* Thumbnail in editor: position absolute to fill the aspect-ratio wrapper */
.bw-video-text .bw-vt-thumbnail {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background-size: cover;
	background-position: center;
	background-color: #1a1a1a;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bw-video-text .bw-vt-play-btn-preview {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	box-shadow: 0 2px 12px rgba( 0, 0, 0, 0.35 );
	pointer-events: none;
}

.bw-video-text .bw-vt-play-btn-preview svg {
	width: 28px;
	height: 28px;
	margin-left: 4px;
}

/* placeholder when no video set */
.bw-video-text .bw-vt-video--placeholder {
	background: #f0f0f1;
	border: 2px dashed #c3c4c7;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: #757575;
	font-size: 13px;
	padding: 24px;
	min-height: 240px;
}

.bw-video-text .bw-vt-video--placeholder .dashicons {
	font-size: 40px;
	width: 40px;
	height: 40px;
	color: #aaa;
}

.bw-video-text .bw-vt-video--placeholder p {
	margin: 0;
	font-size: 13px;
}

/* layout 1, 2 & 4: text col is content-height, vertically centred against video */
.bw-video-text.bw-video-text--layout-1 .bw-vt-row,
.bw-video-text.bw-video-text--layout-2 .bw-vt-row,
.bw-video-text.bw-video-text--layout-4 .bw-vt-row {
	align-items: center;
}

/* layout 3: both cols stretch to the same height. When the text col is taller
   than the video's 16:9 box, the leftover space in the video col is filled with a
   light grey and the video is centred vertically within it (mirrors the frontend). */
.bw-video-text.bw-video-text--layout-3 .bw-vt-row {
	align-items: stretch;
}

.bw-video-text.bw-video-text--layout-3 .bw-vt-video-col {
	background-color: #e9e9e9;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* layout 5: same equal-height behaviour as layout 3 — 50/50 columns, light-grey
   fill behind a vertically-centred uploaded video when the text is taller. */
.bw-video-text.bw-video-text--layout-5 .bw-vt-row {
	align-items: stretch;
}

.bw-video-text.bw-video-text--layout-5 .bw-vt-video-col {
	background-color: #e9e9e9;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* layout 7: same equal-height grey-fill behaviour as layout 5 (50/50, light-grey
   behind a vertically-centred video when the text is taller), plus a number badge. */
.bw-video-text.bw-video-text--layout-7 .bw-vt-row {
	align-items: stretch;
}
.bw-video-text.bw-video-text--layout-7 .bw-vt-video-col {
	background-color: #e9e9e9;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* the number badge is a direct child of the column and pins to its top-left, so
   the column must be the positioning context (front end sets this generically). */
.bw-video-text .bw-vt-video-col {
	position: relative;
}

/* text column */
.bw-video-text .bw-vt-text-col {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.bw-video-text .bw-vt-text-inner {
	padding: 32px 36px;
}

/* heading row — wrapper divs are flex children, not the h2/span directly */
.bw-video-text .bw-vt-heading-row {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start !important;
	gap: 8px;
	margin-bottom: 14px;
}

.bw-video-text .bw-vt-heading-col {
	flex: 1 !important;
	min-width: 0;
}

.bw-video-text .bw-vt-icon-col {
	flex-shrink: 0 !important;
	display: flex !important;
	align-items: flex-start !important;
}

.bw-video-text .bw-vt-heading {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Editor preview of the heading-as-tagline. Follows the customizer Heading font
   (Kadence's --global-heading-font-family) like the front end, falling back to
   the inherited body font if the variable isn't present in the editor. */
.bw-video-text .bw-vt-heading.bw-tagline {
	font-family: var( --global-heading-font-family, inherit );
	font-weight: 300;
	font-size: 1.5rem;
	line-height: 1.25;
	color: #4b5563;
}

/* heading YouTube icon (editor preview — not clickable) */
.bw-video-text .bw-vt-heading-yt-btn--preview {
	display: flex;
	align-items: center;
	color: #D1D5DB; /* gray-300, soft */
	opacity: 0.85;
	padding: 4px;
	cursor: default;
}

.bw-video-text .bw-vt-heading-yt-btn--preview .bw-vt-yt-icon {
	display: block;
	width: 30px;
	height: 27px;
}

.bw-video-text .bw-vt-body {
	line-height: 1.65;
}

/* play link (editor preview) */
.bw-video-text .bw-vt-play-link--preview {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 8px !important;
	margin-top: 16px !important;
	font-size: 0.9em !important;
	font-weight: 600 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	cursor: default;
	pointer-events: none;
	background: none !important;
	background-color: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
	line-height: 1 !important;
}

.bw-video-text .bw-vt-play-link--preview .bw-vt-yt-icon {
	display: block;
	width: 20px;
	height: 18px;
	flex-shrink: 0;
}

/* decorative dash (editor uses div; frontend uses SVG) */
.bw-video-text .bw-vt-text-dash {
	display: block;
	width: 64px;
	height: 4px;
	background: #9CA3AF;
	margin-top: 12px;
}
.bw-video-text .bw-vt-dash-svg {
	display: block;
	margin-top: 12px;
}

/* ── ColorField component ────────────────────────────────────────────────── */
.bw-vt-color-field {
	margin-bottom: 4px;
}

.bw-vt-color-toggle {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	width: 100% !important;
	padding: 6px 0 !important;
	background: none !important;
	border: none !important;
	border-bottom: 1px solid #e0e0e0 !important;
	cursor: pointer !important;
	text-align: left !important;
	color: #1e1e1e !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	min-height: 0 !important;
}

.bw-vt-color-field-label {
	font-size: 13px;
	font-weight: 400;
}

.bw-vt-color-field-right {
	display: flex;
	align-items: center;
	gap: 6px;
}

.bw-vt-color-dot {
	display: inline-block;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1px solid rgba( 0, 0, 0, 0.2 );
	flex-shrink: 0;
}

.bw-vt-color-arrow {
	font-size: 10px;
	color: #757575;
}

.bw-vt-color-picker-wrap {
	padding: 8px 0 12px;
	border-bottom: 1px solid #e0e0e0;
}

/* Remove default margin from ColorPicker inside the panel */
.bw-vt-color-picker-wrap .components-color-picker {
	width: 100%;
	padding: 0;
}

/* ── text settings panel section labels ──────────────────────────────────── */
.bw-vt-section-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: #1e1e1e;
	margin: 12px 0 8px;
}

.bw-vt-section-divider {
	border: none;
	border-top: 1px solid #e0e0e0;
	margin: 16px 0 4px;
}

/* ── CTA link preview (editor only) ─────────────────────────────────────── */
.bw-vt-cta-link--preview {
	pointer-events: none;
}

/* ── highlight format popover ────────────────────────────────────────────── */
.bw-vt-highlight-popover {
	padding: 12px;
	min-width: 240px;
	max-width: 280px;
}

.bw-vt-highlight-popover .components-color-picker {
	width: 100%;
	padding: 0;
}

.bw-vt-highlight-popover .components-button.is-destructive {
	display: block;
	margin-top: 8px;
	width: 100%;
	justify-content: center;
}

/* ── sidebar helpers ─────────────────────────────────────────────────────── */
.bw-vt-sidebar-label {
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0 0 6px;
	color: #1e1e1e;
}

.bw-vt-sidebar-hint {
	font-size: 11px;
	color: #757575;
	word-break: break-all;
	margin: 4px 0 0;
}

.bw-vt-sidebar-thumb-preview {
	display: block;
	width: 100%;
	border-radius: 4px;
	margin-bottom: 8px;
}

.bw-vt-media-btn-row {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}