////////////////////////////////////////////////////////////////////////////////
// *
// * Content block: related items.
// *
////////////////////////////////////////////////////////////////////////////////

@use "sass:math";

@use "../../../00-theme/00-base/00-config/00-variables" as *;
@use "../../../00-theme/00-base/01-helpers" as *;
@use "../../../00-theme/00-base/05-grid/00-grid-flex" as *;

.cb-related-items {
  --_related-items-gap: var(--gap-md);
}

.cb__intro--related-items {
  max-width: var(--max-width-inner);
}

.field__items--name-field-cb-related-items {
  gap: var(--_related-items-gap) 0;
  @include flex-grid(12, var(--_related-items-gap));
}

.field__item--name-field-cb-related-items {
  @include flex-col(12, 12, var(--_related-items-gap));

  .node,
  .node__content {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .field--name-field-page-display-canonical:last-child {
    display: flex;
    flex-grow: 1;
    align-items: flex-end;
  }
}

.node__content--view-mode-related {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);

  .heading {
    margin-bottom: 0;
  }

  .rs-canonical-link-formatter {
    // Please don't use a mixin, just set a class on the field.
  }
}

// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
// * Breakpoint: wide phone & wider
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

@include bp-xs-wide {
  .field__item--name-field-cb-related-items {
    flex-basis: calc(#{math.div(100%, 12) * 6} - var(--_related-items-gap));
  }
}

// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
// * Breakpoint: tablet & wider
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

@include bp-sm {
  .field__item--name-field-cb-related-items {
    flex-basis: calc(#{math.div(100%, 12) * 4} - var(--_related-items-gap));

    .layout--2-col & {
      flex-basis: calc(100% - var(--_related-items-gap));
    }
  }
}


// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
// * Breakpoint: large screen
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

@include bp-lg {
  .field__item--name-field-cb-related-items {
    flex-basis: calc(#{math.div(100%, 12) * 3} - var(--_related-items-gap));

    .layout--2-col & {
      flex-basis: calc(#{math.div(100%, 12) * 6} - var(--_related-items-gap));
    }

    .layout__region--size-1-3 &,
    .layout__region--size-1-4 & {
      flex-basis: calc(100% - var(--_related-items-gap));
    }
  }
}
