/* Project detail - /projecten/<slug>/.
 *
 * Ported from Work/Website1/components/sections/ProjectDetail.module.css with a
 * `pdet-` prefix. Never loads together with projecten.css, but the prefixes
 * keep that safe if it ever does.
 *
 * Regenerate rather than hand-edit:
 *
 *   node tools/port-css.mjs \
 *     ../Website1/components/sections/ProjectDetail.module.css pdet- \
 *     > themes/inkaart/assets/css/project.css
 */

.pdet-page {
  --accent: var(--green-deep);
  --accent-soft: #edf5e7;
  background: var(--paper);
}
.pdet-page-dataverzameling { --accent: var(--forest); --accent-soft: #edf5e7; }
.pdet-page-gis { --accent: var(--lime); --accent-soft: #f0f6e9; }
.pdet-page-monitoring-sensoren { --accent: var(--blue); --accent-soft: #edf4fc; }
.pdet-page-databeheer { --accent: var(--orange); --accent-soft: #fff3e8; }

.pdet-hero { margin: 0 auto; max-width: 1390px; padding: 1.2rem 4.5vw clamp(3.5rem, 7vw, 7rem); }
.pdet-breadcrumbs { align-items: center; color: var(--ink-muted); display: flex; flex-wrap: wrap; font-size: .78rem; gap: .55rem; }
.pdet-breadcrumbs a:hover { color: var(--accent); }
.pdet-breadcrumbs span:last-child { color: var(--ink); font-weight: 650; }
.pdet-heroGrid { align-items: center; display: grid; gap: clamp(2.5rem, 7vw, 7rem); grid-template-columns: minmax(0, 1fr) minmax(320px, .62fr); margin-top: clamp(2.5rem, 5vw, 5rem); }
.pdet-heroCopy { max-width: 800px; }
.pdet-eyebrow,
.pdet-kicker { color: var(--accent); font-size: .75rem; font-weight: 780; letter-spacing: .12em; margin: 0 0 .8rem; text-transform: uppercase; }
.pdet-hero h1 { font-size: clamp(2.75rem, 6vw, 5.8rem); font-weight: 530; letter-spacing: -.063em; line-height: .94; margin: 0; }
.pdet-lead { color: var(--ink-muted); font-size: clamp(1.05rem, 1.45vw, 1.22rem); line-height: 1.7; margin: 1.5rem 0 0; max-width: 760px; }
.pdet-meta { align-items: center; display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.5rem; }
.pdet-location,
.pdet-subcategory { align-items: center; border-radius: 999px; display: inline-flex; font-size: .8rem; font-weight: 700; min-height: 2rem; padding: .48rem .75rem; }
.pdet-location { background: var(--accent-soft); gap: .45rem; }
.pdet-subcategory { background: var(--accent); color: white; }
.pdet-page-gis .pdet-subcategory,
.pdet-page-databeheer .pdet-subcategory { color: var(--ink); }
.pdet-location svg { color: var(--accent); height: 16px; width: 16px; }
.pdet-figure { aspect-ratio: 4 / 5; border-radius: var(--radius); margin: 0; overflow: hidden; position: relative; }
.pdet-figure::after { background: linear-gradient(180deg, transparent 55%, rgba(8, 24, 17, .25)); content: ''; inset: 0; position: absolute; }
.pdet-figure img { height: 100%; object-fit: cover; width: 100%; }

.pdet-content { border-top: 1px solid var(--line); margin: 0 auto; max-width: 1180px; padding: clamp(3.5rem, 7vw, 7rem) 4.5vw; }
.pdet-facts { display: grid; gap: 1px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: clamp(3.5rem, 7vw, 6rem); }
.pdet-facts div { background: var(--accent-soft); display: grid; gap: .35rem; padding: 1.3rem; }
.pdet-facts div:first-child { border-radius: .8rem 0 0 .8rem; }
.pdet-facts div:last-child { border-radius: 0 .8rem .8rem 0; }
.pdet-facts span { color: var(--accent); font-size: .72rem; font-weight: 760; letter-spacing: .08em; text-transform: uppercase; }
.pdet-facts strong { font-size: .95rem; font-weight: 650; }
.pdet-content section { max-width: 760px; }
.pdet-content h2 { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 550; letter-spacing: -.05em; line-height: 1.03; margin: 0; }
.pdet-content section > p:last-child { color: var(--ink-muted); font-size: 1.02rem; line-height: 1.8; margin: 1.5rem 0 0; }
.pdet-actions { border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; margin-top: clamp(3.5rem, 7vw, 6rem); padding-top: 1.5rem; }
.pdet-actions a { align-items: center; color: var(--green-deep); display: inline-flex; font-size: .9rem; font-weight: 700; gap: .55rem; }
.pdet-actions svg { height: 17px; width: 17px; }

.pdet-cta { align-items: center; background: var(--accent-soft); display: grid; gap: 2.5rem; grid-template-columns: 1fr auto; padding: clamp(3.5rem, 7vw, 6.5rem) max(4.5vw, calc((100vw - 1180px) / 2)); }
.pdet-cta > div { max-width: 750px; }
.pdet-cta h2 { font-size: clamp(2rem, 4.3vw, 3.9rem); font-weight: 550; letter-spacing: -.052em; line-height: 1; margin: 0; }
.pdet-cta div > p:last-child { color: var(--ink-muted); line-height: 1.65; margin: 1.1rem 0 0; }
.pdet-cta > a { align-items: center; background: var(--ink); border-radius: 999px; color: white; display: inline-flex; font-size: .9rem; font-weight: 680; gap: .8rem; min-height: 52px; padding: .8rem 1.25rem; }
.pdet-cta > a svg { height: 18px; width: 18px; }

@media (max-width: 760px) {
  .pdet-hero { padding-left: 1rem; padding-right: 1rem; }
  .pdet-heroGrid { display: flex; flex-direction: column; }
  .pdet-hero h1 { font-size: clamp(2.65rem, 14vw, 4.4rem); }
  .pdet-figure { aspect-ratio: 1.25; width: 100%; }
  .pdet-content { padding-left: 1rem; padding-right: 1rem; }
  .pdet-facts { grid-template-columns: 1fr; }
  .pdet-facts div:first-child { border-radius: .8rem .8rem 0 0; }
  .pdet-facts div:last-child { border-radius: 0 0 .8rem .8rem; }
  .pdet-actions { align-items: flex-start; flex-direction: column; }
  .pdet-cta { align-items: start; grid-template-columns: 1fr; padding-left: 1rem; padding-right: 1rem; }
  .pdet-cta > a { justify-content: center; width: 100%; }
}