/* =============================================================
   template-parts/case-study/case-hero/case-hero.css
   Scoped styles for: progress bar, .rev-container,
   .rev-top-grid, .rev-video-card, .rev-video-overlay.
   Global reset + body bg live in assets/css/global.css.
   Fonts (Inter) loaded once in header.php.
   All colour values reference global CSS variables from global.css.
   ============================================================= */

/* ── PROGRESS BAR ── */
#rev-progress {
	position:   fixed;
	top:        0;
	left:       0;
	width:      100%;
	height:     4px;
	z-index:    9999;
	background: linear-gradient(
		90deg,
		var(--ink),
		var(--muted),
		var(--ink)
	);
	box-shadow: 0 0 20px rgba(255, 255, 255, .4);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .08s linear;
}

/* ── PROJECT PAGE OFFSET ── */
.rev-project-main {
	padding-top: calc(var(--nav-height) + clamp(14px, 2vw, 32px));
}

/* ── CONTAINER ── */
.rev-container {
	max-width: 1700px;
	margin:    auto;
	padding:   28px 60px;
}

/* ── SECTION TAG ── */
.rev-section-tag {
	font-size:      12px;
	letter-spacing: 3px;
	color:          var(--soft-grey);
	text-transform: uppercase;
	margin-bottom:  15px;
}

/* ── TOP GRID ── */
.rev-top-grid {
	display:               grid;
	grid-template-columns: 1.4fr 1.2fr;
	column-gap:            20px;
	row-gap:               28px;
	align-items:           start;
	margin-bottom:         36px;
}

/* ── VIDEO CARD ── */
.rev-video-card {
	min-height:    clamp(430px, 37vw, 560px);
	border:        1px solid #1f1f1f;
	border-radius: 18px;
	overflow:      hidden;
	background:    #080808;
	position:      relative;
}

.rev-video-card::after {
	content:    '';
	position:   absolute;
	inset:      0;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, .85),
		rgba(0, 0, 0, .25),
		transparent
	);
	z-index:    1;
}

/* video fill */
.rev-video-card video,
.rev-video-card iframe {
	position:   absolute;
	inset:      0;
	width:      100%;
	height:     100%;
	object-fit: cover;
	z-index:    0;
	border:     0;
}

/* image fallback fill */
.rev-video-card img {
	position:   absolute;
	inset:      0;
	width:      100%;
	height:     100%;
	object-fit: cover;
	z-index:    0;
}

/* ── VIDEO OVERLAY (title + subtitle) ── */
.rev-video-overlay {
	position: absolute;
	left:     40px;
	bottom:   40px;
	z-index:  1000;
	color:    white;
}

.rev-video-overlay h1 {
	font-family: var(--font-primary);
	font-size:           52px;
	line-height:         .9;
	font-weight:         800;
	text-shadow:         0 4px 20px rgba(0, 0, 0, .7);
	-webkit-text-stroke: 1px rgba(0, 0, 0, .4);
}

.rev-video-overlay p {
	margin-top:  10px;
	color:       var(--muted);
	text-shadow: 0 2px 10px rgba(0, 0, 0, .7);
}

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
	.rev-top-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.rev-project-main {
		padding-top: calc(var(--nav-height) + 14px);
	}

	.rev-container {
		padding: 20px 24px;
	}

	.rev-video-card {
		min-height: min(520px, 78vw);
	}

	.rev-video-overlay h1 {
		font-size: clamp(2rem, 8vw, 3.2rem);
	}
}