@use "sass:math";

@use "../../variables/borders" as bordersVars;
@use "../../variables/grid" as gridVars;
@use "../../tools/borders";
@use "../../tools/colour";
@use "../../tools/grid";
@use "../../tools/media";
@use "../../tools/spacing";
@use "../../tools/typography";

$vertical-padding-small: 2 !default;
$vertical-padding-large: 3 !default;
$plain-top-padding: 12 !default;
$split-vertical-padding: 3 !default;
$shift-overflow: $vertical-padding-large !default;
$over-overflow: $shift-overflow !default;

.tna-hero {
  position: relative;

  &::before {
    content: "";

    position: absolute;
    inset: auto 0 0;
    z-index: -1;
    @include colour.colour-border("keyline", 1px, solid, bottom);
  }

  &__figure {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
  }

  &__caption {
    width: 100%;

    overflow: visible;

    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;

    order: 2;
  }

  &__details {
    width: 100%;

    overflow: visible;
  }

  &__details-summary {
    position: absolute;
    top: spacing.space(0.5);
    right: spacing.space(0.5);
    z-index: 2;

    &:hover {
      @include colour.colour-font("font-dark", true);

      @include colour.colour-background("background", true);
    }
  }

  &__details[open] &__details-summary {
    width: 2rem;
    height: 2rem;
    padding: 0;

    font-size: 0;
    line-height: 2rem;
    text-align: center;

    border: none;

    @include colour.contrast;

    &::before,
    &::after {
      content: "";

      width: 1.5rem;
      height: 0.125rem;

      display: block;

      position: absolute;
      top: 50%;
      left: 50%;

      @include colour.colour-background("font-dark");
    }

    &::before {
      transform: translate(-50%, -50%) rotate(45deg);
    }

    &::after {
      transform: translate(-50%, -50%) rotate(-45deg);
    }

    &:hover {
      &::before,
      &::after {
        height: 0.25rem;
      }
    }

    &-icon {
      font-size: 0;
    }
  }

  &__details-summary-icon {
  }

  &__information {
    padding: spacing.space(0.625) spacing.space(3.25) spacing.space(0.625)
      spacing.space(1);

    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;

    @include colour.contrast;

    @include typography.font-size(16);

    p + p {
      margin-top: spacing.space(0.5);
    }
  }

  &__image {
    width: 100%;

    order: 1;

    img {
      width: 100%;
    }
  }

  &__inner {
    order: 3;
  }

  &__content {
    padding-top: spacing.space($vertical-padding-small);
    padding-bottom: spacing.space($vertical-padding-small);
  }

  &__content-inner {
    padding-right: 0;
    padding-left: 0;

    border-left: none;

    @include colour.colour-background("background");
  }

  @include media.on-larger-than-mobile {
    &__figure {
      min-height: clamp(5rem, 30vw, 20rem);
    }

    &--large &__figure {
      min-height: clamp(12rem, 33vw, 50rem);
    }

    &__inner {
      z-index: 4;
    }

    &__image {
      width: auto;

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

      img {
        height: 100%;

        object-fit: cover;
      }
    }

    &__content {
      padding-top: spacing.space($plain-top-padding);
      padding-bottom: spacing.space($vertical-padding-large);
    }

    &__content-inner {
      padding: spacing.space(2);
      @include borders.rounded-border;
    }

    &__information {
      max-width: math.div(gridVars.$largest-container-width, 2);

      left: auto;
    }

    &--split &__content {
      width: 50%;
      padding-top: spacing.space($vertical-padding-large);
      padding-bottom: spacing.space($vertical-padding-large);
    }

    &--split &__content-inner {
      padding: 0 grid.gutter-width-half() 0 0;
    }

    &--split &__image {
      left: 50%;
    }

    &--shift {
      margin-bottom: spacing.space($shift-overflow);
    }

    &--shift &__content-inner {
      position: relative;
      top: spacing.space($vertical-padding-large + $shift-overflow);
    }

    &--over {
      margin-bottom: spacing.space($over-overflow);
    }

    &--over &__details {
      max-width: gridVars.$largest-container-width;
      margin: 0 auto;

      position: relative;
    }

    &--over &__details-summary {
      top: spacing.space(0.5);
      right: spacing.space(gridVars.$gutter-width + 0.5);
    }

    &--over &__information {
      max-width: calc(50% - #{spacing.space(gridVars.$gutter-width)});

      box-sizing: border-box;

      top: 0;
      right: spacing.space(gridVars.$gutter-width);
      left: auto;

      @include borders.rounded-border;
    }

    &--over &__content {
      width: 50%;
      padding-top: spacing.space($vertical-padding-large);
    }

    &--over &__content-inner {
      padding: 0;
    }

    &--over &__image {
      max-width: calc(
        #{math.div(gridVars.$largest-container-width, 2)} -
          (#{grid.gutter-width()} + #{grid.gutter-width-half()})
      );
      margin-right: 32px;

      overflow: hidden;

      bottom: spacing.space($over-overflow * -1);

      left: calc(50% + #{grid.gutter-width-half()});
      z-index: 5;
      @include borders.rounded-border;
    }

    &--split &__figure,
    &--over &__figure {
      justify-content: center;
    }

    &--shift &__content-inner,
    &--over &__image {
      box-shadow:
        0 0.25rem 1rem -0.25rem rgb(0 0 0 / 25%),
        0 0.125rem 0.5rem -0.25rem rgb(0 0 0 / 75%);
    }
  }
}