@use 'sass:math';
@use '@cfpb/cfpb-design-system/src/abstracts' as *;
@use './layout-base' as *;
@use './layout-2-1' as *;
@use './layout-1-3' as *;

.wrapper--match-content {
  // Tablet and above.
  @include respond-to-min($bp-sm-min) {
    max-width: $grid_wrapper-width - ($grid-gutter-width * 2);
  }
}

.content--half-top-on-desk {
  // Desktop and above.
  @include respond-to-min($bp-med-min) {
    padding-top: math.div($grid-gutter-width, $base-font-size-px) + em;

    &::after {
      top: math.div($grid-gutter-width, $base-font-size-px) + em !important;
    }
  }
}

.content--flush-sides-on-small {
  // Tablet and below.
  @include respond-to-max($bp-sm-max) {
    padding-left: 0;
    padding-right: 0;
    border-width: 0;
  }
}

.content-l__col {
  &.content-l__col-1 + &.content-l__col-1 {
    margin-top: 0;
  }
}

.content__hide-horizontal-overflow {
  overflow-x: hidden;
}

// Center content and bleed full-width images into gutters
// Used on our story pages
.content__center-image-bleed {
  .u-layout-grid__main {
    max-width: 41.875rem;
    margin-left: auto;
    margin-right: auto;

    .o-full-width-text-group {
      overflow: inherit;
    }

    .image-bleed {
      $half-gutter-width: math.div($grid-gutter-width, 2);
      $two-gutter-widths: $grid-gutter-width * 2;

      width: 'calc( 100vw - #{$grid-gutter-width} )';
      max-width: 'calc( 100vw - #{$grid-gutter-width} )';
      margin-left: 'calc( -50vw + #{$half-gutter-width} )';
      margin-right: 'calc( -50vw + #{$half-gutter-width} )';
      position: relative;
      left: 50%;
      right: 50%;

      // Tablet and above.
      @include respond-to-min($bp-sm-min) {
        width: 'calc( 100vw - #{$two-gutter-widths} )';
        max-width: 'calc( 100vw - #{$two-gutter-widths} )';
        margin-left: 'calc( -50vw + #{$grid-gutter-width} )';
        margin-right: 'calc( -50vw + #{$grid-gutter-width} )';
      }

      @include respond-to-min($bp-xl-min) {
        width: $grid_wrapper-width - $two-gutter-widths;
        max-width: $grid_wrapper-width - $two-gutter-widths;
        margin-left: -1 *
          math.div(($grid_wrapper-width - $two-gutter-widths), 2);
        margin-right: -1 *
          math.div(($grid_wrapper-width - $two-gutter-widths), 2);
      }
    }
  }
}

// Increase the size of all headings by one level
// Used on our story pages
// $TODO: Expose heading class modifiers in wagtail
.content__supersize-headings {
  .o-full-width-text-group h2 {
    @include heading-1;
  }
}
