/**
 * Report (General) template styles.
 *
 * Enqueued only on posts using templates/report-post.php.
 * Restyle knobs come from the post editor as inline CSS variables set on
 * .report-hero / .report-downloads / .report-takeaways / .report-body-wrap:
 *   --report-header-bg, --report-header-text, --report-overlay,
 *   --report-btn-bg, --report-btn-text,
 *   --report-takeaways-bg, --report-takeaways-text,
 *   --report-body-bg, --report-body-text
 * The values below are brand-token fallbacks.
 */

.report-post {
	--report-header-bg: var(--text, #010A18);
	--report-header-text: #ffffff;
	--report-overlay: 0.55;
	--report-btn-bg: var(--blue, #009CCD);
	--report-btn-text: #ffffff;
	--report-takeaways-bg: var(--nav-white, #FAFAF9);
	--report-takeaways-text: var(--text, #010A18);
	--report-body-bg: var(--nav-white, #FAFAF9);
	--report-body-text: var(--text, #010A18);
}

/* ============================ HERO ============================ */
.report-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 100vh;
	padding: 180px 0 80px;
	background-color: var(--report-header-bg);
	color: var(--report-header-text);
	overflow: hidden;
	/* Break out of any parent width constraint so hero media is edge-to-edge. */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.report-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 0;
}

.report-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	pointer-events: none;
}

/* Overlay darkens the image using the chosen header background color. */
.report-hero__overlay {
	position: absolute;
	inset: 0;
	background-color: var(--report-header-bg);
	opacity: var(--report-overlay);
	z-index: 1;
}

.report-hero .container {
	position: relative;
	z-index: 2;
}

.report-hero__inner {
	max-width: 900px;
}

.report-hero__eyebrow {
	display: inline-block;
	font-family: var(--font-ipm, "IBM Plex Mono", monospace);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 6px 12px;
	margin-bottom: 20px;
	border: 1px solid currentColor;
	border-radius: 4px;
}

.report-hero__title {
	color: var(--report-header-text);
	font-family: var(--font-iserif, "Instrument Serif", serif);
	font-size: clamp(2.4rem, 5vw, 4.2rem);
	line-height: 1.05;
	margin: 0 0 24px;
}

.report-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	align-items: center;
	font-family: var(--font-ipm, "IBM Plex Mono", monospace);
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	opacity: 0.9;
	margin-bottom: 16px;
}

.report-hero__meta,
.report-hero__date,
.report-hero__author {
	color: var(--report-header-text);
}

.report-hero__meta .report-hero__author::before {
	content: "•";
	margin-right: 20px;
}

.report-hero__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 32px;
}

.report-hero__tags a {
	color: var(--report-header-text);
	font-family: var(--font-ipm, "IBM Plex Mono", monospace);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 5px 12px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 40px;
	transition: all 0.2s ease;
}

.report-hero__tags a:hover {
	background: var(--report-header-text);
	color: var(--report-header-bg);
}

.report-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* ============================ BUTTONS ============================ */
.report-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-ipm, "IBM Plex Mono", monospace);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 14px 24px;
	border-radius: 4px;
	background: var(--report-btn-bg);
	color: var(--report-btn-text);
	border: 1px solid var(--report-btn-bg);
	transition: all 0.2s ease;
	cursor: pointer;
}

.report-btn:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
	color: var(--report-btn-text);
}

/* Solid variant used in the footer download bar (light section). */
.report-btn--solid {
	padding: 12px 20px;
}

/* ============================ TAKEAWAYS ============================ */
.report-takeaways {
	background: var(--report-takeaways-bg, var(--nav-white, #FAFAF9));
	color: var(--report-takeaways-text, var(--text, #010A18));
	padding: 64px 0;
}

.report-takeaways__heading {
	font-family: var(--font-iserif, "Instrument Serif", serif);
	font-size: clamp(1.8rem, 3vw, 2.6rem);
	margin: 0 0 32px;
	color: var(--report-takeaways-text, var(--text, #010A18));
}

.report-takeaways__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
}

.report-takeaways__list li {
	position: relative;
	padding: 24px 24px 24px 28px;
	background: #fff;
	border-radius: 8px;
	border-left: 4px solid var(--bright-blue, #03C2FE);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--report-takeaways-text, var(--text, #010A18));
}

/* ============================ BODY ============================ */
.report-body-wrap {
	padding: 72px 0;
	background: var(--report-body-bg, var(--nav-white, #FAFAF9));
	color: var(--report-body-text, var(--text, #010A18));
}

.report-body {
	max-width: 760px;
	margin: 0 auto;
	font-family: var(--font-isans, "Instrument Sans", sans-serif);
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--report-body-text, var(--text, #010A18));
}

.report-body > *:first-child {
	margin-top: 0;
}

.report-body h2 {
	font-family: var(--font-iserif, "Instrument Serif", serif);
	font-size: 2rem;
	line-height: 1.15;
	margin: 2.4em 0 0.6em;
}

.report-body h3 {
	font-size: 1.5rem;
	line-height: 1.2;
	margin: 2em 0 0.5em;
}

.report-body h4 {
	font-size: 1.2rem;
	margin: 1.8em 0 0.5em;
}

.report-body p {
	margin: 0 0 1.4em;
}

.report-body a {
	color: var(--blue, #009CCD);
	text-decoration: underline;
}

.report-body ul,
.report-body ol {
	margin: 0 0 1.4em;
	padding-left: 1.4em;
}

.report-body li {
	margin-bottom: 0.5em;
}

.report-body img,
.report-body figure,
.report-body iframe {
	max-width: 100%;
	height: auto;
	margin: 2em 0;
	border-radius: 8px;
}

.report-body figure {
	margin-left: 0;
	margin-right: 0;
}

.report-body figcaption {
	font-size: 0.9rem;
	color: var(--light-gray, #777);
	margin-top: 0.5em;
	text-align: center;
}

.report-body blockquote {
	margin: 2em 0;
	padding: 8px 0 8px 28px;
	border-left: 4px solid var(--bright-blue, #03C2FE);
	font-family: var(--font-iserif, "Instrument Serif", serif);
	font-size: 1.4rem;
	line-height: 1.35;
	color: var(--dark-gray, #3F3F3F);
}

.report-body table {
	width: 100%;
	border-collapse: collapse;
	margin: 2em 0;
	font-size: 1rem;
}

.report-body th,
.report-body td {
	border: 1px solid #e5e5e5;
	padding: 10px 14px;
	text-align: left;
}

.report-body th {
	background: var(--nav-white, #FAFAF9);
	font-weight: 600;
}

/* Let pasted/Gutenberg wide + full blocks break out of the 760px column. */
.report-body .alignwide {
	max-width: 1080px;
	margin-left: calc((760px - min(1080px, 90vw)) / 2);
	margin-right: calc((760px - min(1080px, 90vw)) / 2);
}

.report-body .alignfull {
	max-width: none;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	border-radius: 0;
}

/* ============================ FOOTER BAR ============================ */
.report-footer-bar {
	max-width: 760px;
	margin: 56px auto 0;
	padding-top: 32px;
	border-top: 1px solid #e5e5e5;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 28px;
}

.report-downloads,
.report-share {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

.report-downloads__label,
.report-share__label {
	font-family: var(--font-ipm, "IBM Plex Mono", monospace);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--light-gray, #777);
	margin-right: 4px;
}

/* ============================ ABOUT ============================ */
.report-about {
	max-width: 760px;
	margin: 56px auto 0;
	padding: 40px;
	background: var(--nav-white, #FAFAF9);
	border-radius: 12px;
}

.report-about__title {
	font-family: var(--font-iserif, "Instrument Serif", serif);
	font-size: 1.6rem;
	margin: 0 0 16px;
	color: var(--text, #010A18);
}

.report-about__body {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--dark-gray, #3F3F3F);
}

.report-about__body p:last-child {
	margin-bottom: 0;
}

/* ============================ RESPONSIVE ============================ */
@media (max-width: 767px) {
	.report-hero {
		min-height: 80vh;
		padding: 140px 0 56px;
	}

	.report-body-wrap {
		padding: 48px 0;
	}

	.report-footer-bar {
		flex-direction: column;
	}

	.report-about {
		padding: 28px 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.report-hero__video {
		display: none;
	}
}