/* HQ Video Section — Styles */

/* ── Full-width breakout (same technique as Hero) */
.wp-block-hq-video-section.alignfull {
	width:        100vw;
	max-width:    100vw;
	margin-left:  calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.hq-video-section {
	position:        relative;
	width:           100%;
	overflow:        hidden;
	display:         flex;
	align-items:     center;
	justify-content: center;
	box-sizing:      border-box;
}

/* ── Video / iframe background */
.hq-vs-video,
.hq-vs-iframe {
	position:   absolute;
	top:        50%;
	left:       50%;
	width:      100%;
	height:     100%;
	min-width:  100%;
	min-height: 100%;
	transform:  translate(-50%, -50%);
	object-fit: cover;
	border:     none;
	pointer-events: none;
}

/* Wider-than-tall ratio fix for iframes (16:9 video) */
.hq-vs-iframe {
	width:  177.78vh;   /* 16/9 * 100vh */
	height: 56.25vw;    /* 9/16 * 100vw */
	min-width:  100%;
	min-height: 100%;
}

/* ── Poster fallback */
.hq-vs-poster {
	position:            absolute;
	inset:               0;
	background-size:     cover;
	background-position: center;
	background-repeat:   no-repeat;
	z-index:             0;
}

/* Hide poster once video has loaded — toggled via JS or CSS video::-webkit-media-controls */
.hq-video-section:has(video) .hq-vs-poster { opacity: 0; }

/* ── Overlay */
.hq-vs-overlay {
	position:       absolute;
	inset:          0;
	pointer-events: none;
	z-index:        1;
}

/* ── Content */
.hq-vs-content {
	position:       relative;
	z-index:        2;
	max-width:      820px;
	width:          100%;
	padding:        0 24px;
}

.hq-vs-title {
	margin:      0 0 0.4em;
	font-weight: 800;
	line-height: 1.15;
	word-break:  break-word;
}

.hq-vs-subtitle {
	margin:      0 0 1.5em;
	line-height: 1.65;
	max-width:   620px;
}

/* Center subtitle when text-align center */
.hq-video-section[style*="text-align: center"] .hq-vs-subtitle,
.hq-video-section[style*="text-align:center"]  .hq-vs-subtitle {
	margin-left:  auto;
	margin-right: auto;
}

.hq-vs-btn {
	display:         inline-block;
	padding:         14px 36px;
	border-radius:   6px;
	text-decoration: none;
	font-weight:     700;
	font-size:       1em;
	transition:      opacity 0.2s ease, transform 0.2s ease;
	line-height:     1;
}
.hq-vs-btn:hover { opacity: 0.88; transform: translateY(-2px); text-decoration: none; }
.hq-vs-btn:focus,
.hq-vs-btn:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

/* ── Editor notice */
.hq-vs-editor-notice {
	position:    absolute;
	top:         12px;
	left:        50%;
	transform:   translateX(-50%);
	background:  rgba(0,0,0,0.6);
	color:       #fff;
	padding:     6px 16px;
	border-radius: 20px;
	font-size:   12px;
	white-space: nowrap;
	z-index:     10;
	pointer-events: none;
}

/* Editor color helpers */
.hq-color-row  { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.hq-color-label { flex:1; font-size:12px; font-weight:500; }
.hq-color-row input[type="color"] { width:40px; height:32px; padding:2px; border:1px solid #ccc; border-radius:4px; cursor:pointer; background:none; }
.hq-media-btn  { width:100%; justify-content:center; margin-bottom:8px; }

@media (max-width: 600px) {
	.hq-vs-title   { font-size: clamp(24px, 7vw, 52px) !important; }
	.hq-vs-subtitle { font-size: clamp(14px, 3.5vw, 18px) !important; }
}