/**
 * @file grid_item.css
 * @component Grid Item (Internal)
 * @description Groups content as one item; spans and grid positions apply
 * only inside expanded Set column count Grid; Split uses position only.
 * Inside a Flex, Grid Items share the free space equally.
 *
 * @section Public custom properties
 * --gridItem-length-headerExtent : Occupied header extent; defaults to 0px.
 * --gridItem-space-stickyGap     : Sticky clearance; defaults to --marsal-space-s.
 *
 * @section Private custom properties
 * --_number-columnSpan   : Validated explicit span; default 1.
 * --_number-gridPosition : Validated grid position; default 0, before any set position.
 * --_space-stickyGap     : Resolved per-item sticky clearance.
 * --_length-stickyTop    : Maximum of Drupal top and header extent, plus gap.
 * --_length-stickyBottom : Drupal bottom displacement plus gap.
 * --_length-tocClearance : Stacked contents bar clearance, inherited by the
 *   content it travels over; unset elsewhere.
 */
:where([data-component-id="marsal_sdc:grid_item"]) {
  --_number-columnSpan: 1;
  --_number-gridPosition: 0;
  --_space-stickyGap: var(--gridItem-space-stickyGap, var(--marsal-space-s));
  --_length-stickyTop: calc(max(var(--drupal-displace-offset-top, 0px), var(--gridItem-length-headerExtent, 0px)) + var(--_space-stickyGap));
  --_length-stickyBottom: calc(var(--drupal-displace-offset-bottom, 0px) + var(--_space-stickyGap));

  min-inline-size: 0;

  & > .marsal-grid-item__sticky {
    display: flow-root;
    inset-block-start: var(--_length-stickyTop);
    scroll-margin-block-end: var(--_length-stickyBottom);
  }
}

@media screen and (min-height: 30rem) {
  @container marsal-sdc-grid (min-width: 30rem) {
    :where([data-component-id="marsal_sdc:grid"][data-stack-below="narrow"]:is([data-component-variant="columns"], [data-component-variant="split"]):not([data-single-column="true"])) > .marsal-grid__items > :where([data-component-id="marsal_sdc:grid_item"][data-sticky="true"]):not([data-db-root], [data-db-root] *) {
      align-self: stretch;

      & > .marsal-grid-item__sticky {
        position: sticky;
        box-sizing: border-box;
        max-block-size: calc(100dvh - var(--_length-stickyTop) - var(--_length-stickyBottom));
        overflow-y: auto;
        /* 6px = 3px outline + 3px offset, kept inside the scrollport. */
        padding: 6px;
        scroll-padding: 6px;

        & :focus-visible {
          scroll-margin: 6px;
        }
      }
    }
  }

  @container marsal-sdc-grid (min-width: 48rem) {
    :where([data-component-id="marsal_sdc:grid"][data-stack-below="standard"]:is([data-component-variant="columns"], [data-component-variant="split"]):not([data-single-column="true"])) > .marsal-grid__items > :where([data-component-id="marsal_sdc:grid_item"][data-sticky="true"]):not([data-db-root], [data-db-root] *) {
      align-self: stretch;

      & > .marsal-grid-item__sticky {
        position: sticky;
        box-sizing: border-box;
        max-block-size: calc(100dvh - var(--_length-stickyTop) - var(--_length-stickyBottom));
        overflow-y: auto;
        padding: 6px;
        scroll-padding: 6px;

        & :focus-visible {
          scroll-margin: 6px;
        }
      }
    }
  }

  @container marsal-sdc-grid (min-width: 64rem) {
    :where([data-component-id="marsal_sdc:grid"][data-stack-below="wide"]:is([data-component-variant="columns"], [data-component-variant="split"]):not([data-single-column="true"])) > .marsal-grid__items > :where([data-component-id="marsal_sdc:grid_item"][data-sticky="true"]):not([data-db-root], [data-db-root] *) {
      align-self: stretch;

      & > .marsal-grid-item__sticky {
        position: sticky;
        box-sizing: border-box;
        max-block-size: calc(100dvh - var(--_length-stickyTop) - var(--_length-stickyBottom));
        overflow-y: auto;
        padding: 6px;
        scroll-padding: 6px;

        & :focus-visible {
          scroll-margin: 6px;
        }
      }
    }
  }
}

/*
 * A stacked sidebar ends before the main content. Its neutral structural
 * wrappers become boxless so only the compact menu can travel through the
 * whole Split. Action groups keep their boxes and stay in normal flow.
 * The travelling bar sits above positioned page content (z-index 10) so
 * blocks with their own layered parts cannot paint over it or take its taps.
 */
@supports selector(:popover-open) and (position-area: block-end) and (inline-size: anchor-size(inline)) {
  @media screen {
    @container marsal-sdc-grid (width < 30rem) {
      :where([data-component-id="marsal_sdc:grid"][data-component-variant="split"][data-stack-below="narrow"][data-stack-order="source"]) > .marsal-grid__items > :where([data-component-id="marsal_sdc:grid_item"][data-sticky="true"]):first-child:not([data-db-root], [data-db-root] *):has([data-component-id="marsal_sdc:menu_toc"] > .marsal-menu-toc__toggle) {
        &,
        & > .marsal-grid-item__sticky,
        & > .marsal-grid-item__sticky > :where([data-component-id="marsal_sdc:container"][data-padding-before="none"][data-padding-after="none"][data-divider="none"][data-divider-inline="none"]:not([data-background-surface], [data-background-fit])):has(:where([data-component-id="marsal_sdc:menu_toc"]) > .marsal-menu-toc__toggle),
        & > .marsal-grid-item__sticky > :where([data-component-id="marsal_sdc:container"][data-padding-before="none"][data-padding-after="none"][data-divider="none"][data-divider-inline="none"]:not([data-background-surface], [data-background-fit])):has(:where([data-component-id="marsal_sdc:menu_toc"]) > .marsal-menu-toc__toggle) > .marsal-container__content,
        & > .marsal-grid-item__sticky :where([data-component-id="marsal_sdc:flex"][data-direction="column"]):has(> :where([data-component-id="marsal_sdc:menu_toc"]) > .marsal-menu-toc__toggle) {
          display: contents;
        }

        & > .marsal-grid-item__sticky :where([data-component-id="marsal_sdc:menu_toc"]):has(> .marsal-menu-toc__toggle) {
          position: sticky;
          inset-block-start: calc(max(var(--drupal-displace-offset-top, 0px), var(--gridItem-length-headerExtent, 0px)) + var(--gridItem-space-stickyGap, var(--marsal-space-s)));
          align-self: start;
          z-index: 10;
        }

        &,
        & ~ * {
          --_length-tocClearance: calc(max(var(--drupal-displace-offset-top, 0px), var(--gridItem-length-headerExtent, 0px)) + 2 * var(--gridItem-space-stickyGap, var(--marsal-space-s)) + max(44px, 2.75rem));
        }
      }
    }

    @container marsal-sdc-grid (width < 48rem) {
      :where([data-component-id="marsal_sdc:grid"][data-component-variant="split"][data-stack-below="standard"][data-stack-order="source"]) > .marsal-grid__items > :where([data-component-id="marsal_sdc:grid_item"][data-sticky="true"]):first-child:not([data-db-root], [data-db-root] *):has([data-component-id="marsal_sdc:menu_toc"] > .marsal-menu-toc__toggle) {
        &,
        & > .marsal-grid-item__sticky,
        & > .marsal-grid-item__sticky > :where([data-component-id="marsal_sdc:container"][data-padding-before="none"][data-padding-after="none"][data-divider="none"][data-divider-inline="none"]:not([data-background-surface], [data-background-fit])):has(:where([data-component-id="marsal_sdc:menu_toc"]) > .marsal-menu-toc__toggle),
        & > .marsal-grid-item__sticky > :where([data-component-id="marsal_sdc:container"][data-padding-before="none"][data-padding-after="none"][data-divider="none"][data-divider-inline="none"]:not([data-background-surface], [data-background-fit])):has(:where([data-component-id="marsal_sdc:menu_toc"]) > .marsal-menu-toc__toggle) > .marsal-container__content,
        & > .marsal-grid-item__sticky :where([data-component-id="marsal_sdc:flex"][data-direction="column"]):has(> :where([data-component-id="marsal_sdc:menu_toc"]) > .marsal-menu-toc__toggle) {
          display: contents;
        }

        & > .marsal-grid-item__sticky :where([data-component-id="marsal_sdc:menu_toc"]):has(> .marsal-menu-toc__toggle) {
          position: sticky;
          inset-block-start: calc(max(var(--drupal-displace-offset-top, 0px), var(--gridItem-length-headerExtent, 0px)) + var(--gridItem-space-stickyGap, var(--marsal-space-s)));
          align-self: start;
          z-index: 10;
        }

        &,
        & ~ * {
          --_length-tocClearance: calc(max(var(--drupal-displace-offset-top, 0px), var(--gridItem-length-headerExtent, 0px)) + 2 * var(--gridItem-space-stickyGap, var(--marsal-space-s)) + max(44px, 2.75rem));
        }
      }
    }

    @container marsal-sdc-grid (width < 64rem) {
      :where([data-component-id="marsal_sdc:grid"][data-component-variant="split"][data-stack-below="wide"][data-stack-order="source"]) > .marsal-grid__items > :where([data-component-id="marsal_sdc:grid_item"][data-sticky="true"]):first-child:not([data-db-root], [data-db-root] *):has([data-component-id="marsal_sdc:menu_toc"] > .marsal-menu-toc__toggle) {
        &,
        & > .marsal-grid-item__sticky,
        & > .marsal-grid-item__sticky > :where([data-component-id="marsal_sdc:container"][data-padding-before="none"][data-padding-after="none"][data-divider="none"][data-divider-inline="none"]:not([data-background-surface], [data-background-fit])):has(:where([data-component-id="marsal_sdc:menu_toc"]) > .marsal-menu-toc__toggle),
        & > .marsal-grid-item__sticky > :where([data-component-id="marsal_sdc:container"][data-padding-before="none"][data-padding-after="none"][data-divider="none"][data-divider-inline="none"]:not([data-background-surface], [data-background-fit])):has(:where([data-component-id="marsal_sdc:menu_toc"]) > .marsal-menu-toc__toggle) > .marsal-container__content,
        & > .marsal-grid-item__sticky :where([data-component-id="marsal_sdc:flex"][data-direction="column"]):has(> :where([data-component-id="marsal_sdc:menu_toc"]) > .marsal-menu-toc__toggle) {
          display: contents;
        }

        & > .marsal-grid-item__sticky :where([data-component-id="marsal_sdc:menu_toc"]):has(> .marsal-menu-toc__toggle) {
          position: sticky;
          inset-block-start: calc(max(var(--drupal-displace-offset-top, 0px), var(--gridItem-length-headerExtent, 0px)) + var(--gridItem-space-stickyGap, var(--marsal-space-s)));
          align-self: start;
          z-index: 10;
        }

        &,
        & ~ * {
          --_length-tocClearance: calc(max(var(--drupal-displace-offset-top, 0px), var(--gridItem-length-headerExtent, 0px)) + 2 * var(--gridItem-space-stickyGap, var(--marsal-space-s)) + max(44px, 2.75rem));
        }
      }
    }

    /*
     * Anchor targets and focused elements that the travelling bar passes over
     * scroll to just below it: its gap above, its 44px minimum height and the
     * same gap below. Only the stacked queries above set the clearance, so this
     * is zero elsewhere. The menu itself is the bar and needs none.
     */
    :where([data-component-id="marsal_sdc:grid"][data-component-variant="split"][data-stack-order="source"] > .marsal-grid__items > [data-component-id="marsal_sdc:grid_item"][data-sticky="true"]:first-child:has([data-component-id="marsal_sdc:menu_toc"] > .marsal-menu-toc__toggle) :not([data-component-id="marsal_sdc:menu_toc"], [data-component-id="marsal_sdc:menu_toc"] *)),
    :where([data-component-id="marsal_sdc:grid"][data-component-variant="split"][data-stack-order="source"] > .marsal-grid__items > [data-component-id="marsal_sdc:grid_item"][data-sticky="true"]:first-child:has([data-component-id="marsal_sdc:menu_toc"] > .marsal-menu-toc__toggle) ~ *),
    :where([data-component-id="marsal_sdc:grid"][data-component-variant="split"][data-stack-order="source"] > .marsal-grid__items > [data-component-id="marsal_sdc:grid_item"][data-sticky="true"]:first-child:has([data-component-id="marsal_sdc:menu_toc"] > .marsal-menu-toc__toggle) ~ * :not([data-component-id="marsal_sdc:menu_toc"], [data-component-id="marsal_sdc:menu_toc"] *)) {
      scroll-margin-block-start: var(--_length-tocClearance, 0);
    }
  }
}

/*
 * Siblings that are not Grid Items, such as a Heading band, keep their own
 * size. A wrapping Flex keeps its own item sizing, so its items can wrap.
 */
:where([data-component-id="marsal_sdc:flex"]:not([data-wrap="true"])) > :where([data-component-id="marsal_sdc:grid_item"]) {
  flex: 1 1 0;
}

@container marsal-sdc-grid (min-width: 30rem) {
  :where(
    [data-component-id="marsal_sdc:grid"][data-component-variant="columns"][data-stack-below="narrow"]
  ) > .marsal-grid__items > :where([data-component-id="marsal_sdc:grid_item"]) {
    grid-column: span var(--_number-columnSpan);
    order: var(--_number-gridPosition);
  }

  :where([data-component-id="marsal_sdc:grid"][data-component-variant="split"][data-stack-below="narrow"]) > .marsal-grid__items > :where([data-component-id="marsal_sdc:grid_item"]) {
    order: var(--_number-gridPosition);
  }
}

@container marsal-sdc-grid (min-width: 48rem) {
  :where(
    [data-component-id="marsal_sdc:grid"][data-component-variant="columns"][data-stack-below="standard"]
  ) > .marsal-grid__items > :where([data-component-id="marsal_sdc:grid_item"]) {
    grid-column: span var(--_number-columnSpan);
    order: var(--_number-gridPosition);
  }

  :where([data-component-id="marsal_sdc:grid"][data-component-variant="split"][data-stack-below="standard"]) > .marsal-grid__items > :where([data-component-id="marsal_sdc:grid_item"]) {
    order: var(--_number-gridPosition);
  }
}

@container marsal-sdc-grid (min-width: 64rem) {
  :where(
    [data-component-id="marsal_sdc:grid"][data-component-variant="columns"][data-stack-below="wide"]
  ) > .marsal-grid__items > :where([data-component-id="marsal_sdc:grid_item"]) {
    grid-column: span var(--_number-columnSpan);
    order: var(--_number-gridPosition);
  }

  :where([data-component-id="marsal_sdc:grid"][data-component-variant="split"][data-stack-below="wide"]) > .marsal-grid__items > :where([data-component-id="marsal_sdc:grid_item"]) {
    order: var(--_number-gridPosition);
  }
}