/* styles for the hero section */
/* the hero on the home page has nothing in common with heros on the other pages */
/* so we need two separate classes */

/* homepage-hero */
.homepage-hero {
	display: flex;
	align-items: center;
	/* min-height: 34rem; */

	padding-block: 3rem;
	padding-inline-start: 1rem;
	background-color: hsl(var(--navy));
	/* background-image: url(/svg/calder-dyeing-thread-flip.svg); */
	background-image: url(/svg/calder-dyeing-yarn.svg);
	background-repeat: no-repeat;
	/* think we need an absolute size here otherwise it scales relative to the parent width */
	background-size: 50%;
	background-position: top -1rem right -0.5rem;
}

@media (min-width: 992px) {
	.homepage-hero {
		padding-block: 6rem;
		padding-inline-start: 6rem;
		/* think we need an absolute size here otherwise it scales relative to the parent width */
		background-size: 32rem;
		background-position: top -35px right -30px;
	}
}

.homepage-hero-text {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	/* flex-basis: 50%; */

	align-items: start;

	color: hsl(var(--white));
	/* margin-inline-start: 5rem; */

	/* border: 1px solid papayawhip; */
}

@media (min-width: 992px) {
	.homepage-hero-text {
		gap: 2rem;
		flex-basis: 50%;

		/* align-items: start; */

		/* margin-inline-start: 5rem; */

		/* border: 1px solid papayawhip; */
	}
}

.homepage-hero-text h1 {
	font-size: 2rem;
	text-transform: lowercase;

	/* text replace bg svg */
	text-indent: -9999px;
	display: block;

	aspect-ratio: 2.6 / 1;
	width: min(17rem, 90%);
	/* min-height: 13rem; */

	background-image: url(/svg/the-art-of-dyeing-outlines.svg);
	background-repeat: no-repeat;
	background-size: contain;
	/* background-position: top left; */

	/* border: 1px solid salmon; */
}

@media (min-width: 992px) {
	.homepage-hero-text h1 {
		font-size: 2rem;
		text-transform: lowercase;

		/* text replace bg svg */
		/* text-indent: -9999px;
		display: block; */

		aspect-ratio: 2.6 / 1;
		min-width: 34rem;
		/* min-height: 13rem; */

		background-image: url(/svg/the-art-of-dyeing-outlines.svg);
		background-repeat: no-repeat;
		background-size: contain;
		/* background-position: top left; */

		/* border: 1px solid salmon; */
	}
}

.homepage-hero-text p {
	font-size: 0.9rem;
	max-width: min(52ch, 95%);
}

@media (min-width: 992px) {
	.homepage-hero-text p {
		font-size: 1rem;

		line-height: 1.3;
	}
}

.homepage-hero-text .cta-link {
	margin-block-start: 1rem;
	color: var(--text);
	/* background-color: hsl(var(--yellow)); */
	background-image: linear-gradient(
		to right,
		hsl(var(--yellow)) 0% 33%,
		hsl(var(--pink)) 50%,
		hsl(var(--blue)) 66% 100%
	);
	background-size: 300%;
	background-position: 0 0;
	transition: background-position 0.5s ease-in-out;
}

.homepage-hero-text .cta-link:is(:hover, :focus-visible) {
	background-position: 100% 0;
}

/* hero for the other pages */
.hero {
	display: flex;
	align-items: center;
	min-height: 15rem;
	/* aspect-ratio: 4 / 1; */
	padding-inline: 1rem;
	background-repeat: no-repeat;
	background-size: cover;
	background-color: hsl(var(--navy));

	border-bottom: 2rem solid hsl(var(--navy));
	/* background-position: top left; */
}

@media (min-width: 992px) {
	.hero {
		min-height: 25rem;
		/* aspect-ratio: 4 / 1; */
		padding-inline-start: 6rem;
		/* background-repeat: no-repeat;
		background-size: cover;
		background-color: hsl(var(--navy)); */

		/* border-bottom: 2.5rem solid hsl(var(--navy)); */
		/* background-position: top left; */
		border-bottom-width: 2.5rem;
	}
}

.hero--services {
	background-image: image-set(url(/img/hero-bg-services.webp) 1x);
}

.hero--sustainability {
	background-image: image-set(url(/img/hero-bg-sustainability.webp) 1x);
}

.hero--contact {
	background-image: image-set(url(/img/hero-bg-contact.webp) 1x);
}

.hero h1 {
	color: hsl(var(--white));
	font-size: 2rem;
	line-height: 1.2;
	font-weight: 500;
}

@media (min-width: 992px) {
	.hero h1 {
		/* color: hsl(var(--white)); */
		font-size: 3.3rem;
		/* font-weight: 500; */
	}
}