/* Mobile fixes. Loaded after site.css (via nav-menu.php). Desktop is untouched. */
@media (max-width:820px){
  /* Header menu becomes the vertical drawer (see nav-menu.php) */
  .site-head .nav{display:none!important}
  .site-head .head-inner{flex-wrap:nowrap}

  /* Grids with a minimum wider than a small phone */
  .photo-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
  .card-grid,.split,.two-col,.two-col-wide,.risk-grid,.cta-inner,.related-grid{grid-template-columns:minmax(0,1fr)}
  .book-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr))}

  /* Labels below 11px are hard to read on phones */
  .eyebrow,.crumbs ol,.badge,.ev-label,.finding-ref,.card-foot,.more{font-size:11px}
  .card-type,.card-id,.metacell dt,.status,.verdict,.risk-sev,.badge-sm,.datatable th,.datatable .mono,.book-cover .mono,.book-meta .mono{font-size:10.5px}
  .brand-sub{font-size:8.5px}

  /* Text never forces sideways scrolling */
  body{overflow-wrap:break-word}
  .ev-label,.badge{white-space:normal}
  img,video,iframe{max-width:100%}
}
@media (max-width:560px){
  /* Tables inside a scroll wrapper keep aligned columns; the wrapper scrolls */
  .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table-scroll .datatable{display:table;width:auto;min-width:100%}
  .table-scroll .datatable thead{display:table-header-group}
  .table-scroll .datatable tbody{display:table-row-group}
  .table-scroll .datatable tr{display:table-row}
  .table-scroll .datatable th,.table-scroll .datatable td{min-width:120px}

  .section{padding-block:clamp(40px,11vw,56px)}
  .btn-row .btn,.cta-actions .btn{flex:1 1 100%;justify-content:center;text-align:center}
  .founder-img{width:120px}
}