/* RIDO v0.48.9 — mobile-first public frontend hotfix.
   Scope: uitsluitend publieke website. Desktopregels blijven onaangeraakt.
   Doel: geen horizontale overflow, compacte header/drawer en echte éénkoloms layouts op telefoon. */

@media (max-width: 820px) {
  html body.rido-public-site.rido-ui-v0489 {
    width:100%;
    max-width:100%;
    overflow-x:hidden!important;
  }
  html body.rido-public-site.rido-ui-v0489 main {
    width:100%;
    max-width:100%;
    overflow-x:clip!important;
  }
  html body.rido-public-site.rido-ui-v0489 main :where(section,div,article,figure,nav,aside,form,fieldset) {
    min-width:0;
    max-width:100%;
  }
  html body.rido-public-site.rido-ui-v0489 :where(img,video,canvas,svg,iframe) {
    max-width:100%!important;
  }
  html body.rido-public-site.rido-ui-v0489 .wrap,
  html body.rido-public-site.rido-ui-v0489 main.rido-home-v0466 .wrap {
    width:calc(100% - 28px)!important;
    max-width:none!important;
    margin-inline:auto!important;
  }

  /* Bovenste doelgroep-/vertrouwensbalk blijft één compacte regel. */
  html body.rido-public-site.rido-ui-v0489 .site-audience-context-inner {
    width:calc(100% - 24px)!important;
    min-height:34px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
    overflow:hidden!important;
  }
  html body.rido-public-site.rido-ui-v0489 .site-context-trust {
    min-width:0!important;
    flex:1 1 auto!important;
    overflow:hidden!important;
  }
  html body.rido-public-site.rido-ui-v0489 .site-context-trust span {
    min-width:0!important;
  }
  html body.rido-public-site.rido-ui-v0489 .site-context-trust span:nth-child(n+2) {
    display:none!important;
  }
  html body.rido-public-site.rido-ui-v0489 .site-context-trust span:first-child {
    display:flex!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:11px!important;
  }
  html body.rido-public-site.rido-ui-v0489 .site-audience-change {
    flex:0 0 auto!important;
    max-width:42vw!important;
    font-size:11px!important;
    white-space:nowrap!important;
  }

  /* Mobiele hoofdheader: branding links, menu rechts. */
  html body.rido-public-site.rido-ui-v0489 .site-header .nav-wrap {
    width:calc(100% - 24px)!important;
    min-height:62px!important;
    height:auto!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:10px!important;
    padding:8px 0!important;
  }
  html body.rido-public-site.rido-ui-v0489 .site-header .brand {
    grid-column:1!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
    gap:9px!important;
  }
  html body.rido-public-site.rido-ui-v0489 .site-header .brand-mark {
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    border-radius:12px!important;
  }
  html body.rido-public-site.rido-ui-v0489 .site-header .brand-full {
    display:inline!important;
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:16px!important;
  }
  html body.rido-public-site.rido-ui-v0489 .site-header .brand-short { display:none!important; }
  html body.rido-public-site.rido-ui-v0489 .site-header .site-menu-toggle {
    display:inline-flex!important;
    grid-column:2!important;
    justify-self:end!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    margin:0!important;
  }

  /* Drawer gebruikt de werkelijk gemeten headerhoogte en kan nooit buiten beeld vallen. */
  html body.rido-public-site.rido-ui-v0489 .site-header .site-nav {
    position:fixed!important;
    top:var(--rido-public-header-bottom,96px)!important;
    left:12px!important;
    right:12px!important;
    width:auto!important;
    max-width:none!important;
    max-height:calc(100dvh - var(--rido-public-header-bottom,96px) - 12px)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    padding:12px!important;
    border-radius:18px!important;
    z-index:1310!important;
  }
  html body.rido-public-site.rido-ui-v0489 .site-header .site-nav > *,
  html body.rido-public-site.rido-ui-v0489 .site-header .nav-more,
  html body.rido-public-site.rido-ui-v0489 .site-header .nav-more-menu,
  html body.rido-public-site.rido-ui-v0489 .site-header .nav-mega-grid,
  html body.rido-public-site.rido-ui-v0489 .site-header .nav-mega-intro {
    min-width:0!important;
    max-width:100%!important;
  }
  html body.rido-public-site.rido-ui-v0489 .site-header .nav-more-menu.nav-mega-menu {
    position:static!important;
    inset:auto!important;
    transform:none!important;
    width:100%!important;
    max-height:none!important;
    margin:4px 0 8px!important;
    padding:8px!important;
    overflow:visible!important;
    border-radius:14px!important;
  }
  html body.rido-public-site.rido-ui-v0489 .site-header .nav-mega-grid,
  html body.rido-public-site.rido-ui-v0489 .site-header .nav-mega-grid.three-cols {
    grid-template-columns:1fr!important;
  }
  html body.rido-public-site.rido-ui-v0489 .site-header :where(a,.nav-more-btn) {
    min-height:46px!important;
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }

  /* Alle publieke hero's worden echte mobiele éénkoloms layouts. */
  html body.rido-public-site.rido-ui-v0489 main :where(
    .rido-home-hero-grid,.visual-page-hero,.public-photo-hero-grid,
    .v18-hero-layout,.rido-module-hero-grid,.rido-menu-hero-grid,
    .order-standard-hero-grid,.order-hero-grid,.package-hero-grid,
    .display-suite-hero-grid,.cast-hero-grid,.rido-v27-scope-panel
  ) {
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:24px!important;
    width:100%!important;
  }
  html body.rido-public-site.rido-ui-v0489 main :where(.rido-home-copy,.hero-copy,.content,.page-photo-card) {
    min-width:0!important;
    max-width:100%!important;
  }
  html body.rido-public-site.rido-ui-v0489 main :where(.rido-home-copy,.hero-copy) h1,
  html body.rido-public-site.rido-ui-v0489 main :where(.page-title,.visual-page-hero h1) {
    max-width:100%!important;
    font-size:clamp(34px,10vw,46px)!important;
    line-height:1.04!important;
    letter-spacing:-.035em!important;
    text-wrap:balance!important;
  }
  html body.rido-public-site.rido-ui-v0489 main :where(.rido-home-lead,.hero-copy p,.visual-page-hero p) {
    max-width:100%!important;
    font-size:16px!important;
    line-height:1.6!important;
  }
  html body.rido-public-site.rido-ui-v0489 main :where(.rido-home-actions,.hero-actions,.actions,.cta-actions) {
    display:grid!important;
    grid-template-columns:1fr!important;
    align-items:stretch!important;
    width:100%!important;
    gap:10px!important;
  }
  html body.rido-public-site.rido-ui-v0489 main :where(.rido-home-actions,.hero-actions,.actions,.cta-actions) > :where(a,button,.btn) {
    width:100%!important;
    max-width:100%!important;
  }

  /* Homepage-collage: geen vaste hoogte of desktopkolommen op telefoon/tablet. */
  html body.rido-public-site.rido-ui-v0489 main .rido-hero-collage {
    width:100%!important;
    max-width:100%!important;
    min-height:0!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:none!important;
    gap:12px!important;
  }
  html body.rido-public-site.rido-ui-v0489 main .rido-hero-media,
  html body.rido-public-site.rido-ui-v0489 main .rido-hero-media-main {
    width:100%!important;
    min-width:0!important;
    grid-row:auto!important;
    display:grid!important;
    grid-template-rows:auto auto!important;
  }
  html body.rido-public-site.rido-ui-v0489 main .rido-hero-media img {
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:16/9!important;
    object-fit:cover!important;
  }
  html body.rido-public-site.rido-ui-v0489 main .rido-hero-media > span {
    min-width:0!important;
    padding:14px 15px!important;
  }

  /* Grids/kaarten: geen desktop minimums of tweekolomsrestanten. */
  html body.rido-public-site.rido-ui-v0489 main :where(
    .rido-solution-grid,.rido-private-product-grid,.rido-benefit-strip,
    .rido-usecase-layout,.rido-usecase-grid,.rido-startpoint-grid,.rido-process-grid,
    .signage-plan-grid,.info-grid,.software-product-grid,.display-module-grid,
    .display-process-grid,.pricing-grid,.package-grid,.steps-grid,.grid.two,.grid.three
  ) {
    grid-template-columns:minmax(0,1fr)!important;
  }
  html body.rido-public-site.rido-ui-v0489 main :where(article,.card,.rido-solution-card,.signage-plan-card) {
    min-width:0!important;
    max-width:100%!important;
  }
  html body.rido-public-site.rido-ui-v0489 main .rido-solution-card-copy {
    min-height:0!important;
    padding:18px 16px!important;
  }
  html body.rido-public-site.rido-ui-v0489 main .rido-solution-card img {
    width:100%!important;
    height:auto!important;
    aspect-ratio:16/9!important;
    object-fit:cover!important;
  }

  /* Taaknavigatie: kaarten onder elkaar, zonder negatieve marge of lichte achtergrondbalk. */
  html body.rido-public-site.rido-ui-v0489 .rido-public-taskbar,
  html body.rido-public-site.rido-ui-v0489 .rido-public-taskbar-private,
  html body.rido-public-site.rido-ui-v0489 .rido-public-taskbar-business {
    width:calc(100% - 28px)!important;
    grid-template-columns:1fr!important;
    margin:16px auto 0!important;
    gap:8px!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  html body.rido-public-site.rido-ui-v0489 .rido-public-taskbar > a {
    width:100%!important;
    min-width:0!important;
    min-height:72px!important;
    padding:13px 14px!important;
    border-radius:13px!important;
  }

  /* Laatste CTA en formulieren blijven volledig binnen het scherm. */
  html body.rido-public-site.rido-ui-v0489 main .rido-home-final-inner,
  html body.rido-public-site.rido-ui-v0489 main :where(.cta,.v18-cta,.order-cta) {
    width:100%!important;
    max-width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:18px!important;
  }
  html body.rido-public-site.rido-ui-v0489 main :where(input,select,textarea,button) {
    max-width:100%!important;
  }
  html body.rido-public-site.rido-ui-v0489 main .table-wrap {
    max-width:100%!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
  }
}

@media (max-width: 480px) {
  html body.rido-public-site.rido-ui-v0489 .wrap,
  html body.rido-public-site.rido-ui-v0489 main.rido-home-v0466 .wrap {
    width:calc(100% - 22px)!important;
  }
  html body.rido-public-site.rido-ui-v0489 .site-audience-context-inner,
  html body.rido-public-site.rido-ui-v0489 .site-header .nav-wrap {
    width:calc(100% - 20px)!important;
  }
  html body.rido-public-site.rido-ui-v0489 .site-header .brand-full {
    font-size:15px!important;
  }
  html body.rido-public-site.rido-ui-v0489 .site-audience-change {
    max-width:36vw!important;
    font-size:10.5px!important;
  }
  html body.rido-public-site.rido-ui-v0489 main :where(.rido-home-hero,.rido-business-hero,.rido-private-hero,.page-hero,.v18-service-hero,.rido-module-hero,.rido-menu-hero) {
    padding:30px 0!important;
  }
  html body.rido-public-site.rido-ui-v0489 main :where(.rido-home-copy,.hero-copy) h1,
  html body.rido-public-site.rido-ui-v0489 main :where(.page-title,.visual-page-hero h1) {
    font-size:clamp(32px,10.5vw,40px)!important;
  }
  html body.rido-public-site.rido-ui-v0489 main .rido-home-section {
    padding:44px 0!important;
  }
  html body.rido-public-site.rido-ui-v0489 .rido-public-taskbar,
  html body.rido-public-site.rido-ui-v0489 .rido-public-taskbar-private,
  html body.rido-public-site.rido-ui-v0489 .rido-public-taskbar-business {
    width:calc(100% - 22px)!important;
  }
}