/* ====
   HERO
   ==== */

/*
	Two-column grid inside .mc: [content] [logo/arrow column].
	.mc already handles the outer side padding and max-width. Text sits bottom left
	in the content column. The right column is always at least as wide as the B-Corp
	logo, so the content column shrinks and the text wraps instead of running under
	the logo (h1 row) or the arrow (intro row).
*/
.m__hero {
	--hero-logo-w: 12rem;
	--hero-logo-h: calc(var(--hero-logo-w) * 1.46); /* B-Corp logo's set aspect ratio (300x438) */
	position: relative;
	min-height: 100vh;
	background: #000;
	color: var(--color-white);
	text-wrap: balance;
	padding: 20rem 0 8rem;
	text-align: left;
	display: grid; }

/* .mc stretches to fill .m__hero by default (grid item stretch), so its own
   height doesn't need to be set: it grows with .m__hero's min-height:100vh
   floor, and beyond that with content, without any guessed pixel value. */
.m__hero .mc {
	padding-bottom: 0;
	display: grid;
	grid-template-columns:
		1fr
		minmax(calc(var(--hero-logo-w) + var(--global-padding-side)), auto);
	align-content: end; }

.hero__eyebrow,
.hero__title,
.hero__bcorp,
.hero__intro {
	position: relative;
	z-index: 6; }

/* .m__hero prefix: needs to out-rank the global p:last-of-type { margin-bottom: 0 } */
.m__hero .hero__eyebrow {
	grid-column: 1;
	grid-row: 1;
	margin-bottom: 2rem; }

.hero__title {
	grid-column: 1;
	grid-row: 2;
	font-size: 8.2rem;
	margin-bottom: 0; }

.hero__bcorp {
	grid-column: 2;
	grid-row: 2;
	justify-self: end;
	align-self: center; }

.hero__bcorp img {
	display: block;
	width: var(--hero-logo-w);
	height: auto; }

/* Introduction paragraph + CTAs, inline */
.hero__intro {
	text-wrap: auto;
	grid-column: 1;
	grid-row: 3;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 3rem 6rem;
	margin-top: 4rem; }

.hero__intro p {
	max-width: 60rem;
	font-size: 2.6rem;
	margin-bottom: 0; }

.hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem; }


/* Gallery: <video> when uploaded, otherwise a poster-image div */
.m__hero .hero__video {
	opacity: .7;
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover; }

.hero__video--mobile { display: none; }


/* Scroll Down: desktop - in the intro row, far right of the page */
.hero_scroll-down {
	background: url(../../images/icon/arrow-down.svg) no-repeat center;
	background-size: 35px;
	position: relative;
	grid-column: 2;
	grid-row: 3;
	justify-self: end;
	align-self: center;
	width: 35px;
	height: 35px;
	z-index: 90;
	display: block;
	margin-top: 4rem; }/* same as .hero__intro, so both are centred on the same line */

.hero_scroll-down a {
	height: 100%;
	width: 100%;
	display: block; }


@media all and (max-width:1100px) {

	.hero__video--desktop { display: none; }
	.hero__video--mobile { display: block; }

	/* Centred + stacked. Space below for the scroll arrow, above for the logo */
	.m__hero {
		--hero-logo-w: 10rem;
		/* clear the header, then the logo (the logo has no gap above it, it sits flush under the header) */
		padding: calc(var(--header-height) + var(--hero-logo-h)) 0 12rem;
		text-align: center; }

	.m__hero .mc {
		grid-template-columns: 1fr; }

	.hero__title {
		font-size: 6.2rem; }

	.hero__intro p {
		font-size: 2.6rem; }

	.hero__intro {
		flex-direction: column;
		align-items: center; }

	.hero__ctas {
		justify-content: center; }

	/* B-Corp: top right of the section, below the header */
	.hero__bcorp {
		position: absolute;
		grid-column: auto;
		grid-row: auto;
		justify-self: auto;
		align-self: auto;
		top: var(--header-height);
		right: var(--global-padding-side);
		margin: 0; }


	/* Scroll Down: centred at the bottom */
	.hero_scroll-down {
		position: absolute;
		grid-column: auto;
		grid-row: auto;
		justify-self: auto;
		align-self: auto;
		width: 100%;
		left: 0;
		right: 0;
		bottom: 35px;
		margin: 0; }
}


@media all and (max-width: 700px) {

	.m__hero {
		--hero-logo-w: 9rem; }

	.hero__title {
		font-size: 3.8rem; }

	.hero__intro p {
		font-size: 2.2rem; }
}


/* Anchor */
.anchor {
	position: absolute;
	bottom: 0; }