/* ============================================================
   tablet.css — Stefan Desaeyere Fotografie
   Alles wat tussen telefoon en laptop in valt: 700 tot 1100 px,
   dus iPads staand (768 en 834) en liggend (1024 en 1112).

   De site was gebouwd voor telefoon en laptop; daartussen bleven
   rasters te veel kolommen houden. Hier staan enkel de correcties
   voor dat gebied. Buiten deze grenzen verandert er niets.

   Elke regel hieronder heeft een ondergrens van 700 px: onder die breedte
   gelden de bestaande telefoonregels van de pagina zelf, ongewijzigd.

   Eén bestand, gekoppeld op elke pagina naast header.css, zodat je
   het later op één plek bijstelt.
   ============================================================ */

/* ══ 1100 px en smaller ══════════════════════════════════════
   Stroken van vijf beelden naast elkaar worden hier te smal. */
@media (min-width: 700px) and (max-width: 1100px) {

  /* Beeldstroken op de aanbod- en over-mij-pagina */
  .bladrij,
  .photo-strip {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* De kaarten in het aanbod: drie naast elkaar wordt krap */
  .rooster {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  }
}

/* ══ 1080 px en smaller ═════════════════════════════════════
   Ruim genomen zodat een liggende iPad (1024 px) er ook onder valt. */
@media (min-width: 700px) and (max-width: 1080px) {

  /* Portfoliostroken staan met een inline stijl in de pagina's;
     daarom mikken we op dat kenmerk in plaats van op een klasse. */
  [style*="repeat(4,1fr)"],
  [style*="repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Pakketten en opsommingen: twee kolommen leest rustiger dan vier */
  .zp-pkg-options,
  .included-grid,
  .zp-included-grid,
  .zp-process-grid,
  .info-cards,
  .step-cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Prijskaarten naast elkaar worden te smal om te lezen */
  .zp-price-cards,
  .price-cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .intro-ed-inner {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* De voettekst stond in drie kolommen die hier onder de 200 px zakken;
     onder elkaar leest ze rustiger en blijft de nieuwsbrief bruikbaar. */
  footer.site-footer {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
    text-align: center;
  }
  footer.site-footer .footer-nav-links,
  footer.site-footer nav ul { justify-content: center; }
  footer.site-footer .socials,
  footer.site-footer .footer-social { justify-content: center; }
  .footer-inner { grid-template-columns: 1fr !important; gap: 28px !important; }
  .footer-nav-inner { flex-direction: column; gap: 16px; text-align: center; }
  .footer-nav-links { flex-wrap: wrap; justify-content: center; gap: 6px 20px; }
}

/* ══ 900 px en smaller ══════════════════════════════════════
   Vanaf hier is de tablet staand: alles wat naast elkaar stond
   in drie of meer kolommen gaat naar twee of één. */
@media (min-width: 700px) and (max-width: 900px) {

  .bladrij,
  .photo-strip {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Drie kolommen tekst naast elkaar leest niet op deze breedte */
  .zp-why-grid,
  .zp-account-grid,
  .zp-faq-grid,
  .zp-review-grid,
  .hs-values-grid,
  .hs-why-grid,
  .locatie-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Het boekvenster mag hier de volle breedte pakken */
  .boek-venster {
    max-width: 92vw;
  }
}

/* ══ 820 px en smaller ══════════════════════════════════════ */
@media (min-width: 700px) and (max-width: 820px) {

  .zp-price-cards,
  .price-cards,
  .zp-pkg-options {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .zp-process-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ══ Raakvlakken op aanraakschermen ═════════════════════════
   Tussen 700 en 1100 px bedien je de site met je vinger, niet met
   een muis. Kleine tekstlinkjes krijgen daarom wat meer ruimte,
   zonder dat het beeld verspringt: enkel verticale ademruimte. */
@media (min-width: 700px) and (max-width: 1100px) and (pointer: coarse) {

  .footer-nav-links a,
  .footer-info a,
  .sd-paneel-voet a,
  .locatie-feature,
  .section-nav a {
    padding-top: 6px;
    padding-bottom: 6px;
    display: inline-block;
  }

  .sd-taal a {
    padding: 6px 4px;
  }
}