/**
 *    weblogMeta
 */

.weblogMeta {
    display: flex;
    gap: 1.5rem 4rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.weblogMeta * {
    color: var(--baseLight100);
}

.weblogMeta > span {
    display: block;
    margin-bottom: 1.5rem;
}

.weblogMeta > .weblogMeta__date {
    flex: 1 0 100%;
    margin: 0;
    color: var(--baseDark900);
}

.weblogMeta__date {
    font-size: 0.9rem;
}

.weblogMeta__author {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: .5rem;
}

.weblogMeta__authors {
    padding: calc(var(--innerPaddingYSmall) / 2);
    width: 100%;
    background: var(--accentColor500);
    border-radius: var(--borderRadius);
}

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

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

.weblogMeta__authorImage,
.weblogMeta__authorImagePlaceholder {
    flex: 0 0 70px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
}

.weblogMeta__authorImagePlaceholder {
    background: #eee;
}

.weblogMeta__authorName {
    font-weight: 600;
}

.weblogMeta__tags::before,
* + .weblogMeta__authors:before,
* + .weblogMeta__reactionCount:before {
    display: inline;
    content: '';
    margin: 0;
}

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

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

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

.weblogPost__dateTitle {
    display: inline;
    font-size: 0.9rem;
}

.weblogPost__attachmentTitle {
    margin-bottom: .5rem;
    font-size: 1rem;
    font-weight: var(--semiBold);
}

.weblogPost__attachments {
    margin: 0;
    hyphens: none;
    padding: calc(var(--innerPaddingYSmall) / 2);
    width: 100%;
    background: var(--accentColor300);
    border-radius: var(--borderRadius);
}

.weblogPost__attachments a,
.weblogExternalSource a {
    font-weight: 600;
}

.weblogPost__attachments a:before,
.weblogExternalSource a:before {
    margin-right: .2em;
    font-family: var(--iconFont);
    font-weight: 400;
    color: var(--baseLight100);
}

.weblogPost__attachmentLink:before {
    content: '\e901';
}

.weblogExternalSource__sourceUrl:before {
    content: '\e902';
}

.weblogPost__image {
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .weblogPost__contentWrapper {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: flex-start;
        gap: 4rem;
    }

    .weblogMeta {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        flex: 0 1 calc(35% - 2rem);
        max-width: calc(35% - 2rem);
    }

    .weblogPost__content {
        flex: 0 1 calc(65% - 2rem);
        max-width: calc(65% - 2rem);
    }
}

/**
 * weblogIsBasedOnExternalSource
 */

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

.weblogExternalSource__sourceUrl {
    text-decoration: none;
}

.weblogExternalSource__sourceUrl:hover {
    text-decoration: underline;
}

/**
 *    postListIntro
 */

.postListIntro__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    clear: both;
}

.postListIntro__post {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    transition: transform ease-in-out .2s;
    box-shadow: var(--boxShadow);
    border-radius: var(--borderRadius);
}

.postListIntro__post:hover {
    transform: translateY(-5px);
}

.postListIntro__text:not(.postListIntro--homepage .postListIntro__text) {
    padding: 1rem;
}

.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: 1rem;
}

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

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

/**
 *    postListIntro homepage
 */

.postListIntro--homepage .postListIntro__post  {
    padding-block: 2rem;
    border-bottom: 1px solid #ccc;
    transition: transform ease-in-out .2s;
    box-shadow: none;
    border-radius: 0;
}

.postListIntro--homepage .postListIntro__post:last-child {
    border-bottom: 0;
}

/**
 *    weblogPost
 */

.weblogPost__imageContainer {
    position: relative;
    margin-left: -50vw;
    margin-bottom: 2rem;
    left: 50%;
    width: 100vw;
    clip-path: ellipse(90% 100% at 50% 0);
    min-height: min(50vw, 300px);
}

.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:hover {
    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(--accentColor500);
    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);
}


/* 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 {
}