/* Mobile overrides v5 — centered header, admin cards */
@media (max-width: 860px){
  /* Center the top brand strip */
  .brand-inner{padding:12px 12px; gap:8px; flex-direction:column; align-items:center; text-align:center;}
  .brand-left{width:100%; justify-content:center; align-items:center; gap:10px;}
  .brand-logo-img{height:76px !important;} /* a tad bigger */
  .brand-text{max-width:100%;}
  .brand-title{font-size:21px; line-height:1.05; letter-spacing:.2px; margin:0;}
  .brand-sub{font-size:12px;}
  .brand-handle{font-size:12px;}
  .social-icons{gap:10px; width:100%; justify-content:center; flex-wrap:wrap; overflow:hidden;}

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

  /* Ensure both guest and admin sections use cards on mobile */
  /* Keep wrapper visible, hide desktop tables only */
  .table-wrap{display:block !important; overflow:visible;}
  .table-wrap > table{display:none !important;}

  /* When inside the admin container, also show cards layout */
  #adminGuests .guest-cards{display:grid !important;}
  #adminGuests .table-wrap > table{display:none !important;}

  /* Card tweaks for compact spacing */
  .guest-card{padding:12px;}
  .guest-card .name{font-size:17px;}
  .guest-card .meta{font-size:12px;}
  .guest-card .actions .btn, .guest-card .actions .btn-ghost, .guest-card .actions .checkin-btn{padding:12px 14px;}
}