/* Projectdetail (single-project.php) */
.tpl-project {
  .label { font-size: 0.75rem; letter-spacing: 0.16em; font-weight: 400; margin-bottom: 24px; }

  .hero { display: flex; flex-direction: column; justify-content: flex-end; min-height: min(clamp(600px, 72.2vw, 1040px), 72svh); padding: 120px var(--gutter) calc(var(--diag) + 24px); }
  .hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--coal); }
  .hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--ink) 90%, transparent) 0%, color-mix(in srgb, var(--ink) 50%, transparent) 55%, color-mix(in srgb, var(--ink) 15%, transparent) 100%); pointer-events: none; }
  .hero-text { position: relative; z-index: 1; }
  .crumbs { display: flex; gap: 16px; align-items: center; font-size: 0.75rem; letter-spacing: 0.16em; margin-bottom: 32px; }
  .wedge { width: 40px; height: 12px; background: var(--accent); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
  .crumb-root { color: var(--mute); }
  h1 { font-size: clamp(34px, 7.22vw, 104px); }

  .about { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(40px, 6.67vw, 96px); align-items: start; }
  .about .label { color: var(--mute-ink); }
  .prose { font-size: clamp(17px, 1.67vw, 24px); line-height: 1.5; max-width: 34em; text-wrap: pretty; }
  .prose :is(p, ul) { margin: 0; }
  .prose * + :is(p, ul) { margin-top: 1em; }
  .prose ul { padding-left: 1.2em; }
  .prose li + li { margin-top: 0.25em; }
  .prose strong { font-weight: 600; }
  .prose a { text-decoration: underline; text-underline-offset: 0.15em; }

  .specs { margin: 0; letter-spacing: 0.1em; border-bottom: 2px solid var(--ink); }
  .specs > div { display: flex; justify-content: space-between; gap: 24px; padding: 16px 0; border-top: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); }
  .specs > div:first-child { border-top: 2px solid var(--ink); }
  .specs dt { color: var(--mute-ink); }
  .specs dd { margin: 0; text-align: right; }
  .specs-branche { color: var(--accent); font-weight: 500; }

  .on-ink .label { color: var(--mute); }
  .gallery-title { font-size: clamp(34px, 4.44vw, 64px); margin-bottom: 48px; }
  .gallery { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: clamp(250px, 32.8vw, 472px); gap: 24px; }
  .shot { container-type: inline-size; }
  .shot:nth-child(6n + 2), .shot:nth-child(6n + 3), .shot:nth-child(6n) { grid-column: span 2; }
  @media (min-width: 768px) {
    .shot-clip { transition: clip-path 0.45s var(--ease); }
    .shot:hover .shot-clip { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
    .shot:hover .duotone img { filter: none; }
    .shot:hover .duotone::after { opacity: 0; }
  }
  .shot-clip { position: relative; height: 100%; clip-path: polygon(0 21.26cqw, 100% 0, 100% calc(100% - 21.26cqw), 0 100%); }
  .shot-clip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--coal); }

  .siblings { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--paper); }
  .gallery + .siblings { margin-top: 120px; }
  .siblings a { display: flex; flex-direction: column; gap: 14px; padding: 32px 32px 0 0; text-decoration: none; }
  .siblings .sibling-next { align-items: flex-end; text-align: right; padding: 32px 0 0 32px; border-left: 1px solid rgb(242 240 234 / 0.16); }
  .sibling-label { font-size: 0.75rem; color: var(--mute); }
  .sibling-title { font-size: clamp(16px, 2.5vw, 36px); line-height: 1; }
  .sibling-branche { font-size: 0.6875rem; letter-spacing: 0.14em; color: var(--accent); }
  .siblings a:is(:hover, :focus-visible) .sibling-title { color: var(--accent); }

  @media (max-width: 767px) {
    .label { font-size: 0.6875rem; margin-bottom: 16px; }
    .crumbs { gap: 10px; font-size: 0.6875rem; margin-bottom: 20px; }
    .wedge { width: 28px; height: 9px; }
    .about { grid-template-columns: 1fr; }
    .prose { line-height: 1.65; }
    .specs { font-size: 0.75rem; }
    .specs > div { padding: 14px 0; }
    .gallery-title { margin-bottom: 28px; }
    .gallery { display: flex; flex-direction: column; }
    .shot { aspect-ratio: 350 / 300; }
    .shot + .shot { margin-top: -15.4vw; }
    .gallery + .siblings { margin-top: 56px; }
    .siblings a { gap: 8px; padding: 20px 12px 0 0; }
    .siblings .sibling-next { padding: 20px 0 0 12px; }
    .sibling-label, .sibling-branche { font-size: 0.625rem; }
  }
}