/* Mobile polish — laag bovenop futuristic/site-premium voor telefoons.
   Doel: niets afsnijden, alles leesbaar, alles goed aantikbaar. Wordt op elke
   publieke pagina na site-premium.css geladen. Alleen regels voor kleine schermen. */

/* Afbeeldingen en media nooit breder dan het scherm. */
img, video, svg:not(.bolt-deco), iframe { max-width: 100%; }
img { height: auto; }
html { -webkit-text-size-adjust: 100%; }

/* Tabellen: op een smal scherm horizontaal scrollbaar in plaats van afgesneden. */
@media (max-width: 760px) {
  .vergelijk-tabel, .table-wrap, .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .vergelijk-tabel table { min-width: 560px; }
  .vergelijk-tabel::after { content: "Schuif de tabel opzij voor meer →"; display: block; font-size: 11.5px; color:#4d5f60; padding: .4rem 0 0; }
  main table.guide-table, article table.guide-table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  main table.guide-table th, main table.guide-table td, article table.guide-table th, article table.guide-table td { min-width: 120px; }
}

/* Menuknop (zichtbaar tot 980px): 44px om goed aan te tikken. */
@media (max-width: 980px) {
  .nav-toggle { width: 44px; height: 44px; }
}

@media (max-width: 640px) {
  /* iOS zoomt in op velden kleiner dan 16px; dat voorkomt dit. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px !important; }

  /* Kleine monospace-labels iets groter: 10px is op een telefoon net te klein. */
  .eyebrow, .hero-tag, .usp-tag, .stat-cell .lbl, .nav-dropdown-heading, .ep-eyebrow, .bd-eyebrow, .bv-live,
  .trust-proof-kicker, .price-row-label span, .testi-meta small, .foot-bottom span, .zs-bron span {
    font-size: 11.5px !important;
  }
  .ep-drop .tag, .ep-feiten li span { font-size: 11px !important; }

  /* Knoppen en links: minimaal 44px hoog om goed aan te tikken. */
  .btn, .nav-cta, button.btn { min-height: 46px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  footer .foot a { display: block; padding: .72rem 0; min-height: 44px; overflow-wrap: anywhere; }
  footer .foot h5 { margin-top: 1.4rem; }
  .nav-links a, .nav-dropdown-col a { min-height: 44px; display: flex; align-items: center; }
  .testi-nav-btn { width: 44px; height: 44px; }
  .mode-switch button { min-height: 44px; }
  .site-premium .am-chat-close, .site-premium .am-chat-send { width: 44px; height: 44px; }
  /* Cookiekeuze: knoptekst even groot als de rest van het paneel (was 11px). */
  .site-premium #am-cookie-panel button, .site-premium #am-cookie-panel a { font-size: 12px; }

  /* Footer: twee kolommen met 48px tussenruimte pasten niet op een telefoon, het
     e-mailadres viel rechts van het scherm. Logo- en contactblok krijgen de volle
     breedte, de twee linklijsten staan er naast elkaar tussen. */
  footer .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  footer .foot > div:first-child, footer .foot > div:last-child { grid-column: 1 / -1; }

  /* Secties iets compacter zodat er minder gescrold hoeft te worden. Met .site-premium
     ervoor, anders wint de vaste maat uit site-premium.css en doen deze regels niets. */
  .site-premium .section { padding-top: clamp(2.6rem, 9vw, 3.8rem); padding-bottom: clamp(2.6rem, 9vw, 3.8rem); }
  .section-title { font-size: clamp(1.7rem, 7.5vw, 2.3rem); line-height: 1.12; }
  .site-premium .page-title, .site-premium .premium-page-hero .page-title, .ep-hero h1, .bd-hero h1, .zs-hero h1 { font-size: clamp(1.9rem, 9vw, 2.6rem); }
  .section-sub, .page-sub, p.lead { font-size: 1rem; }

  /* Stat-strips en kaartrasters: twee naast elkaar in plaats van vijf. */
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .stat-cell { border-right: none; border-bottom: 1px solid var(--line); }
  .stat-cell:nth-child(odd) { border-right: 1px solid var(--line); }
  .stat-cell:last-child, .stat-cell:nth-last-child(2):nth-child(odd) { border-bottom: none; }

  /* Vaste balk onderaan (Bel / WhatsApp / Offerte) mag nooit inhoud verbergen. */
  body { padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important; }
  .ep-lead, .cta-section { scroll-margin-bottom: 90px; }

  /* Lange woorden en URL's afbreken in plaats van uitsteken. */
  p, li, td, .ep-samenvatting, .bd-deel, .ep-deel code { overflow-wrap: anywhere; }
}

@media (max-width: 400px) {
  /* 16px marge per kant. Via de breedte en niet via padding: site-premium.css rekent de
     marge al in de breedte, padding erbovenop gaf een dubbele marge van 36px. */
  .site-premium .container { width: calc(100% - 32px); }
  .ep-cijfers, .bv-cijfers, .bv-periode { grid-template-columns: 1fr 1fr; }
  .ep-uploads { grid-template-columns: 1fr; }
}