/* Hero variant: black background + white triangle cut + media in a rectangular card */

.entry-content .hero.hero--morelo.hero--card {
	/* Pages are wrapped in `.container` in `page.php`; break the hero background to full-bleed. */
	/* Use `dvw` where available to avoid horizontal scroll caused by scrollbar width in `vw`. */
	width: 100vw;
	width: 100dvw;
	max-width: 100vw;
	max-width: 100dvw;
	margin-left: calc(50% - 50vw);
	margin-left: calc(50% - 50dvw);
	margin-right: calc(50% - 50vw);
	margin-right: calc(50% - 50dvw);
}

/* Prevent rare horizontal scroll on some browsers when full-bleed sections are present. */
.site-main {
	overflow-x: hidden;
	overflow-x: clip;
}

.hero.hero--morelo.hero--card {
	/* Media-only: let content define the height (override the full-screen hero height). */
	height: auto;
	min-height: 0;
	/* Trójkąt wchodzi wyżej pod media */
	--hero-cut: clamp(140px, 16vw, 220px);
	/* Triangle apex position (move to the other side under the media) */
	--hero-apex: 50%;
	/* Allow the media to overlap into the white area below the triangle. */
	overflow: visible;
	/* How much the media should "drop" into the next (white) section. */
	--hero-card-drop: clamp(28px, 4vw, 120px);
	/* Extra spacing below the whole hero section */
	margin-bottom: clamp(26px, 4vw, 80px);
}

.hero--card .hero-inner {
	max-width: 1400px;
	/* Push the media as low as possible towards the bottom wedge */
	align-items: flex-end;
	padding-top: 0;
	/* Tło (czarne) niższe pod media */
	padding-bottom: clamp(32px, 5vw, 72px);
}

.hero--card .hero-card-stage {
	position: relative;
	width: 100%;
	aspect-ratio: 18 / 9;
	/* Let the media "hang" below the section without transforms. */
	margin-bottom: calc(-1 * var(--hero-card-drop));
}

.hero--card .hero-card-media {
	position: absolute;
	inset: 0;
	border-radius: 0;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow: none;
	isolation: isolate;
	width: 100%;
}

.hero--card .hero-card-media::before {
	/* White triangle overlay that "cuts into" the media */
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: calc(var(--hero-cut) + 2px);
	background: #fff;
	clip-path: polygon(0 100%, 100% 100%, var(--hero-apex) 0);
	pointer-events: none;
	z-index: 0;
}

.hero--card .hero-card-media::after {
	/* subtle shine */
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 38%);
	pointer-events: none;
	z-index: 2;
	mix-blend-mode: soft-light;
}

.hero--card .hero-card-overlay {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 3;
	background: transparent;
	color: #fff;
	padding: clamp(16px, 2vw, 28px) clamp(18px, 2.2vw, 34px);
	min-width: min(520px, 72%);
}

.hero--card .hero-card-overlay-line {
	text-transform: uppercase;
	letter-spacing: 0.6px;
	line-height: 1.0;
}

.hero--card .hero-card-overlay-line--light {
	font-weight: 300;
	font-size: clamp(2.1rem, 3.4vw, 4.4rem);
	opacity: 0.96;
}

.hero--card .hero-card-overlay-line--bold {
	margin-top: 8px;
	font-weight: 900;
	font-size: clamp(2.8rem, 4.8vw, 5.6rem);
}

.hero--card .hero-card-image,
.hero--card .hero-card-video,
.hero--card .hero-card-image--placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 90%;
	display: block;
	z-index: 1;
}

.hero--card .hero-card-image--placeholder {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 100%);
}

@media (max-width: 980px) {
	.hero--card .hero-inner {
		padding-top: 0;
	}

	.hero--card .hero-card-stage { aspect-ratio: 18 / 9; }

	.hero--card .hero-card-overlay {
		min-width: 0;
		max-width: 92%;
	}
}

@media (max-width: 900px) {
	.hero.hero--morelo.hero--card {
		--hero-cut: clamp(100px, 14vw, 160px);
		--hero-apex: 50%;
	}
}