/* Shared fluid grid shell — centering, motion hints, paint containment */

@property --grid-cols {
  syntax: '<integer>';
  inherits: false;
  initial-value: 4;
}

.site-fluid-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: calc(
    100dvh - var(--site-fluid-offset, 4.25rem) - var(--site-footer-zone, 2.25rem)
  );
  overflow: visible;
}

.site-fluid-shell--center {
  justify-content: safe center;
}

.site-fluid-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols, 6), minmax(0, 1fr));
  justify-items: center;
  align-content: start;
  gap: var(--grid-gap, 1rem);
  width: min(100%, var(--grid-content-width, 100%));
  margin-inline: auto;
  padding-bottom: 1rem;
  overflow: visible;
}

.site-fluid-shell--center .site-fluid-grid {
  align-content: center;
}

.site-fluid-grid.is-fluid-motion > *,
.destination-grid.is-fluid-motion > .destination-tile,
.destination-grid.is-fluid-motion > * {
  will-change: transform, opacity;
}

.site-fluid-grid.is-fluid-motion > * {
  content-visibility: visible;
}

.site-fluid-grid:not(.is-fluid-motion) > :not([hidden]) {
  content-visibility: auto;
  contain-intrinsic-size: auto 148px;
}

@media (prefers-reduced-motion: reduce) {
  .site-fluid-grid.is-fluid-motion > *,
  .destination-grid.is-fluid-motion > .destination-tile,
  .destination-grid.is-fluid-motion > * {
    will-change: auto;
  }
}

/* 2× subgrid tracks — placement in applyGridPlacement (fluid-grid.js) */
.destination-grid--half-grid,
.site-fluid-grid.destination-grid--half-grid,
.site-fluid-grid--half-grid {
  justify-items: stretch;
}

.destination-grid--last-row-centered,
.site-fluid-grid.destination-grid--last-row-centered,
.site-fluid-grid--last-row-centered {
  justify-items: stretch;
}

.destination-grid.is-fluid-motion .destination-tile__hint,
.destination-tile.is-fluid-motion .destination-tile__hint {
  opacity: 0 !important;
}

.destination-grid.is-fluid-motion .destination-tile {
  pointer-events: auto;
}