/* =========================
   RESPONSIVE (Marbus)
   Breakpoints: 1200, 1024, 900, 860, 640, 480, 360
   ========================= */

/* --- 1200px: container ruimte & cards --- */
@media (max-width: 1200px){
  .container{ width: min(1100px, 92%); }

  .hero__content{
      margin: 0 auto;
  }
}

/* --- 1024px: nav spacing iets compacter --- */
@media (max-width: 1024px){
  .nav__menu ul{ gap: 1.2rem; }
  .topbar__list{ gap: .75rem; }

  .hero__content{
      margin: 0 auto;
  }
}

/* --- 900px: grids (diensten/service) naar 1 kolom --- */
@media (max-width: 900px){
  .diensten-grid{ grid-template-columns: 1fr; }

  .service-hero__inner{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
  .kpi{ grid-template-columns: 1fr; }

  .hero__actions{ flex-wrap: wrap; }

  .hero__content{
      margin: 0 auto;
  }

  .contact{
    padding: 1.25rem;
  }

  .form-grid{
    grid-template-columns: repeat(2, 1fr);
  }

  .form-field.full{
    grid-column: 1 / -1;
  }
}

/* --- 860px: mobile nav + topbar wrap --- */
@media (max-width: 860px){
  /* Topbar netter op mobiel */
  .topbar__inner{
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
  }
  .topbar__list{
    flex-wrap: wrap;
    gap: .6rem .9rem;
    font-size: .9rem;
  }

  .hero__content{
      margin: 0 auto;
  }

  /* Nav toggle zichtbaar */
  .nav__inner{
    justify-content: space-between; /* belangrijk op mobiel */
  }
  .nav__toggle{ display: inline-flex; }

  /* Menu als dropdown panel onder nav */
  .nav{
    position: sticky;
  }
  .nav__menu{
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: none;
    padding: 12px 0;
    background: rgba(32,30,31,.92);
    backdrop-filter: blur(16px);
    border-top: 1px solid var(--border);
  }
  .nav__menu.open{ display: block; }

  .nav__menu ul{
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav__menu a{
    display: block;
    padding: 12px 18px;
    border-radius: 0;
  }

  /* Mobile submenu: open via .has-sub.open (JS) */
  .has-sub .sub{
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;

    display: none;          /* blijft dicht tot open */
    min-width: 0;
    margin: 6px 12px 10px;
    border-radius: 14px;
    gap: .35rem;
  }
  .has-sub.open > .sub{ display: flex; }

  .contact{
    padding: 1.25rem;
  }

  .contact-card,
  .success-message{
    max-width: 760px;      /* voorkomt te brede kaart */
    padding: 1.25rem;
  }

  /* 2 kolommen is hier perfect */
  .form-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .form-field.full{
    grid-column: 1 / -1;
  }

  .contact-submit{
    width: auto;
    align-self: flex-start;
  }

  /* reCAPTCHA netjes uitlijnen */
  .g-recaptcha{
    margin-top: 1rem;
  }

  .g-recaptcha div:first-child {
    transform: scale(.95);
    margin-inline: auto;
  }
  .g-recaptcha iframe {
    width: 220px !important;
    border: 1px solid;
  }

  .form-field input,
  .form-field textarea{
    width: 100%;
  }
}

@media (max-width: 768px){
  .project-container{ aspect-ratio: 4 / 3; }
}

/* --- 640px: hero/card padding & contact grid --- */
@media (max-width: 640px){
  section{ margin-bottom: 42px; }

  .hero__content{
      margin: 0 auto;
  }
  .hero__content.background{
    padding: 1rem;
  }

  .contact{
    padding: 1rem;
  }

  .contact-card,
  .success-message{
    padding: 1rem;
  }

  .form-grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .form-field input,
  .form-field textarea{
    width: 100%;
  }

  /* reCAPTCHA netjes en niet “uit het scherm” */
  .g-recaptcha{
    transform-origin: 0 0;
  }
}

/* --- 480px: typografie & knoppen --- */
@media (max-width: 480px){
  .hero__logo h1{
    font-size: 2rem;
  }

  .btn{
    width: 100%;
    justify-content: center;
  }
  .hero__actions{
    width: 100%;
  }

  .footer__inner{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .project-container{ aspect-ratio: 1 / 1; }

}

/* --- 360px: extra klein --- */
@media (max-width: 360px){
  .topbar__list{ font-size: .85rem; }
  .hero__logo h1{ font-size: 1.8rem; }
  .g-recaptcha{ transform: scale(.82); }
}