/**
 * Newspocket CSS
 *
 * @package newspocket
 */

.newspocket_article {
    margin-bottom: 2rem;
}

    .newspocket_article_thumbnail {
        margin-bottom:  1rem;
    }

        .newspocket_article_thumbnail a {
            position: relative;
            padding-bottom: 60%;
            display: block;
            width: 100%;
            border: none;
            text-decoration: none;
        }

        .newspocket_article_thumbnail img {
            position: absolute;
            top:  0;
            left: 0;
            width:  100%;
            height: 100%;
            max-width: none;

            -o-object-fit: cover;
               object-fit: cover;
        }
    
    .newspocket_article_title {
        margin: 0;
    }

        .newspocket_article_title a {
            text-decoration: none;
            border: none;
        }

    .newspocket_article_metas {
        margin-top: 0.5rem;
        font-size: 0.8em;
    }
    
        .newspocket_article_metas div {
            display: inline-block;
        }

        .newspocket_article_metas div:not(:first-child)::before {
            content: '|';
            opacity: 0.3;
        }

    .newspocket_article_description {
        margin-top: 1rem;
    }

        .newspocket_article_description > *:first-child { margin-top:    0; }
        .newspocket_article_description > *:last-child  { margin-bottom: 0; }

    .newspocket_article_footer {
        margin-top: 1.5rem;
    }
    
        .newspocket_article .wp-block-button__link {
            font-size: .8em;
        }


/* Highlight
 ================================================================ */
@media only screen and (min-width:600px) {
    .newspocket_highlight .newspocket_article {
        display: flex;
        background: #FAFAFA;
    }

        .newspocket_highlight .newspocket_article_thumbnail {
            margin-bottom:  0;
            flex: 0 0 50%;
            width:    50%;
            position: relative;
        }

            .newspocket_highlight .newspocket_article_thumbnail a {
                padding-bottom: 0;
                position: absolute;
                top: 0;
                left: 0;
                width:  100%;
                height: 100%;
            }

            .newspocket_highlight .newspocket_article_thumbnail::before {
                content: '';
                display: block;
                padding-bottom: 60%;
            }

        .newspocket_highlight .newspocket_article_content {
            padding: 2rem;
            display: flex;
            align-items: center;
        }
}


/* Colonnes, permet d'équilibrer la hauteur des articles
 ================================================================ */
@media (min-width: 782px) {
    .newspocket .wp-block-column {
        justify-content: flex-start;
    }

    .newspocket .wp-block-column:not(:first-child) {
        margin-left: 2rem;
    }

    .newspocket .wp-block-column {
        display: flex;
    }

    .newspocket .wp-block-column .newspocket_article,
    .newspocket .wp-block-column .newspocket_article_content,
    .newspocket .wp-block-column .newspocket_article_content_inner {
        width: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    .newspocket .wp-block-column .newspocket_article_footer {
        margin-top:  auto;
        padding-top: 1rem;
    }
}


/* Loadmore
 ======================================== */
.newspocket_loadmore {
    text-align: center;
}


/* Bouton avec spinner
 ======================================== */
.has-spinner {
    position: relative;
    transition: all ease 150ms;
}

.has-spinner .spinner {
    position: absolute;
    top: 50%;
    left: 1.25em;
    margin-top: -4px;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    transition: all ease 150ms;

    opacity: 0;
}

    .has-spinner.is-loading {
        padding-left: 3.5em;
        padding-right: 1.5em;
        pointer-events: none;
    }

    .has-spinner.is-loading .spinner {
        opacity: 1;
    }

/**
 * Spinner
 * by: https://tobiasahlin.com/spinkit/
 */
.spinner {
    text-align: center;
    display: flex;
}

.spinner > div {
    width: 8px;
    height: 8px;
    
    background-color: currentcolor;

    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
            animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

    .spinner > div:not(:last-child) { 
        margin-right: 4px;    
    }

.spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0) }
    40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
    0%, 80%, 100% { 
        -webkit-transform: scale(0);
        transform: scale(0);
    } 40% { 
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
}