/**
 * GowithJesus – Multi-Language Video Block
 * Styles for both the Gutenberg editor and the frontend.
 *
 * Goals
 * ─────
 * • Fully responsive 16:9 video via padding-bottom trick
 * • Works inside LearnPress lesson tab panes (which may be narrow)
 * • Overrides any fixed width/height Vimeo sets on the <iframe>
 */

/* ── Container ───────────────────────────────────────────────────────────── */

.gwj-multilang-video {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
}

/* ── Per-language wrapper ────────────────────────────────────────────────── */

.gwj-video-wrapper {
	position:        relative;
	padding-bottom:  56.25%; /* 16 : 9 aspect ratio */
	height:          0;
	overflow:        hidden;
	max-width:       100%;
	border-radius:   4px;
	background:      #000;   /* letterbox colour while iframe loads */
}

/* Stretch the Vimeo iframe to fill the wrapper, whatever size Vimeo assigned. */
.gwj-video-wrapper iframe,
.gwj-video-wrapper object,
.gwj-video-wrapper embed {
	position: absolute !important;
	top:      0         !important;
	left:     0         !important;
	width:    100%      !important;
	height:   100%      !important;
	border:   0         !important;
}

/* ── Editor placeholder (canvas) ─────────────────────────────────────────── */

.gwj-editor-preview {
	padding: 8px;
}

/* ── LearnPress tab context ──────────────────────────────────────────────── */
/*
 * LearnPress wraps lesson content in .learnpress-content or .course-curriculum.
 * These rules ensure the responsive embed works inside those containers too.
 */
.learnpress-content .gwj-multilang-video,
.lp-course-content  .gwj-multilang-video,
.lp-content-tab     .gwj-multilang-video {
	width:     100%;
	max-width: 100%;
}

/* ── Accessibility: hide visually but keep in DOM (language switching) ───── */
/*
 * We use display:none (set by JS) rather than visibility:hidden so the
 * hidden videos do not consume space.  No extra CSS needed here.
 */