/*
 * Hero (Figma: Home "Frame 481"; page heroes "Frame 391" on Studio, Our Approach, Discover,
 * About Our Yarns; Programs "Frame 103" for the band; Our Story "Frame 481" for the card; SAORI
 * "Frame 152" for the intro). The photo fills the whole section, so the section's
 * "Space above/below" settings are padding inside the photo.
 */

.hero__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: var(--c-dark);
}

.hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 0.5);
}

.hero__inner {
	position: relative;
}

.hero__text > * + * {
	margin-top: var(--lh-body);
}

/* Home: centred cream card over the photo. */
.hero--home {
	display: grid;
	align-items: center;
	min-height: 800px;
}

.hero__card {
	display: grid;
	justify-items: center;
	gap: 40px;
	padding: 40px;
	background: var(--c-bg);
	text-align: center;
}

.hero--home .hero__title {
	line-height: 1;
}

.hero__title-main {
	display: block;
	font-size: var(--t-display-xl);
	line-height: 1;
	letter-spacing: -0.012em;
}

/* Figma sets the italic line at half the title size (60 under 120, 28 under 56). */
.hero--home .hero__subtitle {
	display: block;
	font-size: calc(var(--t-display-xl) / 2);
	line-height: 1.15;
	font-style: italic;
}

.hero--home .hero__text {
	max-width: 560px;
	color: var(--c-text-2);
	text-wrap: balance;
}

.hero__scroll {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--c-text);
	border-radius: 50%;
	color: var(--c-text);
	transition: background-color 0.2s, color 0.2s;
}

.hero__scroll .icon {
	width: 20px;
	height: 20px;
	transform: rotate(90deg);
}

.hero__scroll:hover {
	background: var(--c-text);
	color: var(--c-light);
}

/* Target of the scroll arrow: lands the next section at the top of the screen (cancels the
   scroll-padding that base.css keeps free for the header). */
.hero__next {
	position: absolute;
	bottom: 0;
	scroll-margin-top: calc(-1 * (var(--header-h) + 16px));
}

.hero__next:focus {
	outline: none;
}

/* Page: title at the top, subtitle, text and buttons at the bottom, light text on the photo. */
.hero--page {
	color: var(--c-light);
}

.hero--page .hero__media::after {
	background: rgb(0 0 0 / 0.6);
}

.hero--page .hero__inner {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
	min-height: 420px;
}

.hero--page .hero__inner > * {
	max-width: 656px;
}

.hero--page .hero__title {
	font-size: var(--t-display);
	line-height: var(--lh-display);
}

.hero__bottom {
	display: grid;
	gap: 16px;
}

.hero--page .hero__subtitle,
.hero--band .hero__subtitle {
	font-family: var(--f-display);
	font-size: var(--t-title);
	line-height: var(--lh-title);
	font-weight: 500;
	font-style: italic;
}

/* Light buttons on the photo (Figma Primary_Light, Secondary_Light, light tertiary). */
.hero--page .btn--primary {
	background: var(--c-bg);
	border-color: var(--c-bg);
	color: var(--c-text);
}

.hero--page .btn--primary:hover {
	background: var(--c-accent);
	border-color: var(--c-accent);
	color: var(--c-light);
}

.hero--page .btn--secondary {
	border-color: var(--c-light);
	color: var(--c-light);
}

.hero--page .btn--secondary:hover {
	background: var(--c-light);
	color: var(--c-text);
}

.hero--page .btn--tertiary:hover .icon {
	background: var(--c-light);
	color: var(--c-text);
}

/* Band: short centred heading, no photo. */
.hero--band .hero__inner {
	display: grid;
	justify-items: center;
	gap: 16px;
	text-align: center;
}

.hero--band .hero__title,
.hero--band .hero__text {
	max-width: 560px;
}

.hero--band .hero__text {
	color: var(--c-text-2);
}

.hero--band .hero__buttons {
	justify-content: center;
}

/* Page, taller: room for a longer text at the bottom (About Our Yarns "Frame 391", 800 tall). */
.hero--tall .hero__inner {
	min-height: 720px;
}

/* Card: a cream card of title and text centred on the darkened photo (Our Story "Frame 481").
   The header sits over the photo, so the card keeps clear of it top and bottom. */
.hero--card {
	display: grid;
	align-items: center;
	padding-block: var(--header-h);
}

.hero--card .hero__title {
	font-size: var(--t-title-l);
	line-height: var(--lh-title-l);
}

.hero--card .hero__subtitle,
.hero--intro .hero__subtitle {
	font-family: var(--f-display);
	font-size: var(--t-title);
	line-height: var(--lh-title);
	font-weight: 500;
	font-style: italic;
}

.hero--card .hero__text {
	max-width: 560px;
	color: var(--c-text-2);
}

.hero--card .hero__buttons,
.hero--intro .hero__buttons {
	justify-content: center;
}

/* Intro: large centred title, subtitle and text on the page colour, then a wide photo
   (SAORI "Frame 152"). */
.hero--intro {
	display: grid;
	gap: 32px;
}

.hero--intro .hero__inner {
	display: grid;
	justify-items: center;
	gap: 16px;
	text-align: center;
}

.hero--intro .hero__title {
	font-size: var(--t-display);
	line-height: var(--lh-display);
}

.hero--intro .hero__text {
	max-width: 560px;
	color: var(--c-text-2);
}

.hero__wide img {
	width: 100%;
	aspect-ratio: 1136 / 348;
	object-fit: cover;
}

/* Desktop pages leave a strip of the page colour between the header and the photo. */
@media (min-width: 1024px) {
	.s-hero:has(> .hero--page) {
		margin-top: 56px;
	}
}

@media (max-width: 767px) {
	.hero--home {
		align-items: end;
		min-height: 600px;
	}

	.hero--home .hero__inner {
		padding-inline: 0;
	}

	.hero__card {
		gap: 16px;
		padding: 32px var(--gutter);
	}

	/* Phones: the card runs edge to edge at the foot of the photo, a strip of photo above it. */
	.hero--card {
		align-items: end;
		padding-block: calc(var(--header-h) + 154px) 0;
	}

	.hero--card .hero__inner {
		padding-inline: 0;
	}

	.hero--card .hero__card {
		padding-block: 40px;
	}

	.hero__wide img {
		aspect-ratio: 1;
	}
}

/* Phone page heroes are 600 tall in Figma. */
@media (max-width: 767px) {
	.hero--page .hero__inner {
		min-height: 552px;
	}
}

/* No photo yet (e.g. a video still to be shot): the grey placeholder of the Figma frames rather
   than a black band. */
.hero__media:empty {
	background: #6e6e6e;
}

.hero__media:empty::after {
	background: rgb(0 0 0 / 0.25);
}