/* ============================================================================
 * Display utilities + responsive variants.
 * ========================================================================== */

.wb-block       { display: block; }
.wb-inline-block{ display: inline-block; }
.wb-inline      { display: inline; }
.wb-grid        { display: grid; }
.wb-hidden      { display: none; }
.wb-contents    { display: contents; }

/* Responsive show/hide — mobile-first
 * Pattern: .wb-md\:block reads as "≥md (768px) → display: block"
 * Use the escaped colon in markup: class="wb-hidden wb-md:block"
 */

@media (min-width: 768px) {
  .wb-md\:block       { display: block; }
  .wb-md\:inline      { display: inline; }
  .wb-md\:inline-block{ display: inline-block; }
  .wb-md\:flex        { display: flex; }
  .wb-md\:grid        { display: grid; }
  .wb-md\:hidden      { display: none; }
}

@media (min-width: 1024px) {
  .wb-lg\:block       { display: block; }
  .wb-lg\:inline      { display: inline; }
  .wb-lg\:inline-block{ display: inline-block; }
  .wb-lg\:flex        { display: flex; }
  .wb-lg\:grid        { display: grid; }
  .wb-lg\:hidden      { display: none; }
}