/* The projects page and the Streatham and Balham pages, built by scripts/build_place_pages.py.
   They reuse the service, area, guide and design and build styles; these are the few rules they add.
   White ground, olive accents, the site's own fonts. */

/* headings keep their natural letter spacing */
.plc.svx .svx-top h1, .plc.svx .sp-section-title { letter-spacing: 0; }

/* photographs from the job, two across, each with what it shows */
.plc-shots { list-style: none; margin: 8px 0 18px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; }
.plc-shots figure { margin: 0; }
.plc-shots img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; background: #F4F6EF; }
.plc-shots figcaption { margin-top: 8px; font-size: .9rem; line-height: 1.5; color: #6E6E68; }

/* what we take on: the service as a link, then a line about it */
.plc-do { list-style: none; margin: 0 0 14px; padding: 0; max-width: 680px; }
.plc-do li { padding: 14px 0 16px; border-top: 1px solid #ECEAE3; }
.plc-do li > a { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-weight: 600; color: #1A1A1A; }
.plc-do li > a b { color: #556B2F; font-weight: 400; }
.plc-do li > a:hover { color: #556B2F; }
.plc-do p { margin: 2px 0 0; color: #555; line-height: 1.6; }
.plc-do p a { color: #556B2F; text-decoration: underline; text-underline-offset: 3px; }

/* the projects: three across on a wide screen (nine jobs, three rows), two on a tablet, one on a phone;
   the type of work in olive */
.plc-grid.ar-hub { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 24px; margin-top: 8px; }
.plc-grid .plc-type { color: #556B2F; font-weight: 600; }

/* by type and by place, side by side on a wide screen */
.plc-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 56px; }

@media (max-width: 900px) {
    .plc-two { grid-template-columns: minmax(0, 1fr); }
    .plc-grid.ar-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .plc-shots, .plc-grid.ar-hub { grid-template-columns: minmax(0, 1fr); }
}