/*==================================================
LIBRARY PAGE
Jessica Feldman
==================================================*/

/*==================================================
GENERAL
==================================================*/

.library-hero,
.library-section,
.continue-section{
    padding:90px 0;
}

/*==================================================
HERO
==================================================*/

.library-hero{
    padding:70px 0;
}

.library-hero .room-hero-image{
    position:relative;
    width:min(1100px,92%);
    margin:auto;
    overflow:hidden;
    border-radius:28px;
    box-shadow:var(--shadow);
}

.library-hero .room-hero-image img{
    width:100%;
    height:460px;
    object-fit:cover;
    object-position:center;
}

.library-hero .hero-overlay{
    position:absolute;
    left:50px;
    bottom:40px;
    width:min(390px,85%);
    padding:30px;
    border-radius:22px;
    background:rgba(248,248,238,.92);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

.library-hero .hero-content h1,
.library-hero .hero-content h2{
    margin:0 0 12px;
    color:var(--deep-teal);
}

.library-hero .hero-content p{
    margin:0;
    color:var(--brown);
    line-height:1.8;
}

/*==================================================
LIBRARY SECTION
==================================================*/

.library-section{
    padding:100px 0;
    background:
        linear-gradient(
            180deg,
            rgba(22,207,191,.05),
            rgba(248,248,238,0)
        ),
        var(--cream);
}

/*==================================================
BOOKCASE
Real wood frame + recessed cubby interiors
==================================================*/

.library-bookcase{
    position:relative;
    width:min(1180px,96%);
    margin:70px auto 0;
    padding:30px;
    overflow:hidden;
    border-radius:14px;

    background:
        url("../images/contact/light-wood.jpg")
        center/cover no-repeat;

    box-shadow:
        0 30px 60px rgba(0,0,0,.24),
        inset 0 2px 2px rgba(255,255,255,.25),
        inset 0 -4px 8px rgba(0,0,0,.14);
}

/* The old full-size wood image is no longer needed.
   The wood image now belongs to the actual cabinet frame. */

.bookcase-wood{
    display:none;
}

/*==================================================
OUTER FRAME PIECES
==================================================*/

.bookcase-frame{
    position:absolute;
    z-index:20;

    background:
        url("../images/contact/light-wood.jpg")
        center/cover no-repeat;

    box-shadow:
        inset 0 2px 3px rgba(255,255,255,.28),
        inset 0 -5px 7px rgba(0,0,0,.18);
}

.top-frame{
    top:0;
    left:0;
    right:0;
    height:30px;
}

.bottom-frame{
    bottom:0;
    left:0;
    right:0;
    height:34px;
}

.left-frame{
    top:0;
    bottom:0;
    left:0;
    width:30px;
}

.right-frame{
    top:0;
    bottom:0;
    right:0;
    width:30px;
}

/*==================================================
BOOKCASE INTERIOR
==================================================*/

.bookcase-interior{
    position:relative;
    z-index:5;
    display:grid;
    gap:18px;

    /* darker, quiet library backing */
    background:#ddd7cb;

    box-shadow:
        inset 0 14px 24px rgba(0,0,0,.14),
        inset 0 -8px 18px rgba(0,0,0,.10);
}

/*==================================================
INDIVIDUAL CUBBY / SHELF LEVEL
==================================================*/

.library-level{
    position:relative;
    min-height:275px;
    padding:26px 22px 42px;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,.18),
            rgba(255,255,255,.04) 35%,
            rgba(0,0,0,.04) 100%
        ),
        #e8e3d8;

    border-left:14px solid transparent;
    border-right:14px solid transparent;

    box-shadow:
        inset 0 12px 18px rgba(0,0,0,.10),
        inset 0 -18px 24px rgba(0,0,0,.09);
}

/* slightly varied backs make it feel built-in,
   not like four identical floating rows */

.library-level:nth-child(even){
    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,.16),
            rgba(19,96,94,.025) 100%
        ),
        #e3e1d8;
}

/*==================================================
WOODEN SHELVES
==================================================*/

.library-level::after{
    content:"";
    position:absolute;
    left:-14px;
    right:-14px;
    bottom:0;
    height:28px;
    z-index:15;

    background:
        url("../images/contact/light-wood.jpg")
        center/cover no-repeat;

    border-top:1px solid rgba(255,255,255,.30);

    box-shadow:
        0 9px 14px rgba(0,0,0,.28),
        inset 0 2px 3px rgba(255,255,255,.22),
        inset 0 -5px 6px rgba(0,0,0,.16);
}

/* darker shadow under each shelf = depth */

.library-level::before{
    content:"";
    position:absolute;
    left:-8px;
    right:-8px;
    bottom:19px;
    height:28px;
    z-index:10;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.14),
        rgba(0,0,0,.05),
        transparent
    );

    pointer-events:none;
}

/*==================================================
SHELF PLAQUE + INTRO
==================================================*/

.shelf-plaque{
    position:relative;
    z-index:18;
    align-self:flex-start;

    margin-bottom:8px;
    padding:8px 18px;

    border-radius:4px;

    background:var(--deep-teal);
    color:var(--cream);

    font-weight:600;
    letter-spacing:.04em;

    box-shadow:0 4px 8px rgba(0,0,0,.18);
}

.library-level:nth-child(2) .shelf-plaque{
    background:var(--magenta);
}

.library-level:nth-child(3) .shelf-plaque{
    background:var(--teal);
    color:var(--deep-teal);
}

.library-level:nth-child(4) .shelf-plaque{
    background:var(--deep-teal);
}

.shelf-intro{
    position:relative;
    z-index:18;

    max-width:650px;
    margin:0 auto 12px;

    color:var(--brown);
    text-align:center;
    line-height:1.7;
}

/*==================================================
BOOKS ON SHELF
==================================================*/

.bookshelf{
    position:relative;
    z-index:12;

    width:100%;
    min-height:190px;

    display:flex;
    align-items:flex-end;
    justify-content:center;

    /* closer together = actual bookshelf */
    gap:5px;

    padding-inline:10px;
}

/* clickable and decorative items */

.bookshelf a,
.decorative-book{
    position:relative;

    flex:0 0 auto;

    display:flex;
    align-items:flex-end;
    justify-content:center;

    margin:0 -2px;

    text-decoration:none;
}

/*==================================================
RESOURCE BOOKS
==================================================*/

.bookshelf a img{
    width:auto;
    max-width:172px;
    max-height:205px;

    object-fit:contain;

    filter:
        drop-shadow(0 4px 3px rgba(0,0,0,.15))
        drop-shadow(0 12px 10px rgba(0,0,0,.10));
}

/*==================================================
DECORATIVE BOOKS / OBJECTS
==================================================*/

.decorative-book{
    pointer-events:none;
}

.decorative-book img{
    width:auto;
    max-width:118px;
    max-height:170px;

    object-fit:contain;

    filter:
        drop-shadow(0 4px 3px rgba(0,0,0,.15))
        drop-shadow(0 12px 10px rgba(0,0,0,.10));
}

/*==================================================
NATURAL BOOK POSITIONING
==================================================*/

.learn-level .decorative-book:nth-child(6){
    transform:rotate(-4deg) translateY(4px);
}

.discover-level .decorative-book:nth-child(1){
    transform:rotate(4deg) translateY(5px);
}

.discover-level .decorative-book:nth-child(3){
    transform:rotate(-3deg) translateY(4px);
}

.discover-level .decorative-book:nth-child(4){
    transform:rotate(2deg) translateY(5px);
}

.discover-level .decorative-book:nth-child(5){
    transform:rotate(-3deg) translateY(4px);
}

.discover-level .decorative-book:nth-child(7){
    transform:rotate(3deg) translateY(4px);
}

.practice-level .decorative-book:nth-child(1){
    transform:rotate(-3deg) translateY(4px);
}

.practice-level .decorative-book:nth-child(5){
    transform:rotate(3deg) translateY(5px);
}

.practice-level .decorative-book:nth-child(7){
    transform:rotate(-3deg) translateY(4px);
}

.reflect-level .decorative-book:nth-child(1){
    transform:rotate(3deg) translateY(4px);
}

.reflect-level .decorative-book:nth-child(2){
    transform:rotate(-3deg) translateY(5px);
}

.reflect-level .decorative-book:nth-child(5){
    transform:rotate(3deg) translateY(4px);
}

.reflect-level .decorative-book:nth-child(7){
    transform:rotate(-3deg) translateY(4px);
}

/*==================================================
RESOURCE HOVER
==================================================*/

.bookshelf a{
    transition:transform .25s ease;
}

.bookshelf a:hover{
    transform:translateY(-7px);
}

/*==================================================
CONTINUE
Shared continue-grid/card styles live in style.css.
==================================================*/

.continue-section{
    position:relative;
    padding:90px 0;
    background:rgba(22,207,191,.07);
}

.continue-section::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:7px;

    background:linear-gradient(
        90deg,
        var(--teal),
        var(--magenta),
        var(--deep-teal)
    );
}

.continue-section .section-title h2{
    margin:0;
    color:var(--deep-teal);
    text-align:center;
}

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

@media(max-width:900px){
    .library-bookcase{
        width:min(96%,1180px);
        margin-top:50px;
        padding:24px;
    }

    .bookcase-interior{
        gap:14px;
    }

    .library-level{
        min-height:255px;
        padding:24px 14px 38px;
    }

    .bookshelf{
        gap:3px;
    }

    .bookshelf a img{
        max-width:138px;
        max-height:180px;
    }

    .decorative-book img{
        max-width:90px;
        max-height:145px;
    }
}

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

@media(max-width:650px){
    .library-hero,
    .library-section,
    .continue-section{
        padding:60px 0;
    }

    .library-hero .room-hero-image{
        width:94%;
        border-radius:20px;
    }

    .library-hero .room-hero-image img{
        height:390px;
    }

    .library-hero .hero-overlay{
        left:18px;
        right:18px;
        bottom:18px;
        width:auto;
        padding:22px;
    }

    .library-bookcase{
        width:96%;
        margin-top:40px;
        padding:18px;
        border-radius:8px;
    }

    .top-frame,
    .bottom-frame{
        height:18px;
    }

    .left-frame,
    .right-frame{
        width:18px;
    }

    .bookcase-interior{
        gap:10px;
    }

    .library-level{
        min-height:205px;
        padding:20px 5px 32px;
        border-left-width:8px;
        border-right-width:8px;
    }

    .library-level::after{
        left:-8px;
        right:-8px;
        height:20px;
    }

    .library-level::before{
        bottom:13px;
        height:22px;
    }

    .bookshelf{
        min-height:135px;
        gap:1px;
        padding-inline:0;
    }

    .bookshelf a,
    .decorative-book{
        margin:0 -3px;
    }

    .bookshelf a img{
        max-width:82px;
        max-height:130px;
    }

    .decorative-book img{
        max-width:54px;
        max-height:92px;
    }

    .shelf-plaque{
        padding:7px 13px;
        font-size:.88rem;
    }

    .shelf-intro{
        max-width:95%;
        font-size:.82rem;
        line-height:1.5;
    }
}

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

@media(max-width:420px){
    .library-bookcase{
        padding:14px;
    }

    .library-level{
        padding-inline:2px;
    }

    .bookshelf a img{
        max-width:72px;
        max-height:118px;
    }

    .decorative-book img{
        max-width:46px;
        max-height:82px;
    }
}

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

@media(prefers-reduced-motion:reduce){
    .bookshelf a{
        transition:none;
    }

    .bookshelf a:hover{
        transform:none;
    }
}