/*
------------------------------------------------
Dogs
------------------------------------------------
*/

.tl-dogs-list {
	width: 100%;
}


.tl-dog-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}



/*
------------------------------------------------
Dog Card
------------------------------------------------
*/

.tl-dog-card {
	margin: 0;

	overflow: hidden;

	background: var(--tl-color-surface);
	border: 1px solid var(--tl-color-border-soft);
	border-radius: var(--tl-radius);

	box-shadow:
		0 1px 2px rgba(0, 0, 0, .04),
		0 4px 12px rgba(0, 0, 0, .06);
}



/*
------------------------------------------------
Dog Card Link
------------------------------------------------
*/

.tl-dog-card-link {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr);

	width: 100%;
	min-height: 138px;

	box-sizing: border-box;

	color: inherit;
	text-decoration: none;
}



/*
------------------------------------------------
Dog Photo
------------------------------------------------
*/

.tl-dog-card-photo {
	width: 92px;
	min-width: 92px;
	height: 100%;

	overflow: hidden;

	background: var(--tl-color-background);
}


.tl-dog-card-photo-image {
	display: block;

	width: 100%;
	height: 100%;
	min-height: 138px;

	object-fit: cover;

	border-radius: 0;
}



/*
------------------------------------------------
Dog Content
------------------------------------------------
*/

.tl-dog-card-content {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 14px;

	min-width: 0;

	padding: 16px;
}



/*
------------------------------------------------
Dog Details
------------------------------------------------
*/

.tl-dog-card-details {
	min-width: 0;
}


.tl-dog-card-title {
	margin: 0;

	color: var(--tl-color-text);

	font-size: 1.0625em;
	font-weight: 700;
	line-height: 1.25;
}


.tl-dog-card-details p {
	margin: 3px 0 0;

	color: var(--tl-color-text-secondary);

	font-size: .8125em;
	line-height: 1.35;
}


.tl-dog-card-details strong {
	color: var(--tl-color-text);

	font-weight: 600;
}


.tl-dog-card-breed-sex {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}


.tl-dog-card-separator {
	color: var(--tl-color-border);
}



/*
------------------------------------------------
Dog Meta
------------------------------------------------
*/

.tl-dog-card-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;

	padding-top: 10px;

	border-top: 1px solid var(--tl-color-border-soft);

	color: var(--tl-color-text-secondary);

	font-size: .75em;
	line-height: 1.4;
}


.tl-dog-card-meta strong {
	color: var(--tl-color-text);

	font-weight: 600;
}



/*
------------------------------------------------
Dog Status
------------------------------------------------
*/

.tl-dog-status {
	display: inline-flex;
	align-items: center;

	padding: 2px 7px;

	border-radius: 999px;

	font-size: .9375em;
	font-weight: 600;
	line-height: 1.3;
}


.tl-dog-status--active {
	background: var(--tl-color-success-bg);
	color: var(--tl-color-success);
}


.tl-dog-status--inactive {
	background: var(--tl-color-background);
	color: var(--tl-color-text-secondary);
}



/*
------------------------------------------------
Interaction
------------------------------------------------
*/

.tl-dog-card-link:hover,
.tl-dog-card-link:focus-visible {
	background: var(--tl-color-background);
}


.tl-dog-card-link:focus-visible {
	outline: 2px solid var(--tl-color-primary);
	outline-offset: -2px;
}



/*
------------------------------------------------
Larger Screens
------------------------------------------------
*/

@media (min-width: 768px) {

	.tl-dog-list {
		gap: 18px;
	}


	.tl-dog-card-link {
		grid-template-columns: 120px minmax(0, 1fr);

		min-height: 160px;
	}


	.tl-dog-card-photo {
		width: 120px;
		min-width: 120px;
	}


	.tl-dog-card-photo-image {
		min-height: 160px;
	}


	.tl-dog-card-content {
		padding: 20px 22px;
	}


	.tl-dog-card-title {
		font-size: 1.125em;
	}


	.tl-dog-card-details p {
		font-size: .875em;
	}


	.tl-dog-card-meta {
		font-size: .8125em;
	}

}