
//
// Boxes / blocks
// --------------------------------------------------

.box {
  border-radius: @border-radius-base;

  &--border {
    padding: 20px;
    border: 1px solid #ddd;
  }

  &--featured {
    border: 1px solid @brand-info;
    padding: @gap;
    background: fade(@brand-info, 10%);
  }

  &--sponsored {
    
    .box__caption {
      color: @brand-danger;
    }
  }

  + .box,
  + div {
    margin-top: @vertical-rhythm;
  }

  &__caption {
    .font-normalize(22px, 0 0 15px);
    color: @box-caption-color;
    position: relative;
    font-weight: bold;
  }

  &__content {
    color: @box-content-color;
    padding-top: @vertical-rhythm/2;

    > *:last-child {
      margin-bottom: 0;
    }
  }
}



//
// Min max toggle
// --------------------------------------------------

.collapsible {
  position: relative;

  &.collapsed {

    .minmax-toggle i {
      .fa-icon();
      &:before { content: @fa-var-angle-down; }
    }

    .box__content,
    > .fieldset__content {
      display: none;
    }
  }
}

.minmax-toggle {
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -12px;
  font-size: 24px;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-decoration: none;
  text-align: center;

  i {
    .fa-icon();
    &:before { content: @fa-var-angle-up; }
  }

  &:hover {
    text-decoration: none;

    i {
      color: @link-color;
    }
  }
}



//
// Featured block
// --------------------------------------------------

.ia-item-featured {
  position: relative;

  & + & {
    margin-top: @vertical-rhythm;
  }

  &__image {
    position: relative;
    z-index: 10;
    text-decoration: none;

    img {
      .img-responsive();
    }
  }

  &__caption {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 20;
    padding: 20px;
    background: transparent;
    background: -webkit-linear-gradient(fade(#000, 0%), fade(#000, 80%));
    background: linear-gradient(fade(#000, 0%), fade(#000, 80%));

    h3,
    h4 {
      font-weight: bold;
      text-transform: uppercase;
      margin: 0;

      a {
        font-size: 12px;
        line-height: 12px;
        // box-shadow: 4px 0 0 #000, -4px 0 0 #000;

        &,
        &:focus {
          color: @brand-danger;
          text-decoration: none;
          // background: #000;
        }

        &:hover {
          color: lighten(@brand-danger, 10%);
          text-decoration: none;
        }
      }
    }

    h4 a {
      font-size: 18px;

      @media (max-width: @screen-xs) {
        font-size: 14px;
      }

      &,
      &:focus {
        color: #fff;
      }

      &:hover {
        color:lighten(@brand-danger, 10%);
      }
    }

    p {
      color: #fff;
      margin: 0;
    }
  }
}