/* ============================================================
   STYLE.CSS  –  Algemeen stylesheet
   Bevat: lettertypes, kleurvariabelen, reset, basis-typografie
   en de styling voor de losse projectpagina's (projectinhoud).
   Component-blokken staan in losse css-bestanden (zie /css map).
   ============================================================ */

/* fonts ------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Sacramento&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Victor+Mono:ital,wght@0,100..700;1,100..700&display=swap');

@font-face {
  font-family: 'Rajdhani';
  src: url('../font/Rajdhani-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Rajdhani';
  src: url('../font/Rajdhani-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Rajdhani';
  src: url('../font/Rajdhani-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Rajdhani';
  src: url('../font/Rajdhani-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Rajdhani';
  src: url('../font/Rajdhani-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Bebas Neue';
  src: url('../font/BebasNeue-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Aguafina Script';
  src: url('../font/AguafinaScript-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* kleur- & basisvariabelen ----------------------------------- */

:root {
  --lichtblauw: #6780E1;
  --blauw:      #3F58B9;
  --creme:      #EEE1CD;
  --beige:      #D0C3AF;
  --wit:        #fff;
  --zwart:      #000;
  --donkerblauw:#00002D;

  --font-title:  'Bebas Neue', sans-serif;
  --font-body:   'Rajdhani', sans-serif;
  --font-script: 'Aguafina Script', cursive;
  --font-mono:   'Victor Mono', monospace;

  --maxw: 1320px;
  --radius: 16px;

  /* 12-koloms grid systeem */
  --grid-margin: 120px;   /* marge links/rechts */
  --grid-gap:    24px;    /* ruimte tussen de kolommen */
}

/* reset ------------------------------------------------------- */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--creme);
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--donkerblauw);
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

/* custom cursors --------------------------------------------- */
/* De getallen na de url() zijn de hotspot (x y): het exacte punt
   waarmee geklikt wordt. Het keyword na de komma is de fallback.
   Let op: Chrome/Edge negeren cursors groter dan 32x32px.        */

html,
body {
  cursor: url('../img/cursor.svg') 0 0, auto;
}

a,
button,
label,
summary,
[role="button"],
input[type="submit"],
input[type="button"],
input[type="reset"],
.image-accordion-panel,
.skill,
.filter-pill,
.folder,
.cursor-pointer {
  cursor: url('../img/cursor-pointer.svg') 8 3, pointer;
}

/* gedeelde sectie-titel (zie ook title.css) ------------------- */

.section-title {
  font-family: var(--font-title);
  color: var(--blauw);
  letter-spacing: 1px;
  line-height: 1;
  font-size: clamp(2.5rem, 7vw, 5rem);
}

/* grid-achtergrond (blauwe banner / footer) ------------------- */

.blue-grid {
  background-color: var(--blauw);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.10) 1px, transparent 1px);
  background-size: 46px 46px;
}

/* ============================================================
   12-KOLOMS GRID  –  voor alle secties behalve hero en header
   12 kolommen, 24px gap, 120px marge links/rechts.
   Directe kinderen vullen standaard de volle breedte (12 kolommen);
   plaats ze met `grid-column: <start> / <eind>` op specifieke kolommen.
   ============================================================ */

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gap);
  padding-left: var(--grid-margin);
  padding-right: var(--grid-margin);
}

.grid-12 > * { grid-column: 1 / -1; }

/* marge schaalt mee op kleinere schermen */
@media screen and (max-width: 1200px) { :root { --grid-margin: 60px; } }
@media screen and (max-width: 768px)  { :root { --grid-margin: 24px; } }

/* ============================================================
   PROJECTPAGINA'S (projectinhoud.html)
   ============================================================ */

.project {
  /* 12-koloms grid (zie .grid-12) */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gap);
  padding: 140px var(--grid-margin);
  background-color: var(--creme);
  color: var(--donkerblauw);
}

.project > * { grid-column: 1 / -1; }

.project h2 {
  font-size: 60px;
  font-family: var(--font-title);
  margin-bottom: 20px;
  color: var(--blauw);
}

.project-content p {
  font-size: 20px;
  line-height: 1.6;
  margin-top: 40px;
}

.project-content img {
  height: auto;
  display: flex;
  width: 100%;
}

.button-blok { margin-bottom: 80px; }
.button-blok h3 { font-size: 30px; margin-top: 80px; margin-bottom: 20px; }
.button-blok button { margin-top: 20px; }

.project-button {
  margin-top: 80px;
  padding: 12px 22px;
  border: 2px solid var(--blauw);
  background: transparent;
  color: var(--blauw);
  border-radius: 50px;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .15s ease;
}
.project-button:hover {
  background: var(--blauw);
  border-color: var(--blauw);
  color: var(--wit);
}
.project-button:active { transform: translateY(1px); }
.projectbutton a { color: var(--blauw); text-decoration: none; }

/* projectpagina lay-out rijen */
.project-row {
  display: flex;
  justify-content: space-between;
  gap: 80px;
  margin: 40px 0;
  width: 100%;
}
.project-row img { width: 100%; }
.project-row-img-20 { width: 20%; }
.project-row-img-60 { width: 60%; margin: 80px 0; }
.neg-100 { margin-bottom: -100px; }
.pos-100 { margin-top: 100px; }

.project-row-grid { display: flex; flex-direction: column; gap: 40px; margin-top: 40px; }
.project-row-grid .project-row-txt-100 { width: 100%; }
.project-row-grid .project-row-side,
.project-row-side {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
}
.project-row-grid-2 { display: flex; flex-direction: column; justify-content: space-between; }
.project-row-griditem { display: flex; justify-content: space-between; gap: 80px; margin-top: 40px; width: 100%; margin-bottom: -40px; }
.project-row-griditem-2 { display: flex; justify-content: space-evenly; width: 100%; gap: 20px; margin-top: -40px; }
.project-row-uneven { margin: 40px 0; width: 100%; }

.project-row-txt { width: 60%; }
.project-row-txt-40 { width: 40%; }
.project-row-txt-70 { width: 70%; }
.project-row-txt-80 { width: 80%; }
.project-row-txt-90 { width: 90%; }
.project-row-txt-100 { width: 100%; }
.project-row-h3-titel { font-size: 30px; margin-top: 80px; }
.project-row-h2-titel { margin-top: 140px; }

/* uitzonderingen sensa / frozenjoy / moyogi */
.sensa-1, .sensa-2, .sensa-3 {
  display: flex;
  justify-content: space-between;
  gap: 80px;
  margin: 40px 0;
  width: 100%;
}
.sensa-3 { flex-wrap: nowrap; }
.sensa-2 .project-img, .sensa-3 .project-img { width: 100%; }
.sensa-2 .sensa-blok-rij1 .project-txt,
.sensa-3 .sensa-blok-rij1 .project-txt { width: 60%; }
.sensa-blok-rij2 { display: flex; flex-direction: row; justify-content: space-between; gap: 80px; width: 100%; }
.sensa-blok-kolom2 { width: 70%; }
.sensa-3 .sensa-blok-rij2 .project-row-img { width: 60%; }

.frozen-blok-rij { display: flex; flex-direction: column; justify-content: space-between; gap: 0; width: 100%; }
.frozen-blok-rij2 { gap: 0; width: 80%; }
.frozenjoy-2 { display: flex; justify-content: space-between; gap: 80px; margin-top: 40px; margin-bottom: -100px; width: 100%; }

.moyogi-3 { display: flex; flex-direction: row; justify-content: space-between; gap: 80px; margin: 40px 0; width: 100%; }
.moyogi-3 .bonsai-blok-rij2 { display: flex; flex-direction: column; justify-content: space-between; gap: 0; width: 98%; }
.moyogi-3 img { width: 100%; }
.bonsai-blok-rij { display: flex; justify-content: space-between; gap: 80px; width: 100%; }

.moyogi-visitekaartjes-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin: 40px 0;
  width: 100%;
}
.visitekaartje-item img { width: 100%; height: auto; display: block; }

.project-row-keep-horizontal,
.project-row-keep-horizontal-2 {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 20px;
  margin-top: 40px;
  width: 100%;
}
.project-row-keep-horizontal .project-row-img { width: 33.33%; }
.project-row-keep-horizontal img,
.project-row-keep-horizontal-2 img { width: 100%; height: auto; }

.project-row-tshirt-responsive {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  margin: 40px 0;
}
.project-row-tshirt-responsive .project-row-img { flex: 0 0 30%; }
.project-row-tshirt-responsive img { width: 100%; height: auto; }

/* disclaimer-box op projectpagina */
.disclaimer-box {
  background-color: var(--lichtblauw);
  width: 100%;
  box-shadow: -10px 10px 20px rgba(0, 0, 45, 0.4);
  padding: 80px;
  border: 5px solid var(--donkerblauw);
  border-radius: var(--radius);
  margin-top: 80px;
  color: var(--wit);
}
.disclaimer-box h2 { font-family: var(--font-title); font-size: 60px; margin-bottom: 40px; color: var(--wit); }
.disclaimer-box p { color: var(--wit); width: 100%; font-size: 20px; }

/* "path to my future" blok (about-pagina) */
.path {
  display: flex;
  align-items: stretch;
  background-color: var(--donkerblauw);
  overflow: hidden;
  width: 100%;
  position: relative;
}
.path-text { display: flex; flex-direction: column; justify-content: center; padding: 80px; }
.path-text h2 { font-family: var(--font-title); color: var(--creme); font-size: 60px; margin-bottom: 20px; }
.path-text p { line-height: 1.6; color: var(--creme); font-size: 18px; }
.imgpath { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.imgpath img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media screen and (min-width: 993px) {
  .path { flex-direction: row; min-height: 460px; }
  .imgpath { width: 40%; }
  .path-text { width: 60%; }
}
@media screen and (max-width: 992px) {
  .path { flex-direction: column-reverse; }
  .imgpath, .path-text { width: 100%; }
  .path-text { padding: 50px 30px; }
}

/* responsief projectpagina's */
@media screen and (max-width: 992px) {
  .project { padding: 90px var(--grid-margin); }
  .moyogi-visitekaartjes-grid { grid-template-columns: repeat(4, 1fr); }
}
@media screen and (max-width: 768px) {
  .project { padding: 70px var(--grid-margin); }
  .project h2 { font-size: 46px; }
  .project-row, .sensa-1, .sensa-2, .sensa-3, .sensa-blok-rij2,
  .project-row-side, .moyogi-3, .bonsai-blok-rij, .frozenjoy-2 { flex-direction: column; gap: 24px; }
  .project-row > div,
  .project-row-img-20, .project-row-img-60,
  .project-row-txt, .project-row-txt-40, .project-row-txt-70,
  .project-row-txt-80, .project-row-txt-90, .sensa-blok-kolom2,
  .frozen-blok-rij2 { width: 100%; }
  .moyogi-visitekaartjes-grid { grid-template-columns: repeat(3, 1fr); }
  .frozenjoy-2 { margin-bottom: 0; }
  .disclaimer-box { padding: 40px 24px; }
  .disclaimer-box h2 { font-size: 40px; }
}
@media screen and (max-width: 600px) {
  .moyogi-visitekaartjes-grid { grid-template-columns: repeat(2, 1fr); }
}