/*!
 * WPCursor widget layout
 *
 * The shared layout containers, on every page a WPOS widget renders on.
 *
 * Until PG-016/PG-017 these rules lived only in the two stylesheets that now
 * load on demand: Tailwind's `.container` (and sm:/md:/lg:/xl:container) in
 * widget-utilities.css, and `.wf-container` (with --narrow and --wide) in the
 * Wireframe Kit. Those sheets are now printed only on pages whose markup uses
 * their classes, so the containers moved here and stay unconditional: a
 * widget that only uses a container never loses its page width.
 *
 * The `.container` rules are exactly what Tailwind emitted for them
 * (tailwind.widgets.config.js, default screens; no centring or padding).
 * Keep this file small: it loads on every front-end page.
 */

/* Tailwind container */
.container { width: 100%; }
@media (min-width: 640px) { .container { max-width: 640px; } }
@media (min-width: 768px) { .container { max-width: 768px; } }
@media (min-width: 1024px) { .container { max-width: 1024px; } }
@media (min-width: 1280px) { .container { max-width: 1280px; } }
@media (min-width: 1536px) { .container { max-width: 1536px; } }

@media (min-width: 640px) {
  .sm\:container { width: 100%; }
  @media (min-width: 640px) { .sm\:container { max-width: 640px; } }
  @media (min-width: 768px) { .sm\:container { max-width: 768px; } }
  @media (min-width: 1024px) { .sm\:container { max-width: 1024px; } }
  @media (min-width: 1280px) { .sm\:container { max-width: 1280px; } }
  @media (min-width: 1536px) { .sm\:container { max-width: 1536px; } }
}

@media (min-width: 768px) {
  .md\:container { width: 100%; }
  @media (min-width: 640px) { .md\:container { max-width: 640px; } }
  @media (min-width: 768px) { .md\:container { max-width: 768px; } }
  @media (min-width: 1024px) { .md\:container { max-width: 1024px; } }
  @media (min-width: 1280px) { .md\:container { max-width: 1280px; } }
  @media (min-width: 1536px) { .md\:container { max-width: 1536px; } }
}

@media (min-width: 1024px) {
  .lg\:container { width: 100%; }
  @media (min-width: 640px) { .lg\:container { max-width: 640px; } }
  @media (min-width: 768px) { .lg\:container { max-width: 768px; } }
  @media (min-width: 1024px) { .lg\:container { max-width: 1024px; } }
  @media (min-width: 1280px) { .lg\:container { max-width: 1280px; } }
  @media (min-width: 1536px) { .lg\:container { max-width: 1536px; } }
}

@media (min-width: 1280px) {
  .xl\:container { width: 100%; }
  @media (min-width: 640px) { .xl\:container { max-width: 640px; } }
  @media (min-width: 768px) { .xl\:container { max-width: 768px; } }
  @media (min-width: 1024px) { .xl\:container { max-width: 1024px; } }
  @media (min-width: 1280px) { .xl\:container { max-width: 1280px; } }
  @media (min-width: 1536px) { .xl\:container { max-width: 1536px; } }
}

/* Wireframe Kit container (also usable outside a .wf root, as before) */
.wf-container {
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: var(--wf-s4);
}
.wf-container--narrow { max-width: 760px; }
.wf-container--wide   { max-width: 1320px; }