/* ========================================
   OKPW — Borough pages (/areas/ and /areas/<borough>), 20 Oct 2026
   ========================================
   Built by scripts/build_area_pages.py on the service pages' shell (svx). White ground, olive and light green
   accents only; everything else comes from service-pages.css, service-wide.css and project-page.css. */

/* the top: the words on the left, the borough's own project (or the map) on the right */
.ar-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.ar-hero { margin: 0; }
.ar-hero img { display: block; width: 100%; height: auto; border-radius: 14px; }
.ar-hero figcaption { margin-top: 8px; font-size: .85rem; color: #6E6E68; }
.ar-hero--map img { border-radius: 0; }
.ar-page picture { display: contents; }
.ar-page picture > source { display: none; }

.ar-sec { margin: 0 0 56px; }
.ar-p { color: #555; font-size: var(--t-body, 1rem); line-height: 1.7; max-width: 680px; margin: 0 0 14px; }
.ar-p a { color: #556B2F; text-decoration: underline; text-underline-offset: 3px; }
.ar-small { font-size: .92rem; }
.ar-aside-lead { color: #555; line-height: 1.6; margin: 10px 0 16px; }
.svx-aside .svp-cta-alt { display: inline-block; margin: 12px 0 18px; }
.svx-areas a { color: #556B2F; font-weight: 600; }

/* a project: its picture and what we did */
.ar-proj { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start;
           padding: 24px 0; border-top: 1px solid #ECEAE3; }
.ar-proj:first-of-type { border-top: 0; padding-top: 8px; }
.ar-proj-pic img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.ar-proj h3 { font-family: 'Sora', sans-serif; font-size: var(--t-h3, 1.3rem); margin: 6px 0 4px; }
.ar-proj h3 a { color: #1A1A1A; }
.ar-proj h3 a:hover { color: #556B2F; }
.ar-proj-type { color: #556B2F; font-weight: 600; margin: 0 0 10px; }
.ar-proj-text > p { color: #555; line-height: 1.65; margin: 0 0 12px; }
.ar-proj .pp-facts { margin: 6px 0 16px; }
.ar-proj-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.ar-case { color: #556B2F; font-weight: 600; }

/* what we build, and the other boroughs: plain link lists */
.ar-svc, .ar-near { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 28px; }
.ar-svc a, .ar-near a { display: flex; justify-content: space-between; align-items: center; min-height: 48px;
                        border-top: 1px solid #ECEAE3; color: #1A1A1A; font-weight: 500; }
.ar-svc a:hover, .ar-near a:hover { color: #556B2F; }
.ar-svc b { color: #556B2F; font-weight: 400; }
.ar-near { margin-bottom: 14px; }

/* the hub: one card per borough */
.ar-hub { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.ar-hub-card a { display: flex; flex-direction: column; gap: 4px; color: #1A1A1A; }
.ar-hub-card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; margin-bottom: 8px; background: #F4F6EF; }
.ar-hub-name { font: 600 1.15rem 'Sora', sans-serif; }
.ar-hub-sub { font-size: .9rem; color: #6E6E68; }
.ar-hub-card a:hover .ar-hub-name { color: #556B2F; }

@media (max-width: 900px) {
    .ar-top { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .ar-proj { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}