@use "sass:math";

.product-card-grid {
  --min-grid-absolute-size: #{size(9)};
  --max-grid-relative-size: 20%;

  @extend .grid;

  @include breakpoint-up(lg) {
    --min-grid-absolute-size: #{size(16)};
  }

  &.narrow {
    @include breakpoint-up(lg) {
      --min-grid-absolute-size: #{size(12)};
    }
  }
}

.product-cta {
  @include bg-color(filled);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: spacer(4);
  padding: spacer(4);

  h3 {
    display: none;
    flex: 1;

    @include breakpoint-up(lg) {
      display: unset;
    }
  }

  .rating {
    display: none;

    @include breakpoint-up(lg) {
      display: flex;
    }
  }

  @include breakpoint-up(lg) {
    padding: spacer(4) $body-padding-desktop-center;
  }
}

article {
  &.product-card,
  &.product {
    position: relative;
    @include bg-color(filled);
    border: $border;
    border-radius: border-radius(1);

    > figure {
      background: url("~images/placeholders/product-cover.png");
      background-size: cover;
      border-radius: border-radius(1) border-radius(1) 0 0;
      border-bottom: $border;
      overflow: hidden;

      img {
        width: 100%;
      }
    }

    .user {
      display: flex;
      align-items: center;
      gap: spacer(2);
    }

    .ribbon {
      $width: size(5);
      @include bg-color(accent);
      border: $border;
      position: absolute;
      top: 0;
      @include font-size(1);
      width: $width;
      left: math.sqrt(math.div(math.pow(math.div($width, size(1)), 2), 2)) - $width;
      transform: translate(0, -100%) rotate(-45deg);
      transform-origin: 100% 100%;
      $height: "1lh + 2 * #{$border-width}";
      clip-path: polygon(calc(#{$height}) 0, calc(100% - (#{$height})) 0, 100% 100%, 0 100%);
      text-align: center;
    }
  }

  &.product-card {
    @include transition(all);
    display: grid;
    grid-template-rows: auto 1fr auto;

    &:hover {
      box-shadow: box-shadow(1);
    }

    > figure {
      aspect-ratio: 1;

      img {
        height: 100%;
        object-fit: cover;
      }
    }

    .thumbnails {
      background-image: none;
      @include bg-color(accent);
      display: grid;
      gap: spacer(1);
      padding: spacer(2);

      &:has(:nth-child(2)) {
        grid-template-columns: 1fr 1fr;
      }

      > * {
        aspect-ratio: 1;
        background: url("~images/placeholders/product-cover.png");
        background-size: cover;
        border-radius: border-radius(1);
        border: $border;
      }
    }

    header {
      padding: spacer(4);
      display: grid;
      grid-template-rows: 1fr;
      gap: spacer(3);
      border-bottom: $border;

      h4 {
        @include max-lines(4);

        @include breakpoint-up(lg) {
          @include font-size(3);
        }
      }

      small {
        @include text-muted;
        @include text-singleline;
      }
    }

    .user,
    .rating {
      @include font-size(1);
    }

    footer {
      display: flex;

      & > * {
        padding: spacer(4);

        &:not(:last-child) {
          border-right: $border;
        }
      }

      & > *:first-child {
        flex: 1;

        &.rating {
          flex: 1 0 max-content;
        }
      }

      & > details {
        padding: 0;
        flex-shrink: 0;
        & > summary {
          padding: spacer(4);
        }
      }

      & > .metrics {
        display: flex;
        align-items: center;
        gap: var(--spacer-3);
      }

      & > .actions {
        font-size: var(--big-icon-size);
      }
    }

    small,
    .detail {
      display: none;
    }

    @include breakpoint-up(lg) {
      small,
      .detail {
        display: unset;
      }
    }

    &.horizontal {
      section {
        display: grid;
        grid-template-rows: 1fr auto;
      }

      @include breakpoint-up(lg) {
        grid-template-columns: auto 1fr;

        > figure {
          border-right: $border;
          border-bottom: none;
          border-radius: border-radius(1) 0 0 border-radius(1);

          img {
            // This stops browsers trying to stretch the image to its native size, making sure
            // the container height is based on the right-hand content instead
            height: 0;
            min-height: 100%;
          }
        }

        section {
          gap: spacer(6);
          padding: spacer(4) spacer(5);
        }

        header {
          grid-template-rows: repeat(auto-fit, minmax(0, min-content));
          padding: 0;
          border-bottom: none;
        }

        footer > * {
          padding: 0;
          border-right: none;
        }

        h3,
        small {
          @include text-singleline;
        }
      }

      &.big {
        header {
          gap: spacer(3);
        }

        h2 {
          @include max-lines(3);
        }

        @include breakpoint-up(lg) {
          small {
            white-space: unset;
            @include max-lines(4);
          }
        }
      }
    }
  }

  &.product {
    display: grid;

    @include breakpoint-up(lg) {
      grid-template-columns: 2fr 1fr;

      & > section:first-of-type {
        border-right: $border;
      }
    }

    .carousel {
      grid-column: 1 / -1;

      [role="tabpanel"] {
        border: none;
      }
    }

    & > section {
      & > header,
      & > section {
        padding: spacer(5);
        display: grid;
        gap: spacer(4);
        &:not(:first-child) {
          border-top: $border;
        }
      }

      & > section {
        & > header {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }

        &.details {
          display: grid;
          grid-template-columns: auto 1fr;
          gap: $border-width;
          padding: 0;

          & > * {
            padding: spacer(4) spacer(5);
            outline: $border;
            outline-offset: 0;
          }

          .user:first-child,
          .rating {
            grid-column: 1 / -1;
          }

          @include breakpoint-up(sm) {
            grid-template-columns: auto auto minmax(max-content, 1fr);

            > :nth-child(2):last-child {
              grid-column: 2 / -1;
            }

            .user:first-child,
            .rating {
              grid-column: unset;
            }
          }
        }
      }
    }
  }
}
