/* ======================= CSS RESET (modern, compact) ======================= */
*,
*::before,
*::after { box-sizing: border-box; }
html:focus-within { scroll-behavior: smooth; }
html, body { height: 100%; }
body { margin: 0; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
a { color: inherit; }

/* ======================= DESIGN TOKENS ======================= */
:root{
  --bg: #faf7ef;         /* fris, hedendaags */
  --ink: #1b1b1b;
  --muted:#6c6a67;
  --line:#eae4da;
  --accent:#0e6dfd;

  --maxw: 1100px;
}
body{ background:var(--bg); color:var(--ink); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height:1.65; }
h1,h2,h3{ font-family: "Playfair Display", Georgia, serif; font-weight:600; margin:0 0 .5rem; }
h1{ font-size: clamp(2.2rem, 6vw, 3.6rem); line-height:1.1; }
h2{ font-size: clamp(1.4rem, 3vw, 2rem); color: var(--muted); }
h3{ font-size: 1.2rem; }
a:hover{ text-decoration: underline; }

.home-btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #000;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  border-radius: 5px;
  transition: background-color 0.3s ease;
    margin-left: 300px;  /* naar rechts */
    margin-top: 20px;   /* naar beneden */
}

.home-btn:hover {
  background-color: #444;
}

/* ======================= GRID LAYOUT ======================= */
/* 7 secties mappen naar areas */
.page{
  width:min(var(--maxw), 92%);
  margin-inline:auto;
  display:grid;
  gap: 1rem;
  grid-template-areas:
    "banner"
    "title"
    "photos"
    "text"
    "video"
    "links"
    "footer";
}

/* Laptop en groter (volgens schema links) */
@media (min-width: 900px){
  .page{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "banner banner"  /* 1 */
      "title  title"   /* 2 */
      "photos text"    /* 3 | 4 */
      "video  links"   /* 5 | 6 */
      "footer footer"; /* 7 */
  }
}

/* Areas */
.area-banner{ grid-area: banner; }
.area-title { grid-area: title; }
.area-photos{ grid-area: photos; }
.area-text  { grid-area: text; }
.area-video { grid-area: video; }
.area-links { grid-area: links; }
.area-footer{ grid-area: footer; }

/* ======================= BANNER ======================= */
.banner{
  position: relative;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: #ddd;
  min-height: 300px;
}


.banner-bg{
  width:100%;
  height: clamp(200px, 30vw, 500px);
  object-fit:fill
  filter: contrast(1.02) saturate(1.02);
}
.brand{
  position: absolute; left: 16px; bottom: 14px;
  background: transparent
  border: 1px solid var(--line);
  border-radius: 10px;
  backdrop-filter: blur(4px);
   background-color: rgba(255, 255, 255, 0.4); /* wit met 40% dekking */
  padding: .6rem .85rem;
}
.brand .kicker{ display:block; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.75rem; color:var(--muted); }

/* AI-afbeeldingen  */
.ai{
  position:absolute;
  width: clamp(70px, 14vw, 150px);
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.18));
}
.ai-1{ right: 10%; top: 6%;  z-index: 4; transform: rotate(-3deg); }
.ai-2{ left:  8%;  bottom: 8%; z-index: 3; transform: rotate(2deg); }
.ai-3{ right: 2%;  bottom: 10%; z-index: 2; }
.ai-4{ left:  22%; top: 10%; z-index: 5; }

/* ======================= CONTENT BLOKKEN ======================= */
.heading{ padding:.4rem 0 0; border-bottom:1px solid var(--line); margin-bottom:.4rem; }
.photos{
  display:grid; gap:1rem;
  grid-template-columns:1fr;
}
.photos figure{
  margin:0; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden;
}
.photos figcaption{ padding:.6rem .8rem; color:var(--muted); font-size:.95rem; }
@media (min-width: 900px){
  .photos{ grid-template-columns: 1fr 1fr; }
}

.text{
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:1rem;
}
.video .video-wrap{
  position:relative; aspect-ratio:16/9;
  background:#000; border:1px solid var(--line); border-radius:12px; overflow:hidden;
}
.video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.links{
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:1rem;
}
.links ul{ padding-left:1.1rem; margin:.4rem 0 0; color:var(--muted); }
.links a{ color:var(--accent); }

/* ======================= FOOTER ======================= */
.footer{
  text-align:center; color:var(--muted);
  border-top:1px solid var(--line); padding: .9rem 0 1.6rem;
}

/* ======================= MOBILE VOLGORDE (default) ======================= */
/* Volgorde is al 1→7 (banner, title, photos, video, text, links, footer) zoals gevraagd */

/* ======================= KLEINE FINISHING ======================= */
figure img{ object-fit:cover; }