/* Hero Video block */

/* Flush video under header — loads only when the block is on the page. */
html body main#wp--skip-link--target,
html body main#wp--skip-link--target > .wp-block-group,
html body main#wp--skip-link--target .wp-block-post-content,
html body main#wp--skip-link--target .entry-content {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

.hero-video-wrapper {
	position: relative;
}

.hero-video {
	position: relative;
	padding-top: 56.25%; /* 16:9 desktop */
	overflow: hidden;
}

.hero-video-fallback {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
}

.hero-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.hero-content-box {
	position: absolute;
	top: 42%;
	left: 10%;
	transform: translateY(-50%);
	max-width: 480px;
	z-index: 2;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.hero-buttons-row {
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
}

@media (max-width: 968px) {
	.hero-video {
		padding-top: 100% !important; /* 1:1 square on mobile */
		overflow: hidden;
	}

	.hero-video iframe,
	.hero-video-fallback {
		top: 50%;
		left: 50%;
		width: 100%;
		height: 56.25vw;
		transform: translate(-50%, -50%) scale(2.223);
		transform-origin: center;
	}

	/* Mobile: content box becomes a full-width card overlapping the bottom
	   half of the video — matches the original live mobile variant. */
	.hero-content-box {
		position: relative;
		top: auto;
		left: auto;
		transform: none;
		max-width: none;
		width: 100vw;
		margin: -120px 0 0 calc(50% - 50vw);
		padding: 32px 24px !important;
		border-radius: 0;
		z-index: 2;
		box-shadow: none;
	}

	/* Booking block (.z50) following the hero on mobile: full width, no
	   side margin, share top edge with the hero-content-box above. */
	[class*=".z50"],
	[class*=".z-50"] {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
		border-radius: 0 !important;
		margin-top: 0 !important;
	}

	/* Hide the popup shortcode button on mobile — only the outline
	   "Se alla studiotyper" button should be visible. */
	.hero-buttons-row > :not(.wp-block-buttons) {
		display: none;
	}

	/* The remaining outline button stretches full width */
	.hero-buttons-row {
		flex-direction: column;
		align-items: stretch;
	}

	.hero-buttons-row .wp-block-buttons,
	.hero-buttons-row .wp-block-button {
		width: 100%;
	}

	.hero-buttons-row .wp-block-button__link {
		width: 100%;
		text-align: center;
	}
}