/* Project detail page: header, facts bar, hero, challenge/solution, results and gallery. */
.page-hero.pd-page-hero{padding-bottom:40px}
.pd-head{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:end}
.pd-head h1{font-size:clamp(52px,7vw,104px);margin:14px 0 0}
.pd-head .lead{font-size:18px;color:var(--ink-2)}

/* Facts bar: the modifier .pd-meta-cols-N (set from the number of facts) gives one column per fact. Below 1100px the
   facts run in two columns; that rule comes after the modifiers so it wins at equal specificity. */
.pd-meta{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:44px 0 40px}
.pd-meta-cols-1{grid-template-columns:repeat(1,1fr)}
.pd-meta-cols-2{grid-template-columns:repeat(2,1fr)}
.pd-meta-cols-3{grid-template-columns:repeat(3,1fr)}
.pd-meta-cols-4{grid-template-columns:repeat(4,1fr)}
.pd-meta-cols-5{grid-template-columns:repeat(5,1fr)}
.pd-meta-cols-6{grid-template-columns:repeat(6,1fr)}
.pd-meta div{padding:20px 20px 20px 0}
.pd-meta div+div{padding-left:20px;border-left:1px solid var(--line)}
.pd-meta small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.pd-meta span{font-size:14.5px;font-weight:500}
@media (max-width:1100px){
  .pd-meta{grid-template-columns:1fr 1fr}
  .pd-meta div:nth-child(2n+1){padding-left:0;border-left:0}
  .pd-meta div:nth-child(n+3){border-top:1px solid var(--line)}
}

.pd-hero .ph{height:min(640px,58vw)}
/* Without a facts bar the hero follows the header directly, with the same spacing the bar keeps */
.pd-head + .pd-hero{margin-top:44px}

.pd-cols{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.pd-cols h3{font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:-.02em;margin:10px 0 14px}
.pd-cols p{color:var(--ink-2)}
.pd-cols .checks{margin-top:18px;font-size:14px}

.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.metric{border-top:2px solid var(--accent);padding-top:20px}
.metric b{display:block;font-family:var(--display);font-weight:900;font-size:60px;letter-spacing:-.04em;line-height:1}
/* A result without a number shows a check mark that scales with the font size of .metric b */
.metric b svg{display:block;width:1em;height:1em}
.metric span{display:block;color:var(--muted);font-size:14px;margin-top:10px}

.gallery{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.gallery .ph{height:380px}
.gallery .wide{grid-column:1/-1;height:540px}
/* Gallery images keep their original format (mockups, style guides): nothing is cropped */
.gallery .ph.fit{height:auto;align-self:start}
.gallery .ph.fit img{height:auto}
.gallery figure{margin:0}
.gallery figcaption{font-size:12.5px;color:var(--muted);margin-top:10px}
.gallery figure.wide{grid-column:1/-1;height:auto}
/* Gallery videos: full width, aspect ratio kept, dark surface in light and dark theme */
.gallery video{display:block;width:100%;height:auto;max-height:80vh;background:#000}
.gallery .ph.fit.empty{min-height:220px}

.pd-nav{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pd-nav a{border:1px solid var(--line);padding:26px;border-radius:6px;display:block;background:var(--card);transition:border-color .2s}
.pd-nav a:hover{border-color:var(--accent)}
.pd-nav small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.pd-nav strong{font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:-.02em}
.pd-nav .next{text-align:right}

@media (max-width:900px){
  .pd-head,.pd-cols{grid-template-columns:1fr;gap:32px}
  .metric b{font-size:48px}
  .gallery .ph{height:280px}
  .gallery .wide{height:400px}
}
@media (max-width:600px){
  .pd-head .lead{font-size:16px}
  .metrics,.gallery,.pd-nav{grid-template-columns:1fr}
  .metric b{font-size:44px}
  .gallery .ph,.gallery .wide{height:240px}
  .pd-nav .next{text-align:left}
  .pd-meta div{padding:16px 12px 16px 0}
  .pd-meta div+div{padding-left:12px}
}