/* =========================================================
   ColourCamp — Splashpage
   Design → HTML/CSS (pixel-accurate, responsive)
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* Kleuren */
  --cc-purple:       #3B293D;  /* koppen (CC Colour 2) */
  --cc-purple-box:   #3B283C;  /* mailblok achtergrond */
  --cc-purple-hover: #761B83;  /* contact-knop hover */
  --cc-gold:         #BDA563;  /* accent: knop, intro, mail, munt */
  --cc-cream:        #F8F6EF;  /* card + knoptekst */
  --cc-text:         #000000;  /* bodytekst */
  --cc-white:        #FFFFFF;  /* pagina-achtergrond */

  /* Typografie */
  --font-head: "Clash Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Layout */
  --maxw: 1050px;              /* breedste content (hero-card) */
  --content: 952px;           /* tekstkolommen */
  --pad: clamp(20px, 4vw, 32px);
  --radius: 20px;
}

/* ---------- Reset / base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cc-white);
  color: var(--cc-text);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a { color: inherit; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header { padding-top: 33px; }

.site-header__inner {
  max-width: calc(var(--content) + 2 * var(--pad));  /* contact-rand op 1196 */
  margin-inline: auto;
  padding-inline: var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-header__logo { margin-left: 43px; }   /* logo op x=287 (244 + 43) */
.site-header__logo img { width: 115px; height: auto; }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 19px;
}

/* Telefoon-knop */
.phone {
  display: inline-flex;
  width: 35px;
  height: 35px;
}
.phone__svg { width: 35px; height: 35px; display: block; }
.phone__ring,
.phone__glyph { transition: fill .25s ease; }
.phone:hover .phone__ring,
.phone:focus-visible .phone__ring { fill: var(--cc-gold); }
.phone:hover .phone__glyph,
.phone:focus-visible .phone__glyph { fill: var(--cc-cream); }

/* Contact-knop */
.btn-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 50px;
  background: var(--cc-gold);
  color: var(--cc-cream);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.12px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .25s ease;
}
.btn-contact:hover,
.btn-contact:focus-visible { background: var(--cc-purple-hover); }

/* =========================================================
   HERO
   ========================================================= */
.hero { padding-top: 68px; }   /* meer ruimte tussen logo en titel */

.hero__heading {
  position: relative;
  z-index: 8;                 /* koppen boven de (deels overlappende) blikken */
  margin: 0;
  text-align: center;
  color: var(--cc-purple);
  font-family: var(--font-head);
  font-weight: 400;
  line-height: 1;
}
/* Inner blok = zo breed als "ColourCamp"; gecentreerd in de hero.
   "Welkom bij" staat links daarbinnen (Figma: 49px inspringen t.o.v. ColourCamp). */
.hero__head-inner {
  display: inline-block;
  text-align: left;
}
.hero__welkom {
  display: block;
  padding-left: 7.94%;   /* 49 / 617 (breedte ColourCamp) */
  font-size: clamp(2.4rem, 3.9vw, 3.5rem);   /* 56px */
  font-weight: 400;
}
.hero__brand {
  display: block;
  margin-top: -0.16em;   /* interlinie tussen Welkom bij en ColourCamp */
  font-size: clamp(3.75rem, 6.6vw, 5.9375rem); /* 95px */
  font-weight: 700;
}

/* --- Hero can-cluster ---
   Referentiebox = 1050 x 434 (Figma-coördinaten, oorsprong 195,222).
   Blikken staan absoluut als % → schaalt pixel-getrouw mee.        */
/* Stage-flow volgt de CARD-hoogte (1050x300); blikken steken er boven/onder uit,
   net als in Figma. Zo klopt de ruimte naar de heading én de introtekst.        */
.hero__stage {
  position: relative;
  width: min(var(--maxw), calc(100vw - 2 * var(--pad)));
  margin: 60px auto 0;
  aspect-ratio: 1050 / 300;
}

.hero__card {
  position: absolute;
  inset: 0;
  background: var(--cc-cream);
  border-radius: var(--radius);
  z-index: 1;
}

/* top/left/width als % van de card-box (oorsprong 195,305) → schaalt mee */
.can { position: absolute; height: auto; }
.can--grey  { left: 20.86%; top: -19.00%; width: 29.62%; z-index: 2; }
.can--aqua  { left: 68.86%; top: -20.00%; width: 21.81%; z-index: 3; }
.can--beits { left: 2.38%;  top: -16.67%; width: 30.76%; z-index: 4; }
.can--blue  { left: 39.62%; top: -23.33%; width: 38.86%; z-index: 6; }

/* Gouden CC-munten */
.coin {
  position: absolute;
  z-index: 7;
  width: 4.67%;   /* 49 / 1050 */
}
.coin img { width: 100%; height: auto; }
.coin--left  { left: 2.67%;  top: 42.33%; }
.coin--right { left: 92.67%; top: 42.33%; }
.coin--bottom { display: none; }

/* =========================================================
   INTRO
   ========================================================= */
.intro {
  max-width: var(--content);
  margin-inline: auto;
  padding: 39px var(--pad) 0;
  text-align: center;
}
.intro__text {
  max-width: 656px;
  margin: 0 auto;
  color: var(--cc-gold);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 25px;
  line-height: 35px;
}

/* =========================================================
   TEKST (twee kolommen, 2+2)
   ========================================================= */
.content {
  max-width: calc(var(--content) + 2 * var(--pad));  /* tekst valt op 244..1196 */
  margin-inline: auto;
  padding: 58px var(--pad) 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 66px;
  align-items: start;
}
.content__col p {
  margin: 0 0 28px;
  font-size: 18px;
  line-height: 28px;
}
.content__col p:last-child { margin-bottom: 0; }

/* =========================================================
   VLAK: tekst links + mailblok rechts
   ========================================================= */
.panel {
  width: min(var(--maxw), calc(100% - 2 * var(--pad)));  /* crème-vlak = 1050 breed */
  min-height: 300px;
  margin: 90px auto 0;   /* extra lucht boven het vlak */
  padding: 48px 76px 15px 50px;
  background: var(--cc-cream);
  border-radius: var(--radius);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.panel__text {
  flex: 1 1 443px;
  max-width: 443px;
}
.panel__text p {
  margin: 0;
  font-size: 18px;
  line-height: 28px;
}

/* Mailblok (rechts in het vlak, steekt iets boven de rand uit) */
.mailbox {
  flex: 0 0 371px;
  align-self: flex-start;
  min-height: 198px;
  margin-top: -68px;
  background: var(--cc-purple-box);
  border-radius: var(--radius);
  padding: 40px 34px;
}
.mailbox p {
  margin: 0;
  color: var(--cc-gold);
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 28px;
  line-height: 38px;
}
.mailbox a {
  color: var(--cc-gold);
  text-decoration: none;
}
.mailbox a:hover { text-decoration: underline; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  padding: 74px var(--pad) 49px;
  text-align: center;
}
.site-footer__logo {
  width: 115px;
  height: auto;
  margin-inline: auto;
}

/* =========================================================
   SCROLL-REVEAL
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* =========================================================
   MOBILE  (< 768px)  — variant met 3 verfblikken
   ========================================================= */
@media (max-width: 767px) {

  body { font-size: 15px; }

  /* Header */
  .site-header { padding-top: 32px; }
  .site-header__inner { padding-inline: 30px; }
  .site-header__logo { margin-left: 0; }
  .site-header__logo img { width: 102px; }

  /* Heading: "Welkom bij ColourCamp", links uitgelijnd */
  .hero { padding-top: 48px; }   /* meer ruimte tussen logo en titel */
  .hero__heading {
    text-align: left;
    padding-left: 34px;          /* = ColourCamp x=34 in Figma */
  }
  .hero__head-inner { display: block; }
  .hero__welkom {
    padding-left: 0;
    margin-left: 20px;           /* Welkom bij x=54 (34 + 20) */
    font-size: clamp(1.5rem, 7.46vw, 1.875rem);  /* 30px @ 402 */
    line-height: 1;
  }
  .hero__brand {
    margin-top: -0.155em;        /* regels dichter op elkaar (Figma: 22px tussen toppen) */
    font-size: clamp(2.5rem, 12.94vw, 3.25rem);  /* 52px @ 402 */
    line-height: 1;
  }

  /* Can-cluster: 3 blikken op exacte Figma-posities (card 380x220).
     Blauwe doos groot links (bloedt links van het scherm af), klein groen
     varnish-blik midden, koper primer rechts. Stage-flow = card-hoogte;
     blikken steken er boven/opzij uit (worden aan de schermrand geclipt).   */
  .hero__stage {
    width: min(380px, calc(100vw - 22px));
    margin: 62px auto 0;
    aspect-ratio: 380 / 220;
  }
  .hero__card { inset: 0; }   /* card vult de stage */

  /* verberg het grijze professional-blik, toon er 3 */
  .can--grey { display: none; }

  .can--blue  { left: -11.3%; top: -26.4%; width: 75%;    z-index: 2; }  /* blauwe doos links (x=-33) */
  .can--aqua  { left: 36.3%;  top: 0;       width: 40.79%; z-index: 3; }  /* aqua-emmer midden        */
  .can--beits { left: 56.6%;  top: -11.36%; width: 55.53%; z-index: 4; }  /* beits-fles rechts        */

  /* Munten: stage-munten weg; CC-icoon bovenop de card (bottom-center) */
  .coin--left,
  .coin--right { display: none; }
  .coin--bottom {
    display: block;
    left: 50%;
    transform: translateX(-50%);
    top: calc(100% - 17.5px);   /* munt op de onderrand van de card, erbovenop */
    width: 35px;
    z-index: 7;
  }

  /* Intro */
  .intro { padding-top: 0; }
  .intro__text {
    max-width: 330px;
    font-size: 20px;
    line-height: 30px;
    margin-top: 42px;   /* Figma: intro 42px onder de card */
  }

  /* Tekst: één gecentreerde kolom */
  .content {
    grid-template-columns: 1fr;
    row-gap: 25px;
    padding-top: 30px;
    text-align: center;
    max-width: 402px;
  }
  .content__col p {
    font-size: 15px;
    line-height: 25px;
    margin-bottom: 25px;
  }

  /* Vlak: op mobiel geen crème-vlak, gewoon gestapeld & gecentreerd */
  .panel {
    display: block;
    width: auto;
    min-height: 0;
    max-width: 402px;
    margin: 25px auto 0;
    padding: 0 var(--pad);
    background: none;
    border-radius: 0;
    text-align: center;
  }
  .panel__text {
    max-width: 330px;
    margin: 0 auto;
  }
  .panel__text p { font-size: 15px; line-height: 25px; }

  /* Mailblok */
  .mailbox {
    flex: none;
    align-self: auto;
    min-height: 0;
    margin-top: 25px;
    padding: 22px 26px;
    text-align: left;
    max-width: 290px;
    margin-inline: auto;
  }
  .mailbox p { font-size: 22px; line-height: 32px; }

  /* Footer */
  .site-footer { padding-top: 44px; padding-bottom: 60px; }
  .site-footer__logo { width: 102px; }
}

/* Tablet-tussenstap: kolommen iets dichter bij elkaar */
@media (min-width: 768px) and (max-width: 900px) {
  .content { column-gap: 40px; }
}

/* =========================================================
   Toegankelijkheid: reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { scroll-behavior: auto !important; }
  .phone__ring, .phone__glyph, .btn-contact { transition: none; }
}