/* ============================================================================
   Responsive visibility utilities
   ============================================================================
   Breakpoints:
     xs   500px
     sm   640px
     md   768px
     lg  1024px
     xl  1300px
   ============================================================================ */

/* ----------------------------------------------------------------------------
   hide-{bp}
   Visible by default. Hidden when viewport is at or below the breakpoint.
   Use for: elements that should disappear on small screens.
   Example: <span class="auth-link-full hide-xs">Long label</span>
   ---------------------------------------------------------------------------- */

@media (max-width:  500px) { .hide-xs { display: none; } }
@media (max-width:  640px) { .hide-sm { display: none; } }
@media (max-width:  768px) { .hide-md { display: none; } }
@media (max-width: 1024px) { .hide-lg { display: none; } }
@media (max-width: 1300px) { .hide-xl { display: none; } }

/* ----------------------------------------------------------------------------
   hide-below-{bp}
   Hidden by default. Visible when viewport reaches the breakpoint or wider.
   Use for: elements that should only appear on larger screens.
   Example: <aside class="hero-quote hide-below-lg">...</aside>
   ---------------------------------------------------------------------------- */

.hide-below-xs,
.hide-below-sm,
.hide-below-md,
.hide-below-lg,
.hide-below-xl  { display: none; }

@media (min-width:  500px) { .hide-below-xs { display: revert; } }
@media (min-width:  640px) { .hide-below-sm { display: revert; } }
@media (min-width:  768px) { .hide-below-md { display: revert; } }
@media (min-width: 1024px) { .hide-below-lg { display: revert; } }
@media (min-width: 1300px) { .hide-below-xl { display: revert; } }

/* ----------------------------------------------------------------------------
   show-{bp}-only
   Hidden by default. Visible only when viewport is at or below the breakpoint.
   Use for: alternate short labels or fallback content on small screens.
   Example: <span class="show-xs-only">Short</span>
   ---------------------------------------------------------------------------- */

.show-xs-only,
.show-sm-only,
.show-md-only,
.show-lg-only,
.show-xl-only  { display: none; }

@media (max-width:  500px) { .show-xs-only { display: revert; } }
@media (max-width:  640px) { .show-sm-only { display: revert; } }
@media (max-width:  768px) { .show-md-only { display: revert; } }
@media (max-width: 1024px) { .show-lg-only { display: revert; } }
@media (max-width: 1300px) { .show-xl-only { display: revert; } }

/* ----------------------------------------------------------------------------
   is-loading
   Dims the element and disables interaction while data is loading.
   Use for: any container awaiting async data.
   Example: <div class="panel is-loading">...</div>
   ---------------------------------------------------------------------------- */

.is-loading {
  opacity: 0.58;
  filter: saturate(0.65);
  pointer-events: none;
  transition: opacity 140ms ease, filter 140ms ease;
}