/* BIO_HERO_V1 (2026-11-03): Rihards' "Med Art Doctor Hero" (light version) for the bio blocks (templates/block_bio.html).
   Photo bleeds to the left edge and fills the section height; copy in a calm right column. */
.bio_hero {
	--bh-fg: #2b2b2b; --bh-body: #464646; --bh-muted: #6f7478; --bh-line: #e3e6e8;
	--bh-cyan: #20c4f4; --bh-purple: #6600cc; --bh-photo-bg: #d5dadd;
	display: grid; grid-template-columns: minmax(300px, 43%) minmax(0, 1fr); min-height: min(720px, 100vh);
	background: #fff; color: var(--bh-body); font-family: 'OpenSans_regular', Arial, sans-serif; font-size: 16px; line-height: 1.65; text-align: left;
}
.bio_hero *, .bio_hero *::before, .bio_hero *::after { box-sizing: border-box; }
.bio_hero.bio_hero_nophoto { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.bio_hero :focus-visible { outline: 3px solid var(--bh-purple); outline-offset: 3px; }
.bio_hero_photo { position: relative; background: var(--bh-photo-bg); overflow: hidden; min-height: 460px; }
.bio_hero_photo img { position: absolute !important; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; max-width: none; animation: bhSettle 1.2s cubic-bezier(.2,.8,.2,1) both; }
@keyframes bhSettle { from { transform: scale(1.04); opacity: .6; } to { transform: none; opacity: 1; } }
.bio_hero_copy { display: flex; align-items: center; padding: clamp(40px, 7vw, 88px) clamp(24px, 6vw, 104px) clamp(40px, 7vw, 88px) clamp(28px, 6vw, 104px); }
.bio_hero_in { width: 100%; max-width: 600px; display: grid; gap: 28px; animation: bhRise .8s .15s cubic-bezier(.2,.8,.2,1) both; }
@keyframes bhRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.bio_hero h1, .bio_hero h2 { margin: 0; padding: 0; font-family: 'OpenSans_regular', Arial, sans-serif; font-weight: normal; color: var(--bh-fg); line-height: 1.12; text-align: left; text-transform: none; }
.bio_hero_t { display: block; margin-bottom: 8px; font-family: 'OpenSans_semibold', Arial, sans-serif; font-size: clamp(18px, 2vw, 22px); color: var(--bh-muted); }
.bio_hero_n { display: block; font-family: 'OpenSans_semibold', Arial, sans-serif; font-size: clamp(34px, 4.6vw, 56px); letter-spacing: -.015em; text-wrap: balance; }
.bio_hero_lead { margin: 0; font-size: 17px; line-height: 1.7; max-width: 54ch; }
.bio_hero_quote { margin: 0; padding: 4px 0 4px 22px; border-left: 6px solid var(--bh-cyan); font-size: 17px; line-height: 1.7; color: var(--bh-body); max-width: 54ch; font-style: normal; }
.bio_hero_stats { display: flex; flex-wrap: wrap; gap: 20px 48px; margin: 4px 0 0; padding: 22px 0 0; border-top: 1px solid var(--bh-line); }
.bio_hero_stat { display: flex; align-items: baseline; gap: 10px; }
.bio_hero_stat dd { margin: 0; font-family: 'OpenSans_Bold', Arial, sans-serif; font-size: clamp(38px, 4.6vw, 52px); line-height: 1; color: var(--bh-cyan); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.bio_hero_stat dt { order: 2; font-family: 'OpenSans_semibold', Arial, sans-serif; font-size: 16px; color: var(--bh-cyan); }
.bio_hero_actions { display: flex; flex-wrap: wrap; gap: 12px; }
.bio_hero_btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; min-width: 120px; min-height: 52px; padding: 0 28px; font-family: 'OpenSans_Bold', Arial, sans-serif; font-size: 13px; line-height: 1; letter-spacing: .1em; text-transform: uppercase; color: var(--bh-fg) !important; text-decoration: none !important; border: 2px solid var(--bh-fg); transition: color .25s ease, border-color .25s ease; }
.bio_hero_btn::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; background: var(--bh-purple); transform: translateY(101%); transition: transform .32s cubic-bezier(.2,.8,.2,1); }
.bio_hero_btn:hover, .bio_hero_btn:focus-visible { color: #fff !important; border-color: var(--bh-purple); }
.bio_hero_btn:hover::before, .bio_hero_btn:focus-visible::before { transform: none; }
@media (max-width: 900px) { .bio_hero { grid-template-columns: minmax(240px, 38%) minmax(0, 1fr); } .bio_hero_copy { padding-left: 28px; } }
@media (max-width: 720px) {
	.bio_hero { grid-template-columns: 1fr; min-height: 0; }
	.bio_hero_photo { min-height: 0; aspect-ratio: 4 / 4.6; max-height: 78vh; width: 100%; }
	.bio_hero_photo img { object-position: 50% 8%; }
	.bio_hero_copy { padding: 32px 20px 48px; }
	.bio_hero_in { gap: 24px; animation-delay: 0s; }
	.bio_hero_lead, .bio_hero_quote { font-size: 16px; }
	.bio_hero_stats { gap: 16px 36px; }
	.bio_hero_actions .bio_hero_btn { flex: 1 1 0; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .bio_hero_photo img, .bio_hero_in { animation: none; } .bio_hero_btn, .bio_hero_btn::before { transition: none; } }
/* BIO_HERO_LINK_V1: the name links to the doctor's page */
.bio_hero_n a { color: inherit !important; text-decoration: none !important; background: linear-gradient(var(--bh-cyan), var(--bh-cyan)) 0 100% / 0 3px no-repeat; transition: background-size .3s ease; }
.bio_hero_n a:hover, .bio_hero_n a:focus-visible { background-size: 100% 3px; }
@media (prefers-reduced-motion: reduce) { .bio_hero_n a { transition: none; } }