/* =====================================================================
   Responsive visibility utilities
   Load AFTER the main stylesheet:  <link rel="stylesheet" href="/css/utilities.css">

   Breakpoints (same as vp-clean.css)
     sm   phones     up to 640px
     md   tablets    641px  to 960px
     lg   laptops    961px  to 1200px
     xl   desktops   1201px and wider

   HIDE  .hidden-{size}         hidden only at that size
         .hidden-{size}-down    hidden at that size and every smaller one
         .hidden-{size}-up      hidden at that size and every larger one

   SHOW  .show-{size}           visible only at that size, hidden at the others
         .show-{size}-up        visible from that size upward, hidden below
         .show-{size}-down      visible from that size downward, hidden above

   Examples
     <nav class="nav hidden-sm">           hidden on phones
     <button class="burger show-md-down">  visible on tablets and phones only
     <div class="hidden-md hidden-lg">     hidden on tablets and laptops (stack classes freely)
     <img class="show-xl">                 desktop only

   Notes
     - "show" never sets a display value: the element keeps its own (flex, grid, block...).
       So it hides at the other sizes instead of revealing at this one. An element that is
       display:none in its own CSS (like .drawer) cannot be revealed by these classes.
     - !important is deliberate, so a utility wins over component rules such as .act { display: flex }.
     - sm-up and xl-down are not generated: they would match every size.
   ===================================================================== */

/* sm: phones, up to 640px */
@media (max-width: 640.98px) {
    .hidden-sm,
    .hidden-sm-down,
    .show-md,
    .hidden-md-down,
    .show-md-up,
    .show-lg,
    .hidden-lg-down,
    .show-lg-up,
    .show-xl,
    .show-xl-up { display: none !important; }
  }
  
  /* md: tablets, 641px to 960px */
  @media (min-width: 641px) and (max-width: 960.98px) {
    .show-sm,
    .show-sm-down,
    .hidden-md,
    .hidden-md-down,
    .hidden-md-up,
    .show-lg,
    .hidden-lg-down,
    .show-lg-up,
    .show-xl,
    .show-xl-up { display: none !important; }
  }
  
  /* lg: laptops, 961px to 1200px */
  @media (min-width: 961px) and (max-width: 1200.98px) {
    .show-sm,
    .show-sm-down,
    .show-md,
    .show-md-down,
    .hidden-md-up,
    .hidden-lg,
    .hidden-lg-down,
    .hidden-lg-up,
    .show-xl,
    .show-xl-up { display: none !important; }
  }
  
  /* xl: desktops, 1201px and wider */
  @media (min-width: 1201px) {
    .show-sm,
    .show-sm-down,
    .show-md,
    .show-md-down,
    .hidden-md-up,
    .show-lg,
    .show-lg-down,
    .hidden-lg-up,
    .hidden-xl,
    .hidden-xl-up { display: none !important; }
  }