/***** Team Member single posts and archive page *****/
.teams-list {
	display: grid;
	gap: 1.5rem;
	list-style-type: none;
	width: 100%;
	max-width: 17.5rem;
	margin-bottom: 2.5rem;
	padding-left: 0;
}

.single-attorney {
	.attorney {
		margin-bottom: 4.375rem;

		.heading {
			margin-bottom: 1.625rem;

			* {
				text-align: left;
			}

			h1 {
				margin-block: 0;
			}

			.role {
				font-size: 1.25rem;
				color: var(--clr-text-gray);
				line-height: 1;
				text-transform: uppercase;
				margin-bottom: 0;
			}
		}

		.member-meta {
			display: grid;
			align-content: start;
			margin-bottom: 2.5rem;

			figure {
				width: 100%;
				max-width: 20rem;
				aspect-ratio: 1 / 1;
				background-image: linear-gradient(#6a6a6a, #c4c4c4);
				margin-bottom: 2.125rem;

				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					object-position: top;
				}
			}

			h2 {
				font-weight: 500;
				font-size: 1.125rem;
				margin-bottom: 0.5em;
			}

			li {
				padding-left: 1.875rem;
			}

			.contact {
				> * {
					display: block;
				}

				.phone,
				.email,
				.address {
					padding-left: 1.875rem;
					background-repeat: no-repeat;
					background-position: left top;
				}

				.phone {
					color: var(--clr-main);
					margin-bottom: 0.6em;
					background-image: url(../images/icon-phone-black.png);
				}

				.email {
					font-weight: 500;
					margin-bottom: 1.5em;
					background-image: url(../images/icon-email-black.png);
				}

				.address {
					line-height: 1.4;
					margin-bottom: 0;
					background-image: url(../images/icon-building-black.png);
				}
			}
		}

		.member-bio {
			display: grid;
			align-content: start;
		}

		.on-page-link {
			justify-self: center;
			font-weight: 500;
			padding: 0.6em 2.125em;
			background-color: var(--clr-blue-dark);
			margin-top: 5em;
		}

		@media (width >= 56.25rem) { /* 900px */
			& {
				display: grid;
				grid-template-columns: 20rem 1fr;
				grid-template-rows: auto 1fr;
				grid-template-areas:
					'meta heading'
					'meta bio';
				column-gap: 7.375rem;
				/* margin-top: 3.75rem; */

				.heading {
					grid-area: heading;
				}

				.member-meta {
					grid-area: meta;
				}

				.member-bio {
					grid-area: bio;
				}
			}
		}
	}
}

.post-type-archive-attorney {
	--max-width: 90rem;

	.dc-content {
		padding-inline: var(--padding-rl);
	}

	.attorneys {
		h2 {
			font-weight: 500;
			font-size: clamp(1.875rem, 3.5vw, 2.25rem);
			text-align: center;
			margin-block: 0 2.5rem;
		}

		.attorneys-grid {
			display: flex;
			flex-wrap: wrap;
			row-gap: 3.125rem;
			column-gap: 8.375rem;
			justify-content: flex-start;
			margin-bottom: 5.625rem;
		}

		.bio-block {
			flex-basis: 23rem;

			a {
				display: grid;
				grid-template-columns: auto 1fr;
				gap: 0.75rem;

				figure {
					width: 100%;
					max-width: 12.5rem;
					aspect-ratio: 4 / 5;
	
					img {
						width: 100%;
						height: 100%;
						object-fit: cover;
						object-position: top;
					}
				}

				.bio-meta {
					display: grid;
					grid-template-rows: auto 1fr auto;

					h3 {
						font-weight: 400;
						font-size: 1.125rem;
						color: var(--clr-main);
						margin-block: 0 1em;
					}

					p {
						color: var(--clr-main);
						font-size: 0.9375rem;
						line-height: 1.5;
					}

					.read-bio {
						visibility: hidden;
						font-weight: 500;
						font-size: 0.9375rem;
						color: var(--clr-link);
						margin-bottom: 4.25rem;

						&::after {
							border-left-color: var(--clr-main);
							margin-left: 0.7em;
							transition: inherit;
						}
					}
				}

				&:hover,
				&:focus {
					text-decoration: none;

					.bio-meta {
						.read-bio {
							visibility: visible;
						}
					}
				}
			}
		}
	}

	@media (width >= 50rem) { /* 800px */
		& {
			.attorneys {
				h2 {
					margin-bottom: 6.25rem;
				}

				.attorneys-grid {
					row-gap: 5.25rem;
				}
			}
		}
	}
}