/*
 * rm-mbre-newsletter-hero.css
 * The page hero for newsletter issues and the hub. D48.
 *
 * Measured from the live hub's Avada layout section on 16 September 2026, so a
 * page rendered by the plugin looks as the live pages do today. The eyebrow
 * reuses mbre-hero-eyebrow from rm-mbre-newsletter-aio.css, unchanged.
 *
 * SCOPE
 * Class selectors only. No bare h1 to h6, p or a.
 *
 * TOKENS
 * Locked palette, hex fallbacks on every var(). No radius. No gold. No navy.
 * The title reads Avada's own H1 typography variables, with the live values as
 * fallbacks, so it follows the site if the global H1 changes.
 */

.mbre-nl-page-hero {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	/* Fixed, not the old 8%, which resolved against the width and so grew
	 * without limit on a wide screen and collapsed on a narrow one. The steps
	 * below hold the hero's height steady instead. See D72. */
	padding: 170px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--ink, #1c1c1c);
	/* Flat 48% black over the image: white text and the blue eyebrow both read. */
	background-image:
		linear-gradient(180deg, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0.48) 100%),
		var(--mbre-nl-hero-image, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.mbre-nl-page-hero-inner {
	box-sizing: border-box;
	width: 66.6667%;
	text-align: center;
}

.mbre-nl-page-hero .mbre-hero-eyebrow {
	margin: 0 auto 8px;
}

h1.mbre-nl-page-hero-title {
	font-family: var(--h1_typography-font-family, "Playfair Display", Georgia, serif);
	font-weight: var(--h1_typography-font-weight, 400);
	letter-spacing: var(--h1_typography-letter-spacing, -2px);
	/* 37px at 375px wide rising to 48px at 1440px, as Avada's responsive
	 * typography rendered the live title. */
	font-size: clamp(30px, calc(33.13px + 1.033vw), 48px);
	line-height: 1.2;
	/* Avada colours every H1 globally, dark on this site. */
	color: var(--white, #ffffff) !important;
	text-transform: none;
	text-align: center;
	margin: 0;
	padding: 0;
	border: 0;
}

/* ACTIONS
 * Only the archive page's hero has them (D62): the current report, filled blue,
 * and the footer sign-up form, outlined in white. 44px targets, no radius. The hero
 * selector ahead of each class outranks the theme's link colours. */
.mbre-nl-page-hero .mbre-nl-page-hero-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 26px;
}

.mbre-nl-page-hero .mbre-nl-hero-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 44px;
	padding: 11px 24px;
	border: 2px solid var(--blue, #00A3E0);
	font-family: Montserrat, Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
}

.mbre-nl-page-hero .mbre-nl-hero-btn--primary {
	background: var(--blue, #00A3E0);
	color: var(--white, #ffffff);
}

.mbre-nl-page-hero .mbre-nl-hero-btn--primary:hover,
.mbre-nl-page-hero .mbre-nl-hero-btn--primary:focus {
	background: var(--blue-dk, #007fb0);
	border-color: var(--blue-dk, #007fb0);
	color: var(--white, #ffffff);
}

.mbre-nl-page-hero .mbre-nl-hero-btn--secondary {
	background: transparent;
	border-color: var(--white, #ffffff);
	color: var(--white, #ffffff);
}

.mbre-nl-page-hero .mbre-nl-hero-btn--secondary:hover,
.mbre-nl-page-hero .mbre-nl-hero-btn--secondary:focus {
	background: var(--white, #ffffff);
	color: var(--ink, #1c1c1c);
}

.mbre-nl-page-hero .mbre-nl-hero-btn:focus-visible {
	outline: 2px solid var(--white, #ffffff);
	outline-offset: 3px;
}

/* The card sits over the hero's lower edge, as it does live, but never further
 * than the hero's bottom padding (8% of the width), so it cannot cover the
 * title on a narrow screen. */
.mbre-nl-has-hero .mbre-aio-card {
	margin-top: max(-120px, -8vw);
}

@media (max-width: 1024px) {
	.mbre-nl-page-hero {
		padding: 140px 0;
	}

	.mbre-nl-page-hero-inner {
		width: 100%;
		padding: 0 40px;
	}
}

@media (max-width: 768px) {
	.mbre-nl-page-hero {
		padding: 110px 0;
	}

	h1.mbre-nl-page-hero-title {
		margin: 0 0 8px;
	}
}

/* 480px, below the standing pair: a phone in portrait. At 110px the hero fills
 * most of the screen before a reader has seen anything, so the last step is
 * taken here rather than at 768, where a small tablet still has the room. */
@media (max-width: 480px) {
	.mbre-nl-page-hero {
		padding: 90px 0;
	}
}

/* 660px, the V1 phone breakpoint: the two actions stack at full width. */
@media (max-width: 660px) {
	.mbre-nl-page-hero .mbre-nl-page-hero-actions {
		flex-direction: column;
		align-items: stretch;
		margin-top: 18px;
	}
}