/*
------------------------------------------------
Owner Session
------------------------------------------------
*/

.tl-owner-session {
	width: 100%;
}



/*
------------------------------------------------
Owner Session Header
------------------------------------------------
*/

.tl-owner-session-header {
	display: grid;
	grid-template-columns: 82px minmax(0, 1fr);
	gap: 14px;

	width: 100%;
	margin-bottom: 24px;
}


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

.tl-owner-dog-photo {
	width: 82px;
	height: 100%;
	min-height: 120px;

	overflow: hidden;

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


.tl-owner-dog-photo img {
	display: block;

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

	object-fit: cover;

	border-radius: 0;
}



/*
------------------------------------------------
Session Details
------------------------------------------------
*/

.tl-owner-session-details {
	display: flex;
	flex-direction: column;
	justify-content: center;

	min-width: 0;
	padding: 4px 0;
}


.tl-owner-session-details h1 {
	margin: 0;

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

	font-size: 1.125em;
	font-weight: 700;
	line-height: 1.2;
}


.tl-owner-session-title {
	margin: 4px 0 0;

	color: var(--tl-color-primary-hover);

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


.tl-owner-business-name {
	margin: 4px 0 0;

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

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


/*
------------------------------------------------
Session Dates
------------------------------------------------
*/

.tl-owner-session-start-date,
.tl-owner-session-close-date {
	margin: 10px 0 0;
	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-owner-session-close-date {
	margin-top: 2px;
	padding-top: 0;

	border-top: 0;
}



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

@media (min-width: 768px) {

	.tl-owner-session-header {
		grid-template-columns: 110px minmax(0, 1fr);
		gap: 18px;

		margin-bottom: 28px;
	}


	.tl-owner-dog-photo {
		width: 110px;
		min-height: 145px;
	}


	.tl-owner-dog-photo img {
		min-height: 145px;
	}


	.tl-owner-session-details h1 {
		font-size: 1.25em;
	}


	.tl-owner-session-title {
		font-size: 1em;
	}


	.tl-owner-business-name {
		font-size: .875em;
	}


	.tl-owner-session-start-date,
	.tl-owner-session-close-date {
		font-size: .8125em;
	}

}