/* ==========================================================================
   "Our Team" directory page — [owc_clinic_directory] output.
   Same editorial, no-card-chrome language as the practitioner panel and
   location header: big confident type, a hairline rule instead of a boxed
   card, generous whitespace instead of borders doing the separating.
   Scoped under .owc-team-directory-page so it can't leak onto any other
   page — this stylesheet only loads on page ID 37 (see functions.php).
   ========================================================================== */

.owc-team-directory-page {
	max-width: 1200px;
	margin: 0 auto;
	padding: 8px 0 64px;
}

/* Deliberately oversized, same treatment as .owc-practitioner-grid-heading
   — the shared "Divi banner" above this (dynamic post_title, on every
   "Specific Page" template) is plain and small, so this is the page's
   real visual opener. rem + !important for the same reason documented
   there: a global Divi rule (`h1, h2 { font-size: 28px !important }`)
   otherwise wins, and em would be at the mercy of the ambient font-size. */
.owc-team-directory-heading {
	margin: 0 0 20px;
	font-size: 3.5rem !important;
	font-weight: 600;
	line-height: 0.98;
	letter-spacing: -0.02em;
	color: #1a1a1a;
}

@media (max-width: 640px) {
	.owc-team-directory-heading {
		font-size: 2.25rem !important;
	}
}

.owc-team-directory-intro {
	max-width: 640px;
	margin: 0 0 48px;
}

.owc-team-directory-intro p {
	font-size: 1.05em;
	line-height: 1.6;
	color: #333333;
	margin: 0;
}

.owc-team-directory-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 40px;
	row-gap: 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.owc-team-directory-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 981px) {
	.owc-team-directory-grid {
		grid-template-columns: repeat(4, 1fr);
		column-gap: 48px;
		row-gap: 48px;
	}
}

/* Subgrid, not a fixed/guessed height: each item spans the same 5 row
   tracks (photo/name/address/phone/button) as its siblings, and the grid
   sizes every track to the tallest thing actually in it *for that visual
   row of clinics* — so a short row (all one-line addresses) stays tight,
   and only the row containing a long address (e.g. Brentwood) grows, and
   only by as much as that address actually needs. No line-count guessing,
   and it can't drift no matter how an address wraps in the future. */
.owc-team-directory-item {
	list-style: none;
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 5;
	/* the grid's 40/48px row-gap is meant for the space *between* visual
	   rows of clinics — override it to 0 here so it doesn't also stack up
	   between this item's own internal photo/name/address/phone/button
	   tracks (spacing between those is handled by their own margins
	   below). An item's own row-gap only affects gaps within its own
	   span, so the gap between one row of cards and the next still comes
	   from the grid's row-gap, untouched. */
	row-gap: 0;
}

/* Square corners, matching .owc-practitioner-tile-trigger's "deliberately
   un-rounded" precedent. 4:3 landscape (storefront/interior shots read
   better wide than the practitioner grid's portrait 3:4) — set with
   aspect-ratio rather than a fixed height so it scales with the column. */
.owc-team-directory-photo {
	grid-row: 1;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #f2f0f1;
	margin: 0 0 10px;
}

.owc-team-directory-photo-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.owc-team-directory-photo-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: #f2f0f1;
}

.owc-team-directory-name {
	grid-row: 2;
	align-self: start;
	margin: 0 0 2px;
	font-size: 1.15rem !important;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: 0.03em;
	color: #1a1a1a;
	text-transform: uppercase;
}

.owc-team-directory-address {
	grid-row: 3;
	align-self: start;
	margin: 0 0 4px;
	font-size: 0.92em;
	line-height: 1.4;
	color: #333333;
}

.owc-team-directory-phone {
	grid-row: 4;
	align-self: start;
	margin: 0 0 8px;
	font-size: 0.92em;
	line-height: 1.4;
}

.owc-team-directory-phone a {
	color: #333333;
	text-decoration: none;
}

.owc-team-directory-phone a:hover {
	color: #511439;
}

.owc-team-directory-link {
	grid-row: 5;
	display: inline-block;
	align-self: start;
	justify-self: start;
	padding: 8px 18px;
	background-color: #511439;
	color: #ffffff;
	font-size: 0.7em;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 999px;
	transition: background-color 0.2s ease, transform 0.15s ease;
}

.owc-team-directory-link:hover {
	background-color: #3d0f2b;
	transform: translateY(-1px);
}

/* --- breadcrumb, matching the neuropathy page's treatment ------------- */

.owc-team-directory-page .owc-breadcrumb,
.owc-team-directory-page .owc-breadcrumb a,
.owc-team-directory-page .owc-breadcrumb span {
	font-size: 13px;
	color: #8a8a8a;
	text-decoration: none;
}

.owc-team-directory-page .owc-breadcrumb a:hover {
	color: #511439;
}

.owc-team-directory-page .owc-breadcrumb-sep {
	margin-inline: 4px;
}