/*
  Display utilities

  Responsive display control classes for showing/hiding elements at different breakpoints.

  Breakpoints:
  - sm: mobile (320px - 480px)
  - md: tablet (481px - 768px)
  - lg: desktop (769px - 1=279px)
  - xl: wide desktop (1280px+)

  Usage:
  .a-hidden          - Hidden on all screen sizes
  .a-md-hidden       - Hidden on tablet and up (>= 481px)
  .a-lg-hidden       - Hidden on desktop and up (>= 769px)
  .a-md-flex         - Display as flex on tablet and up (>= 481px)
  .a-lg-block        - Display as block on desktop and up (>= 769px)

  Example:
  <button class="a-btn a-lg-hidden">Mobile/Tablet only</button>
  <button class="a-btn a-hidden a-lg-flex">Desktop only</button>
*/

/* Base display utilities (mobile-first) */
.a-hidden {
  display: none;
}

.a-block {
  display: block;
}

.a-inline-block {
  display: inline-block;
}

.a-flex {
  display: flex;
}

.a-inline-flex {
  display: inline-flex;
}

/* Tablet and up (md-min: >= 481px) */
@media (min-width: 481px) {
  .a-md-hidden {
    display: none;
  }

  .a-md-block {
    display: block;
  }

  .a-md-inline-block {
    display: inline-block;
  }

  .a-md-flex {
    display: flex;
  }

  .a-md-inline-flex {
    display: inline-flex;
  }
}

/* Desktop and up (lg-min: >= 769px) */
@media (min-width: 769px) {
  .a-lg-hidden {
    display: none;
  }

  .a-lg-block {
    display: block;
  }

  .a-lg-inline-block {
    display: inline-block;
  }

  .a-lg-flex {
    display: flex;
  }

  .a-lg-inline-flex {
    display: inline-flex;
  }
}

/* Wide desktop and up (xl-min: >= 1280px) */
@media (min-width: 1280px) {
  .a-xl-hidden {
    display: none;
  }

  .a-xl-block {
    display: block;
  }

  .a-xl-inline-block {
    display: inline-block;
  }

  .a-xl-flex {
    display: flex;
  }

  .a-xl-inline-flex {
    display: inline-flex;
  }
}