// Homepage Card
//
// Style guide: Components.homepage-card
.c-homepage-card--checklist {
	// Supports
	@supports #{$supports-flex} {
		display: flex;
		justify-content: flex-end;
	}
}


.c-homepage-card--resources {
	margin-right: 2rem;
}


.c-homepage-card--spotlight {
	// Breakpoints
	@include mappy-bp(wrist-large) {
		margin-right: 4rem;
	}

	// Supports
	@supports #{$supports-flex} {

		// Breakpoints
		@include mappy-bp(palm-large) {
			justify-self: end;
		}
	}
}


.c-homepage-card__image-link {
	// States
	&:focus {
		outline: $border-thin solid currentColor;
	}
}


.c-homepage-card__image {
	cursor: pointer;
	margin-top: 3rem;
	filter: var(--image-filter);
}


.c-homepage-card__author {
	@include var(color, card-heading-text);
	font-family: $font-family-secondary;
	letter-spacing: $font-tracking-slight;
	margin-top: 1.5rem;
}


.c-homepage-card__title {
	cursor: pointer;
	@include var(color, heading-text);
	text-decoration: none;
}


.c-homepage-card__description {
	font-family: $font-family-secondary;
	margin-top: 1rem;
	margin-bottom: 1rem;
	max-width: 50ch;
}

.c-homepage-card__cta {
	border-bottom: $border-thinnest solid;
	@include var(border-color, secondary-link-accent);
	@include var(color, secondary-link-text);
	font-family: $font-family-secondary;
	margin-top: 1rem;
	text-decoration: none;

	// States
	&:hover,
	&:focus {
		border-bottom-color: transparent;
		text-decoration-color: transparent;
	}

	&:focus {
		@include var(background-color, secondary-link-focus-background);
		@include var(color, secondary-link-focus-text);
		outline: $border-thin solid;
		@include var(outline-color, secondary-link-focus-background);
	}

	// Supports
	@supports #{$supports-underlines} {
		border-bottom: none;
		text-decoration: underline;
		@include var(text-decoration-color, secondary-link-accent);
		/* stylelint-disable-next-line property-no-unknown */
		text-decoration-thickness: $border-thinnest;
		text-underline-offset: 0.5rem;
	}
}


.c-homepage-card__checklist {
	height: auto;
	position: relative;
	left: map-get($global-bleed, small);
	filter: var(--image-filter);

	// Breakpoints
	@include mappy-bp(wrist-large) {
		left: map-get($global-bleed, large);
		width: rem(400);
	}

	@include mappy-bp(palm-medium) {
		width: rem(340);
	}
}


.c-homepage-card__spotlight-avatar {
	@include avatar-size("large");
	position: relative;
}


.c-homepage-card__spotlight__info {
	@include var(background-color, featured-card-background);
	height: 13rem;
	margin-top: -7.5rem;
	margin-left: 4rem;
	padding: 1rem;
	text-align: right;
	width: 13rem;

	// Supports
	@supports #{$supports-flex} {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}
}


.c-homepage-card__spotlight-name {
	font-family: $font-family-secondary;
}


.c-homepage-card__spotlight-role {
	@include var(color, featured-card-heading-text);
	font-family: $font-family-secondary;
	letter-spacing: $font-tracking-slight;
	line-height: $line-height-tighter;
}
