/* WumeHealth — Physicians page DESKTOP layout overrides (Stage 2) ---------------------------------------------------------------------------- Scope: every rule below is prefixed `body.is-physicians-page` AND wrapped in a single `@media (min-width: 992px)` block, so the already-synced MOBILE view (<992px, which lives in wume.css) is left completely untouched. This file is linked from templates/pages/physicians.html.twig via {% block head %}. It does NOT modify wume.css or base.html.twig. Implements the Stage-2 desktop spec for "physicians": 1. "Our Standard" band — brown (#715434) ground + cream text via .wume-section-lbrown; six pillars 3-across with thin cell dividers. 2. Dr. Jessica Wu section — stone ground (wume-section-alt dropped in the template); narrow image column with credentials beside the bio. 3. Hero body max-width 340 -> 470px. 4. Physician roster — 3 stacked full-width sand cards (small ~100px thumb left + name/eyebrow + "+" right). The #dr-scott-hammerman anchor is preserved on the first card. 5. Collective statement ("Credentials are the baseline...") — 2-col .wume-split with a portrait image on the left. + Press band ("AS SEEN IN AND TRUSTED BY") — eyebrow + a row of logo placeholders, sitting at the bottom of the sage section. V01 V02 — Feature row "#the-wume-collective" photo column constrained to 523px (base .wume-split is 1fr 1fr, making it 618px/half = too big vs figma 523x654; that was the +152 over-height). ?v 1->2. */ @media (min-width: 992px) { /* ==================================================================== 3. Hero body — widen the right-column paragraph 340 -> 470px. ==================================================================== */ body.is-physicians-page .wume-hero-body { max-width: 470px; } /* ==================================================================== Press band — "AS SEEN IN AND TRUSTED BY" eyebrow centered over a row of logo placeholders. Lives at the bottom of the sage section, so the sage ground shows through (transparent placeholders). ==================================================================== */ body.is-physicians-page .wume-press-band { margin-top: 64px; text-align: center; } body.is-physicians-page .wume-press-band-eyebrow { font-family: var(--wume-font-body); font-weight: var(--wume-w-sub); font-size: 0.78rem; letter-spacing: var(--wume-tracking-caps); text-transform: uppercase; color: var(--wume-black); margin: 0 0 28px; } body.is-physicians-page .wume-press-band-logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px; align-items: center; justify-items: center; } body.is-physicians-page .wume-press-band-logos .wume-img-placeholder { width: 100%; height: 56px; min-height: 0; padding: 0; background: rgba(77, 61, 45, 0.08); font-size: 0.7rem; } /* ==================================================================== 5. Collective statement ("Credentials are the baseline...") — 2-col split, portrait image LEFT and the heading RIGHT. The template drops text-center + the max-width:900 wrapper for this section. ==================================================================== */ body.is-physicians-page #collective-statement .wume-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 80px; align-items: center; } body.is-physicians-page #collective-statement .wume-img-placeholder { aspect-ratio: 4 / 3; min-height: auto; padding: 0; } body.is-physicians-page #collective-statement .wume-img-placeholder img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ==================================================================== 2. Dr. Jessica Wu section — narrow image column (300px) + the credentials block sits beside the bio. The template drops wume-section-alt here so the section paints stone (cream). (The shared .wume-physician-row is overridden ONLY on this page.) ==================================================================== */ body.is-physicians-page #dr-jessica-wu .wume-physician-row { grid-template-columns: 300px minmax(0, 1fr); column-gap: 60px; align-items: start; } /* Credentials beside the bio: the 2x3 .row of credential cells floats into a right rail next to the bio paragraph. */ body.is-physicians-page #dr-jessica-wu .wume-physician-bio { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 48px; align-items: start; } body.is-physicians-page #dr-jessica-wu .wume-physician-bio > .row { margin: 0; } /* ==================================================================== 4. Physician roster — 3 stacked full-width sand cards. Each card is a horizontal flex row: ~100px square thumb LEFT, name + eyebrow in the middle, a large "+" on the far RIGHT. Replaces the prior 3-up thumbnail grid. The #dr-scott-hammerman anchor stays on card 1. ==================================================================== */ body.is-physicians-page .wume-physician-roster { display: flex; flex-direction: column; gap: 16px; } body.is-physicians-page .wume-roster-card { display: flex; align-items: center; gap: 28px; background: var(--wume-sand); color: var(--wume-black); padding: 16px 36px 16px 16px; } body.is-physicians-page .wume-roster-card-thumb { flex: 0 0 auto; width: 100px; height: 100px; min-height: 0; padding: 0; overflow: hidden; font-size: 0.6rem; text-align: center; } body.is-physicians-page .wume-roster-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } body.is-physicians-page .wume-roster-card-body { flex: 1 1 auto; min-width: 0; } body.is-physicians-page .wume-roster-card-name { font-family: var(--wume-font-heading); font-weight: var(--wume-w-heading); font-size: 1.5rem; margin: 0 0 6px; } body.is-physicians-page .wume-roster-card-eyebrow { font-family: var(--wume-font-body); font-weight: var(--wume-w-sub); font-size: 0.72rem; letter-spacing: var(--wume-tracking-caps); text-transform: uppercase; color: var(--wume-black); margin: 0; } body.is-physicians-page .wume-roster-card-plus { flex: 0 0 auto; font-family: var(--wume-font-body); font-weight: 300; font-size: 1.75rem; line-height: 1; color: var(--wume-black); } /* ==================================================================== 1. "Our Standard" band — six pillars 3-across (template swaps col-md-6 -> col-md-4) with thin cell dividers. The brown ground + cream text come from .wume-section-lbrown added in the template; this rule supplies the rgba dividers between the cells. ==================================================================== */ body.is-physicians-page #our-standard .row > [class*="col-"] { border-right: 1px solid rgba(244, 241, 235, 0.25); } /* Drop the divider on the rightmost cell of each 3-across row. */ body.is-physicians-page #our-standard .row > [class*="col-"]:nth-child(3n) { border-right: 0; } /* The pillar kicker hard-codes black; flip it to cream on the brown ground so it reads against .wume-section-lbrown. (Body + eyebrow already inherit cream.) */ body.is-physicians-page #our-standard .wume-three-pillar-kicker { color: var(--wume-cream); } /* Feature row "Credentials are the foundation": the base .wume-split is 1fr 1fr, making the photo 618px (half) and too tall; figma is 523x654. Constrain the photo column (text left, photo right) like the home module. */ body.is-physicians-page #the-wume-collective .wume-split { grid-template-columns: minmax(0, 1fr) min(523px, 41%); } }