/* ===================================================
   RESPONSIVE FIX voor gertjanarts.nl
   Auteur: verbeterde versie
   Probleem: logo (background-image in header) schaalde
             niet mee op mobiel — vaste px positie
   Oplossing: media queries + flexibele background-size
   =================================================== */

/* ── 1. Verwijder de vaste min-width van body ────── */
body {
  min-width: 0 !important;
}

/* ── 2. Sheet: max 900px, daarna vloeiend ────────── */
.art-sheet {
  width: 100% !important;
  max-width: 900px !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* ── 3. Header algemeen: nooit breder dan viewport ─ */
.art-header {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden;
}

/* ── 4. Slider: vloeiende breedte ───────────────── */
.art-slidecontainerslidepageslider0 {
  /* Overschrijf de vaste 850px breedte */
  max-width: 100% !important;
}

/* ── 5. Collage wrapper ──────────────────────────── */
.art-collage {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ── 6. Afbeeldingen in content schalen altijd mee ─ */
.art-postcontent img,
.art-content img {
  max-width: 100% !important;
  height: auto !important;
}

/* ===================================================
   TABLET  ≤ 900px
   =================================================== */
@media screen and (max-width: 900px) {

  /* Header hoogte wordt bepaald door inhoud */
  .art-header {
    height: auto !important;
    min-height: 90px !important;
    /* Logo (object2058354892.png) + header.png achtergrond
       Logo was op desktop: positie 244px 39px (absoluut)
       Nu: gecentreerd, iets kleiner */
    background-image: url('images/object2058354892.png'), url('images/header.png') !important;
    background-size: auto 34px, cover !important;
    background-position: center 28px, center center !important;
    background-repeat: no-repeat !important;
  }

  /* Slogan onder logo */
  .art-slogan {
    display: block !important;
    position: relative !important;
    text-align: center !important;
    padding: 72px 10px 10px !important;
    font-size: 17px !important;
    top: auto !important;
    left: auto !important;
  }

  /* Slider: breedte 100%, hoogte via aspect ratio */
  .art-slidecontainerslidepageslider0 {
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 40% !important;  /* 340/850 ≈ 40% */
    position: relative !important;
    overflow: hidden !important;
  }

  /* Slider inner vult de hele pseudo-hoogte */
  .art-slider-inner {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* Slide items schalen mee */
  .art-slide-item {
    background-size: cover !important;
    background-position: center center !important;
    height: 100% !important;
  }

  /* Collage wrapper volledig breed */
  div#slidepageslider0 {
    width: 100% !important;
    margin: 4px 0 !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  /* Navigator-bolletjes: onderaan gecentreerd */
  .art-slidenavigatorslidepageslider0 {
    top: auto !important;
    bottom: 6px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}

/* ===================================================
   MOBIEL  ≤ 600px
   =================================================== */
@media screen and (max-width: 600px) {

  .art-header {
    min-height: 70px !important;
    background-size: auto 28px, cover !important;
    background-position: center 22px, center center !important;
  }

  .art-slogan {
    padding: 58px 10px 8px !important;
    font-size: 15px !important;
  }

  .art-slidecontainerslidepageslider0 {
    padding-bottom: 48% !important;
  }

  .art-postcontent {
    padding: 8px !important;
  }
}

/* ===================================================
   KLEIN MOBIEL  ≤ 400px
   =================================================== */
@media screen and (max-width: 400px) {

  .art-header {
    min-height: 60px !important;
    /* Logo proportioneel schalen naar viewport breedte */
    background-size: 75vw auto, cover !important;
    background-position: center 14px, center center !important;
  }

  .art-slogan {
    padding: 52px 8px 6px !important;
    font-size: 13px !important;
  }

  .art-slidecontainerslidepageslider0 {
    padding-bottom: 56% !important;
  }
}