/* ================================
   GRID VIEW TOGGLE / ARCHIVE MODE
================================ */

.view-toggle-wrap{
    display:flex;
    justify-content: right;
    align-items: right;
    margin:1rem auto 1.25rem;
}

.grid-toggle-btn{
    border:1px solid rgba(155,23,64,.65);
    background:rgba(10,10,10,.88);
    color:#fff;
    font-family:"courier", monospace;
    font-size:13px;
    letter-spacing:.12em;
    text-transform:uppercase;
    border-radius:999px;
    padding:.75rem 1.25rem;
    cursor:pointer;
    box-shadow:
        inset 0 0 10px rgba(0,0,0,.8),
        0 0 18px rgba(54,5,12,.35);
    transition:
        background .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}

.grid-toggle-btn:hover{
    background:#36050C;
    transform:translateY(-2px);
    box-shadow:
        inset 0 0 12px rgba(0,0,0,.85),
        0 0 24px rgba(155,23,64,.45);
}

/* normal post area */
.posts-display{
    display:block;
    transition:all .7s ease;
}

/* fade sidebars instead of collapsing them */
body.archive-grid-mode .sidebar,
body.archive-grid-mode .question-sidebar,
body.archive-grid-mode .ad-sidebar,
body.archive-grid-mode .left-ad-sidebar,
body.archive-grid-mode .right-ad-sidebar{
    opacity:0;
    transform:translateY(12px) scale(.98);
    pointer-events:none;
    transition:
        opacity .75s ease,
        transform .75s ease;
}

body.archive-grid-mode .welcome-card{
    width:calc(100vw - 2rem) !important;
    max-width:2000px !important;

    position:relative;
    left:50%;
    transform:translateX(-50%);

    margin:0 !important;
    box-sizing:border-box;

    padding-left:0 !important;
    padding-right:0 !important;
}
/* reduce top dead space */
body.archive-grid-mode .view-toggle-wrap{
    margin:.25rem auto 1rem !important;
}

/* title gets smaller in grid mode */
body.archive-grid-mode .page-title{
    margin:0 auto 1rem !important;
    max-width:900px;
    transform:scale(.88);
    transform-origin:center top;
    transition:
        transform .7s ease,
        margin .7s ease,
        max-width .7s ease;
}

body.archive-grid-mode .posts-display.grid-view{
    display:grid !important;
    grid-template-columns:repeat(auto-fill, minmax(500px, 1fr));

    gap:1.25rem;

    width:100% !important;
    max-width:100% !important;

    padding:0 1rem !important;
    box-sizing:border-box;
    overflow:hidden;
}
/* grid cards */
body.archive-grid-mode .posts-display.grid-view .post{
    margin:0 !important;
    min-height:340px;
    animation:gridCardArrival .55s ease both;
}

/* small stagger */
body.archive-grid-mode .posts-display.grid-view .post:nth-child(2n){
    animation-delay:.04s;
}

body.archive-grid-mode .posts-display.grid-view .post:nth-child(3n){
    animation-delay:.08s;
}

body.archive-grid-mode .posts-display.grid-view .post:nth-child(4n){
    animation-delay:.12s;
}

/* keep media contained */
body.archive-grid-mode .posts-display.grid-view .post img{
    width:100%;
    max-height:240px;
    object-fit:cover;
}

body.archive-grid-mode .posts-display.grid-view .post iframe{
    height:240px;
}

/* comments hidden in grid mode */
body.archive-grid-mode .posts-display.grid-view .comments-accordion{
    display:none;
}

/* slightly tighten text in grid */
body.archive-grid-mode .posts-display.grid-view .post p{
    font-size:.95rem;
    line-height:1.5;
}

/* actions stay centered */
body.archive-grid-mode .posts-display.grid-view .post-actions{
    margin-top:1rem;
}

/* prevent archive grid horizontal overflow */

html,
body{
    max-width:100%;
    overflow-x:hidden;
}

body.archive-grid-mode .posts-display.grid-view{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box;
}

body.archive-grid-mode .posts-display.grid-view .post{
    min-width:0;
}

body.archive-grid-mode .posts-display.grid-view img,
body.archive-grid-mode .posts-display.grid-view iframe{
    max-width:100%;
}

/* animations */
@keyframes gridWorldOpen{
    from{
        opacity:0;
        transform:scale(.985);
        filter:blur(4px);
    }

    to{
        opacity:1;
        transform:scale(1);
        filter:blur(0);
    }
}

@keyframes gridCardArrival{
    from{
        opacity:0;
        transform:translateY(18px) scale(.96);
        filter:blur(4px);
    }

    to{
        opacity:1;
        transform:translateY(0) scale(1);
        filter:blur(0);
    }
}

/* mobile */
@media (max-width:700px){
    body.archive-grid-mode .posts-display.grid-view{
        grid-template-columns:1fr;
    }

    body.archive-grid-mode .page-title{
        transform:scale(.95);
    }
}