@use "../../variables/units";
@use "../../variables/colors";
@use "../../variables/media-query-breakpoints";

@use "grid.mixins" as css-grid-mixins;
@use "grid.variables" as css-grid-variables;

main,
form {
  > .dso-rich-content {
    margin-block-end: units.$block-spacing-xlarge;
  }

  > .row {
    &.dso-featured {
      margin-block-end: units.$u4;
      margin-block-start: units.$u4;
      padding-block-end: units.$u5;
      padding-block-start: units.$u3;

      & + .row div:not(.dso-rich-content) {
        h1,
        .h1,
        h2,
        .h2,
        h3,
        .h3 {
          &:first-child {
            margin-block-start: 0;
          }
        }
      }
    }
  }
}

.container {
  @include css-grid-mixins.container-fixed();

  @media (min-width: media-query-breakpoints.$screen-sm-min) {
    inline-size: css-grid-variables.$container-sm;
  }

  @media (min-width: media-query-breakpoints.$screen-md-min) {
    inline-size: css-grid-variables.$container-md;
  }

  @media (min-width: media-query-breakpoints.$screen-lg-min) {
    inline-size: css-grid-variables.$container-lg;
  }
}

.container-fluid {
  @include css-grid-mixins.container-fixed();
}

.row {
  @include css-grid-mixins.make-row();

  &:is(ol) {
    padding-inline-start: 0;
  }

  &.dso-equal-heights {
    &:has(.dso-highlight-box, dso-highlight-box) {
      --highlight-box-block-size: 100%;
      --highlight-box-min-block-size: auto;
      --highlight-box-counter-block-size: calc(100% - #{units.$shared-equal-heights-highlight-box-block-size});
      --highlight-box-nocounter-block-size: calc(100% - #{units.$u2});
    }

    > [class*="col-"] {
      display: flex;
      flex-direction: column;

      > .dso-highlight-box {
        block-size: 100%;
        min-block-size: auto;

        &.dso-has-counter {
          block-size: calc(100% - #{units.$shared-equal-heights-highlight-box-block-size});
        }
      }
    }

    display: flex;
    flex-wrap: wrap;
  }

  &.dso-banner {
    --dso-banner-background-color: #{colors.$grasgroen-10};

    @include css-grid-mixins.full-width-row(css-grid-variables.$grid-gutter-width);

    position: relative;

    min-block-size: 352px;
    overflow: hidden;
    background-size: 0; // background image killed off here, to be shown in the ::before

    @media only screen and (min-width: media-query-breakpoints.$screen-sm-min) {
      padding-block-start: units.$u3;
    }

    &.no-button-banner {
      min-block-size: 296px;
    }

    + .row {
      margin-block-start: units.$u3;

      &.dso-featured {
        margin-block-start: 0;
      }
    }

    &::before {
      content: "";

      display: block;

      inline-size: 100%;
      min-block-size: calc(100 / 6) + dvi;

      background-image: inherit; // inherits from parent, external style set by implememnter
      background-color: var(--dso-banner-background-color);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;

      @media only screen and (min-width: media-query-breakpoints.$screen-sm-min) {
        position: absolute;
        inset: 0;

        min-block-size: unset;
      }
    }

    &::after {
      // synthetic background, offsetting the 'background-size: 0' property set above
      content: "";

      position: absolute;
      inset: 0;
      z-index: -1;

      display: block;

      background-color: var(--dso-banner-background-color);

      @media only screen and (min-width: media-query-breakpoints.$screen-sm-min) {
        display: none;
      }
    }
  }

  &.dso-featured {
    @include css-grid-mixins.full-width-row(css-grid-variables.$grid-gutter-width);

    background-color: css-grid-variables.$featured-background-color;
    color: colors.$zwart;
  }
}

.row-no-gutters {
  margin-inline-end: 0;
  margin-inline-start: 0;

  [class*="col-"] {
    padding-inline-end: 0;
    padding-inline-start: 0;
  }
}

@include css-grid-mixins.make-grid-columns();

@include css-grid-mixins.make-grid(xs);

@media (min-width: media-query-breakpoints.$screen-sm-min) {
  @include css-grid-mixins.make-grid(sm);
}

@media (min-width: media-query-breakpoints.$screen-md-min) {
  @include css-grid-mixins.make-grid(md);
}

@media (min-width: media-query-breakpoints.$screen-lg-min) {
  @include css-grid-mixins.make-grid(lg);
}