/* cowork.grip-op-ai.nl

   Twee pagina's. De voorpagina is één knop en vier tegels, groot genoeg om
   op een telefoon in de zaal meteen raak te tikken. Klik je een tegel aan,
   dan kom je op de pagina van die opdracht: eerst de vier vragen, daarna
   het stappenplan. */

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;padding:0 clamp(20px,4vw,48px) 72px;
  background:var(--vlak-pagina);color:var(--tekst-body);
  font-family:var(--font);font-size:17px;line-height:var(--regel-body);
}
.hero,.mega,main,.voet,.terug,#opdracht{max-width:1080px;margin-left:auto;margin-right:auto}

/* ═══ voorpagina ════════════════════════════════════════════════════════ */

.hero{padding:clamp(48px,8vh,96px) 0 clamp(28px,4vh,44px)}
.hero__merk{
  margin:0 0 18px;font-size:13px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tekst-vaag);
}
.hero h1{
  margin:0;font-size:clamp(40px,8vw,86px);font-weight:var(--licht);
  line-height:1;letter-spacing:var(--sprong-display);color:var(--tekst-kop);
}

/* ---- de grote knop ---- */

.mega{
  display:flex;align-items:center;gap:clamp(20px,3vw,40px);
  width:100%;padding:clamp(24px,3.4vw,40px) clamp(24px,3.4vw,44px);
  background:var(--geel-500);color:var(--tekst-op-accent);
  text-decoration:none;border:0;cursor:pointer;font:inherit;text-align:left;
  --afschuining:var(--afschuining-l);clip-path:var(--knip-rb);
  transition:transform 160ms var(--ease-standaard,ease),background 160ms ease;
}
.mega:hover{background:#ffd60a;transform:translateY(-2px)}
.mega:active{transform:translateY(0)}
.mega__tekst{flex:1;min-width:0;display:block}
.mega__tekst b{
  display:block;font-size:clamp(22px,3.4vw,38px);font-weight:var(--middel);
  line-height:1.1;letter-spacing:-.01em;
}
.mega__tekst em{
  display:block;margin-top:6px;font-style:normal;
  font-size:clamp(13px,1.4vw,17px);opacity:.68;
}
.mega__pijl{flex:none;width:clamp(34px,4.4vw,58px);height:auto}
.mega__pijl path{
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
.mega--knop{margin-top:44px}

/* ---- de vier tegels ---- */

.tegels__kop{
  margin:clamp(56px,8vh,96px) 0 20px;font-size:clamp(20px,2.4vw,28px);
  font-weight:var(--licht);color:var(--tekst-kop);
}
.tegels{display:grid;gap:clamp(14px,1.6vw,22px);grid-template-columns:repeat(2,minmax(0,1fr))}

.tegel{
  position:relative;display:block;overflow:hidden;text-decoration:none;
  aspect-ratio:1/.72;min-height:230px;
  background:var(--ink-900);color:#fff;
  --afschuining:var(--afschuining-l);clip-path:var(--knip-rb);
  transition:transform 200ms var(--ease-standaard,ease);
}
.tegel:hover{transform:translateY(-3px)}
.tegel:focus-visible{outline:3px solid var(--geel-500);outline-offset:3px}
.tegel__facet{position:absolute;inset:0;width:100%;height:100%}

/* een donkere sluier onderin, zodat de tekst altijd leesbaar is */
.tegel::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(0,8,20,.86) 0%, rgba(0,8,20,.5) 42%, rgba(0,8,20,0) 78%);
}

.tegel__nr{
  position:absolute;left:0;top:0;z-index:2;
  background:var(--geel-500);color:var(--tekst-op-accent);
  padding:6px 14px;font-family:var(--font-mono);
  font-size:14px;letter-spacing:.16em;
}
.tegel__ico{
  position:absolute;z-index:2;right:clamp(18px,2.4vw,30px);top:clamp(18px,2.4vw,30px);
  width:clamp(44px,5vw,74px);height:auto;
}
.tegel__ico path{
  fill:none;stroke:var(--geel-500);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 2px 8px rgba(0,8,20,.6));
}
.tegel__tekst{
  position:absolute;z-index:2;left:clamp(20px,2.6vw,34px);right:clamp(70px,7vw,110px);
  bottom:clamp(20px,2.6vw,32px);display:block;
}
.tegel__tekst b{
  display:block;font-size:clamp(22px,2.8vw,34px);font-weight:var(--middel);
  line-height:1.08;letter-spacing:-.01em;
}
.tegel__tekst em{
  display:block;margin-top:8px;font-style:normal;
  font-size:clamp(14px,1.4vw,17px);color:var(--ink-200);max-width:34ch;
}
.tegel__pijl{
  position:absolute;z-index:2;right:clamp(20px,2.6vw,34px);bottom:clamp(20px,2.6vw,32px);
  width:46px;height:46px;display:grid;place-items:center;
  background:var(--geel-500);
  transition:translate 200ms var(--ease-standaard,ease);
}
.tegel:hover .tegel__pijl{translate:5px 0}
.tegel__pijl svg{width:24px;height:24px}
.tegel__pijl path{
  fill:none;stroke:var(--tekst-op-accent);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}

.tegel--leeg{
  background:none;border:1px dashed var(--lijn-haarlijn);clip-path:none;
  color:var(--tekst-vaag);
}
.tegel--leeg::after{display:none}
.tegel--leeg .tegel__nr{background:var(--ink-100);color:var(--tekst-vaag)}
.tegel--leeg .tegel__ico path{stroke:var(--ink-300);filter:none}
.tegel--leeg .tegel__tekst b{color:var(--tekst-vaag)}
.tegel--leeg .tegel__tekst em{color:var(--tekst-vaag)}

/* ═══ opdrachtpagina ════════════════════════════════════════════════════ */

.terug{
  display:inline-flex;align-items:center;gap:10px;
  margin:32px auto 0;padding:8px 0;width:100%;
  color:var(--tekst-vaag);text-decoration:none;font-size:15px;
}
.terug:hover{color:var(--tekst-kop)}
.terug svg{width:18px;height:18px}
.terug path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.opdrachtkop{padding:clamp(24px,4vh,48px) 0 0;max-width:56ch}
.opdrachtkop__nr{
  display:inline-block;background:var(--geel-500);color:var(--tekst-op-accent);
  padding:5px 13px;font-family:var(--font-mono);font-size:14px;letter-spacing:.16em;
}
.opdrachtkop__ico{display:block;width:clamp(52px,6vw,78px);height:auto;margin:24px 0 18px}
.opdrachtkop__ico path{
  fill:none;stroke:var(--ink-800);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.opdrachtkop h1{
  margin:0;font-size:clamp(34px,6vw,64px);font-weight:var(--licht);
  line-height:1.02;letter-spacing:var(--sprong-kop);color:var(--tekst-kop);
}
.opdrachtkop__regel{margin:16px 0 0;font-size:clamp(17px,1.8vw,21px);color:var(--tekst-gedempt)}

.voorbeelden{margin:28px 0 0}
.voorbeelden__kop{
  margin:0 0 10px;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tekst-vaag);
}
.voorbeelden ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.voorbeelden li{
  padding-left:14px;border-left:3px solid var(--geel-500);color:var(--tekst-kop);
}

/* ---- de stukken van de pagina ---- */

.stuk{padding:clamp(44px,7vh,80px) 0;border-top:1px solid var(--lijn-haarlijn);margin-top:clamp(44px,7vh,80px)}
.stuk--slot{padding-bottom:0}
.stuk__nr{
  margin:0 0 8px;font-family:var(--font-mono);font-size:13px;
  letter-spacing:.16em;color:var(--tekst-vaag);text-transform:uppercase;
}
.stuk h2{
  margin:0;font-size:clamp(26px,3.6vw,40px);font-weight:var(--licht);
  line-height:1.08;color:var(--tekst-kop);
}
.stuk__lead{margin:12px 0 0;max-width:52ch;color:var(--tekst-gedempt)}

/* ---- de vier vragen ---- */

.vragen{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:32px}
.vraagblok{
  padding:clamp(20px,2.4vw,30px);background:var(--vlak-verdiept);
  --afschuining:var(--afschuining-m);clip-path:var(--knip-rb);
}
.vraagblok__kop{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.vraagblok__ico{flex:none;width:34px;height:auto}
.vraagblok__ico path{
  fill:none;stroke:var(--ink-800);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.vraagblok__nr{font-family:var(--font-mono);font-size:13px;letter-spacing:.14em;color:var(--tekst-vaag)}
.vraagblok__vraag{
  flex:1 1 100%;font-size:22px;font-weight:var(--middel);
  line-height:1.15;color:var(--tekst-kop);
}
.vraagblok textarea{background:var(--vlak-pagina)}

/* ---- het stappenplan ---- */

.stappen{margin:32px 0 0;padding:0;list-style:none}
.stappen li{border-top:1px solid var(--lijn-haarlijn)}
.stappen li:last-child{border-bottom:1px solid var(--lijn-haarlijn)}
.stappen label{
  display:flex;align-items:center;gap:18px;padding:18px 4px;cursor:pointer;
}
.stappen label:hover{background:var(--vlak-verdiept)}
.stappen input{position:absolute;opacity:0;pointer-events:none}
.stappen__bol{
  flex:none;width:40px;height:40px;display:grid;place-items:center;
  border:2px solid var(--ink-200);border-radius:50%;
  font-family:var(--font-mono);font-size:15px;color:var(--tekst-vaag);
  transition:background 160ms ease,border-color 160ms ease,color 160ms ease;
}
.stappen input:checked + .stappen__bol{
  background:var(--geel-500);border-color:var(--geel-500);color:var(--tekst-op-accent);
}
.stappen input:focus-visible + .stappen__bol{outline:2px solid var(--geel-500);outline-offset:3px}
.stappen__tekst{font-size:clamp(17px,1.8vw,21px);line-height:1.3;color:var(--tekst-kop)}
.stappen input:checked ~ .stappen__tekst{color:var(--tekst-vaag)}
.stappen em{
  font-style:normal;background:var(--geel-100);color:var(--tekst-op-accent);
  padding:1px 7px;font-size:14px;
}

/* ---- velden ---- */

label{display:block}
.veld{margin:18px 0}
.veld--groot{margin:28px 0 0}
.veld > span{display:block;margin-bottom:7px;font-weight:var(--middel);color:var(--tekst-kop)}
.veld--groot > span{font-size:19px}
input[type=text],textarea{
  width:100%;font:inherit;color:var(--tekst-kop);
  padding:11px 14px;background:var(--vlak-verdiept);
  border:0;border-bottom:2px solid var(--ink-200);
  resize:none;overflow:hidden;
}
input[type=text]:focus,textarea:focus{
  outline:0;border-bottom-color:var(--geel-500);background:var(--vlak-pagina);
}
::placeholder{color:var(--tekst-vaag)}

.leegmelding{padding:96px 0}
.leegmelding h1{font-weight:var(--licht);color:var(--tekst-kop)}

/* ---- voet ---- */

.voet{
  max-width:1080px;margin:clamp(56px,8vh,96px) auto 0;padding-top:28px;
  border-top:1px solid var(--lijn-haarlijn);color:var(--tekst-vaag);font-size:14px;
}
.voet p{margin:0 0 4px}
.voet a{color:inherit}
.voet__klein{font-size:13px}

/* ---- op een telefoon ---- */

@media (max-width:720px){
  .tegels,.vragen{grid-template-columns:minmax(0,1fr)}
  .tegel{aspect-ratio:auto;min-height:0}
  .tegel__tekst{position:static;padding:96px 20px 20px;right:auto}
  .tegel__pijl{display:none}
  .mega{gap:16px}
}


/* ═══ op papier, oftewel: opslaan als pdf ════════════════════════════════
   De knop opent het afdrukvenster; daar kies je "Opslaan als pdf". Vakken
   worden lijnen, kleur gaat eruit, en niets valt midden in een blok af. */

@media print{
  @page{margin:16mm 14mm}
  body{padding:0;font-size:10.5pt;color:#000}
  .terug,.mega,.voet__klein{display:none}
  .voet{margin-top:24px;padding-top:10px;border-color:#bbb}

  .opdrachtkop{padding:0;max-width:none}
  .opdrachtkop h1{font-size:26pt}
  .opdrachtkop__ico{display:none}
  .opdrachtkop__nr{background:none;color:#666;padding:0}

  .stuk{margin-top:18pt;padding:14pt 0 0;border-top:1px solid #bbb;break-inside:avoid}
  .stuk h2{font-size:15pt}
  .stuk__lead{display:none}

  .vragen{gap:10pt;break-inside:avoid}
  .vraagblok{background:none;border:1px solid #bbb;clip-path:none;padding:10pt;break-inside:avoid}
  .vraagblok__ico{display:none}
  .vraagblok__vraag{font-size:12pt}

  .stappen li{break-inside:avoid}
  .stappen label{padding:6pt 0}
  .stappen__bol{width:22pt;height:22pt;border-color:#888;font-size:9pt}
  .stappen input:checked + .stappen__bol{background:#000;border-color:#000;color:#fff}
  .stappen__tekst{font-size:11pt}

  input[type=text],textarea{
    background:none;border:0;border-bottom:1px solid #999;padding:4pt 0;
    min-height:2.6em;color:#000;
  }
  ::placeholder{color:transparent}
}