/* Styles scoped to the medical directory. */
.md-directory{--md-green:#cef2ce;--md-soft:#f1faf1;--md-ink:#111;--md-muted:#414a43;--md-border:#dce5dc;--md-radius:12px;--md-gap:24px;color:var(--md-ink);font-family:Montserrat,sans-serif;font-size:16px;line-height:1.5}
.md-directory [hidden]{display:none!important}
.md-directory h1,.md-directory h2,.md-directory h3{font-family:Montserrat,sans-serif;color:var(--md-ink);letter-spacing:-.035em;overflow-wrap:break-word}
.md-hero{background:var(--md-green);padding:32px 0 40px}
.md-breadcrumb{display:flex;align-items:center;gap:12px;font-size:14px;margin-bottom:16px}
.md-breadcrumb a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-underline-offset:4px}
.md-hero h1{font-size:clamp(32px,4vw,52px);font-weight:800;line-height:1.15;margin:0 0 16px}
.md-hero p{margin:0;font-size:18px;color:var(--md-muted)}
.md-directory h2{font-size:clamp(24px,2.5vw,32px);font-weight:750;line-height:1.25;margin:0 0 24px}
.md-search-section{padding:40px 0 24px}
.md-filters{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) auto;gap:16px;align-items:end}
.md-filters .od-field{gap:8px;min-width:0}
.md-filters label{font-weight:600;font-size:16px}
.md-filters input,.md-filters select{display:block;width:100%;min-width:0;min-height:52px;border:1px solid #788778;border-radius:8px;padding:12px 16px;background:white;color:var(--md-ink);font:inherit;box-sizing:border-box}
.md-filters input::placeholder{color:#616b61;opacity:1}
.md-clear{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 20px;background:var(--md-soft);color:var(--md-ink);border:1px solid #788778;border-radius:8px;font:600 16px/1.5 Montserrat,sans-serif;cursor:pointer;transition:background-color 220ms ease-out}
.md-directory :is(input,select,button,a):focus-visible{outline:3px solid #226737;outline-offset:4px}
.md-count{margin:16px 0 0;color:var(--md-muted);font-size:14px}
.md-empty{padding:32px;margin-top:24px;background:var(--md-soft);border-radius:var(--md-radius);text-align:center}
.md-empty p{margin:0 0 16px}
.md-main-section{padding:8px 0 56px}
.md-grid{--od-cols:4;--od-gap:24px;align-items:stretch}
.md-card{gap:0;min-width:0;border:1px solid var(--md-border);border-radius:var(--md-radius);background:#fff;cursor:default;box-shadow:none;transform:none}
.md-photo{display:grid;place-items:center;block-size:264px;padding:12px;background:#fff;border-radius:var(--md-radius) var(--md-radius) 0 0;overflow:hidden}
.md-photo img{display:block;width:auto;height:auto;max-width:100%;max-height:240px;object-fit:contain;border-radius:0;transform:none}
.md-card-body{padding:24px;gap:12px;flex:1;border-top:1px solid var(--md-border)}
.md-card h3{font-size:18px;font-weight:700;line-height:1.4;margin:0}
.md-card p{margin:0;font-size:16px;line-height:1.5}
.md-area{color:var(--md-muted)}
.md-card .md-cmp{margin-top:auto;padding-top:8px;font-size:14px;font-weight:600;color:var(--md-ink)}
.md-support{background:var(--md-soft);padding:40px 0 48px;margin-bottom:56px}
.md-support h2{margin-bottom:12px}
.md-intro{margin:0 0 24px;color:var(--md-muted)}
.md-support-grid{--od-cols:2;--od-gap:24px}
.md-support .md-card{display:grid;grid-template-columns:144px minmax(0,1fr)}
.md-support .md-photo{block-size:auto;min-height:176px;padding:12px;border-radius:var(--md-radius) 0 0 var(--md-radius)}
.md-support .md-photo img{max-height:160px}
.md-support .md-card-body{border-top:0;border-left:1px solid var(--md-border);padding:20px}
.md-brand-photo img{opacity:.65}
@media(hover:hover){.md-clear:hover{background:var(--md-green)}}
@media(max-width:1023px){.md-grid{--od-cols:2}.md-filters{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.md-clear{justify-self:start}.md-support .md-card{grid-template-columns:112px minmax(0,1fr)}}
@media(max-width:767px){.md-hero{padding:24px 0 32px}.md-hero p{font-size:16px}.md-filters{grid-template-columns:minmax(0,1fr)}.md-grid,.md-support-grid{--od-cols:1}.md-search-section{padding-top:32px}.md-main-section{padding-bottom:40px}.md-support{margin-bottom:40px}.md-card-body{padding:20px}.md-support .md-card{grid-template-columns:112px minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.md-clear{transition:none}}

/* Hero photographic composition, consistent with the internal landings. */
.md-directory .md-hero{--md-hero-fade:24%;padding:0;background:var(--md-soft)}
.md-hero-layout{display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr);align-items:end;gap:0}
.md-hero-copy{min-width:0;align-self:center;padding:32px 24px 40px 0}
.md-hero-media{display:block;min-width:0;align-self:end;mask-image:linear-gradient(to right,transparent,#000 var(--md-hero-fade));-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--md-hero-fade))}
.md-hero-media img{display:block;width:100%;height:auto;aspect-ratio:1144/632;object-fit:contain}
@media(max-width:767px){.md-hero-layout{grid-template-columns:minmax(0,1fr)}.md-hero-copy{padding:24px 0 24px}.md-hero-media{--md-hero-fade:8%}}

/* Integrate the portrait edge and keep the image inside the hero flow. */
.md-hero-media{--md-portrait-shadow:0 -4px 12px rgb(24 62 35 / 22%);padding-top:16px;mask-image:linear-gradient(to right,transparent,#000 var(--md-hero-fade));-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--md-hero-fade))}
.md-hero-media img{filter:drop-shadow(var(--md-portrait-shadow));transform:none}
/* Extend only the clipping boundary to the viewport edge; preserve portrait geometry. */
.md-hero-layout{--md-right-bleed:max(24px,calc((100vw - var(--max)) / 2))}
.md-hero-media{width:calc(100% + var(--md-right-bleed));max-width:none}
.md-hero-media img{width:calc(100% - var(--md-right-bleed));max-width:none}
@media(max-width:600px){.md-hero-layout{--md-right-bleed:max(16px,calc((100vw - var(--max)) / 2))}}

/* Brand-green wash from the outer right edge, independent of portrait placement. */
.md-directory .md-hero{position:relative;isolation:isolate;--md-right-wash:#cef2ce}
.md-directory .md-hero::after{content:"";position:absolute;top:0;right:0;width:64%;height:100%;z-index:-1;background:linear-gradient(to left,var(--md-right-wash) 0%,rgb(206 242 206 / 0) 100%);pointer-events:none}
@media(max-width:767px){.md-directory .md-hero::after{width:64%}}

/* Transparent head-to-navel portraits: natural 3:4 geometry, no image crop. */
.md-directory{--md-portrait-width:240px;--md-portrait-slot:336px}
.md-photo.md-portrait-photo{block-size:auto;min-block-size:var(--md-portrait-slot);padding:16px 12px 0;align-content:end;overflow:visible}
.md-photo.md-portrait-photo img{width:100%;height:auto;max-width:var(--md-portrait-width);max-height:none;aspect-ratio:1086/1448;object-fit:contain;align-self:end}
.md-support .md-photo.md-portrait-photo{min-block-size:0;padding:12px 8px 0;align-content:end}
.md-support .md-photo.md-portrait-photo img{max-width:100%;max-height:none}

/* Actual Wong artwork on the coats, independently editable from the portraits. */
.md-portrait-figure{display:block;position:relative;width:100%;max-width:var(--md-portrait-width);line-height:0;isolation:isolate}
.md-photo .md-portrait-figure>img{display:block;width:100%;height:auto}
.md-support .md-portrait-figure{max-width:100%}
.md-coat-logo{display:block;position:absolute;left:var(--coat-x);top:var(--coat-y);width:var(--coat-width);aspect-ratio:154.47/50;background:url('../images/wong/logo.svg') center/contain no-repeat;transform:perspective(160px) rotate(var(--coat-angle)) rotateY(var(--coat-turn,0deg)) skewY(var(--coat-skew,0deg));transform-origin:center;mix-blend-mode:multiply;opacity:.82;pointer-events:none}

/* Gradual hover emphasis; cards remain informational. */
.md-directory{--md-card-enter:400ms;--md-card-exit:260ms;--md-card-scale:1.025;--md-doctor-scale:1.04}
.md-directory .md-card{position:relative;isolation:isolate;transform:scale(1);transition:transform var(--md-card-exit) ease-in}
.md-directory .md-card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--md-green);opacity:0;pointer-events:none;transition:opacity var(--md-card-exit) ease-in}
.md-directory .md-card .md-photo{background:transparent}
.md-directory .md-portrait-figure{transform:scale(1);transform-origin:center bottom;transition:transform var(--md-card-exit) ease-in}
@media(hover:hover) and (pointer:fine){
 .md-directory .md-card:hover{transform:scale(var(--md-card-scale));transition-duration:var(--md-card-enter);transition-timing-function:ease-out}
 .md-directory .md-card:hover::before{opacity:1;transition-duration:var(--md-card-enter);transition-timing-function:ease-out}
 .md-directory .md-card:hover .md-portrait-figure{transform:scale(var(--md-doctor-scale));transition-duration:var(--md-card-enter);transition-timing-function:ease-out}
}
@media(prefers-reduced-motion:reduce){
 .md-directory .md-card,.md-directory .md-card::before,.md-directory .md-portrait-figure{transition:none}
 .md-directory .md-card:hover,.md-directory .md-card:hover .md-portrait-figure{transform:none}
}

/* Match the approved 2:3 portrait height to the team’s 3:4 portraits. */
.md-main-section .md-card[data-doctor-name="Dr. Carlos Félix Wong Cam"] .md-portrait-figure{max-width:calc(var(--md-portrait-width) * 8 / 9)}

/* Give the approved group photograph more space without cropping it. */
@media(min-width:768px){
 .md-hero-layout{grid-template-columns:minmax(0,36fr) minmax(0,64fr)}
}

/* Fill the available hero photograph area at its natural proportions. */
@media(min-width:768px){
 .md-hero-media img{width:100%;height:auto;aspect-ratio:auto}
}

/* Compact medical hero with a deliberate two-line heading. */
.md-directory .md-hero{--md-hero-crop-height:clamp(320px,28vw,432px)}
.md-hero h1{font-size:clamp(24px,2.8vw,44px);line-height:1.15}
.md-hero h1>span{display:block;white-space:nowrap}
.md-hero-copy{padding-block:24px}
@media(min-width:768px){
 .md-hero-media{max-block-size:var(--md-hero-crop-height);overflow:clip}
}
@media(max-width:767px){
 .md-hero h1{font-size:clamp(28px,6.5vw,40px)}
 .md-hero-copy{padding-block:16px}
 .md-hero-media{padding-top:0;max-block-size:240px;overflow:clip}
}

/* Slightly smaller hero group, retaining its natural proportions. */
.md-directory .md-hero{--md-hero-image-width:92%}
.md-hero-media img{width:var(--md-hero-image-width);margin-inline-start:auto;height:auto}