/*--------------------------------------------------------------
# ABOUT PAGE (page-specific)
# Doel: enkel About layout + back button + responsive tweaks
# (geen HOME/WORK/CONTACT/FOOTER hier)
--------------------------------------------------------------*/

/* Back button */
.backknop {
  margin-top: 60px;
  margin-bottom: -60px;
}

.responsiveBackButton{
  display: none;
  font: normal normal 300 20px/25px 'Soleil', sans-serif;
  background: none;
  border-radius: 40px;
  border: 2px solid #0e0c0f;
  padding: 5px 10px;
  margin: 0 auto;
}

.backknop a{
  text-decoration: none;
  outline: none;
}

.backknop a:focus,
.backknop a:focus-visible{
  outline: none;
}

.responsiveBackButton:focus,
.responsiveBackButton:focus-visible{
  outline: none;
  box-shadow: none;
}

/* ABOUT base */
#about {
  padding: 20px;
  padding-left: 140px;
  padding-right: 140px;
  border-bottom: 2px solid #0e0c0f;
  padding-bottom: 150px;

  /* Layout */
  display: grid;
  grid-template-columns: minmax(0, 720px) 1fr;
  grid-template-areas:
    "title  photo"
    "bullets bullets";
  column-gap: 60px;
  row-gap: 40px;
  align-items: start;
}

/* Title */
#about > h2 {
  grid-area: title;
  margin: 0;
  margin-top: 30px;
  padding: 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.3; /* goede spacing */
  max-width: 720px;
  
}

/* Buttons in title */
#about .TitleButtons {
  background: none;
  border-radius: 40px;
  border: 2px solid #0e0c0f;
  font: normal normal 350 32px/32px 'Soleil', sans-serif;
  padding: 8px 20px 10px 20px;
  color: #0e0c0f;
  margin: 0 3px;
  display: inline-block;
}

/* Image */
#about > .about-img {
  grid-area: photo;
  justify-self: end;
  align-self: start;

  height: 500px;
  margin-top: 30px;
  margin-bottom: -100px;
}

/* Bulletpoints wrapper (onderaan volle breedte) */
#about > .bulletpoints {
  grid-area: bullets;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 500px));
  gap: 28px 28px;
  justify-content: start;
  align-items: start;

  /* Als je vaardigheden lager wil op desktop: PAS DIT AAN */
  margin-top: 100px;
}

/* Vaardigheden blokken */
#about .Vaardigheden {
  max-width: 500px;
  display: block;
}

#about h3 {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Vaardigheden buttons */
#about .VaardighedenButtons {
  background: none;
  border-radius: 40px;
  border: 2px solid #0e0c0f;
  font: normal normal 400 16px/16px 'Soleil', sans-serif;
  padding: 6px 7px;
  color: #0e0c0f;
  margin: 8px 2px 0 2px;
  display: inline-block;
}

#about .VaardighedenButtonsTEXT {
  background: none;
  border-radius: 40px;
  border: 2px solid #0e0c0f;
  font: normal normal 500 14px/14px 'Soleil', sans-serif;
  padding: 4px 7px 5px 7px;
  color: #0e0c0f;
  margin: 10px 2px 0 2px;
  display: inline-block;
}

/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/

/* Padding naar 20px (zoals je andere sections) */
@media (max-width: 1700px){
  #about{
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Vanaf 1400: titel center, foto onder titel, bullets eronder */
@media (max-width: 1400px){
  #about{
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "photo"
      "bullets";
  }

  #about > h2{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
  }

  #about > .about-img{
    justify-self: center;
    height: auto;
    width: 92%;
    max-width: 520px;
    margin-top: 30px;
    margin-bottom: 0px;
  }

  /* Bulletpoints container */
  #about > .bulletpoints{
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  /* Elke vaardigheden-block echt centreren */
  #about .Vaardigheden{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  /* Buttons netjes in het midden laten lopen */
  #about .VaardighedenButtons{
    margin-left: 1px;
    margin-right: 1px;
  }


  #about h3{
    text-align: center;
  }
}

/* Onder 980: bullets 1 kolom */
@media (max-width: 980px){
  #about{
    text-align: center;
    padding-left: 0px;
    padding-right: 0px;
  }
    #about > h2{
    margin-top: 40px;
  }

  #about > .bulletpoints{
    grid-template-columns: 1fr;
    justify-content: center;
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* Mobile: sidenav verdwijnt (komt waarschijnlijk uit global css, maar safe hier) */
@media (max-width: 650px){
  .responsiveBackButton{
    display: block;
    color: #0e0c0f;
  }
      #about > h2{
    margin-top: 100px;
  }
  #about > .bulletpoints{
    margin-top: 0px;
  }

}

@media (max-width: 920px){
  #about > h2{
    font-size: 32px;
    line-height: 42px;
  }

  #about .TitleButtons{
    font: normal normal 300 25px/28px 'Soleil', sans-serif;
    padding: 4px 13px 5px 13px;
    margin: 0 2px;
  }
}

/* Extra small */
@media (max-width: 767px){

   #about > .bulletpoints{
    margin-top: 30px;
  }
}