/* Theme-only corrections to the concept's styles. Kept in this file because trinity.css, centre.css and article.css
   are regenerated from the concept by tools/export_concept.py. Loaded after them on every page.

   2026-10-20: the phone-width fix for centre pages (layout column min-width, wrapping buttons) first went here; it is
   now in the concept's own trinity.css. */

/* 2026-10-22 (Daniel): the contact column on centre pages (leasing contacts, property manager, downloads) scrolls with
   the page instead of staying fixed on screen; it is taller than most windows, so its lower cards could not be reached */
aside .sticky { position: static; }

/* 2026-10-22 (Daniel): the contact cards on centre pages (leasing contacts, property manager) were untidy, with each
   telephone number and email in large bold underlined text. Details are now regular 14px text under each person,
   labelled Phone and Email, with a rule between people and job titles on tighter lines. A further line (the after-hours
   number) lines up under the details without a label. Centre pages only: the News page's media box also uses
   .contact-lines and keeps its own style. */
.single-centre aside .card .person span { display: block; line-height: 1.4; margin-top: 2px; }
.single-centre aside .card .person + .contact-lines { margin-top: -6px; }
.single-centre aside .card .contact-lines + .person { border-top: 1px solid var(--line); padding-top: 14px; }
.single-centre aside .card .contact-lines { gap: 3px; font-weight: 400; font-size: 14px; line-height: 1.5; }
.single-centre aside .card .contact-lines > * { display: block; position: relative; padding-left: 58px; }
.single-centre aside .card .contact-lines a { color: var(--blue); text-decoration: none; }
.single-centre aside .card .contact-lines a:hover, .single-centre aside .card .contact-lines a:focus-visible { text-decoration: underline; }
.single-centre aside .card .contact-lines a[href^="tel:"]:first-child::before,
.single-centre aside .card .contact-lines a[href^="mailto:"]::before { position: absolute; left: 0; top: 0.25em; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.single-centre aside .card .contact-lines a[href^="tel:"]:first-child::before { content: "Phone"; }
.single-centre aside .card .contact-lines a[href^="mailto:"]::before { content: "Email"; }

/* 2026-10-22 (Daniel): gallery photos on centre pages open larger when selected (assets/js/gallery-zoom.js) */
.gallery img.tz-thumb { cursor: zoom-in; }
.gallery img.tz-thumb:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
html.tz-open { overflow: hidden; }
.tz-box { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 56px 80px; background: rgba(17, 20, 24, .93); }
.tz-box[hidden] { display: none; }
.tz-fig { margin: 0; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.tz-img { display: block; max-width: 100%; max-height: calc(100vh - 150px); object-fit: contain; box-shadow: 0 10px 40px rgba(0, 0, 0, .45); }
.tz-cap { max-width: 900px; color: #e9e7e1; font-size: 14px; line-height: 1.45; text-align: center; }
.tz-box button { position: absolute; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 32px; line-height: 1; cursor: pointer; }
.tz-box button:hover, .tz-box button:focus-visible { background: rgba(255, 255, 255, .3); outline: 2px solid #fff; outline-offset: 2px; }
.tz-close { top: 16px; right: 16px; }
.tz-prev { top: 50%; left: 16px; transform: translateY(-50%); }
.tz-next { top: 50%; right: 16px; transform: translateY(-50%); }
@media (max-width: 700px) {
  .tz-box { padding: 72px 8px 88px; }
  .tz-img { max-height: calc(100vh - 230px); }
  .tz-prev, .tz-next { top: auto; bottom: 20px; transform: none; }
}

/* 2026-10-29 (Daniel): centres with only two photos (no storefront photograph) show them side by side at full height,
   instead of leaving an empty tile under the second one. Phones keep the sideways-scrolling row. */
.gallery:has(> :nth-child(2):last-child) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.gallery > :first-child:nth-last-child(2) ~ :nth-child(2) { grid-row: 1 / 3; }