/* ==========================================================================
   AUM Container Block

   Used by AUM Bootstrap Container and the deprecated AUM Full Container.
   Both render through aum_render_container(), so they share these classes.

   WIDTH AUTHORITY
   The inner element carries a Bootstrap container class and nothing in the
   theme should override its width. The section is full width unless
   is-background-contained says otherwise.
   ========================================================================== */

.aum-container-block {
  width: 100%;
  max-width: none;
  position: relative;
  box-sizing: border-box;
}

.aum-container-block.has-background-media {
  overflow: hidden;
  isolation: isolate;
}

/* --- Media and overlay ---------------------------------------------------- */

.aum-container-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  /* object-position is inline, from the focal point picker. Declaring it
     here would break the picker. */
  z-index: 0;
  border: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.aum-container-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.aum-container-block__inner {
  position: relative;
  z-index: 2;
}

.aum-container-block__inner--none {
  width: 100%;
  max-width: none;
  padding-inline: 0;
}

/* --- Background width -----------------------------------------------------
   Default: the section spans the viewport while the inner container boxes the
   content, giving a full-bleed band with contained text.

   is-background-contained constrains the section instead, so colour and media
   stop at the same edge as the content. The inner container then drops its own
   width cap and gutters so they are not applied twice.
   -------------------------------------------------------------------------- */

/*
 * SPECIFICITY NOTE
 *
 * theme.css contains, for the full-canvas and front-page templates:
 *
 *     .aum-canvas > .entry-content > *  { max-width: none; }
 *
 * That is 0,2,0 -- identical to a plain `.aum-container-block.is-background-
 * contained` rule, so the winner came down to stylesheet load order, which
 * differs between the editor canvas and the front end. That is why a boxed
 * section rendered correctly in the editor and full width on the site.
 *
 * :where(body) adds no specificity of its own but the compound selector below
 * is deliberately raised to 0,3,0 so it wins outright, in both contexts, at
 * any load order.
 */
.aum-container-block.is-background-contained.aum-container-block {
  max-width: var(--aum-container);
  margin-inline: auto;
}

.aum-container-block.is-background-contained > .aum-container-block__inner {
  max-width: none;
  width: 100%;
  padding-inline: var(--aum-container-padding);
}

.aum-container-block.is-background-contained.aum-container-block:has(.container-sm)  { max-width: 540px; }
.aum-container-block.is-background-contained.aum-container-block:has(.container-md)  { max-width: 720px; }
.aum-container-block.is-background-contained.aum-container-block:has(.container-lg)  { max-width: 960px; }
.aum-container-block.is-background-contained.aum-container-block:has(.container-xl)  { max-width: 1140px; }
.aum-container-block.is-background-contained.aum-container-block:has(.container-xxl) { max-width: 1320px; }

/* container-fluid has no width to match, so contained is a no-op. */
.aum-container-block.is-background-contained:has(.container-fluid),
.aum-container-block.is-background-contained:has(.aum-container-block__inner--none) {
  max-width: none;
}

/* --- Height and content position ------------------------------------------
   Flex engages only when a minimum height is set. Without one the section
   should hug its content, and flex centring would fight normal flow.
   -------------------------------------------------------------------------- */

.aum-container-block.has-min-height {
  display: flex;
}

.aum-container-block.has-min-height > .aum-container-block__inner {
  width: 100%;
}

.aum-container-block.has-min-height.is-position-top-left      { align-items: flex-start; justify-content: flex-start; }
.aum-container-block.has-min-height.is-position-top-center    { align-items: flex-start; justify-content: center; }
.aum-container-block.has-min-height.is-position-top-right     { align-items: flex-start; justify-content: flex-end; }
.aum-container-block.has-min-height.is-position-center-left   { align-items: center;     justify-content: flex-start; }
.aum-container-block.has-min-height.is-position-center-center { align-items: center;     justify-content: center; }
.aum-container-block.has-min-height.is-position-center-right  { align-items: center;     justify-content: flex-end; }
.aum-container-block.has-min-height.is-position-bottom-left   { align-items: flex-end;   justify-content: flex-start; }
.aum-container-block.has-min-height.is-position-bottom-center { align-items: flex-end;   justify-content: center; }
.aum-container-block.has-min-height.is-position-bottom-right  { align-items: flex-end;   justify-content: flex-end; }

/* --- Fixed background ------------------------------------------------------
   background-attachment: fixed is unreliable and expensive on touch, so it is
   opt-in on pointer devices only.
   -------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .aum-container-block.has-fixed-background .aum-container-media--image {
    position: fixed;
    inset: auto;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    clip-path: inset(0);
  }
}

/* --- Legibility over media ------------------------------------------------- */

.aum-container-block.has-background-media,
.aum-container-block.has-background-media :where(h1, h2, h3, h4, h5, h6, p, li) {
  color: var(--aum-white, #fff);
}

.aum-container-block.has-background-media.has-text-color,
.aum-container-block.has-background-media.has-text-color :where(h1, h2, h3, h4, h5, h6, p, li) {
  color: inherit;
}

/* --- Margin collapse ------------------------------------------------------- */

.aum-container-block__inner > *:first-child { margin-top: 0; }
.aum-container-block__inner > *:last-child  { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .aum-container-media--video { display: none; }
}

/* --- Legacy class aliases --------------------------------------------------
   Posts saved before the class names were unified still carry these. They map
   onto the current behaviour so old content keeps rendering correctly.
   -------------------------------------------------------------------------- */

.aum-bootstrap-container-block,
.aum-full-container-block {
  width: 100%;
  max-width: none;
  position: relative;
}

.aum-bootstrap-container-block__inner--none,
.aum-no-container {
  width: 100%;
  max-width: none;
  padding-inline: 0;
}

/* --- Native support integration -------------------------------------------
   Spacing, border, colour, gradient and shadow all come from WordPress's own
   supports. WordPress writes those as inline styles and preset classes on the
   section, so nothing here should restate them -- these rules only make sure
   they behave sensibly alongside the Bootstrap container inside.
   -------------------------------------------------------------------------- */

/* A border or radius needs the media clipped to it, or the image corners
   escape the rounded edge. */
.aum-container-block.has-border-color,
.aum-container-block[style*="border-radius"],
.aum-container-block[style*="border-width"] {
  overflow: hidden;
}

/* Backdrop blur needs its own stacking context to composite correctly. */
.aum-container-block[style*="backdrop-filter"] {
  isolation: isolate;
}

/* An explicit max-width overrides the contained-background width, since the
   editor asked for a specific number. */
.aum-container-block.has-max-width.is-background-contained {
  max-width: inherit;
}

/* When native padding is set the py-* shortcut is dropped in PHP, so the
   inner element should not add its own vertical padding on top. */
.aum-container-block[style*="padding"] > .aum-container-block__inner {
  padding-block: 0;
}

/* Gradient backgrounds sit behind media but above the section background. */
.aum-container-block.has-background-gradient {
  background-attachment: scroll;
}