/* Adaptive text utility — pairs with universalis_adaptive_text() helper.
   Default breakpoints: xxs <376, xs 376-575, sm 576-767, md 768-991,
   lg 992-1199, xl 1200-1399, xxl >=1400. Override by re-enqueuing
   a custom file with the same handle 'universalis-adaptive-text'. */

.adaptive-text { display: inherit; width: 100%; position: relative; }

.adaptive-text .adaptive-xxs,
.adaptive-text .adaptive-xs,
.adaptive-text .adaptive-sm,
.adaptive-text .adaptive-md,
.adaptive-text .adaptive-lg,
.adaptive-text .adaptive-xl,
.adaptive-text .adaptive-xxl { display: none !important; width: 100%; }

.adaptive-text--inline { display: inline; }
.adaptive-text--inline .adaptive-xxs,
.adaptive-text--inline .adaptive-xs,
.adaptive-text--inline .adaptive-sm,
.adaptive-text--inline .adaptive-md,
.adaptive-text--inline .adaptive-lg,
.adaptive-text--inline .adaptive-xl,
.adaptive-text--inline .adaptive-xxl { width: auto; }

/* Mobile-first cascade: bare min-width queries with NO upper bound, each
   hiding every variant and then revealing its own. The widest block whose
   min-width is satisfied wins. Bounded ranges (…max-width: 375.98px, then
   min-width: 376px) leave a sliver where nothing matches, and viewport
   widths on phones are frequently fractional (physical px / DPR) — a width
   in such a sliver kept the base `display: none` and the text disappeared
   entirely. Without upper bounds no such sliver can exist. */

@media (min-width: 0) {
  .adaptive-text .adaptive-xxs,
  .adaptive-text .adaptive-xs,
  .adaptive-text .adaptive-sm,
  .adaptive-text .adaptive-md,
  .adaptive-text .adaptive-lg,
  .adaptive-text .adaptive-xl,
  .adaptive-text .adaptive-xxl { display: none !important; }
  .adaptive-text .adaptive-xxs { display: inline !important; }
}

@media (min-width: 376px) {
  .adaptive-text .adaptive-xxs,
  .adaptive-text .adaptive-xs,
  .adaptive-text .adaptive-sm,
  .adaptive-text .adaptive-md,
  .adaptive-text .adaptive-lg,
  .adaptive-text .adaptive-xl,
  .adaptive-text .adaptive-xxl { display: none !important; }
  .adaptive-text .adaptive-xs { display: inline !important; }
}

@media (min-width: 576px) {
  .adaptive-text .adaptive-xxs,
  .adaptive-text .adaptive-xs,
  .adaptive-text .adaptive-sm,
  .adaptive-text .adaptive-md,
  .adaptive-text .adaptive-lg,
  .adaptive-text .adaptive-xl,
  .adaptive-text .adaptive-xxl { display: none !important; }
  .adaptive-text .adaptive-sm { display: inline !important; }
}

@media (min-width: 768px) {
  .adaptive-text .adaptive-xxs,
  .adaptive-text .adaptive-xs,
  .adaptive-text .adaptive-sm,
  .adaptive-text .adaptive-md,
  .adaptive-text .adaptive-lg,
  .adaptive-text .adaptive-xl,
  .adaptive-text .adaptive-xxl { display: none !important; }
  .adaptive-text .adaptive-md { display: inline !important; }
}

@media (min-width: 992px) {
  .adaptive-text .adaptive-xxs,
  .adaptive-text .adaptive-xs,
  .adaptive-text .adaptive-sm,
  .adaptive-text .adaptive-md,
  .adaptive-text .adaptive-lg,
  .adaptive-text .adaptive-xl,
  .adaptive-text .adaptive-xxl { display: none !important; }
  .adaptive-text .adaptive-lg { display: inline !important; }
}

@media (min-width: 1200px) {
  .adaptive-text .adaptive-xxs,
  .adaptive-text .adaptive-xs,
  .adaptive-text .adaptive-sm,
  .adaptive-text .adaptive-md,
  .adaptive-text .adaptive-lg,
  .adaptive-text .adaptive-xl,
  .adaptive-text .adaptive-xxl { display: none !important; }
  .adaptive-text .adaptive-xl { display: inline !important; }
}

@media (min-width: 1400px) {
  .adaptive-text .adaptive-xxs,
  .adaptive-text .adaptive-xs,
  .adaptive-text .adaptive-sm,
  .adaptive-text .adaptive-md,
  .adaptive-text .adaptive-lg,
  .adaptive-text .adaptive-xl,
  .adaptive-text .adaptive-xxl { display: none !important; }
  .adaptive-text .adaptive-xxl { display: inline !important; }
}