/* Peña's Landscape Services: services.css
   /services/ hub and the five service pages (templates/pages/services.html, svc.html).
   Same tokens and voice as site.css; mobile first; breakpoints 480, 560, 900, 1024, 1180.
   Shared-component fixes (crumb tap targets, the no-art FAQ split) live in site.css requests,
   not here, so every page that uses those partials matches. */

/* ===== Hub hero (no photo): crumbs on their own row, then H1 left, lede + CTA right from 1024px ===== */
.svcp-hubhero__crumbs{min-width:0}
.svcp-hubhero__crumbs .crumbs{margin:0}
.svcp-hubhero__grid{row-gap:12px}
.svcp-hubhero__side{min-width:0}
.svcp-hubhero__side .lede + .lede{margin-top:-8px}
.svcp-hubhero .hero--inner__text h1{margin-bottom:4px;text-wrap:balance}
@media (min-width:1024px){
  .svcp-hubhero__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:64px;row-gap:8px;align-items:start}
  .svcp-hubhero__crumbs{grid-column:1/-1}
  .svcp-hubhero .hero--inner__text h1{font-size:clamp(56px,5.2vw,72px);margin-bottom:0}
  .svcp-hubhero__side{padding-top:34px}
  .svcp-hubhero__side .lede:last-of-type{margin-bottom:32px}
}

/* ===== What is included + Materials card (cream band) ===== */
.svcp-inc__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:start}
.svcp-inc__list{margin:0}
.svcp-inc__list li{font-size:17px}
.svcp-mat{padding-bottom:24px}
.svcp-mat h3{margin-bottom:16px}
.svcp-mat .list--diamond{margin:0}
.svcp-mat .list--diamond li{font-size:16px;color:var(--ink)}
@media (min-width:1024px){
  .svcp-inc__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px}
  .svcp-inc__list.list--2col{grid-template-columns:minmax(0,1fr);gap:12px}
}
/* Two flowed columns from 1180px, so an odd count balances instead of leaving one row alone. */
@media (min-width:1180px){
  .svcp-inc__list.list--2col{display:block;columns:2;column-gap:40px}
  .svcp-inc__list.list--2col li{break-inside:avoid;margin:0 0 12px}
}

/* ===== How it gets built (dark): intro + detail on the left, steps + CTA on the right ===== */
.svcp-proc__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.svcp-proc__intro .head{gap:18px}
.svcp-proc__intro .lede{font-size:18px;padding-left:16px;border-left:2px solid var(--brass)}
@media (min-width:1024px){
  .svcp-proc__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:88px;align-items:start}
  .svcp-proc__intro{position:sticky;top:120px}
}

/* ===== How long it takes + Good to know ===== */
.svcp-tk__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:48px;align-items:start}
.svcp-tk__time .lede{margin:0}
.svcp-know{background:var(--white);border:1px solid var(--line);border-top:3px solid var(--brass);padding:28px 20px 10px;min-width:0}
.svcp-know h2{font-size:clamp(32px,3.6vw,44px);color:var(--green);margin:0 0 22px}
.svcp-know .eyebrow{margin-bottom:14px}
@media (max-width:559px){.svcp-know .eyebrow{display:block;letter-spacing:.16em;line-height:1.6}.svcp-know .eyebrow::before{display:none}}
.svcp-know .list--diamond li{font-size:16px;color:var(--ink)}
.svcp-know .list--diamond a{color:var(--brass-ink);font-weight:600;padding:12px 0}
@media (min-width:480px){.svcp-know{padding:34px 30px 14px}}
@media (min-width:1024px){
  .svcp-tk__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:88px}
  .svcp-know{padding:40px 44px 18px}
}

/* ===== Progress pairs sit on the cream band ===== */
.svcp-prog .pair__cap p{max-width:52ch}
/* Three-frame sets on phones: in progress + midway side by side, finished full width below,
   with smaller tags so the photos stay visible. */
@media (max-width:559px){
  .svcp-prog .pair__imgs--3{grid-template-columns:1fr 1fr}
  .svcp-prog .pair__imgs--3 figure:last-child{grid-column:1/-1}
  .svcp-prog .pair__imgs--3 .pair__tag{font-size:9px;letter-spacing:.12em;padding:4px 6px;top:8px}
}
@media (min-width:900px){
  /* A three-frame set takes the full row (svc.html lists it after the two-frame pairs). */
  .svcp-prog .pairs > .pair:has(.pair__imgs--3),
  .svcp-prog .pairs > .pair:last-child:nth-child(odd):has(.pair__imgs--3){grid-column:1/-1;justify-self:stretch;width:auto}
  .svcp-prog .pair:has(.pair__imgs--3) .pair__imgs{gap:8px}
  /* A page with a single published pair shows it large instead of at half width. */
  .svcp-prog .pairs > .pair:only-child{grid-column:1/-1;justify-self:center;width:100%;max-width:1000px}
  .svcp-prog .pairs > .pair:only-child:has(.pair__imgs--portrait){max-width:760px}
}

/* ===== Hub: badge above the service name, details list ===== */
.svcp-badge{display:inline-block;margin:0 0 10px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--brass-ink);border-bottom:1px solid var(--brass);padding-bottom:2px}
.svcp-hub{border-top:0;padding-top:calc(var(--pad) * .5)}
.svcp-details__list{margin:0;max-width:1000px}
.svcp-details__list li{font-size:17px}
.svcp-details .svc__foot{margin-top:40px}
.svcp-details{padding-bottom:0}

/* ===== Service galleries (svc.html filters out photos already shown above) =====
   Below 900px: a swipe strip of 4:5 tiles, the landing's recent-work strip.
   From 900px: --book = two portraits bookending four landscape frames on a 4-column grid
   (portraits span both rows, so the block has no holes); --even = equal 4:3 tiles in full rows. */
@media (max-width:899px){
  .svcp-photos .photos{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:68%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--brass) transparent;margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter) 10px;scroll-padding-left:var(--gutter)}
  .svcp-photos .ph,.svcp-photos .ph--portrait{grid-row:auto;scroll-snap-align:start}
  .svcp-photos .ph__img,.svcp-photos .ph--portrait .ph__img{position:static;aspect-ratio:4/5;flex:none;min-height:0}
  .svcp-photos .ph--portrait .ph__img img{position:static}
  .js .svcp-photos .photos .reveal{opacity:1;transform:none}
}
@media (min-width:560px) and (max-width:899px){.svcp-photos .photos{grid-auto-columns:38%}}
@media (min-width:900px){
  .svcp-gal--book,.svcp-gal--c4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .svcp-gal--book{grid-auto-flow:row}
  .svcp-gal--even .ph--portrait{grid-row:auto}
  .svcp-gal--even .ph--portrait .ph__img{position:static;aspect-ratio:4/3;flex:none;min-height:0}
  .svcp-gal--even .ph--portrait .ph__img img{position:static}
}
/* A lone three-frame set (new landscapes) uses the full row like the kitchens and pavers sets. */
@media (min-width:900px){.svcp-prog .pairs > .pair:only-child:has(.pair__imgs--3){max-width:none;justify-self:stretch}}