/* For Health. Builds on the wellness page system in wellness.css (the body keeps .wellness-page and
   .wl-textured); these rules add the health art direction: care at home, the people behind every
   health decision, a quieter clinical record that becomes a person, and health line drawings. */

/* Opener: care at home, life outside, overlapping. */
.health-page .wl-hero-type h1 em{white-space:normal;text-wrap:balance}
.wl-hero-pair{position:relative;width:100%;max-width:520px;aspect-ratio:520/620;justify-self:end}
.wl-pair-window{position:absolute;overflow:hidden;border-radius:4px;background:var(--merge-forest-green)}
.wl-pair-window img{width:100%;height:100%;object-fit:cover;display:block}
.wl-pair-main{right:0;top:0;width:82%;height:84%;border-radius:4px 80px 4px 4px}
.wl-pair-main img{object-position:64% 50%}
.wl-pair-inset{left:0;bottom:0;width:46%;aspect-ratio:1;border:10px solid var(--merge-dark-green);border-radius:4px 4px 4px 56px}
.wl-pair-inset img{object-position:22% 60%}
.motion .wl-pair-window img{animation:wl-settle 1.8s var(--ease) both}
.motion .wl-pair-inset img{animation-delay:.18s}
.health-page .wl-logo-bcbs{height:26px}
.health-page .wl-logo-hcsc{height:24px}
.health-page .wl-logo-stanford{height:30px}
.health-page .wl-logo-texas{height:36px}
.health-page .wl-logo-abbott{height:26px}
.health-page .wl-logo-bsci{height:30px}
.health-page .wl-logo-astellas{height:28px}
.health-page .wl-logo-biomarin{height:16px}

/* The people behind every health decision. Three roles; the record becomes a couple at home. */
.wellness-page.health-page main .wl-people-head h2{font-size:clamp(32px,3.9vw,62px)}
.health-page .wl-people-lead{font-size:clamp(19px,1.8vw,27px)}
.health-page .wl-meanings{grid-template-columns:repeat(3,1fr)}
.wl-meaning-member .wl-meaning-photo{border-radius:4px 90px 4px 4px}
.wl-meaning-professional .wl-meaning-photo{border-radius:4px 4px 90px 4px}
.wl-meaning-member img{object-position:28% 40%}
.wl-meaning-patient img{object-position:42% 45%}
.wl-meaning-professional img{object-position:50% 40%}
.health-page .wl-see-layer img{object-position:50% 45%}

/* The pinned passages use the whole text column; these paragraphs run longer than the wellness ones. */
.health-page .is-pinned .wl-see-text{grid-template-columns:minmax(0,1fr)}
.health-page .is-pinned .wl-see-text>p{max-width:560px}

/* Expertise: four areas, each with its own colour and a health line drawing, on a field of overlapping circles. */
#payers{--wl-art:url("media/health/line-art/payers.svg");--wl-panel-bg:var(--merge-mint)}
.wl-cause#payers{--wl-panel-accent:var(--merge-forest-green)}
#providers{--wl-art:url("media/health/line-art/providers.svg");--wl-panel-bg:var(--merge-warm-gray)}
#life-sciences{--wl-art:url("media/health/line-art/life-sciences.svg");--wl-panel-bg:var(--merge-dark-green);--wl-panel-ink:var(--merge-web);--wl-panel-accent:var(--merge-mint)}
#pharma{--wl-art:url("media/health/line-art/pharma.svg");--wl-panel-bg:var(--merge-pale-mint)}
.health-page .wl-landscape-head{grid-template-columns:1.6fr 1fr}
@media(min-width:901px){.health-page .wl-causes.is-accordion .wl-cause.is-open{grid-template-columns:minmax(260px,.8fr) minmax(0,2fr)}}
@media(min-width:901px) and (max-width:1100px){.health-page .wl-causes.is-accordion .wl-cause.is-open .wl-cause-title{font-size:26px}}
.health-page .wl-landscape::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201600%20900%22%20preserveAspectRatio%3D%22xMidYMin%20slice%22%3E%3Ccircle%20fill%3D%22%23133b34%22%20cx%3D%221380%22%20cy%3D%22-60%22%20r%3D%22520%22%2F%3E%3Ccircle%20fill%3D%22%2300856c%22%20cx%3D%22120%22%20cy%3D%22760%22%20r%3D%22330%22%2F%3E%3Ccircle%20fill%3D%22none%22%20stroke%3D%22%2300856c%22%20stroke-width%3D%222%22%20cx%3D%221380%22%20cy%3D%22-60%22%20r%3D%22600%22%2F%3E%3C%2Fsvg%3E")}

/* Work: no invented results, so the photography carries the card. */
.wl-case-michigan,.wl-case-insurer{grid-column:span 7}
.wl-case-irhythm,.wl-case-dojolvi{grid-column:span 5}
.wl-case-michigan>a{border-radius:60px 4px 4px 4px}
.wl-case-insurer>a{border-radius:4px 4px 60px 4px}
.health-page .wl-case-image::after{background:linear-gradient(180deg,color-mix(in srgb,var(--merge-dark-green) 26%,transparent) 0%,transparent 30%)}
.wl-case-michigan .wl-case-image>img{object-position:50% 35%}
.wl-case-irhythm .wl-case-image>img{object-position:50% 45%}
.wl-case-dojolvi .wl-case-image>img{object-position:40% 35%}
.wl-case-insurer .wl-case-image>img{object-position:50% 40%}
.wl-case-brand-light{background:var(--color-bg-card)}
.wl-case-brand .wl-case-logo-michigan{height:32px;aspect-ratio:200/66}
.wl-case-brand .wl-case-logo-irhythm{height:20px;aspect-ratio:386/61}
.wl-case-open{position:absolute;z-index:2;right:18px;bottom:18px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--merge-mint);color:var(--merge-dark-green);font-size:18px;transition:transform .3s var(--ease)}
.wellness-page main .wl-case>a:hover .wl-case-open{transform:translate(2px,-2px)}
.health-page .wl-case-copy p{margin-bottom:0}
.wl-work-cta{margin-top:44px;display:flex;justify-content:flex-end}

@media(max-width:900px){
 .wl-hero-pair{max-width:none;aspect-ratio:16/10}
 .wl-pair-main{width:72%;height:100%;border-radius:4px 80px 4px 4px}
 .wl-pair-inset{width:38%;aspect-ratio:auto;height:62%}
 .health-page .wl-meanings{grid-template-columns:1fr 1fr}
 /* Three roles in two columns: the longest one gets the full width. */
 .health-page .wl-story:not(.is-pinned) .wl-meaning-professional{grid-column:1/-1;margin-top:0}
 .health-page .wl-story:not(.is-pinned) .wl-meaning-professional .wl-meaning-photo{aspect-ratio:16/10}
 .health-page .wl-landscape-head{grid-template-columns:1fr}
 .wl-work-cta{justify-content:flex-start}
}
@media(max-width:640px){
 .wl-hero-pair{aspect-ratio:1}
 .wl-pair-main{width:80%;height:82%;border-radius:4px 64px 4px 4px}
 .wl-pair-inset{width:50%;height:50%;border-width:8px;border-radius:4px 4px 4px 44px}
 .health-page .wl-logo-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 12px}
 .health-page .wl-logo{max-width:100%;object-fit:contain}
 .health-page .wl-logo-bcbs{height:22px}
 .health-page .wl-logo-hcsc{height:20px}
 .health-page .wl-logo-stanford{height:26px}
 .health-page .wl-logo-texas{height:30px}
 .health-page .wl-logo-abbott{height:21px}
 .health-page .wl-logo-bsci{height:25px}
 .health-page .wl-logo-astellas{height:23px}
 .health-page .wl-logo-biomarin{height:13px}
 .health-page .wl-close-moments{font-size:22px}
}