// Blog // // //

// // entry // .entry {

@include transition(0.2s);
overflow: hidden;
position: relative;

> a {
  padding: 2.5rem;
  color: inherit;
}

&:not(:first-child) { border-top: $border-width solid $border-color; }

&::after {
  position: absolute;
  top: 50%;
  right: 2.5rem;
  display: block;
  content: "\f105";
  font-size: 1.375rem;
  font-family: $font-icon;
  @include transition(0.2s);
  @include translate(0,-50%);
}

&:hover {
  background: $border-color;

  &::after { right: 1.875rem; }
}

time {
  @extend %eyebrow;
}

}

.entry-title {

font-size: 1rem;
font-family: $font-family-sans-serif;
font-weight: $font-weight-normal;

}

.text-white {

.entry {
  &:not(:first-child) { border-color: $text-white-border; }

  &:hover {
    background: $text-white-border;
  }
}

}

// // News // .news {

margin-top: .3125rem;

&:first-child {
  margin-top: 0;
}

a {
  @include border-radius;
  @include transition;
  position: relative;
  padding: 1.875rem;
  display: inline-block;
  background: $border-color;
  color: inherit;

  &:hover {
    padding-left: 2.5rem;
  }
}

time {
  @include translate(1.25rem,-50%);
  left: 100%;
  top: 50%;
  position: absolute;
  white-space: nowrap;
}

}

.news-title {

margin: 0;
font-size: 1rem;
font-family: $font-family-sans-serif;
font-weight: $font-weight-normal;

}

.text-white {

.news {
  a {
    background: rgba($canalplus, .1);
  }

  time {
    color: $text-white-secondary;
  }
}

}

@include media-breakpoint-down(sm) {

.news {
  time {
    position: static;
    font-size: $font-size-sm;
    letter-spacing: $letter-spacing-sm;
  }
}

}

// // tiles // .tile {

@extend %equal;
@include border-radius;
-webkit-mask-image: -webkit-radial-gradient(white, black);
overflow: hidden;

.tile-content {
  @extend %text-white;
  @extend %text-shadow;

  // Dark overlay for background image
  &::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    background: rgba($canalplus, 0.2);
  }
}

&:hover {
  .tile-image {
    @include scale;
  }

  .tile-header {
    @include translate(0,5%);
  }

  .tile-footer {
    @include translate(0,-5%);
  }

  .on-hover {
    opacity: 1;

    &.tile-header { @include translate(0,0) }
    &.tile-footer { @include translate(0,0) }
  }
}

}

.tile-image {

@include transition;
background-size: cover;
background-position: 50% 50%;

}

.tile-header, .tile-footer {

@include transition;
position: absolute;
top: 0;
width: 100%;
padding: $card-spacer-x;

}

.on-hover {

opacity: 0;
&.tile-header {
  @include translate(0,-25%)
}

&.tile-footer {
  @include translate(0,25%)
}

}

.tile-footer {

top: auto;
bottom: 0;

}

// // Sidebar // .widget {

+ .widget {
  margin-top: 3.125rem;
}

}

.widget-title {

@extend %eyebrow;
display: block;
margin-bottom: 1rem;

}

// Tag Cloud .tag-cloud {

margin: -.25rem;

a {
  @include transition;
  float: left;
  display: block;
  margin: .25rem;
  background: $gray-200;
  padding: .5rem 1rem;
  font-size: $font-size-sm;
  color: $body-color;
  border-radius: 10rem;

  &:hover {
    background: $primary;
    color: $white;
  }
}

}

// Categories .list-group-categories {

.list-group-item {
  @include transition;
  color: $canalplus;

  &:hover {
    color: $primary;

    .badge {
      color: $primary;
    }
  }
}

.badge {
  background: $gray-200;
}

}

// Latest posts .feed {

padding: 0;
list-style: none;

li {  
  &:not(:last-child) {
    margin-bottom: ($grid-gutter-width / 2);
    padding-bottom: ($grid-gutter-width / 2);
    border-bottom: $border-width solid $border-color;
  }
}

}

.feed-item {

@include transition;
display: -ms-flexbox;
display: flex;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-align: center !important;
align-items: center !important;

&:hover {
  .feed-item-content h3 {
    color: $primary;
  }
}

img {
  @extend %boxed;
  @include border-radius;
  width: 70px;
}

}

.feed-item-content {

padding-left: ($grid-gutter-width / 2);

h3 {
  @include transition;
  margin-bottom: 0;
  font-size: $font-size-base;
  font-weight: 400;
}

span {
  font-size: $font-size-sm;
  color: $body-color;
}

}