/**
 *    weblogMeta
 */

.weblogMeta__date {
    color: var(--accentColor500Contrast);
}

.weblogMeta__authorDescription,
.weblogMeta__tagDescription {
    position: absolute;
    left: -999em;
}

.weblogMeta__tags::before {
    display: inline-block;
    margin-right: 0.5em;
    font-family: var(--iconFont);
    font-size: var(--labelSize);
    content: '\e827';
    color: var(--accentColor500);
}

.weblogMeta__tag {
    margin: 0;
    padding: 0 0.6em 0.4em 0;
    border: none;
    opacity: 1;
    text-decoration: none;
    font-size: var(--labelSize);
}

.weblogMeta__tag:hover{
    text-decoration: none;
}

* + .weblogMeta__authors:before,
* + .weblogMeta__reactionCount:before {
    display: inline-block;
    content: '\2022';
    margin: 0 .1em;
    color: var(--baseDark100);
}

/**
 * weblogIsBasedOnExternalSource
 */

.weblogExternalSource {
    margin-bottom: 2em;
    font-size: var(--textSizeS);
    color: var(--baseDark100);
}

.weblogExternalSource__sourceUrl {
    text-decoration: none;
    color: var(--accentColor500);
}

.weblogExternalSource__sourceUrl:hover {
    text-decoration: underline;
    color: var(--accentColor500);
}

/**
 *    postListIntro
 */

.Article__content .postListIntro__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
    gap: 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
    clear: both;
}

.postListIntro__post {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    margin-bottom: 2em;
    transition: transform ease-in-out .2s;
}

.postListIntro__post:hover {
    cursor: pointer;
    transform: translateY(-3px);
    transition: transform ease-in-out .2s;
}

.postListIntro__text {
    padding-top: 1em;
}

.postListIntro__readMoreLink {
    position: absolute;
    bottom: 13px;
    color: var(--accentColor500Contrast);
    text-decoration: none;
}

.postListIntro__readMoreLink::after {
    margin-left: 0.3rem;
    vertical-align: middle;
    font-family: var(--iconFont);
    content: '\e802';
    transition: .3s;
}

.postListIntro__readMoreLink:hover {
    text-decoration: none;
}

.postListIntro__readMoreLink:hover::after {
    margin-left: 0.6rem;
}

.postListIntro__title {
    margin: 1em 0 0.3em 0;
    font-size: var(--h6Size);
    font-weight: 600;
}

.postListIntro__titleLink {
    color: var(--baseDark900);
}

.postListIntro__titleLink,
.postListIntro__titleLink:hover {
    text-decoration: none;
}

.postListIntro__introduction p {
    display: block;
    margin-bottom: 3em;
}

.postListIntro__image {
    display: block;
    width: 100%;
    border-radius: var(--borderRadius);
}

.postListIntro__buttonWrapper {
    display: flex;
    justify-content: center;
}

/**
 *    weblogPost
 */

.weblogPost__imageContainer {
    position: relative;
    margin-left: -50vw;
    margin-bottom: 2rem;
    left: 50%;
    width: 100vw;
    clip-path: ellipse(120% 97% at 22% 3%);
    min-height: min(50vw, 400px);
}

.weblogPost__image {
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/**
 *    weblogPostNavigation
 */

.weblogPostNavigation {
    overflow: hidden;
    margin: 4em 0;
    padding: var(--innerPaddingX) 0;
    border-top: 1px solid var(--baseLight500);
    border-bottom: 1px solid var(--baseLight500);
}

.weblogPostNavigation__button {
    display: block;
    margin-bottom: 1rem;
    font-weight: 400;
    text-decoration: none;
}

.weblogPostNavigation__button--next {
    text-align: right;
}


.weblogPostNavigation__buttonText,
.weblogPostNavigation__postTitle {
    display: block;
    overflow: hidden;
    width: 100%;
    text-overflow: ellipsis;
}

.weblogPostNavigation__buttonText {
    font-size: var(--bodySize);
    font-style: italic;
    color: var(--baseDark900);
}

.weblogPostNavigation__postTitle {
    color: var(--accentColor600);
    font-size: var(--h6Size);
}

/**
 *    relatedWeblogPosts
 */

.relatedWeblogPosts__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
    gap: 2rem;
    margin: 0;
    list-style: none;
}

.relatedWeblogPosts__post {
    position: relative;
}

.relatedWeblogPosts__image {
    display: block;
    width: 100%;
    height: 213px;
    background-position: center;
    background-size: cover;
    border-radius: var(--borderRadius);
}

.relatedWeblogPosts__title {
    margin: 2.3em 0 1em 0;
    font-size: var(--h3Size);
}

.relatedWeblogPosts__postDate {
    display: block;
    margin-top: var(--innerPaddingXSmall);
    font-size: var(--bodySize);
    color: var(--accentColor500);
}

.relatedWeblogPosts__postTitle {
    color: var(--baseDark900);
    font-size: var(--h6Size);
    font-weight: 600;
}

.relatedWeblogPosts__readMoreLink {
    color: var(--accentColor500);
}

.relatedWeblogPosts__readMoreLink::after {
    margin-left: 0.3rem;
    vertical-align: middle;
    font-family: var(--iconFont);
    content: '\e802';
    transition: .3s;
}

.relatedWeblogPosts__readMoreLink:hover {
    text-decoration: none;
}

.relatedWeblogPosts__readMoreLink:hover::after {
    margin-left: 0.6rem;
}

@media (min-width: 600px) {

    .weblogPostNavigation {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: var(--innerPaddingX);
    }

    .weblogPostNavigation__button {
        flex: 0 0 40%;
        margin-bottom: 0;
        font-weight: 400;
        text-decoration: none;
    }
}

/**
 *    weblogComments
 */

.weblogComments__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.weblogComments__comment {
    padding-block: 2rem;
}

.weblogComments__comment:not(:last-child) {
    border-bottom: 1px solid var(--baseLight500);
}

.weblogComments__meta {
    overflow: hidden;
    margin-bottom: .4em;
}

.weblogComments__avatar {
    display: block;
    float: left;
    margin: 0 .8em 0 0;
    width: 2.7em;
    border-radius: 50%;
}

.weblogComments__metaInfo {
    display: block;
    margin-bottom: 1rem;
}

.weblogComments__author {
    font-weight: 700;
}

.weblogComments__author,
.weblogComments__permanentLink {
    display: block;
}

.weblogComments__permanentLink,
.weblogComments__permanentLink:hover {
    text-decoration: none;
    font-size: var(--siteFont);
    color: var(--baseDark400);
}

.weblogComments__dateDescription {
    position: absolute;
    left: -999em;
}

#message-tutorial {
    margin-top: 3em;
    padding: 1px 1em;
    background: rgba(0,0,0, .05);
}

/**
 * weblog attachments
 */

.weblogPost__attachments {
    margin-bottom: 2em;
}

.weblogPost__attachmentTitle {
    margin-top: 0;
}

.weblogPost__attachmentList {
    padding: 0;
    list-style: none;
}

.weblogPost__attachmentItem {
    position: relative;
    padding-left: 1.5em;
    margin-bottom: 0.5em;
}

.weblogPost__attachmentLink,
.weblogPost__attachmentLink:hover {
    text-decoration: none;
}

.weblogPost__attachmentLink {
    display: block;
    overflow: hidden;
    width: 100%;
    text-overflow: ellipsis;
}

.weblogPost__attachmentLink::before {
    position: absolute;
    left: 0;
    top: 1px;
    height: 1em;
    width: 1em;
    display: block;
    content: url('../icons/attachment.svg');
}


/* Titles in ordered list */
.wl-article ol h2 {
    font-family: var(--h3Size);
    font-weight: 700;
    color: var(--baseDark900);
}

.wl-article h2 a {
    color: var(--baseDark900);
}

/* Social Share section */

.weblogPost__shareList {
}