$d-blog-text-container-width: 35em !default;

$d-blog-font-color: $color-odysseus !default;
$d-blog-headers-color: $color-cassandra !default;
$d-blog-under-background-color: $color-cassandra !default; // color when there's not image
$d-blog-color-taxonomy-in-header: $color-aeneas !default;

$d-blog-image-opacity-for-blog: 50% !default;

$d-blog-margin-between-html-paragraphs: 1.5rem !default;
$d-blog-margin-between-blog-sections: 3rem !default;
$d-blog-header-margin-mobile: 0.9375rem auto 0.9375rem !default;
$d-blog-header-margin-tablet: 1.5625rem auto 1.375rem !default;
$d-blog-header-margin-dekstop: 1.5625rem auto 2.1875rem !default;
$d-blog-teaser-small-text-area-padding-xy: 30px !default;
$d-blog-teaser-small-padding-y: 20px !default;
$d-blog-teaser-header-font-size: 1.3rem !default;
$d-blog-header-desktop-font-size: 3rem !default;
$d-blog-header-small-desktop-screen-font-size: 2.375rem !default;
$d-blog-header-tablet-font-size: 1.625rem !default;
$d-blog-header-mobile-font-size: 1.125rem !default;
$d-blog-header-h2-font-size-blog-text-desktop: 2.5rem !default;
$d-blog-header-h2-font-size-blog-text-mobile: 1.375rem !default;
$d-blog-smaller-header-font-size-blog-text-mobile: 1.25rem !default;
$d-blog-header-min-height-small-desktop: 325px !default;
$d-blog-header-min-height-big-desktop: 300px !default;
$d-blog-header-min-height-mobile: 200px !default;
$d-blog-image-header-min-height: 150px !default;
$d-blog-image-header-max-height: 700px !default;

$d-blog-author-attributes-font-size-desktop: 1.0625rem !default;
$d-blog-author-attributes-font-size-mobile: 0.75rem !default;
$d-blog-block-category-font-size-desktop: 1rem !default;
$d-blog-block-category-font-size-mobile: 0.625rem !default;
$d-blog-block-category-margin: 1rem 0 !default;

$d-blog-image-margin: 2.1875rem auto !default;
$d-blog-paragraph-text-margin: 1.5625rem auto !default;
$d-blog-text-font-size-desktop: 1.25rem !default;
$d-blog-text-font-size-mobile: 1.07083125rem !default;

$d-blog-text-width-mobile: 85% !default;
$d-blog-header-text-distance-from-bottom: -0.25rem !default;
$d-blog-header-text-distance-from-top-mobile: 40% !default;
$d-blog-size-of-large-desktop: 1400px !default;

.article.node--type-blog-post,
article.node--type-blog-post {

  .field--type-image {
    float: none;
    margin-right: 0;
  }
  .field--type-entity-reference {
    margin-bottom: 0;
  }

  .blog-post-header {
    z-index: 1;
    min-height: $d-blog-header-min-height-mobile;
    overflow: hidden;

    img {
      min-height: $d-blog-image-header-min-height;
      max-height: $d-blog-image-header-max-height;
      object-fit: cover;
      font-family: 'object-fit: cover;';
    }
    position: relative;
    background-color: $d-blog-under-background-color;

    .field--name-field-blog-media-main-image {
      img {
        z-index: -3;
        filter: opacity($d-blog-image-opacity-for-blog);
      }
    }

    .blog-post-header-wrapper {
      color: $d-blog-font-color;
      position: absolute;
      bottom: $d-blog-header-text-distance-from-bottom;
      left: 50%;
      text-align: center;
      word-wrap: break-word;
      transform: translateX(-50%);

      h1 {
        font-size: $d-blog-header-desktop-font-size;
        margin: $d-blog-header-margin-dekstop;
        text-transform: none;
        color: $d-blog-font-color;
        font-weight: 700;
        letter-spacing: 1px;
      }

      .author_attributes {
        font-size: $d-blog-author-attributes-font-size-desktop;
        color: $d-blog-font-color;

        a {
          color: $d-blog-font-color;
        }
      }

      .field--name-field-blog-category {
        text-align: center;
        font-size: $d-blog-block-category-font-size-desktop;
        color: $d-blog-color-taxonomy-in-header;
        margin: $d-blog-block-category-margin;

        .field__item {
          display: inline;
          @include add-commas-to-elements;
        }

        a {
          @include font-body-standard;
          color: $d-blog-color-taxonomy-in-header;
        }
      }

      // Center text Submitted on ...
      .node__meta {
        z-index:  5;
        span {
          text-align: center;
        }
      }
    }

    @media all and (min-width: map-get($container-max-widths, xl))  and (max-width: $d-blog-size-of-large-desktop) {
      .blog-post-header-wrapper {
        h1 {
          font-size: $d-blog-header-small-desktop-screen-font-size;
        }
      }
    }

    @include media-breakpoint-down(lg) {
      .blog-post-header-wrapper {

        bottom: 0;
        h1 {
          margin: $d-blog-header-margin-tablet;
          font-size: $d-blog-header-tablet-font-size;
        }

        .author_attributes {
          font-size: $d-blog-author-attributes-font-size-mobile;
        }

        .field--name-field-blog-category {
          font-size: $d-blog-block-category-font-size-mobile;
        }
      }
    }
  }

  @include media-breakpoint-down(xs)  {
    .blog-post-header {
      .blog-post-header-wrapper {
        top: $d-blog-header-text-distance-from-top-mobile;
        h1 {
          font-size: $d-blog-header-mobile-font-size;
          margin: $d-blog-header-margin-mobile;
        }
      }
    }
  }

  .field--name-field-blog-sections {
    margin-top: $d-blog-margin-between-blog-sections;

    p {
      margin-bottom: $d-blog-margin-between-html-paragraphs;
    }
  }


  .field--name-field-blog-media-main-image  {
    img {
      width: 100%;
      height: 100%;
      margin: 0;
    }
  }

  .paragraph--type--d-p-blog-image {
    .field--name-field-d-media-image {
      margin: $d-blog-image-margin;
      display: block;
      img {
        width: $d-blog-text-container-width;
        margin-left: auto;
        margin-right: auto;
        display: block;
        height: auto;
      }
    }

    &.paragraph--full-screen-width {
      img {
        width: 100%;
      }
      .field--name-field-d-media-image {
        img {
          width: 100vw;
        }
      }
    }
  }

  .paragraph--type--d-p-blog-text {
    .field--name-field-d-long-text {
      width: $d-blog-text-container-width;
      margin: $d-blog-paragraph-text-margin;
      display: block;

      h1, h2, h3, h4, h5, h6 {
        color: $d-blog-headers-color;
        text-align: left;
        font-weight: bold;
      }

      h1 {
        font-size: $d-blog-header-desktop-font-size;
      }

      h2 {
        font-size: $d-blog-header-h2-font-size-blog-text-desktop
      }
    }
  }

  @include media-breakpoint-down(sm) {
    .paragraph--type--d-p-blog-text {
      .field--name-field-d-long-text {
        width: $d-blog-text-width-mobile;
        font-size: $d-blog-text-font-size-mobile;

        h2 {
          font-size: $d-blog-header-h2-font-size-blog-text-mobile;
        }
        h3, h4, h5, h6 {
          font-size: $d-blog-smaller-header-font-size-blog-text-mobile;
        }
      }
    }

    .paragraph--type--d-p-blog-image {
      .field--name-field-d-media-image {
        img {
          width: 100%;
        }
      }
    }

    .field--name-field-blog-sections {
      p {
        font-size: $d-blog-text-font-size-mobile;
      }
    }
  }

  @include media-breakpoint-up(lg) {
    .paragraph--type--d-p-blog-text {
      .field--name-field-d-long-text {
        font-size: $d-blog-text-font-size-desktop;
        p, a, ul, li {
          font-size: $d-blog-text-font-size-desktop;
        }
      }
    }
    .paragraph--type--d-p-blog-image {
      .field--name-field-d-media-image img {
        font-size: $d-blog-text-font-size-desktop;
      }
    }
  }

  @include media-breakpoint-up(xl) {
    .blog-post-header {
      min-height: $d-blog-header-min-height-small-desktop;
    }
  }

  @media all and (min-width: $d-blog-size-of-large-desktop)  {
    .blog-post-header {
      min-height: $d-blog-header-min-height-big-desktop;
    }
  }

  &.node--view-mode-teaser-small {
    .box {
      width:100%;
      .field--type-image {
        margin: 0;
      }
      .text-area {
        display: flex;
        flex:1;
        flex-basis: auto;
        flex-direction: column;
        color: $color-odysseus;
        background: $color-hecuba;
        padding-top: $d-blog-teaser-small-text-area-padding-xy;;
        padding-bottom: $d-blog-teaser-small-text-area-padding-xy;
        padding-left: $d-blog-teaser-small-text-area-padding-xy;
        padding-right: $d-blog-teaser-small-text-area-padding-xy;
        .field--name-field-blog-teaser {
          padding-top: $d-blog-teaser-small-padding-y;
          padding-bottom: $d-blog-teaser-small-padding-y;
        }
        a {
          @include font-body-standard;
          color: $color-odysseus;
          &:hover {
            color: $color-odysseus;
          }
          &.link {
            text-transform: uppercase;
            color: $color-odysseus;
          }
        }
        .node__title {
          font-size: inherit;
          margin: 0;
          a {
            font-size: $d-blog-teaser-header-font-size;
          }
        }
      }
    }
  }

  .card .card-footer .inline__links .links {
    justify-content: center;
  }
  .new-comment-container {
    padding: 3.875rem 0;
  }
  .comment-form {
    padding-top: 1.275rem;
  }
}
