/* =========================================================
   STUDY RESOURCES
   TICKETFUSSION-INSPIRED LAYOUT
========================================================= */


/* =========================================================
   PAGE
========================================================= */

body{

    margin:0;

    background:#f8fafc;

    font-family:Poppins,sans-serif;

    color:#1e293b;

}

.resources-container{

    width:100%;

    max-width:1200px;

    margin:0 auto;

    padding:40px 20px 70px;

    box-sizing:border-box;

}


/* =========================================================
   BACK TO DASHBOARD
========================================================= */

.back-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-bottom:30px;

    color:#2563eb;

    text-decoration:none;

    font-size:.95rem;

    font-weight:600;

    transition:.2s ease;

}

.back-link:hover{

    color:#1d4ed8;

    transform:translateX(-2px);

}


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

.subject-header{

    background:#ffffff;

    border-radius:18px;

    padding:30px;

    display:flex;

    align-items:center;

    gap:25px;

    margin-bottom:30px;

    box-shadow:0 10px 30px rgba(15,23,42,.05);

    box-sizing:border-box;

}

.subject-icon{

    width:80px;

    height:80px;

    min-width:80px;

    border-radius:50%;

    background:#2563eb;

    color:#ffffff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:2rem;

}

.subject-header h1{

    margin:0;

    color:#1e293b;

    font-size:clamp(1.7rem,3vw,2.4rem);

    line-height:1.2;

}

.subject-header p{

    margin:10px 0 0;

    color:#64748b;

    font-size:1rem;

    line-height:1.6;

}


/* =========================================================
   SUBJECT SELECTOR
========================================================= */

.resource-subject-selector{

    margin:0 0 30px;

}

.resource-subject-selector label{

    display:block;

    margin-bottom:10px;

    color:#17365d;

    font-size:1rem;

    font-weight:600;

}

#resourceSubjectSelect{

    width:100%;

    max-width:540px;

    height:56px;

    padding:0 45px 0 18px;

    border:1px solid #d9e1ec;

    border-radius:14px;

    background:#ffffff;

    color:#17365d;

    font-family:inherit;

    font-size:1rem;

    font-weight:600;

    cursor:pointer;

    outline:none;

    box-sizing:border-box;

    box-shadow:0 3px 12px rgba(15,23,42,.05);

    transition:
        border-color .2s ease,
        box-shadow .2s ease;

}

#resourceSubjectSelect:hover{

    border-color:#b8c7da;

}

#resourceSubjectSelect:focus{

    border-color:#2563eb;

    box-shadow:0 0 0 4px rgba(37,99,235,.12);

}


/* =========================================================
   RESOURCE AREA

   ONE SUBJECT = ONE MAIN BOOK
========================================================= */

.resources-grid{

    width:100%;

    max-width:1100px;

    margin:0 auto;

    display:block;

}


/* =========================================================
   RESOURCE CARD

   BOOK COVER LEFT
   DETAILS RIGHT
========================================================= */

.resource-card{

    width:100%;

    background:#ffffff;

    border-radius:18px;

    overflow:hidden;

    display:grid;

    grid-template-columns:360px minmax(0,1fr);

    min-height:390px;

    box-shadow:0 10px 30px rgba(15,23,42,.07);

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}

.resource-card:hover{

    transform:translateY(-4px);

    box-shadow:0 20px 45px rgba(15,23,42,.11);

}


/* =========================================================
   RESOURCE COVER

   FULL BOOK ALWAYS VISIBLE
========================================================= */

.resource-cover{

    width:100%;

    height:390px;

    background:#f1f5f9;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:18px;

    box-sizing:border-box;

}

.resource-cover img{

    display:block;

    width:100%;

    height:100%;

    object-fit:contain;

}


/* =========================================================
   RESOURCE CONTENT
========================================================= */

.resource-content{

    padding:42px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    box-sizing:border-box;

}


/* =========================================================
   RESOURCE TYPE
========================================================= */

.resource-type{

    display:inline-flex;

    align-items:center;

    width:fit-content;

    margin-bottom:18px;

    padding:7px 14px;

    border-radius:999px;

    background:#eff6ff;

    color:#2563eb;

    font-size:.82rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.04em;

}


/* =========================================================
   RESOURCE TITLE
========================================================= */

.resource-card h3{

    margin:0 0 18px;

    color:#1e293b;

    font-size:clamp(1.8rem,3vw,2.6rem);

    line-height:1.15;

}


/* =========================================================
   RESOURCE DESCRIPTION
========================================================= */

.resource-card p{

    margin:0;

    max-width:700px;

    color:#64748b;

    font-size:1.05rem;

    line-height:1.75;

}


/* =========================================================
   RESOURCE ICON

   USED WHEN THERE IS NO COVER IMAGE
========================================================= */

.resource-icon{

    width:70px;

    height:70px;

    border-radius:16px;

    margin-bottom:20px;

    background:#eef5ff;

    color:#2563eb;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.8rem;

}


/* =========================================================
   RESOURCE ACTIONS
========================================================= */

.resource-actions{

    display:flex;

    gap:14px;

    margin-top:32px;

}


/* =========================================================
   BUTTON BASE
========================================================= */

.resource-actions a,

.resource-actions button{

    flex:1;

    min-height:54px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:12px 20px;

    border:none;

    border-radius:12px;

    font-family:inherit;

    font-size:1rem;

    font-weight:600;

    text-decoration:none;

    cursor:pointer;

    box-sizing:border-box;

    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;

}


/* =========================================================
   VIEW RESOURCE BUTTON
========================================================= */

.view-resource,

.open-btn{

    background:#2563c9;

    color:#ffffff;

}

.view-resource:hover,

.open-btn:hover{

    background:#1d4ed8;

    transform:translateY(-1px);

    box-shadow:0 8px 18px rgba(37,99,235,.22);

}


/* =========================================================
   DOWNLOAD BUTTON
========================================================= */

.download-resource,

.download-btn{

    background:#f1f5f9;

    color:#1e293b;

}

.download-resource:hover,

.download-btn:hover{

    background:#e2e8f0;

    transform:translateY(-1px);

}

.download-resource:disabled{

    opacity:.65;

    cursor:not-allowed;

}


/* =========================================================
   EMPTY STATE
========================================================= */

.empty-state{

    width:100%;

    background:#ffffff;

    border-radius:18px;

    padding:70px 30px;

    text-align:center;

    box-sizing:border-box;

    box-shadow:0 8px 25px rgba(15,23,42,.05);

}

.empty-state i{

    display:block;

    margin-bottom:20px;

    color:#94a3b8;

    font-size:3rem;

}

.empty-state h3{

    margin:0 0 10px;

    color:#334155;

    font-size:1.4rem;

}

.empty-state p{

    margin:0;

    color:#64748b;

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:900px){

    .resources-container{

        padding:30px 20px 60px;

    }

    .resource-card{

        grid-template-columns:300px minmax(0,1fr);

        min-height:360px;

    }

    .resource-cover{

        height:360px;

    }

    .resource-content{

        padding:32px;

    }

}


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

@media(max-width:768px){

    .resources-container{

        padding:25px 16px 50px;

    }


    /* SUBJECT HEADER */

    .subject-header{

        padding:24px;

        flex-direction:column;

        align-items:center;

        text-align:center;

    }

    .subject-icon{

        width:70px;

        height:70px;

        min-width:70px;

        font-size:1.7rem;

    }


    /* RESOURCE CARD */

    .resource-card{

        display:flex;

        flex-direction:column;

        min-height:auto;

    }


    /* COVER */

    .resource-cover{

        width:100%;

        height:340px;

        padding:20px;

    }

    .resource-cover img{

        object-fit:contain;

    }


    /* CONTENT */

    .resource-content{

        padding:28px 24px;

    }


    /* ACTIONS */

    .resource-actions{

        flex-direction:column;

    }

    .resource-actions a,

    .resource-actions button{

        width:100%;

    }


    /* SELECT */

    #resourceSubjectSelect{

        max-width:100%;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:480px){

    .resources-container{

        padding:20px 14px 45px;

    }

    .back-link{

        margin-bottom:22px;

    }

    .subject-header{

        padding:20px;

    }

    .subject-header h1{

        font-size:1.5rem;

    }

    .subject-header p{

        font-size:.93rem;

    }


    /* BOOK COVER */

    .resource-cover{

        height:280px;

        padding:16px;

    }


    /* CONTENT */

    .resource-content{

        padding:22px;

    }


    /* TITLE */

    .resource-card h3{

        font-size:1.5rem;

    }


    .resource-card p{

        font-size:.96rem;

    }

}