@use '../../compiled/tokens/scss/breakpoint';
@use '../../mixins/ms';
@use '../../compiled/tokens/scss/size';
@use '../../mixins/fluid';

/**
 * The Overview stacks content vertically on small screens.
 * On large screens the header and actions are stacked horizontally above the content.
 * The specific spacing values were inferred from the Article Listing prototype.
 */

.o-overview__header {
  margin-block-end: ms.step(1);
}

.o-overview__actions {
  margin-block-end: ms.step(3);
}

@supports (display: grid) {
  @media (min-width: breakpoint.$l) {
    .o-overview {
      align-items: center;
      column-gap: fluid.fluid-clamp(
        size.$spacing-gap-fluid-min,
        size.$spacing-gap-fluid-max,
        breakpoint.$s,
        breakpoint.$xl
      );
      display: grid;
      grid-template-areas:
        'header header actions'
        'content content content';
      grid-template-columns: repeat(3, 1fr);
      row-gap: ms.step(3);
    }

    .o-overview__header,
    .o-overview__actions {
      margin: 0;
    }

    .o-overview__header {
      grid-area: header;
    }

    .o-overview__actions {
      grid-area: actions;
    }

    .o-overview__content {
      grid-area: content;
    }
  }
}