/* =========================================
   FLESH TO FICTION LIBRARY
   ========================================= */


/* =========================================
   MAIN LIBRARY CONTENT AREA
   ========================================= */

.container{
    max-width:1000px;
    margin:0 auto;
    padding:40px 20px;
}


/* =========================================
   LIBRARY HOME PAGE HEADER
   ========================================= */

.library-page-header{
    max-width:820px;
    margin:0 auto 26px;
    text-align:center;
}

.library-page-header h1{
    margin:0 0 10px;
    color:#f2f2f2;
}

.library-page-header p{
    margin:0;
    color:#ccc;
    line-height:1.6;
}

/* =========================================
   LIBRARY INTRODUCTION
   ========================================= */

.library-intro{
    max-width:820px;
    margin:25px auto 32px;
    padding:18px 25px;
    background:#181818;
    border:1px solid #333;
    border-radius:8px;
    color:#bbb;
    line-height:1.7;
    text-align:center;
}

.library-intro p{
    margin:0;
}


/* =========================================
   SUBJECT CARD CONTAINER
   ========================================= */

.library-sections{
    display:grid;
    grid-template-columns:1fr;
    gap:22px;
}


/* =========================================
   SUBJECT CARDS
   ========================================= */

.library-section{
    position:relative;
    min-height:92px;
    margin:0;
    padding:20px;
    background:#1b1b1b;
    border:1px solid #333;
    border-radius:8px;
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease;
}

.library-section h1,
.library-section h2{
    margin-top:0;
    margin-bottom:12px;
    color:#d4af37;
}

.library-section p{
    color:#ccc;
    line-height:1.6;
}

.library-section p:last-child{
    margin-bottom:0;
}


/* =========================================
   CLICKABLE SUBJECT CARDS
   ========================================= */

.library-section-link{
    display:block;
    color:inherit;
    text-decoration:none;
}

.library-section-link .library-section{
    padding-right:55px;
}

.library-section-link:hover .library-section,
.library-section-link:focus-visible .library-section{
    transform:translateY(-3px);
    background:#202020;
    border-color:#d4af37;
    box-shadow:0 6px 18px rgba(0, 0, 0, 0.35);
}

.library-section-link:focus-visible{
    outline:none;
}


/* Directional arrow on clickable cards */

.library-section-link .library-section::after{
    content:"\2192";
    position:absolute;
    top:50%;
    right:20px;
    transform:translateY(-50%);
    color:#d4af37;
    font-size:1.4rem;
    opacity:0;
    transition:
        opacity 0.18s ease,
        right 0.18s ease;
}

.library-section-link:hover .library-section::after,
.library-section-link:focus-visible .library-section::after{
    right:16px;
    opacity:1;
}


/* =========================================
   SUBJECT PAGE HEADER
   ========================================= */

.library-subject-header{
    margin-bottom:30px;
}

.library-subject-header h1{
    margin:0 0 12px;
    color:#f2f2f2;
}

.library-subject-header p{
    max-width:780px;
    margin:0;
    color:#ccc;
    line-height:1.7;
}


/* =========================================
   RETURN TO LIBRARY LINK
   ========================================= */

.library-return{
    margin:0 0 24px;
}

.library-return a{
    color:#d4af37;
    font-weight:600;
    text-decoration:none;
}

.library-return a:hover,
.library-return a:focus-visible{
    text-decoration:underline;
}

.library-return a:focus-visible{
    outline:2px solid #d4af37;
    outline-offset:4px;
    border-radius:2px;
}


/* =========================================
   FUTURE ARTICLE LIST
   ========================================= */

.library-article-list{
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
    margin-top:24px;
}


/* =========================================
   FUTURE ARTICLE LINKS
   ========================================= */

.library-article-link{
    display:block;
    padding:18px 20px;
    background:#181818;
    border:1px solid #333;
    border-radius:8px;
    color:inherit;
    text-decoration:none;
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease;
}

.library-article-link:hover,
.library-article-link:focus-visible{
    transform:translateY(-2px);
    background:#202020;
    border-color:#d4af37;
    box-shadow:0 5px 14px rgba(0, 0, 0, 0.3);
    outline:none;
}

.library-article-link h3{
    margin:0 0 8px;
    color:#d4af37;
}

.library-article-link p{
    margin:0;
    color:#ccc;
    line-height:1.6;
}


/* =========================================
   STATUS OR COMING-SOON MESSAGE
   ========================================= */

.library-status{
    margin-top:20px;
    padding:16px 18px;
    background:#161616;
    border:1px dashed #555;
    border-radius:8px;
    color:#aaa;
    line-height:1.6;
    text-align:center;
}


/* =========================================
   REDUCED MOTION
   ========================================= */

@media (prefers-reduced-motion:reduce){

    .library-section,
    .library-section-link .library-section::after,
    .library-article-link{
        transition:none;
    }

    .library-section-link:hover .library-section,
    .library-section-link:focus-visible .library-section,
    .library-article-link:hover,
    .library-article-link:focus-visible{
        transform:none;
    }
}


/* =========================================
   MOBILE LAYOUT
   ========================================= */

@media (max-width:600px){

    .container{
        padding:25px 15px 40px;
    }

    .library-page-header{
        margin-bottom:25px;
    }

    .library-page-header h1,
    .library-subject-header h1{
        font-size:1.7rem;
    }

    .library-intro{
        margin:20px 0 28px;
        padding:16px 18px;
    }

    .library-sections{
        gap:18px;
    }

    .library-section{
        min-height:auto;
        padding:18px;
    }

    .library-section-link .library-section{
        padding-right:45px;
    }

    .library-section h2{
        font-size:1.25rem;
    }

    .library-article-link{
        padding:16px;
    }
}