/**
 * CEMIUX.DESIGN-SYSTEM.4A
 * Canonical responsive behavior materialization.
 *
 * Breakpoints:
 * mobile  < 48rem
 * tablet  48rem–74.999rem
 * desktop >= 75rem
 *
 * No domain decisions, page selectors, positional selectors or persisted overrides.
 */

:root {
  --cemi-ds-breakpoint-mobile-max: 47.999rem;
  --cemi-ds-breakpoint-tablet-min: 48rem;
  --cemi-ds-breakpoint-tablet-max: 74.999rem;
  --cemi-ds-breakpoint-desktop-min: 75rem;
  --cemi-ds-responsive-collapse-size: 12rem;
  --cemi-ds-responsive-sticky-offset: var(--cemi-space-3, .75rem);
  --cemi-ds-responsive-scroll-gap: var(--cemi-space-3, .75rem);
}

/* preserve intentionally has no layout mutation. */
[data-cemi-design-materialized="1"][data-cemi-responsive-behavior="preserve"] {
  --cemi-ds-responsive-mode: preserve;
}

/* Sticky is meaningful at every breakpoint and stays presentation-only. */
[data-cemi-design-materialized="1"][data-cemi-responsive-behavior="sticky"] {
  position: sticky;
  top: var(--cemi-ds-responsive-sticky-offset);
  z-index: 2;
  --cemi-ds-responsive-mode: sticky;
}

/* Tablet + mobile: horizontal collections may become safely scrollable. */
@media (max-width: 74.999rem) {
  [data-cemi-design-materialized="1"][data-cemi-responsive-behavior="scroll"] {
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    --cemi-ds-responsive-mode: scroll;
  }
}

/* Tablet: wrap dense clusters without changing their semantic order. */
@media (min-width: 48rem) and (max-width: 74.999rem) {
  [data-cemi-design-materialized="1"][data-cemi-responsive-behavior="wrap"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cemi-ds-live-gap, var(--cemi-ds-responsive-scroll-gap));
    --cemi-ds-responsive-mode: wrap;
  }
}

/* Mobile: explicit behaviors become actual reflow rules. */
@media (max-width: 47.999rem) {
  [data-cemi-design-materialized="1"][data-cemi-responsive-behavior="stack"] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    --cemi-ds-responsive-mode: stack;
  }

  [data-cemi-design-materialized="1"][data-cemi-responsive-behavior="wrap"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
    gap: var(--cemi-ds-live-gap, var(--cemi-ds-responsive-scroll-gap));
    --cemi-ds-responsive-mode: wrap;
  }

  [data-cemi-design-materialized="1"][data-cemi-responsive-behavior="collapse"],
  [data-cemi-design-materialized="1"][data-cemi-visibility-policy="collapsed"] {
    max-block-size: var(--cemi-ds-responsive-collapse-size);
    overflow: hidden;
    --cemi-ds-responsive-mode: collapse;
  }

  [data-cemi-design-materialized="1"][data-cemi-visibility-policy="mobile_priority"] {
    order: -10;
  }

  [data-cemi-design-materialized="1"][data-cemi-visibility-policy="desktop_only"] {
    display: none !important;
  }

  [data-cemi-design-category="action"] {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }

  [data-cemi-design-category="field"],
  [data-cemi-design-category="surface"],
  [data-cemi-design-category="text"] {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

/* Desktop establishes the resolved behavior marker without forcing reflow. */
@media (min-width: 75rem) {
  [data-cemi-design-materialized="1"][data-cemi-responsive-behavior] {
    --cemi-ds-responsive-mode: desktop;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-cemi-design-materialized="1"] {
    scroll-behavior: auto;
  }
}