/* Mobile overrides v6 — logo above title, hide inline handle, admin forms stack, remove wide tables */
@media (max-width: 860px){
  /* --- Header --- */
  .brand-inner{padding:12px 12px; gap:8px; flex-direction:column; align-items:center; text-align:center;}
  .brand-left{width:100%; display:flex; flex-direction:column; align-items:center; gap:8px;}
  .brand-logo-img{height:80px !important;} /* slightly bigger */
  .brand-text{max-width:100%;}
  .brand-title{font-size:20px; line-height:1.05; margin:0;}
  .brand-sub{font-size:12px; margin:0;}
  /* Hide the inline @eventsbysna under the subtitle (keep the social one) */
  .brand-text .brand-handle{display:none;}
  .social-icons{gap:10px; width:100%; justify-content:center; flex-wrap:wrap; overflow:hidden;}

  /* --- Hero sizing --- */
  .hero-title{font-size:20px; line-height:1.25;}
  .hero-date{font-size:12px;}
  .hero-sub{font-size:14px;}

  /* --- Admin: use cards + stacked forms --- */
  /* Keep wrapper visible, hide desktop tables only */
  #adminGuests .table-wrap{display:block !important; overflow:visible;}
  #adminGuests .table-wrap > table{display:none !important;}
  #adminGuests .guest-cards{display:grid !important; grid-template-columns:1fr; gap:10px;}

  /* Stack header editor and add-guest forms; no side-by-side 'wide table' feel */
  #admin .grid-3, #admin .grid-5{grid-template-columns:1fr !important;}
  #admin .admin-controls{flex-direction:column; align-items:stretch;}
  #admin .admin-controls .btn, #admin .admin-controls label.btn{width:100%;}

  /* Tighten spacing inside the admin cards */
  #admin .card.soft{padding:12px;}
  #admin .stat{min-width:unset; flex:1; text-align:center;}
  #admin .stat-value{font-size:20px;}
  #admin .stat-label{font-size:11px;}
}