/* =========================================================================
   Intelligent Buildings page (buildings.html) · page-only rules.
   Loaded after home.css and built only from its tokens: no new colours,
   sizes, radii or timings. Shared components stay in home.css.
   ========================================================================= */

/* Hero: screen 01 keeps its master switches and CO2 thermostat bottom-left,
   so the verbatim readings sit bottom-right, over the screen's empty front wall. */
html[data-page="buildings"] .shero .hot__dcs { left: auto; right: 14px; justify-content: flex-end; }

/* Day: the verbatim reading moves to the top-right corner, because the parts the ring points at
   (the CO2 thermostat on 01, the "Leave" scene on 07, the office on 06, the temperature chart on the
   St Pavlos charts screen) sit on the left of these screens. */
html[data-page="buildings"] .day__dc { left: auto; bottom: auto; top: 12px; right: 12px; }

/* Screens that are not 16:9 (the St Pavlos charts screen) show whole inside the same 16:9 frame,
   on the app's dark surface. Their hotspot regions are measured on the letterboxed frame. */
.viewer__frame > img.fit, .day__screen > img.fit { object-fit: contain; background: var(--navy-900); }

/* Viewer: the client each real screen comes from, named under the screen tabs.
   CSS only: the name follows the selected tab (home.js owns the tabs). */
.vw-from { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: var(--fs-small); font-weight: 500; line-height: 1.4; color: var(--ink); }
.vw-from__k { font-size: var(--fs-micro); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--muted); }
.vw-from__n { display: none; }
.viewer:has(#vwScreens [data-screen="01"][aria-selected="true"]) .vw-from__n[data-for="01"],
.viewer:has(#vwScreens [data-screen="06"][aria-selected="true"]) .vw-from__n[data-for="06"],
.viewer:has(#vwScreens [data-screen="05"][aria-selected="true"]) .vw-from__n[data-for="05"],
.viewer:has(#vwScreens [data-screen="stp"][aria-selected="true"]) .vw-from__n[data-for="stp"],
.viewer:has(#vwScreens [data-screen="12"][aria-selected="true"]) .vw-from__n[data-for="12"] { display: inline; }

/* Clients: five building, office and healthcare logos are too few for a moving
   strip (the loop would show a gap), so they sit still, followed by the named projects. */
html[data-page="buildings"] .clients--static { padding-block: 36px 40px; }
html[data-page="buildings"] .clients--static .clients__head { margin-bottom: 24px; }
.logo-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 24px; }
.logo-row > li { flex: 0 1 176px; min-width: 0; }
.logo-row > li:hover .logo { background: var(--logo-hover); }
.named { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); display: grid; gap: 14px; }
.named .rail__label { justify-content: flex-start; }
.named .rail__names { margin: 0; max-width: none; justify-content: flex-start; gap: 8px 28px; }
.named .rail__names li { font-size: var(--fs-body); color: var(--body); }
.named .rail__names li::before { opacity: 1; }

@media (max-width: 767.98px) {
  .logo-row { justify-content: center; gap: 12px 16px; }
  .logo-row > li { flex-basis: calc((100% - 32px) / 3); }
  .named .rail__names { gap: 6px 20px; }
}
@media (max-width: 639.98px) {
  html[data-page="buildings"] .day__dc { top: 8px; right: 8px; }
}
@media (max-width: 479.98px) {
  html[data-page="buildings"] .shero .hot__dcs { right: 8px; bottom: 8px; gap: 6px; }
  html[data-page="buildings"] .shero .hot__dcs .reading { gap: 2px; padding: 6px 10px; }
  html[data-page="buildings"] .shero .hot__dcs .data-value { font-size: var(--fs-small); }
  /* phones: one reading, so the ringed part of the screen stays visible */
  html[data-page="buildings"] .shero .hot__dcs .reading + .reading { display: none; }
}