/* styles specific to the homepage */

/* homepage buttons */

/* homepage-buttons is a ul inside a nav */

.homepage-buttons-nav {
	display: flex;
	justify-content: center;
	/* border: 1px solid yellowgreen; */
}
.homepage-buttons {
	/* reset the default ul behaviour */
	list-style: none;
	padding: 0;
	/* kp's video on this pattern */
	/* https://youtu.be/OZ6qKoq7RJU */
	--min-col-width: 10rem;
	display: grid;
	/* we have 2 values for the second argument in repeat (the track listings) because we always want either 2 or 4 columns never 3 */
	/* see another kp video https://www.youtube.com/shorts/scaiYZISGpk */
	/* prettier-ignore */
	grid-template-columns:
		repeat(
			auto-fit,
			minmax(min(var(--min-col-width), 45%), 1fr)
			minmax(min(var(--min-col-width), 45%), 1fr)
		);
	gap: 1rem;
	/* align-items: center; */
	justify-items: center;
	padding-block: 2rem;

	width: min(95%, 60rem);
	/* border: 1px solid blueviolet; */
}

@media (min-width: 992px) {
	.homepage-buttons {
		/* flex-direction: row; */
		gap: 0;
		padding-block: 4rem;
	}
}

/* the li */
.homepage-button-container {
	display: flex;
	width: min(10rem, 100%);
	/* border: 1px solid fuchsia; */
	/* background-color: hsl(var(--shadowgrey)); */
	box-shadow: 10px 10px 25px 5px hsl(var(--shadowgrey));
	/* shadow is on the container div */
	/* so it doesn't move when the button scales */
}

/* we might need another @media for < 360 */
@media (width < 360px) {
	/* .homepage-button-container {
		width: min(8rem, 100%);
		border: 1px solid salmon;
	} */
}

.homepage-button {
	/* min-width: 10rem; */
	/* min-height: 12.5rem; */
	flex-basis: 100%;

	padding: 0.7rem;
	background-color: hsl(var(--white));
	/* border: 1px solid lawngreen; */

	transition: scale 0.3s ease-in-out;
	/* transform 0.3s ease-in-out; */
}

.homepage-button:is(:hover, :focus-visible) {
	scale: 1.075;
	/* transform: translateY(-3px); */
}

.homepage-button:focus-visible {
	/* outline: 1px solid hsl(var(--navy) / 25%); */
	outline: none;
}
/* 
:is(:hover, :focus-visible) */

.homepage-button span {
	display: block;
	padding-inline-start: 0.2rem;
	padding-block-start: 0.7rem;
	color: var(--text);
	font-size: 0.9rem;
}

/* we might need another @media for < 360 */
@media (width < 360px) {
	.homepage-button span {
		padding-inline-start: 0rem;
		padding-block-start: 0.5rem;
		font-size: 0.7rem;
	}
}

.homepage-button div {
	display: flex;
	align-items: end;
	padding-inline-start: 0.7rem;
	padding-block-end: 0.7rem;
	aspect-ratio: 1 / 1;
}

/* yellow blue green pink */
.homepage-button--aboutus div {
	background-color: hsl(var(--yellow));
}

.homepage-button--services div {
	background-color: hsl(var(--blue));
}

.homepage-button--contact div {
	background-color: hsl(var(--pink));
}

.homepage-button--responsibilities div {
	background-color: hsl(var(--green));
}

/* about us section on the homepage */
/* this layout is unique to the homepage */

.aboutus {
	display: flex;
	flex-direction: column;
}

@media (min-width: 992px) {
	.aboutus {
		flex-direction: row;
	}
}
.aboutus-image {
	/* no image for mobile - styles in media query below */
	/* background image goes here */
	/* flex-basis: 50%;

	background-image: image-set(url(/img/yarn-dyeing-image-crop.webp) 1x);
	background-repeat: no-repeat;
	background-size: cover; */
	/* background-position: top 0% left 0%; */
	/* border: 1px solid goldenrod; */
}

@media (min-width: 992px) {
	.aboutus-image {
		/* background image goes here */
		flex-basis: 50%;

		background-image: image-set(url(/img/yarn-dyeing-image-crop.webp) 1x);
		background-repeat: no-repeat;
		background-size: cover;
		/* background-position: top 0% left 0%; */
		/* border: 1px solid goldenrod; */
	}
}

.aboutus-text {
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: 2rem;

	/* flex-basis: 50%; */

	padding-inline: 1rem;
	padding-block: 2rem;
	background-color: hsl(var(--navy));
	color: hsl(var(--white));
	/* border: 1px solid hotpink; */
}

@media (min-width: 992px) {
	.aboutus-text {
		flex-direction: column;
		align-items: start;
		gap: 4rem;

		flex-basis: 50%;

		padding-inline: 6rem;
		padding-block-start: 5rem;
		padding-block-end: 4rem;
	}
}

.aboutus-text h2 {
	font-size: 2rem;
	line-height: 1.3;
}

@media (min-width: 992px) {
	.aboutus-text h2 {
		max-width: 15ch;
	}
}

.aboutus-text p {
	max-width: 55ch;
	margin-top: 1.5rem;
}

.aboutus-text .cta-link {
	color: var(--text);
	/* background-color: hsl(var(--blue)); */
	background-image: linear-gradient(
		to right,
		hsl(var(--blue)) 0% 33%,
		hsl(var(--pink)) 50%,
		hsl(var(--yellow)) 66% 100%
	);
	background-size: 300%;
	background-position: 0 0;

	transition: background-position 0.5s ease-in;
}

.aboutus-text .cta-link:is(:hover, :focus-visible) {
	/* color: var(--text); */
	/* background-color: hsl(var(--blue)); */
	/* background-image: linear-gradient(to left, hsl(var(--blue)), hsl(var(--pink)), hsl(var(--yellow))); */
	/* background-size: 200%; */
	background-position: 100% 0;
}

/* delivering colour with confidence section */

.delivering-colour {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;

	padding-block: 2rem;
	padding-inline: 1rem;
	color: var(--text);

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

@media (min-width: 992px) {
	.delivering-colour {
		padding-block: 5rem;
		padding-inline: 0;
	}
}

.delivering-colour h2 {
	/* text-align: center; */
	font-size: 2rem;
	font-weight: 500;
	text-wrap: balance;

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

.delivering-colour p {
	/* text-align: center;
	max-width: 85ch; */

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

@media (min-width: 992px) {
	.delivering-colour h2 {
		text-align: center;
	}

	.delivering-colour p {
		text-align: center;
		max-width: 85ch;

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

.delivering-colour ul {
	/* unset the default ul behaviours */
	list-style: none;
	padding: 0;
	/* kp's video on this pattern */
	/* https://youtu.be/OZ6qKoq7RJU */
	--min-col-size: 8rem;

	display: grid;
	/* we have 2 values for the second argument in repeat (the track listings) because we always want either 2 or 4 columns never 3 */
	/* see another kp video https://www.youtube.com/shorts/scaiYZISGpk */
	/* prettier-ignore */
	grid-template-columns: 
		repeat(
			auto-fit, 
			minmax(min(var(--min-col-size), 100%), 1fr)
			minmax(min(var(--min-col-size), 100%), 1fr)
		);

	row-gap: 1rem;

	margin-block-start: 1rem;
	width: min(95%, 60rem);
	/* border: 1px solid royalblue; */
}

@media (min-width: 992px) {
	.delivering-colour ul {
		/* flex-wrap: nowrap; */
		/* justify-content: space-between; */
		/* padding: 0; */

		/* some kind of min max or clamp here */
		/* width: min(95%, 60rem); */

		/* margin-block-start: 2rem; */
		/* border: 1px solid royalblue; */
	}
}

.delivering-colour li {
	display: flex;
	flex-direction: column;
	justify-content: end;
	align-items: center;

	min-width: 8rem;
	min-height: 12rem;
	font-size: 1.3rem;
	line-height: 1.4;

	background-repeat: no-repeat;
	background-size: 7rem 7rem;
	background-position: top center;
	/* border: 1px solid firebrick; */
}

@media (min-width: 992px) {
	.delivering-colour li {
		/* display: flex;
		flex-direction: column;
		justify-content: end;
		align-items: center; */

		/* min-width: 8rem; */
		/* aspect-ratio: 2/3; */
		/* min-height: 12rem; */
		/* font-size: 1.3rem;
		line-height: 1.4; */

		/* background-repeat: no-repeat; */
		/* background-size: 7rem 7rem;  */
		/* background-position: top center; */
		/* border: 1px solid firebrick; */
	}
}

.delivering-colour li span {
	text-align: center;
	max-width: 10ch;
}

.delivering-colour-bullet--colour {
	background-image: url(/svg/delivering-icon-yellow.svg);
}

.delivering-colour-bullet--reliable {
	background-image: url(/svg/delivering-icon-blue.svg);
}

.delivering-colour-bullet--versatile {
	background-image: url(/svg/delivering-icon-green.svg);
}

.delivering-colour-bullet--sustainable {
	background-image: url(/svg/delivering-icon-pink.svg);
}