/* Price lines and example projects on Modern Trade sites (user, 2026-10-10). Only on sites with "projects_page": true.
   Same classes as the Kirkland pilot (shared/limewash-projects.src.css), styled in the Modern Trade look of shared/batch2.css. */

/* Homepage price table: one line per job size; details hold what is included. */
.prices{padding-block:78px 30px}
.prices>h2{max-width:830px;margin-bottom:16px}
.p-lead{max-width:830px;margin:0 0 34px}
.p-lead p{font-size:15px}
.p-table{border-top:2px solid var(--ink)}
.p-row{display:grid;grid-template-columns:minmax(200px,1fr) minmax(0,2fr);gap:4px 48px;padding:24px 0 16px;border-bottom:1px solid var(--line)}
.p-service{margin:0;padding-top:5px;font:600 19px/1.3 Manrope,sans-serif;letter-spacing:-.025em;color:var(--ink)}
.p-lines{list-style:none;margin:0;padding:0}
.p-lines li{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:7px 0;border-bottom:1px dotted var(--line)}
.p-lines li:last-child{border-bottom:0}
.p-job{font-size:15px;line-height:1.55;color:var(--muted)}
.p-amount{font:600 17px/1.3 Manrope,sans-serif;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.p-more-info{grid-column:2}
.p-more-info summary{display:inline-flex;align-items:center;gap:10px;padding:10px 0 4px;cursor:pointer;list-style:none;font-size:13px;font-weight:600;color:var(--accent)}
.p-more-info summary::-webkit-details-marker{display:none}
.p-chev{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.p-more-info[open] .p-chev{transform:translateY(2px) rotate(225deg)}
.p-body{padding:10px 0 8px}
.p-body p{font-size:14px}
.p-actions,.pj-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin:0}
.p-more{display:flex;flex-wrap:wrap;gap:8px 22px}
.p-more a,.s-price-links a{font-size:13px;font-weight:600;color:var(--accent)}
.p-note{max-width:830px;margin:22px 0 0;font-size:13px;line-height:1.7}

/* Example project card (homepage after the highlights, city pages after the hero). */
.featured{padding-block:70px 10px}
.featured>h2{max-width:830px;margin-bottom:28px}
.pj-card{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);background:var(--soft);border-radius:3px;overflow:hidden}
.pj-media{min-height:100%;overflow:hidden;background:var(--line)}
.pj-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.pj-copy{padding:clamp(24px,3.2vw,44px)}
.pj-copy h3{font-size:24px;margin-bottom:12px}
.pj-tag{display:inline-block;margin:0 0 20px;padding:4px 10px;border:1px solid var(--accent);border-radius:2px;font-size:10px;font-weight:600;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.pj-facts{display:grid;margin:0 0 22px;border-top:1px solid var(--line)}
.pj-facts div{display:grid;grid-template-columns:minmax(110px,32%) 1fr;gap:16px;padding:9px 0;border-bottom:1px solid var(--line)}
.pj-facts dt{font-size:11px;font-weight:600;line-height:1.8;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.pj-facts dd{margin:0;font-size:14px;line-height:1.6;color:var(--muted)}
.pj-copy>p{font-size:14px}
.pj-links{margin:6px 0 0}

/* Projects page. */
.pj-intro{padding-block:65px 30px;max-width:900px}
.pj-intro h1{font-size:clamp(35px,3.5vw,53px)}
.pj-intro .intro{font-size:15px;margin-top:24px}
.pj-index ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 28px;margin:0;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pj-index a{font-size:14px;font-weight:600;text-decoration:none}
.pj-index a:hover{text-decoration:underline}
.pj-project{padding-top:clamp(60px,7vw,90px);scroll-margin-top:90px}
.pj-head{margin-bottom:22px}
.pj-head h2{max-width:900px;margin-bottom:12px}
.pj-head .pj-tag{margin:0}
.pj-project .pj-media img{aspect-ratio:auto}
.pj-project .pj-copy{display:flex;align-items:center}
.pj-project .pj-facts{margin:0;width:100%}
.pj-detail{display:grid;grid-template-columns:1fr 1fr;gap:0 64px;margin-top:36px}
.pj-detail h3{font-size:19px;border-top:1px solid var(--line);padding-top:20px;margin:6px 0 12px}
.pj-detail p{font-size:15px}
.pj-steps{list-style:none;margin:0 0 1em;padding:0;display:grid;gap:10px}
.pj-steps li,.pj-notes li{font-size:15px;line-height:1.7;color:var(--muted)}
.pj-when{display:block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.pj-notes{list-style:none;margin:0 0 1em;padding:0;display:grid;gap:8px}
.pj-notes li{position:relative;padding-left:18px}
.pj-notes li:before{content:'';position:absolute;left:0;top:.7em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.pj-actions{margin-top:24px}
.inner-page .pj-project:last-of-type{padding-bottom:20px}

/* Service price lines under the H1. */
.s-price{max-width:620px;margin:22px 0 4px;padding:14px 0 12px;border-top:2px solid var(--ink);border-bottom:1px solid var(--line)}
.s-price-label{margin:0 0 4px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.s-price-lines{margin:0 0 8px}
.s-price-lines .p-job{font-size:14px}
.s-price-lines .p-amount{font-size:16px}
.s-price-links{margin:0;display:flex;flex-wrap:wrap;gap:4px 22px;font-size:13px} /* links are separate flex items, no "·" text that can dangle on a wrap */

/* Architectural Editorial sites use serif display headings. */
.direction-editorial .pj-head h2,.direction-editorial .pj-intro h1{font-family:Georgia,serif;font-weight:400;letter-spacing:-.045em}
.direction-editorial .pj-card,.direction-editorial .pj-media{border-radius:0}

@media(max-width:900px){
 .pj-card{grid-template-columns:1fr}
 .pj-media img,.pj-project .pj-media img{aspect-ratio:3/2}
 .pj-detail{grid-template-columns:1fr}
}
@media(max-width:760px){
 .p-row{grid-template-columns:1fr;padding:20px 0 12px}
 .p-more-info{grid-column:1}
 .p-lines li{flex-direction:column;align-items:flex-start;gap:0}
 .pj-facts div{grid-template-columns:1fr;gap:2px}
 .p-actions,.pj-actions{flex-direction:column;align-items:flex-start}
 .prices,.featured{padding-top:56px}
 .pj-intro{padding-top:40px}
 .pj-copy h3{font-size:21px}
}
