/*
 * Minimal replacement for LocalGov Base grid.css (removed via hook_library_info_alter).
 * Keeps .lgd-row and column classes working with fixed spacing, no dependency on
 * --grid-column-spacing.
 */
:root {
  --achieve-grid-gap: 24px;
}

.lgd-row {
  display: flex;
  flex-wrap: wrap;
}

.lgd-row--centered {
  justify-content: center;
}

.lgd-row--vertically-centered {
  align-items: center;
}

.lgd-row > * {
  margin-left: calc(var(--achieve-grid-gap) / 2);
  margin-right: calc(var(--achieve-grid-gap) / 2);
}

.lgd-row__one-quarter,
.lgd-row--quarters > *,
.lgd-row__one-third,
.lgd-row--thirds > *,
.lgd-row__one-half,
.lgd-row--halves > *,
.lgd-row__two-thirds,
.lgd-row__three-quarters,
.lgd-row__full {
  width: calc(100% - var(--achieve-grid-gap));
}

@media screen and (min-width: 48rem) {
  .lgd-row__one-quarter,
  .lgd-row--quarters > *,
  .lgd-row__one-third,
  .lgd-row--thirds > *,
  .lgd-row__one-half,
  .lgd-row--halves > *,
  .lgd-row__two-thirds,
  .lgd-row__three-quarters {
    width: calc(50% - var(--achieve-grid-gap));
  }
}

@media screen and (min-width: 60rem) {
  .lgd-row__one-quarter,
  .lgd-row--quarters > * {
    width: calc(25% - var(--achieve-grid-gap));
  }

  .lgd-row__one-third,
  .lgd-row--thirds > * {
    width: calc((100% / 3) - var(--achieve-grid-gap));
  }

  .lgd-row__two-thirds {
    width: calc((100% / 3 * 2) - var(--achieve-grid-gap));
  }

  .lgd-row__three-quarters {
    width: calc(75% - var(--achieve-grid-gap));
  }
}

/* View grid (used by views with view--grid class) */
.view--grid {
  --lgd-view-grid-columns: 1;
  --lgd-view-grid-gap: var(--achieve-grid-gap);
}

.view--grid-gap-none { --lgd-view-grid-gap: 0; }
.view--grid-gap-small { --lgd-view-grid-gap: 12px; }
.view--grid-gap-smaller { --lgd-view-grid-gap: 8px; }
.view--grid-gap-smallest { --lgd-view-grid-gap: 4px; }
.view--grid-gap-medium { --lgd-view-grid-gap: var(--achieve-grid-gap); }
.view--grid-gap-large { --lgd-view-grid-gap: 32px; }
.view--grid-gap-larger { --lgd-view-grid-gap: 40px; }
.view--grid-gap-largest { --lgd-view-grid-gap: 48px; }

.view--grid .view-content {
  display: grid;
  grid-template-columns: repeat(var(--lgd-view-grid-columns), 1fr);
  grid-gap: var(--lgd-view-grid-gap);
}

@media screen and (min-width: 48rem) {
  .view--grid .view-content {
    --lgd-view-grid-columns: 2;
  }
}

@media screen and (min-width: 60rem) {
  .view--grid-thirds .view-content {
    --lgd-view-grid-columns: 3;
  }
  .view--grid-quarters .view-content {
    --lgd-view-grid-columns: 4;
  }
  .view--grid-fifths .view-content {
    --lgd-view-grid-columns: 5;
  }
}