@import "elements/variables";
@import "../bootstrap_custum/glyphicons.less";
@import "../../../fiducialezstarrating/less/star-rating.less";

@import "elements/metas";
@import "elements/social-share";
@import "elements/star-rating";
@import "elements/message-download";
@import "elements/tab-bar";
@import "elements/highlight";

@import "elements/page-editoriale";
.page-editorial-title(true);

@import "elements/other-articles";

.page{background-color: @greyf8; padding-bottom: 25px;
  &-publication{
    &-header{position: relative; background-color: lighten(@greyde, 4.8%);
    }
    &-bg{background-size: cover; background-repeat: no-repeat;
      &:before{content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.3); z-index: 2}
    }
    &-intro{padding: 30px 0;
      @media(min-width: @screen-sm) and (max-width: @screen-md-max){position: relative}
      & > .row{line-height: @line-height-base; display: inline-block; vertical-align: middle; width: 100%; margin: 0}
      &-content{
        @media(min-width: @screen-sm){position: static}
      }
      &-img{margin-top: 15px; z-index: 3;
        @media(max-width: @screen-xs-max){position: relative;}
        @media(min-width: @screen-sm){position: absolute; height: 100%; left: 15px; width: @container-sm; top: 0;
          figure{width: 33.33333333%; padding: 15px 30px 15px 0;  position: absolute; height: 100%; top: 0;
            img{max-height: 100%; width: auto; top: 50%; .translate(0;-50%); position: relative;}
          }
        }
        @media(min-width: @screen-md){width: @container-md;}
        @media(min-width: @screen-lg){width: @container-lg; left: 0; right: 0; margin: 0 auto; }
      }
      &-item{position: relative; z-index: 4}
      h1{margin: 0;
        & + .intro{margin-top: 30px; font-size: 18px;
          p{margin: 0}
        }
      }
      &-btn{
        @media(max-width: @screen-xs-max){text-align: center;}
        .btn{margin: 15px 0 0; min-width: 265px;
          @media(min-width: @screen-sm){
            &-both{max-width: 48%;
              & + .btn{margin-left: 15px}
            }
          }
          @media(min-width: @screen-sm) and (max-width: @screen-sm-max){
            &, &.collapsed{padding-left: 20px; padding-right: 20px; min-width: 245px;}
          }
          .icoCharte{margin-right: 10px}
          &.collapsed{color: @white; background-color: @grey66; border-color: @grey66;
            &:hover, &:focus{background-color: darken(@grey66, 5%); border-color: darken(@grey66, 5%);
              &, .content-page &, .page &{color: @white}
            }
          }
        }
      }
    }
    &-info{position: relative; padding-top: 20px;
      &:before{content: ''; position: absolute; top: 0; left: 0; z-index: 2; background: fade(@black00, 35%); width: 100%; height: 100%; display: block;}
      .infos-share{position: relative; z-index: 4}
      .post-meta{color: @white;
        .icoCharte{
          &-date{background-position: -108px -82px}
          &-author{background-position: -109px -99px}
        }
      }
      .social-media{padding-left: 15px; padding-right: 15px}
      .rating-container .empty-stars, .post-meta-rate .rating-label{color: @white}
    }
    &-container{
      @media(min-width: @screen-lg){display: -ms-grid; display: grid; -ms-grid-columns: 66.66666667% 33.33333333%; grid-template-columns: 66.66666667% 33.33333333%;}
    }
    &-right{padding-top: 30px; padding-left: 15px; padding-right: 15px;
      @media(min-width: @screen-lg){-ms-grid-column: 2; -ms-grid-row: 1; -ms-grid-row-span: 2; grid-row-end: span 3;}
    }
    &-form{
      form > div{
        & > div{
          @media(min-width: @screen-sm) and (max-width: @screen-md-max){width: 50%; float: left; padding-left: 15px; padding-right: 15px;
            label{left: 15px}
            &.active label{left: 23px}
            .error-content{right: 15px;}
            .icoCharte-error, .icoCharte-check{right: 30px}
          }
        }
      }
      &-pdf, &-postal{color: @white; font-size: 18px; font-family: noto_serifregular; font-weight: 700; text-align: center; margin-bottom: 0; display: block; padding: 10px 37px 10px 15px; position: relative;background: @brand-primary-hover;
        .collapsed &{background: @grey66}
        .panel &{cursor: pointer;}
        .icoCharte{margin-right: 10px;
          &-chevron-white-bottom{position: absolute; right: 15px; top: 50%; margin-top: -4px;
            .collapsed &{margin-top: -6px; background-position: -83px -1px; width: 8px; height: 12px;}
          }
        }
      }
      &-both{margin-top: 0.8em; text-align: center; font-family: noto_serifregular;
        &:before, &:after{content:''; width: 20%; height: 1px; background: @input-border; display: inline-block; vertical-align: middle; margin: 0 10px;}
      }
      &-content{
        &.panel, &{.box-shadow2(0 1px 4px 0 rgba(0,0,0,0.13), 0 1px 3px 0 rgba(0,0,0,0.22));}
        .title{display: none}
        .bg{padding: 0 15px; background: @white; overflow: hidden;
          @media(min-width: @screen-sm) and (max-width: @screen-md-max){
            & > p{padding: 0 15px}
          }
          @media(min-width: @screen-lg){padding-left: 30px; padding-right: 30px}
          .chapo{text-align: center}
        }
      }
    }
    &-content{padding: 30px 15px 0;
      @media(min-width: @screen-lg){-ms-grid-column: 1; -ms-grid-row: 1;grid-row-end: span 1;}
    }
    &-other{
      @media(min-width: @screen-lg){-ms-grid-column: 1; -ms-grid-row: 2;}
      .page-editoriale-content{padding: 0 15px}
    }
    &-list{margin: 0 0 30px; border-bottom: 1px solid @input-border; padding: 30px 0;
      @media(min-width: @screen-sm){border-top: 1px solid @input-border; display: table; width: 100%;
        .other-publications{float: none; text-align: right;
          .select{float: right}
        }
      }
      &-share, .other-publications{ padding: 0 15px;
        @media(min-width: @screen-sm){display: table-cell; vertical-align: middle; width: auto;}
      }
      &-share{
        .social-media ul{margin: 0}
      }
    }
  }
  & + #footer{margin-top: 0}
}

.highlight-offer{margin-top: 30px}

.other{
  &-articles ul {
    @media (min-width: @screen-sm) {
      .content-columns(2; @grid-gutter-width);
    }
  }
  &-publications{position: relative;
    @media(max-width: @screen-xs-max){margin-top: 30px; width: 100%;
      .btn-select{width: 100%;}
    }
    .select{
      overflow:visible; height: @input-height-base;
      .list{text-align: center;position: relative;
        .btn:hover, .btn:focus{color:@text-color;}
        .btn-select{text-align: left;background: @white;display: block;line-height: (@input-height-base)- 2;border: 1px solid @input-border;margin: 0;padding: 0 55px 0 15px; position: relative; font-size: 14px; color: @input-color-placeholder; font-family: open_sansregular; width: 100%;
          span{background: @input-border; width: @input-height-base; height: @input-height-base - 2; position: absolute; right: 0; top: 0; text-align: center}
        }
        &.open{
          .dropdown{
            &-backdrop{z-index: 7}
            &-menu{visibility: visible;}
          }
        }
      }
      .dropdown-menu{border: 1px solid @input-border;border-top: none;margin: 0;.box-shadow(none);.border-radius(0);width: 100%;background-color: @white; max-height: 120px; overflow-y: auto; position: relative; visibility: hidden; display: table; float: none; z-index: 8; border-spacing: 8px; padding: 0 7px;
        li{list-style: none;text-align: left;display: table-row;
          a{display: table-cell;white-space: normal;padding: 0;font-size: 14px;
            &:hover,&:focus{color:@brand-primary;background: none;}
          }
        }
      }
    }
  }
}
.page-editoriale-tab{
  @media(min-width: @screen-lg){display: none}
}