@use 'sass:map';

:root {
  --detail-stage-background-color: transparent;
  --detail-stage-image-aspect-ratio: #{1440 / 440};
  --detail-stage-image-fallback-aspect-ratio: #{1440 / 250};
  --detail-stage-image-fallback-background-color: #{rgba(#000, 0.05)};
  --detail-stage-image-max-width: #{$inner-container-max-width};
}

.detail-stage {
  background-color: var(--detail-stage-background-color);
}

.detail-stage__image {
  aspect-ratio: var(--detail-stage-image-aspect-ratio);
  display: flex;
  flex-direction: column;
  margin-inline: auto;
  max-inline-size: var(--detail-stage-image-max-width);

  &:empty {
    aspect-ratio: var(--detail-stage-image-fallback-aspect-ratio);
    background-color: var(--detail-stage-image-fallback-background-color);
  }
}

.detail-stage__inner {
  position: relative;

  @include use-container();
}

.detail-stage__top {
  position: relative;
  z-index: 2;

  @include use-responsive-sizing(--detail-stage-top-height, (
    m: 8rem,
    l: 10rem,
  ));

  @include mq($from: m) {
    display: flex;
    margin-block-start: calc(var(--detail-stage-top-height) * -1);
  }
}

.detail-stage__breadcrumb {
  padding-block-start: 2rem;

  &::before {
    background-color: var(--detail-stage-background-color);
    block-size: 100%;
    content: '';
    inline-size: 100vw;
    inset-block: 0;
    inset-inline-start: -100vw;
    position: absolute;
  }

  @include mq($from: m) {
    align-items: center;
    background-color: var(--detail-stage-background-color);
    block-size: var(--detail-stage-top-height);
    display: flex;
    min-inline-size: 50%;
    padding-block-start: 0;
    padding-inline-end: calc(var(--gap) * 0.5);
  }

  @include mq($from: l) {
    flex-shrink: 0;
  }
}

.detail-stage__logo {
  block-size: 7.5rem;
  inline-size: auto;
  margin-block-start: 2rem;

  @include mq($from: m) {
    block-size: var(--detail-stage-top-height);
    margin-block-start: 0;
  }
}

.detail-stage__hint-boxes {
  display: flex;

  @include mq($until: m) {
    inset-block-start: 0;
    position: absolute;
    transform: translate(calc(var(--body-padding) * -1), -100%);
  }
}

.detail-stage__hint-box {
  &:nth-child(even) {
    --hint-box-background-color: var(--color-orange-light);
    --hint-box-text-color: var(--color-midnight);
  }

  @include use-responsive-sizing(--hint-box-font-size, (
    xs: 1.6rem,
    l: 1.8rem,
  ));
  @include use-responsive-sizing(--hint-box-height, (
    xs: 8rem,
    m: #{var(--detail-stage-top-height)},
  ));
  @include use-responsive-sizing(--hint-box-padding-inline, (
    xs: map.get($inner-container-padding, xs),
    s: map.get($inner-container-padding, s),
    m: map.get($gaps, m) * 0.5,
    l: map.get($gaps, l) * 0.5,
    xl: map.get($gaps, xl) * 0.5,
  ));
  @include use-responsive-sizing(--hint-box-min-width, (
    m: 17rem,
  ));
}

.detail-stage__content {
  display: grid;
  grid-auto-rows: auto;

  @include use-responsive-sizing(padding-block row-gap, responsive-map(xs 2.5rem, l 7.5rem));
  @include use-responsive-sizing(column-gap, $gaps);
  @include use-responsive-sizing(grid-template-columns, (xs: 1fr, m: 1fr 1fr));
}

.detail-stage__headline {
  @include use-responsive-sizing(margin-block-end, responsive-map(xs 2rem, xl 4rem));
}

.detail-stage__text {
  font-size: 2.2rem;
  font-weight: 600;
  line-height: var(--line-height-default);
  margin-block-start: 3rem;
}

.detail-stage__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.detail-stage__details {
  font-size: 1.3rem;
  gap: 3rem;
  line-height: 1.7;
  margin-block: -1rem;

  @include mq($from: s) {
    column-count: 2;
  }
}

.detail-stage__detail {
  break-inside: avoid;
  padding-block: 1rem;
}

.detail-stage__detail-label {
  display: block;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

.detail-stage__detail-text {
  > * + * {
    margin-block-start: 1rem;
  }
}