/* ==========================================================
   Alma Magazine
   Main Stylesheet
========================================================== */

/* Import Components */
@import url("featured-post.css");
@import url("sidebar.css");
@import url("essays.css");
@import url("responsive.css");


/* ==========================================================
   Variables
========================================================== */

:root{

    --alma-black:#111111;
    --alma-dark:#222222;
    --alma-text:#3D3D3D;
    --alma-light:#F7F7F7;
    --alma-border:#E5E5E5;
    --alma-blue:#8EC7E8;
    --alma-blue-dark:#6CB7E4;
    --alma-white:#ffffff;

    --alma-radius:18px;

    --alma-transition:.35s ease;

    --alma-shadow:
        0 10px 30px rgba(0,0,0,.08);

}


/* ==========================================================
   Reset
========================================================== */

.alma-magazine-section *,
.alma-magazine-section *:before,
.alma-magazine-section *:after{

    box-sizing:border-box;

}

.alma-magazine-section img{

    max-width:100%;
    height:auto;
    display:inline-block;

}

.alma-magazine-section a{

    text-decoration:none;

    transition:all .3s ease;

}

.alma-magazine-section ul{

    margin:0;
    padding:0;
    list-style:none;

}

.alma-magazine-section h1,
.alma-magazine-section h2,
.alma-magazine-section h3,
.alma-magazine-section h4,
.alma-magazine-section p{

    margin:0;

}


/* ==========================================================
   Section
========================================================== */

.alma-magazine-section{

    position:relative;

    padding:90px 0;

    overflow:hidden;

    background:#fff;

}


/* ==========================================================
   Container
========================================================== */

.alma-magazine-container{

      width: 100%;
    max-width: 100%;
    margin: 0;

}

.alma-featured-section{

    background:#f7f6f2;

    padding:60px;

    margin-bottom:60px;

}



/* ==========================================================
   Grid
========================================================== */

.alma-magazine-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) 440px;
    gap:0px;

    align-items:stretch;
}


/* ==========================================================
   Main
========================================================== */

.alma-main-content{
    display:flex;
    flex-direction:column;
    min-width:0;
    height:100%;
}

.alma-main-content > *:last-child{

    margin-bottom:0;

}


/* Essays Showcase */

.alma-essays-showcase{

    display:flex;

    flex-direction:column;

    flex:1;

    gap:40px;

} 


/* ==========================================================
   Sidebar
========================================================== */

.alma-sidebar{

    display:flex;

    height:100%;

}

.alma-sidebar-inner{

      display:flex;

    flex-direction:column;

    justify-content:space-evenly;

    align-items:center;

    padding:0px;

    border-bottom:1px solid rgba(255,255,255,1);

}


/* ==========================================================
   Widget
========================================================== */


.alma-sidebar-widget{

    display:flex;
    flex-direction:column;
    position: relative;
    justify-content:center;
    gap: 30px;
    width: 100%;
    height: 100%;
    padding:35px 30px;
    border-bottom:1px dashed rgba(255,255,255,.08);

}

.alma-sidebar-widget::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:1px;

    background:repeating-linear-gradient(
        to right,
        rgba(255,255,255,.6) 0 4px,
        transparent 4px 8px
    );
}

.alma-sidebar-widget{

    margin-bottom:42px;

}

 

.alma-sidebar-widget:last-child{

    border-bottom:none;

}


/* ==========================================================
   Buttons
========================================================== */

.alma-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px 28px;

    border-radius:999px;

    background:var(--alma-black);

    color:#fff;

    transition:var(--alma-transition);

}

.alma-btn:hover{

    background:var(--alma-blue);

    color:#111;

}


/* ==========================================================
   Swiper
========================================================== */

.alma-essays-slider{

    overflow:visible;

}

.alma-essays-slider .swiper-wrapper{

    align-items:center;

}

.alma-essay-slide{

    cursor:pointer;

    transition:.35s;

}


/* ==========================================================
   Loading
========================================================== */

.alma-loading{

    opacity:.45;

    pointer-events:none;

}


/* ==========================================================
   Fade Animation
========================================================== */


#alma-featured-post{

    transition:.35s;

}


/* ==========================================================
   Utilities
========================================================== */

.text-center{

    text-align:center;

}

.d-none{

    display:none;

}


/* ==========================================================
   Tablet
========================================================== */

@media (max-width:1024px){

    .alma-magazine-row{

        grid-template-columns:1fr;

        gap:60px;

    }

    .alma-sidebar{

        order:2;

    }

    .alma-main-content{

        order:1;

    }

    .alma-sidebar-inner{

        position:relative;

        top:auto;

    }

}


/* ==========================================================
   Mobile
========================================================== */

@media (max-width:767px){

    .alma-magazine-section{

        padding:60px 0;

    }

    .alma-magazine-container{

        width:92%;

    }

}