/* ═══════════════════════════════════════════════════════════
   SMEULDERS DIGITAL — pagina "Werk"

   Laadt ná style.css en gebruikt dezelfde tokens. Alleen wat deze
   pagina extra nodig heeft staat hier.

   Eén ding is hier anders dan op de rest van de site: elk project
   brengt zijn eigen kleuren mee via --p1 en --p2, gezet op het
   blok zelf. Zo toont de pagina wat ze beweert, namelijk dat drie
   sectoren er niet hetzelfde uitzien.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Hero ───────────────────────────────────────────── */
.pf-hero{
  position:relative; overflow:hidden;
  padding:clamp(8rem,16vh,11rem) 0 clamp(2.5rem,5vw,4rem);
}
.pf-hero__glow{
  position:absolute; z-index:0; pointer-events:none;
  width:min(140vw,1300px); aspect-ratio:1; left:50%; top:-46%;
  transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(245,37,31,.24), rgba(245,37,31,.05) 46%, transparent 70%);
  filter:blur(30px);
}
.pf-hero .wrap{ position:relative; z-index:2; }
.pf-hero__title{ font-size:clamp(2.6rem,7.5vw,5.4rem); margin:1.1rem 0 1.3rem; max-width:14ch; }
.pf-hero__title em{ color:var(--ember); }
.pf-hero__lead{ max-width:56ch; font-size:clamp(1.04rem,.6vw + .92rem,1.24rem); color:var(--ash-2); }

/* ── 2. Eén project ────────────────────────────────────── */
.pf-werk{ display:flex; flex-direction:column; gap:clamp(4rem,9vw,7rem); }

.pf-project{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,5vw,4rem); align-items:center;
}
/* Om en om spiegelen, anders leest de pagina als een lijst
   in plaats van als drie afzonderlijke projecten. */
.pf-project:nth-child(even) .pf-beeld{ order:2; }

/* ── 3. Het beeld ──────────────────────────────────────── */
.pf-beeld{ position:relative; }
.pf-beeld__glans{
  position:absolute; inset:-8% -6%; z-index:-1; pointer-events:none;
  background:radial-gradient(55% 50% at 50% 45%, var(--p1), transparent 72%);
  opacity:.16; filter:blur(30px);
}
.pf-venster{
  border:1px solid var(--line-2); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.95);
  background:var(--ink-2);
}
.pf-venster__balk{
  display:flex; align-items:center; gap:.45rem;
  padding:.75rem 1rem; border-bottom:1px solid var(--line);
  background:rgba(10,9,8,.6);
}
.pf-venster__stip{ width:8px; height:8px; border-radius:50%; background:var(--line-2); flex-shrink:0; }
.pf-venster__adres{
  margin-left:.55rem; font-size:.74rem; color:var(--ash-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pf-venster__beeld{ display:block; width:100%; height:auto; }

/* Nog geen schermafbeelding? Dan tonen we het palet van het project.
   Dat is eerlijker dan een grijs vlak met "afbeelding volgt", en het
   laat meteen zien hoe verschillend die drie zijn. */
/* Zelfde verhouding als de schermafbeeldingen (1200x690), zodat een project
   zonder foto even hoog staat als een project met foto. */
.pf-staal{ aspect-ratio:120/69; background:var(--p2); display:flex; flex-direction:column; }
.pf-staal__kop{
  padding:clamp(1.4rem,3vw,2.2rem) clamp(1.4rem,3vw,2.2rem) 0;
  flex:1; display:flex; flex-direction:column; justify-content:center; gap:.7rem;
}
.pf-staal__merk{
  font-family:var(--f-display); font-weight:800; letter-spacing:-.03em; line-height:1;
  font-size:clamp(1.5rem,3.4vw,2.3rem); color:var(--p1);
}
.pf-staal__regel{ height:7px; border-radius:4px; background:var(--p1); opacity:.22; }
.pf-staal__regel--kort{ width:52%; }
.pf-staal__regel--half{ width:74%; }
.pf-staal__voet{ display:flex; gap:0; height:26%; }
.pf-staal__voet span{ flex:1; }

/* ── 4. De tekst ernaast ───────────────────────────────── */
.pf-tekst__top{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-bottom:.9rem; }
.pf-sector{
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ash-3);
}
.pf-status{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.28rem .7rem; border-radius:999px;
  border:1px solid var(--line-2); background:var(--glass);
  font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ash-3);
}
.pf-status--live{ border-color:rgba(94,212,154,.4); color:#5ed49a; }
/* Amber voor "In de maak": geen groen (dat is live) en geen rood (dat leest
   als fout). Zelfde tint als .etiket in style.css. */
.pf-status--maak{ border-color:rgba(240,181,66,.4); color:#f0b542; }
.pf-status__stip{ width:5px; height:5px; border-radius:50%; background:currentColor; }

.pf-tekst h2{ font-size:clamp(1.8rem,3.6vw,2.7rem); margin-bottom:.8rem; }
.pf-tekst__lead{ font-size:1.03rem; color:var(--ash-2); max-width:46ch; }

.pf-punten{ margin:1.6rem 0 1.7rem; display:flex; flex-direction:column; gap:.6rem; }
.pf-punten li{ position:relative; padding-left:1.5rem; font-size:.92rem; color:var(--ash-2); }
.pf-punten li::before{
  content:""; position:absolute; left:0; top:.62em; width:9px; height:2px;
  background:var(--p1); border-radius:2px;
}

.pf-palet{ display:flex; align-items:center; gap:.55rem; margin-bottom:1.6rem; }
.pf-palet__lbl{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ash-3); margin-right:.2rem; }
.pf-palet i{
  width:22px; height:22px; border-radius:50%;
  border:1px solid rgba(246,241,234,.22);
}

.pf-acties{ display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; }
.pf-nog-niet{ font-size:.86rem; color:var(--ash-3); }

/* ── 5. Slot ───────────────────────────────────────────── */
.pf-slot{ position:relative; overflow:hidden; text-align:center; }
.pf-slot__glow{
  position:absolute; z-index:0; pointer-events:none;
  width:min(120vw,1000px); aspect-ratio:1; left:50%; bottom:-58%;
  transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(245,37,31,.22), transparent 68%);
  filter:blur(30px);
}
.pf-slot .wrap{ position:relative; z-index:2; }
.pf-slot h2{ font-size:clamp(1.9rem,4.6vw,3.2rem); margin-bottom:1rem; }
.pf-slot h2 em{ color:var(--ember); }
.pf-slot p{ max-width:48ch; margin-inline:auto; }
.pf-slot__acties{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; margin-top:2rem; }

/* ── 6. Responsive ─────────────────────────────────────── */
@media (max-width:900px){
  .pf-project{ grid-template-columns:1fr; gap:2rem; }
  /* Spiegeling uit: op één kolom hoort het beeld altijd boven de
     tekst te staan, anders begint een project met een opsomming. */
  .pf-project:nth-child(even) .pf-beeld{ order:0; }
}
@media (max-width:520px){
  .pf-hero__acties .btn,.pf-slot__acties .btn{ width:100%; }
  .pf-acties .btn{ width:100%; }
}