@layer source {
/* Medfield styles live in src/facility-premium.css (unlayered, loaded after the shared shell).
   Only this park's photo crops stay here, plus two rules the template does not carry yet.
   See docs/DESIGN_SYSTEM.md. */

/* ---- page only: Medfield has one verified photo, so the two tall gallery tiles show different ends of it
   (the x value matters on desktop's tall tiles, the y value on phones' full-width tiles: the building and lot
   on the first, the roofline and the evening sun on the last) ---- */
body[data-page-family=facility] #mp-photo .gt:nth-child(1) img{object-position:4% 88%}
body[data-page-family=facility] #mp-photo .gt:nth-child(4) img{object-position:96% 16%}
/* on phones both tiles run full width, where no crop of a 980x616 photo tells them apart: show the park once
   (one full tile over two stock halves) until a second verified Medfield photo arrives */
@media (max-width:760px){body[data-page-family=facility] #mp-photo .gt:nth-child(4){display:none}}

/* ---- template gaps, written to move into facility-premium.css (without !important there). !important only
   because build.py puts page CSS in @layer source, which loses to the unlayered template whatever the specificity. ---- */
/* 1. the template prints suite ids in navy, which only reads on an available (solid orange) suite. Four of
   Medfield's five hotspots are coming available (dark fill, dashed edge), so their ids are white until the suite
   is hovered, focused or selected. Each id follows its rect in the markup. */
body[data-page-family=facility] .mx-schematic .suite.soon+.suite-id{fill:var(--mx-white)!important}
body[data-page-family=facility] .mx-schematic .suite.soon:is(:hover,:focus-visible,.hot)+.suite-id{fill:var(--mx-deep)!important}
/* 2. in the stacked phone table a status cell is about 170px wide; "Coming available" does not fit on one line,
   and the template's nowrap pushed the page 45px wider than a 390px screen */
@media (max-width:900px){
  body[data-page-family=facility] .mxtable .mxtag{white-space:normal!important;padding-block:7px!important;line-height:1.3!important}
}

}