/* ==========================================================================
   iPhone Duo (vouwbare iPhone, sept. 2026) — de ENIGE plek voor Duo-correcties.
   Zie docs/PORTING.md, "iPhone Duo". Geladen door de site-, Inspiratie- en /nova-layout.

   CSS-viewports (DPR 3): cover 466×678 / 678×466, binnenscherm 626×890 / 890×626.
   Elke regel zit binnen het Duo-bereik (440–939 px breed) én alleen op touch-schermen
   zonder hover. Telefoons (≤ 430), desktop en iPad-landscape (≥ 1024) zien hier niets
   van, zodat de pixel-perfecte port daar ongewijzigd blijft. Tablets tussen 440 en 939
   (iPad mini 744, iPad 820/834 portret, Galaxy Fold binnen) vallen er wél onder.
   ========================================================================== */

@media (min-width: 440px) and (max-width: 939px) and (hover: none) and (pointer: coarse) {
  /* /inspiratie/reizen: het grid-item (display:flex) had min-width:auto, waardoor de
     cover (aspect-ratio + height:100%) de kolom opblies tot ver buiten beeld. */
  #rg-reizen-grid > .rg-reis-item { min-width: 0; }

  /* /inspiratie/zoeken: het zoekveld (flex:1) kromp niet onder zijn intrinsieke breedte,
     waardoor de "Zoek"-knop op het coverscherm buiten beeld viel. */
  form[style*="display:flex"] > div[style*="flex:1"],
  form[style*="display:flex"] input[style*="flex:1"] { min-width: 0; }

  /* Actierij met een knop rechts (reis-detail: likes/views + "Kopieer naar mijn kaart"):
     mag naar een tweede regel i.p.v. buiten beeld te lopen of de knop te pletten. */
  div[style*="display:flex"]:has(> .rg-btn[style*="margin-left:auto"]) { flex-wrap: wrap; row-gap: 12px; }

  /* /nova: de .sr-only-labels in een scrollende tabel ontsnapten aan .adm-table-wrap
     (niet gepositioneerd) en maakten de hele pagina breder dan het scherm. */
  .adm-table-wrap { position: relative; }
}

/* Coverscherm (portret én landscape) en binnenscherm-portret, onder md (768).
   Blog-overzicht: de sticky kopbalk zette "Inspiratie" en "Start Nu" onder elkaar
   (135 px hoog; in landscape bijna een derde van de 466 px hoge viewport). Naast
   elkaar passen ze ruim. */
@media (min-width: 440px) and (max-width: 767px) and (hover: none) and (pointer: coarse) {
  .sticky.top-0.z-40 .flex-col.md\:flex-row { flex-direction: row; align-items: center; }
}

/* Coverscherm-landscape en binnenscherm-portret (560–680): de Inspiratie-grids vielen hier
   onder de telefoonregel (≤ 680 → één kolom) en gaven één reuzenkaart per scherm.
   Twee kolommen, zoals tablets vanaf 681 px al krijgen. Uitzondering: de werelddeel-tegels
   (te smal voor "Noord-Amerika" + de metaregel) blijven één per rij. */
@media (min-width: 560px) and (max-width: 680px) and (hover: none) and (pointer: coarse) {
  [style*="repeat(4, 1fr)"],
  [style*="repeat(3, 1fr)"]:not(:has(> a[href*="/inspiratie/werelddeel/"])) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* Kaart-tegel + markerkaarten (land/thema/werelddeel): kaart over de volle breedte, kaarten twee naast elkaar. */
  .rg-marker-map-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rg-marker-map-tile { grid-column: span 2; }
}

/* Binnenscherm-landscape (890) en tablets 768–939: de ingelogde desktop-nav (5 links, bel,
   pin, avatar + naam) is breder dan het scherm (1064 px bij 890): de pagina scrolt
   horizontaal en het logo/de naam worden geplet. Hier blijft de mobiele nav (hamburger)
   actief, precies zoals onder 768 px. Alleen voor ingelogde gebruikers (.rg-sitenav-user);
   de gasten-nav past wel. */
@media (min-width: 768px) and (max-width: 939px) and (hover: none) and (pointer: coarse) {
  .rg-sitenav-user div.md\:hidden { display: block; }
  .rg-sitenav-user a.md\:hidden { display: inline; }
  .rg-sitenav-user .hidden.md\:flex { display: none; }
  .rg-sitenav-user .md\:justify-start { justify-content: space-between; }
  .rg-sitenav-user .md\:space-x-10 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 0; }
}

/* Binnenscherm-landscape (890×626): de sticky zijbalk op /blog/<slug> (566 px hoog,
   top 96 px) viel met de onderste knop buiten de 626 px hoge viewport. */
@media (min-width: 768px) and (max-width: 939px) and (max-height: 700px) and (hover: none) and (pointer: coarse) {
  .sticky.top-24.space-y-6 { position: static; }
}