/**
 * Rasa June – Project Hero
 *
 * Scoped under .rjcs-hero. Always stacked: a big Hero Image first
 * (immediately below the site header), then a contained Project Intro
 * text column below it. Colors, typography, spacing, image ratio/crop
 * and presentation width are all controlled from Elementor (see
 * class-project-hero-widget.php). This file supplies structure and safe
 * fallback values only.
 *
 * .rjcs-width-contained / .rjcs-width-wide / .rjcs-width-full_bleed is a
 * shared presentation-width pattern also used by the Case Study Images
 * and Web Presentation widgets — kept duplicated in each widget's own
 * CSS file since the plugin editor can only update existing files, not
 * add a shared one.
 */

.rjcs-hero,
.rjcs-hero *,
.rjcs-hero *::before,
.rjcs-hero *::after {
	box-sizing: border-box;
}

.rjcs-hero {
	width: 100%;
}

.rjcs-hero__image-wrap {
	width: 100%;
}

.rjcs-hero__image img {
	display: block;
	width: 100%;
	height: auto;
}

.rjcs-hero__intro {
	width: 100%;
}

.rjcs-hero__intro-inner {
	width: 100%;
	max-width: 860px;
	margin: 0 auto;
}

.rjcs-hero__eyebrow {
	margin: 0 0 16px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.rjcs-hero__title {
	margin: 0 0 24px;
	font-weight: 400;
}

.rjcs-hero__description {
	margin: 0 0 32px;
}

.rjcs-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	margin: 0;
	padding: 0;
}

.rjcs-hero__meta-item {
	min-width: 0;
}

.rjcs-hero__meta-label {
	margin: 0 0 4px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	opacity: 0.65;
}

.rjcs-hero__meta-value {
	margin: 0;
}

/* Presentation width utility (shared pattern — see note above). Uses the
   viewport-breakout technique: width:100vw with a negative offsetting
   margin, centered via calc(50% - 50vw). This holds the block flush
   with the two edges of the browser window regardless of how deep it
   sits inside Elementor's own (narrower) containers. !important is used
   deliberately here so this always wins over the per-instance "Contained
   Width" slider's inline style when Wide/Full Bleed is selected. */
.rjcs-width-contained {
	/* Inherits the natural Elementor container width — no override. */
}

.rjcs-width-wide {
	width: min(calc(100dvw - 48px), 1600px) !important;
	max-width: 1600px !important;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: clamp(24px, 5vw, 80px) !important;
	padding-right: clamp(24px, 5vw, 80px) !important;
}

.rjcs-width-full_bleed {
	width: 100dvw !important;
	max-width: 100dvw !important;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Tablet */
@media (max-width: 1024px) and (min-width: 768px) {
	.rjcs-hero__intro-inner {
		max-width: 100%;
	}
}

/* Mobile safety net */
@media (max-width: 767px) {
	.rjcs-hero__intro-inner {
		max-width: 100%;
	}

	.rjcs-hero__meta {
		gap: 16px;
	}

	.rjcs-width-wide {
		width: calc(100dvw - 40px) !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}
/* Full-bleed project cover with breathing room below the site header. */
.rjcs-hero__image-wrap.rjcs-width-full_bleed {
	position: relative;
	left: 50%;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-top: 0;
	margin-right: 0 !important;
	margin-left: 0 !important;
	transform: translateX(-50%);
}

.rjcs-hero {
	padding-top: 32px !important;
}