/* ==========================================================================
   RACTRO LAYOUT ENGINE  —  the ONE place container layout CSS lives.
   --------------------------------------------------------------------------
   Section, Container and Grid all render a single `.ractro-lay` element. Its
   layout is driven entirely by CSS custom properties, so the SAME stylesheet
   styles BOTH surfaces:

     • the live page  (enqueued alongside the front-end runtime), and
     • the editor canvas (injected into the shadow root, see src/editor/index.jsx).

   How the vars are set (single source of truth — never re-implemented in JS/PHP
   layout code):

     1. Ordinary selector-carrying controls emit most of them through the shared
        control pipeline — set on `.ractro-element-<id>` (the outer wrapper the
        front end / canvas already give every element) and INHERITED one level
        into that element's own `.ractro-lay` child. Both the PHP compiler
        (Ractro_Widget_Base::get_dynamic_css) and the editor injector
        (DynamicStyleInjector) compile these identically, so `wp ractro parity`
        can assert they agree, and per-device values (--r-*_tablet, etc.) come
        free through the existing responsive machinery.

     2. The boxed max-width must be COMPUTED, so the layout base emits `--r-maxw`
        inline on the `.ractro-lay` element from render().

     3. The grid track lists are computed too, but they are PER-DEVICE — and an
        inline custom property outranks every media query, which is why grid
        columns were once stuck at their desktop value on phones. So
        `--r-gtc / --r-gtr` are emitted as real rules on `.ractro-element-<id>`
        (desktop + the two @media bands) by
        Ractro_Widget_Layout_Base::computed_layout_css(), and as the same three
        bands with @container queries by DynamicStyleInjector in the canvas.
        EVERY layout primitive always emits its desktop pair (`none` when it is
        not a grid), so a nested container still re-declares rather than
        inheriting its parent's tracks.

   The editor canvas computes the exact same strings in ONE shared helper
   (src/lib/layout.js → computeGridTemplate / computeContentMaxWidth) — the only
   sanctioned twin, and a small one.

   Because every container always emits its full desktop var set, a nested
   container fully re-declares its own layout and never inherits a parent's.
   ========================================================================== */

.ractro-lay {
  /* Box model */
  box-sizing: border-box;
  width: 100%;
  /* A FLEX ITEM CANNOT HONOUR ITS WIDTH WITHOUT THIS.
     `min-width` defaults to `auto` on a flex item, which means "never smaller
     than my content" — so `width: 20%` on a column holding a logo or a nav menu
     is a floor, not a width. Measured on a real header: three children set to
     20% / 60% / 20% rendered 5% / 23% / 5%, and the nav wrapped to two lines.
     `0` is what every builder ships as the default; an author who wants
     intrinsic sizing sets Min W back to `auto`, which the var lets them do. */
  min-width: var(--r-minw, 0);
  max-width: var(--r-maxw, none);
  min-height: var(--r-minh, auto);
  margin-inline: auto;           /* centres a boxed max-width; a no-op at none/100% */
  position: relative;
  overflow: var(--r-ovf, visible);

  /* Display + flex axis */
  display: var(--r-display, flex);
  flex-direction: var(--r-dir, column);
  flex-wrap: var(--r-wrap, nowrap);
  justify-content: var(--r-jc, flex-start);
  align-items: var(--r-ai, stretch);
  align-content: var(--r-ac, stretch);

  /* Gaps (shared by flex + grid) */
  column-gap: var(--r-cgap, 0px);
  row-gap: var(--r-rgap, 0px);

  /* Grid tracks (computed per-device into the stylesheet; `none` = not a grid) */
  grid-template-columns: var(--r-gtc, none);
  grid-template-rows: var(--r-gtr, none);
  grid-auto-flow: var(--r-flow, row);
}
/* display:block / flex / grid all resolve from --r-display; the flex + grid
   properties above are simply ignored by whichever layout mode is inactive. */

/* ==========================================================================
   [hidden] IS THE OPEN/CLOSE CONTRACT — nothing may outrank it.
   --------------------------------------------------------------------------
   Nineteen widget scripts open and close a panel by adding or removing the
   `hidden` ATTRIBUTE (quick view, filter drawers, mega menus, load-more ends).
   The browser hides `[hidden]` with a UA rule of the lowest possible weight, so
   ANY class rule that sets `display` beats it — and the element ships open.

   That is not theory: `.ractro-pp-qv-modal { display: flex }` beat its own
   `hidden` attribute, so Products Pro rendered its full-screen Quick View
   dialog, backdrop and all, over the LIVE page and over the whole editor. The
   markup was right, the JS was right, and the CSS silently won.

   Scoped to Ractro's own subtree so a theme keeps whatever it does with
   `hidden` on its own markup. Loaded on both surfaces (front end enqueue +
   shadow-root import), so the editor cannot disagree with the page.
   ========================================================================== */
[class*="ractro-"][hidden],
[class*="ractro-element-"] [hidden] { display: none !important; }