/*
 * Variables
 */
$lbp-grid-gutter: 0px;
$lbp-grid-row-length: 6;
$lbp-podium-prizes-gutter: 0.8rem;
$lbp-podium-prizes-padding: 2rem;
$lbp-podium-prizes-item-padding: 2rem;


/*
 * Layout
 */
.component-LBP
{
  display: block;
}
.component-LBP-container
{
  @include outer-container;
}


/*
 * Podium
 */
.component-LBP-podium
{
  margin-bottom: 1px;
  min-height: 650px;
  position: relative;
}
.component-LBP-podium-background
{
  display: block;
  height: 100%;
  overflow: hidden;
  width: 100%;

  position: absolute;
    left: 0;
    top: 0;

  img
  {
    @include cover;

    display: block;
  }
}
.component-LBP-podium-content
{
  @include outer-container;

  position: relative;
    z-index: 2;
}
.component-LBP-podium-text
{
  @include span-columns(8);
  @include shift(2);

  margin-top: 16.4rem;
}
.component-LBP-podium-title
{
  color: #000000;
  font-family: lucien-bold, Arial, Helvetica, sans-serif;
  font-size: 1.5rem;
  text-align: center;
}
.component-LBP-podium-description
{
  margin-top: 1rem;

  color: #000000;
  font-family: lucien-book, Arial, Helvetica, sans-serif;
  font-size: 1rem;
  text-align: center;
}
.component-LBP-podium-prizes
{
  @include span-columns(12);

  margin-top: 4.1rem;
  padding: 0 $lbp-podium-prizes-padding $lbp-podium-prizes-padding;
}
.component-LBP-podium-prizes-list
{
  display: flex;
}
.component-LBP-podium-prizes-sublist
{
  display: flex;
    flex-direction: column;
    justify-content: space-between;
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 0;
  margin-left: $lbp-podium-prizes-gutter;

  .component-LBP-podium-prize
  {
    flex-grow: 1;
  }
}
.component-LBP-podium-prize
{
  background: rgba($color-golden, 0.65);
  flex-basis: 0;
  flex-shrink: 0;
  padding: $lbp-podium-prizes-padding / 2 $lbp-podium-prizes-item-padding;
}
.component-LBP-podium-prize--big, .component-LBP-podium-prize--medium
{
  display: flex;
    align-items: center;

  .component-LBP-podium-prize-picture
  {
    flex-basis: 0;
  }
  .component-LBP-podium-prize-description
  {
    flex-basis: 0;
  }
}

.component-LBP-podium-prize--big
{
  flex-grow: 1.3;

  .component-LBP-podium-prize-picture
  {
    flex-grow: 1;
  }
  .component-LBP-podium-prize-description
  {
    flex-grow: 1.2;
    margin-left: $lbp-podium-prizes-item-padding;
  }
}
.component-LBP-podium-prize--medium
{
  flex-direction: row-reverse;
  flex-grow: 1.2;
  margin-left: $lbp-podium-prizes-gutter;

  .component-LBP-podium-prize-picture
  {
    flex-grow: 1;
  }
  .component-LBP-podium-prize-description
  {
    flex-grow: 1.3;
    margin-right: $lbp-podium-prizes-item-padding;
  }
}
.component-LBP-podium-prize--small
{
  margin-bottom: $lbp-podium-prizes-gutter;

  &:last-child
  {
    margin-bottom: 0;
  }
  .component-LBP-podium-prize-description
  {
    text-align: center;
  }
}
.component-LBP-podium-prize-picture
{
  display: block;

  img
  {
    display: block;
    width: 100%;
  }
}
.component-LBP-podium-prize-description
{
  color: #FFF;
  font-family: lucien-bold, Arial, Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 1.4;
}


/*
 * Grid
 */
.component-LBP-grid
{
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  justify-content: center;
}
.component-LBP-grid-item
{
  border-color: $color-golden $color-golden $color-golden transparent;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  display: block;
  flex-basis: calc((100% - #{($lbp-grid-row-length - 1) * $lbp-grid-gutter}) / #{$lbp-grid-row-length});
  flex-grow: 0;
  flex-shrink: 0;
  margin-bottom: -1px;
  padding: 24px 8px;

  &:not(:nth-child(#{$lbp-grid-row-length}n))
  {
    margin-right: $lbp-grid-gutter;
  }
  &:nth-child(#{$lbp-grid-row-length}n+1)
  {
    border-left-color: $color-golden;
  }
}
.component-LBP-grid-item-text
{
  margin-bottom: 10px;
}
.component-LBP-grid-item-text-number
{
  margin-bottom: 10px;

  color: $color-golden;
  font-family: lucien-bold, sans-serif;
  font-size: 1.05rem;
  line-height: 1;
  text-align: center;

  position: relative;

  &::before
  {
    background: transparent;
    border-radius: 50%;
    content: '';
    display: none;
    height: 2em;
    width: 2em;

    position: absolute;
      left: 50%;
      top: 50%;
      z-index: -1;
    transform: translateX(-50%) translateY(-56%);
  }
}
.component-LBP-grid-item-text-title
{
  color: #000000;
  font-family: lucien-bold, sans-serif;
  font-size: 0.9rem;
  line-height: 1;
  text-align: center;
}
.component-LBP-grid-item-picture
{
  display: block;
  height: 35px;
  margin: 0 auto;
  width: 35px;

  img
  {
    display: block;
    width: 100%;
  }
  svg
  {
    display: block;
    height: 100%;
    width: 100%;
  }
}


/*
 * Text
 */
.component-LBP-text
{
  font-family: lucien-regular, sans-serif;
  margin-top: 30px;

  a
  {
    color: $color-golden;
    text-decoration: underline;
  }
}
.component-LBP-subtitle
{
  display: none;
}


@include tablet-landscape-and-below
{
  // NOTE: removes unecessary border from previous breakpoint
  .component-LBP-grid-item:nth-child(#{$lbp-grid-row-length}n+1)
  {
    border-left-color: transparent;
  }

  /*
   * Variables
   */
  $lbp-grid-row-length: 5;
  $lbp-podium-prizes-gutter: 0.4rem;
  $lbp-podium-prizes-padding: 1rem;
  $lbp-podium-prizes-item-padding: 1rem;


  /*
   * Layout
   */
  .component-LBP-content
  {
    @include shift(1);
    @include span-columns(10);
  }

  /*
   * Podium
   */
  .component-LBP-podium
  {
    min-height: 0;
  }
  .component-LBP-podium-background
  {
    img
    {
      width: 100%;

      position: static;
      transform: none;
    }
  }
  .component-LBP-podium-text
  {
    margin-top: 11rem;
  }
  .component-LBP-podium-title
  {
    font-size: 1rem;
  }
  .component-LBP-podium-description
  {
    font-size: 0.8rem;
  }
  .component-LBP-podium-prizes
  {
    margin-top: 1.25rem;
    padding: $lbp-podium-prizes-padding 0;
  }
  .component-LBP-podium-prizes-sublist
  {
    margin-left: $lbp-podium-prizes-gutter;
  }
  .component-LBP-podium-prize
  {
    padding: $lbp-podium-prizes-item-padding;
  }
  .component-LBP-podium-prize--big
  {
    .component-LBP-podium-prize-description
    {
      flex-grow: 1;
      margin-left: $lbp-podium-prizes-item-padding;
    }
  }
  .component-LBP-podium-prize--medium
  {
    flex-grow: 1;
    margin-left: $lbp-podium-prizes-gutter;

    .component-LBP-podium-prize-description
    {
      margin-right: $lbp-podium-prizes-item-padding;
    }
  }
  .component-LBP-podium-prize--small
  {
    margin-bottom: $lbp-podium-prizes-gutter;
  }
  .component-LBP-podium-prize-description
  {
    font-size: 0.6rem;
  }


  /*
   * Grid
   */
  .component-LBP-grid-item
  {
    flex-basis: calc((100% - #{($lbp-grid-row-length - 1) * $lbp-grid-gutter}) / #{$lbp-grid-row-length});

    &:not(:nth-child(#{$lbp-grid-row-length}n))
    {
      margin-right: $lbp-grid-gutter;
    }
    &:nth-child(#{$lbp-grid-row-length}n+1)
    {
      border-left-color: $color-golden;
    }
  }
}

@include mobile-landscape-and-below
{
  $lbp-grid-gutter: 3px;
  $lbp-podium-prizes-gutter: 0.2rem;
  $lbp-podium-prizes-item-padding: 1rem;

  /*
   * Podium
   */
  .component-LBP-podium
  {
    border-bottom: none;
  }
  .component-LBP-podium-background
  {
    img
    {
      @include cover($reset: true);
    }
  }
  .component-LBP-podium-text
  {
    margin-left: 0;
    width: 100%;
  }
  .component-LBP-podium-title
  {
    font-size: 1rem;
  }
  .component-LBP-podium-description
  {
    font-size: 0.9rem;
  }
  .component-LBP-podium-prizes
  {
    padding: 0 0 $lbp-grid-gutter;
  }
  .component-LBP-podium-prizes-list
  {
    display: block;
  }
  .component-LBP-podium-prizes-sublist
  {
    margin-left: 0;
  }
  .component-LBP-podium-prize
  {
    background: transparent;
    border: 1px solid $color-golden;
    padding: $lbp-podium-prizes-item-padding;
    margin-bottom: $lbp-podium-prizes-gutter;
    margin-left: 0;

    &:last-child
    {
      margin-bottom: 0;
    }
  }
  .component-LBP-podium-prize--big, .component-LBP-podium-prize--medium
  {
    display: block;

    .component-LBP-podium-prize-picture
    {
      margin: 0 auto $lbp-podium-prizes-item-padding;
      width: 60%;
    }
    .component-LBP-podium-prize-description
    {
      margin-left: 0;
      text-align: center;
    }
  }
  .component-LBP-podium-prize-picture
  {
    margin-bottom: $lbp-podium-prizes-item-padding;
  }
  .component-LBP-podium-prize-description
  {
    color: #000000;
    font-size: 0.8rem;
  }


  /*
   * Grid
   */
  .component-LBP-grid
  {
    .component-LBP-grid-item
    {
      border-width: 1px;
      flex-basis: calc((100% - #{$lbp-grid-gutter}) / 2);
      margin-right: 0 !important;

      &:not(:nth-child(2n))
      {
        margin-right: $lbp-grid-gutter !important;
      }
    }
    .component-LBP-grid-item-content
    {
      min-height: 0;
      padding: 3vw 6vw 3vw 3vw;

      position: relative;
    }
    .component-LBP-grid-item-text
    {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0;
    }
    .component-LBP-grid-item-text-number
    {
      color: white;
      margin: 0;

      &::before
      {
        background: #999999;
        display: block;
      }
    }
    .component-LBP-grid-item-text-title
    {
      margin: 0 0 0 2vw;
      width: 100%;
    }
    .component-LBP-grid-item-picture
    {
      height: 4vw;
      margin: 0;
      width: 4vw;

      position: absolute;
      top: 50%;
      right: 1vw;
      transform: translateY(-50%);
    }
  }
  .component-LBP-grid-item
  {
    border-color: $color-golden !important;
    margin-bottom: $lbp-grid-gutter !important;
    padding: 0 !important;
  }
  .component-LBP-grid-item-text-number
  {
    height: 4vw;
    width: 4vw;

    font-size: 0.8rem !important;
    line-height: 4vw;
  }
  .component-LBP-grid-item-text-title
  {
    color: $color-golden;
    font-size: 0.68rem !important;
    text-align: center !important;
  }

  /*
   * Text
   */
  .component-LBP-text
  {
    margin-top: 30px;

    font-size: 0.8rem;
    text-align: center;
  }
  .component-LBP-subtitle
  {
    display: block;
    margin: 1rem 0;

    color: #000000;
    font-family: lucien-bold, Arial, Helvetica, sans-serif;
    text-align: center;
  }
}