/*
 * EdGEL Event panels
 * --------------------------------------------------
 */
// stylelint-disable font-family-no-missing-generic-family-keyword

.panel-event {
  .panel-variant(@panel-default-border; @panel-default-text; @panel-default-heading-bg; @panel-default-border);
  border-style: solid;
  border-width: 1px;
  margin: 1em 0;
  position: relative;
}

/* Date and title wrapper */
.event-date-title {
  margin: @panel-heading-padding;
  display: table;
}

/* Date section */
.event-date {
  display: table-cell;
  vertical-align: middle;
  padding-right: .75em;
  border-right: solid 2px @brand;
  white-space: nowrap;
  line-height: 1px;
}
.event-date time {
  display: inline-block;
  line-height: .9em;
}

.event-date-separator {
  color: @brand;
  font-size: 1.9em;
  line-height: 1.5em;
  font-weight: 700;
  vertical-align: top;
}

.event-month,
.event-day,
.event-year {
  display: block;
  font-weight: 600;
  line-height: .8;
  text-align: center;
}

.event-month {
  font-size: 1.05em;
  text-transform: uppercase;
}

.event-day {
  color: @brand;
  font-size: 1.9em;
  font-weight: 700;
}

.event-year {
  margin-top: .05em;
}

.event-time {
  display: block;
  padding-top: .35em;
  border-top: solid 1px @panel-inner-border;
  margin-top: .475em;
  font-size: .9em;
  line-height: .9em;
}

/* Event title */
.event-title {
  font-size: 1.25em;
  display: table-cell;
  padding-left: .px-rem(10px)[];
  vertical-align: middle;
}

/* Event summary in listing */
.event-listing-title {
  font-size: 1.25em;
  padding-left: .px-rem(10px)[];
  margin-top: 0;
}
.event-listing {
  padding-left: .px-rem(10px)[];
}

/* Links at bottom of block */
.event-link {
  display: block;
  margin-top: 5px;
  padding: .5em .5em .5em 2em;
  background: @brand;
  color: @brand-bg-text;
  position: relative;

  &:hover,
  &:focus {
    background: darken(@brand, 5%);
    color: @brand-bg-text;
  }

  .glyphicon:first-child {
    position: absolute;
    left: .6em;
    top: .6em;
  }
}
.panel-event + .row {
  margin-top: -5px;
}

/* Related events block */
.event-related {
  padding-top: .px-rem(60px)[];
}

.event-image {
  .topline;
}

/* Extend event image right to reduce gutter gap with event-date-title block */
@media (min-width: @screen-sm-min) {
  .event-image {
    margin-right: -@grid-gutter-width;
  }
}

/* Event panel elements when used in listings */
.event-listing-image {
  .topline;
  padding-bottom: percentage((4 / 9));
  margin-bottom:  @grid-gutter-width;
  line-height:    1px;

  /* Ensure badly-sized images are cropped */
  max-height:     1px;
  overflow:       hidden;

  /* Fallback display calendar icon on grey background */
  background-color: @gray-lighter;
  &:before {
    font-size:   4em;
    font-family: "Glyphicons Halflings";
    /* Calendar symbol */
    content:     "\e109";
    color:       @gray-light;
    width:       100%;
    position:    absolute;
    top:         30%;
    left:        0;
    text-align:  center;
  }
}

/* Ensure the image is rendered over the calendar icon and padding */
.event-listing-image > img {
  float:       left;
  position:    relative;
}

@media (min-width: @screen-lg-min) {
  .event-listing-image {
    margin-bottom: 0;
    &:before {
      /* Reposition calendar icon since margin-bottom change has re-sized the container */
      top: 40%;
    }
  }
}

// stylelint-enable
