/* audiences-container.css — Audiences' four container queries (RUN-1457). PLAIN CSS on purpose.

   Laravel Mix 5 runs every .sass() output through resolve-url-loader with `engine: 'rework'` hardcoded
   (node_modules/laravel-mix/src/components/Preprocessor.js:87), and rework's CSS parser knows no
   `@container`: it reads the at-rule as a selector and dies on the first nested rule — measured on
   price-sync.scss as "missing '}'", exit 2, while Sass itself had compiled the file. So these rules
   bypass the Sass pipeline the way `loader.css` and `price-sync-container.css` do: copied by
   `mix.copy`, versioned in the manifest, linked in application.blade.php AFTER audiences.css. They
   read the same tokens at runtime under `.px-au`; every other rule of the screen is in audiences.scss.

   The containers: `.aud-page` for the split, `.aud-card` for the three inside the card.

   ⚠️ `.aud-split` asks at 1000px, NOT the JSX's 1080px MEDIA query (`AudienceParts.jsx:179`). That
      number was authored in a shell with no sidebar — in Vuexy the content is viewport − 260 − 64, so
      the question is the CONTENT's width, not the viewport's, and 1080 would leave the main column at
      424px. The three inside the card are the JSX's own numbers exactly: `.aud-rule` 560
      (`:187`), `.aud-cond` 620 (`:193`), `.aud-head` 520 (`:204`). */

@container (min-width: 1000px) {
    .px-au .aud-split { grid-template-columns: 296px minmax(0, 1fr); gap: var(--space-12); }
}

@container (min-width: 560px) {
    /* the IF keyword sits BESIDE its box once the card is wide enough, pinned to its top */
    .px-au .aud-rule { grid-template-columns: 132px minmax(0, 1fr); gap: var(--space-8); }
    .px-au .aud-rule > .aud-key { margin-bottom: 0; }
    .px-au .aud-rule > .aud-box { margin-bottom: 0; }
}

@container (min-width: 620px) {
    /* the field and its value share a line; the quantifier wraps underneath */
    .px-au .aud-cond { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@container (max-width: 520px) {
    /* the name owns the first row on a narrow card; the small things share the second rather than
       each claiming a line of their own */
    .px-au .aud-head > .aud-name { flex: 1 1 100%; }
    .px-au .aud-head > .aud-meta { margin-left: 0; width: 100%; justify-content: space-between; align-items: center; }
}