@use 'sass:map';

:root {
  --page-block-spacing: 2rem;

  @include use-responsive-sizing(--page-block-spacing-wide, responsive-map(xs 3.6rem, xl 5.6rem));
  @include use-responsive-sizing(--page-block-spacing-full, responsive-map(xs 4.2rem, xl 7.2rem));
  @include use-responsive-sizing(--page-content-padding, responsive-map(xs 4rem, xl 6rem));
}

.page__content {
  padding-block: var(--page-content-padding);

  @include use-container();
}

.page__blocks {
  clear: both;
  margin-inline: auto;

  @include use-responsive-sizing(width, (
    m: column-width(m, 8),
    l: column-width(l, 8),
    xl: column-width(xl, 6),
  ));
  @include use-responsive-sizing(max-width, (
    xs: 50rem,
    m: none,
  ));
  @include use-responsive-sizing(--infobox-padding-inline, (
    xs: map.get($inner-container-padding, xs),
    s: map.get($inner-container-padding, s),
    m: 0,
  ));
  @include use-responsive-sizing(--infobox-content-width, (
    m: column-width(m, 8),
    l: column-width(l, 8, $number-of-columns: 10),
    xl: column-width(xl, 6, $number-of-columns: 10),
  ));
  @include use-responsive-sizing(--video-gallery-column-width, (
    l: column-width(l, 3),
    xl: column-width(xl, 3),
  ));
}

.page__blocks--outro {
  margin-block-start: var(--page-block-spacing-wide);
}

.page__action-bar {
  @include use-responsive-sizing(margin-bottom, (xs: calc(var(--page-block-spacing) * 2), m: 0));
  @include use-responsive-sizing(width, (
    m: column-width(m, 2, $number-of-columns: 8),
    l: column-width(l, 2, $number-of-columns: 8),
    xl: column-width(xl, 2, $number-of-columns: 6),
  ));
  @include use-responsive-sizing(margin-left, (
    m: column-offset(m, 2, $negative: true, $number-of-columns: 8),
    l: column-offset(l, 2, $negative: true, $number-of-columns: 8),
    xl: column-offset(xl, 3, $negative: true, $number-of-columns: 6),
  ));

  @include mq($from: m) {
    --action-bar-button-padding: 2rem 1rem;
    --action-bar-button-width: 100%;

    float: left;
  }
}

.page__date {
  display: block;
  font-size: 2rem;
  font-style: italic;
  margin-block-end: var(--page-block-spacing);
  text-transform: uppercase;
}

.page__clearfix {
  @include use-clearfix();
}

.page__block {
  margin-block-end: var(--page-block-spacing);

  .page__blocks:first-child &:first-child,
  .page__blocks:first-child &:first-child > *:first-child {
    margin-block-start: 0;
  }

  .page__blocks:last-child &:last-child {
    margin-block-end: 0;
  }

  > * + * {
    margin-block-start: var(--page-block-spacing);
  }

  > .headline {
    margin-block-start: calc(var(--page-block-spacing) * 2);
  }
}

.page__block--intro > .paragraph:first-child {
  font-weight: var(--font-weight-semibold);
  margin-block-end: calc(var(--page-block-spacing) * 2);

  @include use-responsive-sizing(font-size, (xs: 2.2rem, m: 2.4rem));
}

.page__block--wide {
  margin-block: var(--page-block-spacing-wide);

  @include use-responsive-sizing(margin-left margin-right, (
    xs: map.get($inner-container-padding, xs) * -1,
    m: column-offset(m, -1, $number-of-columns: 8),
    l: column-offset(l, -1, $number-of-columns: 8),
    xl: column-offset(xl, -1, $number-of-columns: 6),
  ));

  @include mq($until: m) {
    --list-pagination-padding-inline: #{map.get($inner-container-padding, xs)};
    --list-search-results-padding-inline: #{map.get($inner-container-padding, xs)};
    --list-teasers-padding-inline: #{map.get($inner-container-padding, xs)};
    --form-padding-inline: #{map.get($inner-container-padding, xs)};
  }
}

.page__block--wider {
  margin-block: var(--page-block-spacing-wide);

  @include use-responsive-sizing(margin-left margin-right, (
    xs: map.get($inner-container-padding, xs) * -1,
    m: column-offset(m, -1, $number-of-columns: 8),
    l: column-offset(l, -1, $number-of-columns: 8),
    xl: column-offset(xl, -2, $number-of-columns: 6),
  ));

  @include mq($until: m) {
    --extended-table-padding-inline: #{map.get($inner-container-padding, xs)};
  }
}

.page__block--spacing {
  margin-block: var(--page-block-spacing-wide);
}

.page__block--half-full {
  margin-block: var(--page-block-spacing-wide);

  @include use-responsive-sizing(margin-inline, (
    m: column-offset(m, -1, $number-of-columns: 8),
    l: column-offset(l, -1, $number-of-columns: 8),
    xl: column-offset(xl, -2, $number-of-columns: 6),
  ));
}

.page__block--full {
  margin-block: var(--page-block-spacing-full);

  @include use-responsive-sizing(margin-left margin-right, (
    m: column-offset(m, -2, $number-of-columns: 8),
    l: column-offset(l, -2, $number-of-columns: 8),
    xl: column-offset(xl, -3, $number-of-columns: 6),
  ));
}

.page__block--highlight {
  padding-block: var(--page-block-spacing-wide);
  position: relative;

  .page__blocks:first-child &:first-child {
    margin-block-start: calc(var(--page-content-padding) * -1);
  }

  &::before {
    background-color: var(--color-orange-light);
    content: '';
    inset: 0;
    margin-inline: calc((100vw - 100%) / -2);
    position: absolute;
    z-index: -1;
  }
}

.page__block--breaker {
  margin-block: var(--page-block-spacing-full);

  & + & {
    margin-block-start: calc(var(--page-block-spacing-full) * -1 + 0.5rem);
  }

  .page__blocks:first-child &:first-child {
    margin-block-start: calc(var(--page-content-padding) * -1 + 0.5rem);
  }

  @include use-break-out();
}

.page__block--floating {
  display: contents;
}