@use "@naomi-2025/ui-core/site-config";
@use "@naomi-2025/ui-core/border-radius";
@use "@naomi-2025/ui-core/content-containers";
@use "@naomi-2025/ui-core/cta-with-arrow";
@use "@naomi-2025/ui-core/cta-secondary";
@use "s360-scss-toolkit";

.node--project {
  &.node--full {
    &.node--case-study {
      .node__header {
        @include content-containers.bleed();

        margin-top: calc((var(--site-header-height, 0px) * -1));
        position: relative;
        display: grid;
        color: var(--project--full--case-study--header--color);

        &::after {
          content: '';
          background: var(--project--full--case-study--header--bg-color);
          position: absolute;
          inset: 0;
          opacity: 0.7;
          overflow: hidden;

          [data-site-mode="at-play"] & {
            border-radius: border-radius.bottom-right();
          }
        }
      }

      .node__heading-content {
        @include content-containers.safe-area-content();

        position: relative;
        z-index: 1;
        grid-column: 1/-1;
        grid-row: 1/-1;
        align-self: end;
        margin-block: calc(var(--site-header-height) + site-config.spacer(6)) site-config.spacer(6);
      }

      .node__image {
        grid-column: 1/-1;
        grid-row: 1/-1;

        > * {
          height: 100%;
        }
      }
    }
  }
}
