/*
 * Contained layouts
 */

.layout-contained {
  max-width: var(--anrt-width-content-area);
  margin-inline: auto;

  &:where(.padding-horizontal) {
    max-width: calc(var(--anrt-width-content-area) + 2 * var(--anrt-spacing-100));
  }
}

.layout-contained--tablet-s {
  max-width: var(--anrt-width-tablet-s);

  &:where(.padding-horizontal) {
    max-width: calc(var(--anrt-width-tablet-s) + 2 * var(--anrt-spacing-100));
  }
}
.layout-contained--tablet-l {
  max-width: var(--anrt-width-tablet-l);

  &:where(.padding-horizontal) {
    max-width: calc(var(--anrt-width-tablet-l) + 2 * var(--anrt-spacing-100));
  }
}
.layout-contained--desktop-s {
  max-width: var(--anrt-width-desktop-s);

  &:where(.padding-horizontal) {
    max-width: calc(var(--anrt-width-desktop-s) + 2 * var(--anrt-spacing-100));
  }
}
.layout-contained--desktop-l {
  max-width: var(--anrt-width-desktop-l);

  &:where(.padding-horizontal) {
    max-width: calc(var(--anrt-width-desktop-l) + 2 * var(--anrt-spacing-100));
  }
}
.layout-contained--desktop-xl {
  max-width: var(--anrt-width-desktop-xl);

  &:where(.padding-horizontal) {
    max-width: calc(var(--anrt-width-desktop-xl) + 2 * var(--anrt-spacing-100));
  }
}
.layout-contained--full-container {
  max-width: var(--anrt-width-full-container);

  &:where(.padding-horizontal) {
    max-width: calc(var(--anrt-width-full-container) + 2 * var(--anrt-spacing-100));
  }
}
.layout-contained--full-screen {
  max-width: var(--anrt-width-full-screen);

  &:where(.padding-horizontal) {
    max-width: calc(var(--anrt-width-full-screen) + 2 * var(--anrt-spacing-100));
  }
}

/*
 * Grid container
 */
.anrt-grid,
.view--grid .view-content {
  display: grid;
  gap: var(--anrt-grid-gap);
  grid-template-columns: repeat(var(--anrt-grid-columns), 1fr);
}

.anrt-grid--gap-none {
  gap: var(--anrt-grid-gap-none);
}
.anrt-grid--gap-small {
  gap: var(--anrt-grid-gap-small);
}
.anrt-grid--gap-large {
  gap: var(--anrt-grid-gap-large);
}

.anrt-grid--centered {
  align-items: center;
  justify-items: center;
}

/* Grid Columns */
.anrt-grid-item--one-quarter,
.anrt-grid-item--one-third,
.anrt-grid-item--one-half,
.anrt-grid-item--two-thirds,
.anrt-grid-item--three-quarters,
.anrt-grid--quarters > *,
.view--grid-quarters .views-row,
.anrt-grid--thirds > *,
.view--grid-thirds .views-row,
.anrt-grid--halves > *,
.view--grid-halves .views-row,
.anrt-grid--full > *,
.view--grid-full .views-row,
.anrt-grid-item--full {
  grid-column: span var(--anrt-grid-columns);
}

@media screen and (min-width: 768px) {
  .anrt-grid--quarters > *,
  .view--grid-quarters .views-row,
  .anrt-grid--thirds > *,
  .view--grid-thirds .views-row,
  .anrt-grid--halves > *,
  .view--grid-halves .views-row {
    grid-column: span calc(var(--anrt-grid-columns) / 2);
  }
  .anrt-grid-item--one-quarter {
    grid-column: span calc(var(--anrt-grid-columns) / 4);
  }
  .anrt-grid-item--one-third {
    grid-column: span calc(var(--anrt-grid-columns) / 3);
  }
  .anrt-grid-item--one-half {
    grid-column: span calc(var(--anrt-grid-columns) / 2);
  }
  .anrt-grid-item--two-thirds {
    grid-column: span calc(var(--anrt-grid-columns) / 3 * 2);
  }
  .anrt-grid-item--three-quarters {
    grid-column: span calc(var(--anrt-grid-columns) / 4 * 3);
  }
}

@media screen and (min-width: 1180px) {
  .anrt-grid--quarters > *,
  .view--grid-quarters .views-row {
    grid-column: span calc(var(--anrt-grid-columns) / 4);
  }
  .anrt-grid--thirds > *,
  .view--grid-thirds .views-row {
    grid-column: span calc(var(--anrt-grid-columns) / 3);
  }
  .anrt-grid--halves > *,
  .view--grid-halves .views-row {
    grid-column: span calc(var(--anrt-grid-columns) / 2);
  }
}

/*
 * Standard spacing
 */

.padding {
  padding: var(--anrt-spacing-100);
}

.padding-horizontal {
  padding-inline: var(--anrt-spacing-100);
}

:where(.layout-contained.padding-horizontal) .padding-horizontal:where(.layout-contained) {
  /* Turn off padding on nested containers */
  padding-inline: 0;
}

.layout:not(.building-block) {
  margin-bottom: var(--anrt-spacing-100);

  @media (min-width: 64rem) {
    margin-bottom: var(--anrt-spacing-200);
  }

  @media (min-width: 90rem) {
    margin-bottom: var(--anrt-spacing-333);
  }
}

.building-block {
  max-width: 100%;

  .layout &,
  .cws__content & {
    margin-bottom: var(--anrt-spacing-200);

    &:last-child {
      margin-bottom: 0;
    }

    @media (min-width: 64rem) {
      margin-bottom: calc(var(--anrt-spacing-300) - var(--anrt-spacing-008));
    }
  }
}

.layout-search {
  > div:first-child {
    margin-bottom: var(--anrt-spacing-166);
  }

  @media screen and (min-width: 1180px) {
    display: grid;
    gap: calc(var(--anrt-spacing-500) + var(--anrt-spacing-125));
    grid-template-columns: 341px auto;

    > div:first-child {
      margin-bottom: 0;
    }
  }
}