/* =========================================================================
   Provider portal — extends the shared atl_portal.css design system.
   A healthcare facility's public face (Lagoon-style). Green clinical accent.
   ========================================================================= */

:root {
	--prov-accent:      #0a7d72;   /* keep clinical teal, warmer */
	--prov-accent-2:    #12a594;
	--prov-soft:        #e6f6f4;
	--prov-warm:        #f2b134;
}

/* Provider hero leans warmer/greener than the national portal. */
.prov .atl-hero {
	background:
		radial-gradient(1100px 520px at 85% -10%, rgba(18,165,148,.26), transparent 60%),
		radial-gradient(820px 460px at 0% 0%, rgba(10,125,114,.22), transparent 55%),
		linear-gradient(180deg, #08231f 0%, #0d342f 100%);
}
.prov .atl-hero h1 span { color: #5fe0cf; }
.prov .atl-eyebrow { color: #b7ece4; }
.prov .atl-filter input:focus { border-color: var(--prov-accent); box-shadow: 0 0 0 3px var(--prov-soft); }

/* ---- Department tiles ------------------------------------------------- */
.prov-depts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.prov-dept {
	background: var(--atl-surface); border: 1px solid var(--atl-border);
	border-radius: var(--atl-radius-sm); padding: 18px; box-shadow: var(--atl-shadow);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
	display: flex; flex-direction: column; gap: 6px;
}
.prov-dept:hover { transform: translateY(-3px); box-shadow: var(--atl-shadow-lg); border-color: var(--prov-accent); }
.prov-dept__icon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; background: var(--prov-soft); color: var(--prov-accent); margin-bottom: 4px; }
.prov-dept__name { font-weight: 700; color: var(--atl-ink); font-size: 14.5px; line-height: 1.25; }
.prov-dept__meta { font-size: 12.5px; color: var(--atl-muted); }

/* ---- Clinician cards -------------------------------------------------- */
.prov-team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.prov-doc {
	background: var(--atl-surface); border: 1px solid var(--atl-border);
	border-radius: var(--atl-radius); padding: 22px; text-align: center;
	box-shadow: var(--atl-shadow); transition: transform .15s ease, box-shadow .15s ease;
}
.prov-doc:hover { transform: translateY(-3px); box-shadow: var(--atl-shadow-lg); }
.prov-doc__avatar {
	width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 14px;
	display: grid; place-items: center; font-size: 26px; font-weight: 850;
	color: #fff; background: linear-gradient(135deg, var(--prov-accent), var(--prov-accent-2));
	overflow: hidden;
}
.prov-doc__avatar img { width: 100%; height: 100%; object-fit: cover; }
.prov-doc__name { font-weight: 750; color: var(--atl-ink); font-size: 15.5px; line-height: 1.2; }
.prov-doc__dept { font-size: 13px; color: var(--prov-accent); font-weight: 600; margin-top: 4px; }

/* ---- Services menu (columned list — calmer than a chip cloud) -------- */
.prov-services {
	column-count: 3; column-gap: 26px;
	background: var(--atl-surface); border: 1px solid var(--atl-border);
	border-radius: var(--atl-radius); padding: 14px 18px; box-shadow: var(--atl-shadow);
}
.prov-service {
	display: flex; align-items: center; gap: 12px; break-inside: avoid;
	padding: 9px 10px; border-radius: 10px; font-size: 14.5px; font-weight: 600;
	color: var(--atl-ink); transition: background .15s ease;
}
.prov-service:hover { background: var(--prov-soft); }
.prov-service::before {
	content: "+"; width: 24px; height: 24px; flex: 0 0 auto;
	display: grid; place-items: center; border-radius: 7px;
	background: var(--prov-soft); color: var(--prov-accent);
	font-weight: 800; font-size: 17px; line-height: 1; transition: background .15s ease;
}
.prov-service:hover::before { background: #fff; }

/* ---- Exchange badge --------------------------------------------------- */
.prov-exchange {
	display: inline-flex; align-items: center; gap: 10px;
	background: var(--prov-soft); border: 1px solid #c9ece7; color: var(--prov-accent);
	border-radius: 999px; padding: 10px 18px; font-weight: 700; font-size: 14px;
}

@media (max-width: 900px) {
	.prov-depts, .prov-team { grid-template-columns: repeat(2, 1fr); }
	.prov-services { column-count: 2; }
}
@media (max-width: 560px) {
	.prov-depts, .prov-team { grid-template-columns: 1fr 1fr; }
	.prov-services { column-count: 1; }
}