/* ============================================================
   OLD DUDES D&D — CAMPAIGN RECAP SYSTEM
   Shared by Eldoria and future campaign recap archives
   ============================================================ */

.recap-library-intro{
    max-width:760px;
    margin:0 0 28px;
    line-height:1.7;
}

.recap-featured{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);
    gap:0;
    margin:26px 0 42px;
    overflow:hidden;
    border:1px solid rgba(218,174,90,.28);
    border-radius:18px;
    background:rgba(0,0,0,.24);
    box-shadow:0 18px 45px rgba(0,0,0,.24);
}

.recap-feature-image{
    display:block;
    min-height:100%;
    background:#080706;
}

.recap-feature-image img{
    display:block;
    width:100%;
    height:100%;
    min-height:330px;
    object-fit:cover;
}

.recap-feature-copy{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:34px;
}

.recap-feature-copy h3{
    margin:10px 0 14px;
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(1.7rem,3vw,2.5rem);
    line-height:1.1;
}

.recap-feature-copy > p{
    margin:0 0 20px;
    line-height:1.7;
}

.recap-audio{
    display:block;
    width:100%;
    margin:8px 0 22px;
}

.recap-feature-actions,
.recap-card-actions,
.recap-reader-top-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.recap-library-heading{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:20px;
    margin:10px 0 22px;
    padding-top:28px;
    border-top:1px solid rgba(255,255,255,.09);
}

.recap-library-heading h3{
    margin:4px 0 0;
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(1.45rem,2.5vw,2rem);
}

.recap-library-heading > p{
    margin:0;
    opacity:.7;
}

.recap-library-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:20px;
}

.recap-library-card{
    display:flex;
    flex-direction:column;
    min-width:0;
    overflow:hidden;
    border:1px solid rgba(218,174,90,.20);
    border-radius:14px;
    background:rgba(0,0,0,.20);
    transition:transform .18s ease,
               border-color .18s ease,
               box-shadow .18s ease;
}

.recap-library-card:hover{
    transform:translateY(-3px);
    border-color:rgba(218,174,90,.48);
    box-shadow:0 14px 34px rgba(0,0,0,.22);
}

.recap-card-image{
    display:block;
    aspect-ratio:16/9;
    overflow:hidden;
    background:#080706;
}

.recap-card-image img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .2s ease;
}

.recap-library-card:hover .recap-card-image img{
    transform:scale(1.025);
}

.recap-library-card-body{
    display:flex;
    flex:1;
    flex-direction:column;
    padding:20px;
}

.recap-library-card h3{
    margin:8px 0 10px;
    font-family:Georgia,"Times New Roman",serif;
    font-size:1.24rem;
    line-height:1.25;
}

.recap-library-card h3 a{
    color:inherit;
    text-decoration:none;
}

.recap-library-card-body > p{
    flex:1;
    margin:0 0 18px;
    line-height:1.55;
    opacity:.82;
}

.recap-mini-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:7px 12px;
    border:1px solid rgba(218,174,90,.28);
    border-radius:7px;
    color:inherit;
    text-decoration:none;
    font-family:Arial,sans-serif;
    font-size:.76rem;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.recap-mini-button:hover{
    border-color:rgba(218,174,90,.70);
}

.recap-mini-button.primary{
    background:#d99b39;
    border-color:#e9ad4b;
    color:#100b07;
}

/* ============================================================
   INDIVIDUAL RECAP READER
   ============================================================ */

.recap-reader-main{
    width:min(1080px,calc(100% - 34px));
    margin:0 auto;
    padding:50px 0 70px;
}

.recap-reader-heading{
    max-width:850px;
    margin:0 auto 28px;
    text-align:center;
}

.recap-reader-heading h1{
    margin:8px 0 14px;
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(2.2rem,6vw,4.6rem);
    line-height:1.02;
}

.recap-reader-deck{
    max-width:700px;
    margin:0 auto 22px;
    font-size:1.05rem;
    line-height:1.65;
    opacity:.82;
}

.recap-reader-top-actions{
    justify-content:center;
}

.recap-reader-art{
    max-width:960px;
    margin:32px auto;
    overflow:hidden;
    border:1px solid rgba(218,174,90,.25);
    border-radius:18px;
    box-shadow:0 22px 55px rgba(0,0,0,.30);
}

.recap-reader-art img{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:16/9;
    object-fit:cover;
}

.recap-listen-panel{
    max-width:820px;
    margin:34px auto 24px;
    padding:28px;
    border:1px solid rgba(218,174,90,.25);
    border-radius:14px;
    background:rgba(0,0,0,.20);
}

.recap-listen-panel h2{
    margin:7px 0 18px;
    font-family:Georgia,"Times New Roman",serif;
}

.recap-audio-large{
    margin:0;
}

.recap-prose{
    max-width:820px;
    margin:26px auto;
    padding:clamp(28px,5vw,55px);
    border:1px solid rgba(218,174,90,.18);
    border-radius:14px;
    background:rgba(255,255,255,.035);
    box-shadow:0 18px 45px rgba(0,0,0,.18);
}

.recap-prose .campaign-label{
    margin-bottom:26px;
}

.recap-prose p{
    margin:0 0 1.28em;
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(1.03rem,2vw,1.12rem);
    line-height:1.82;
}

.recap-prose h2{
    margin:2em 0 .7em;
    font-family:Georgia,"Times New Roman",serif;
    font-size:1.55rem;
}

.recap-reader-nav{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    max-width:820px;
    margin:28px auto 0;
}

.recap-reader-nav a{
    display:block;
    padding:18px;
    border:1px solid rgba(218,174,90,.22);
    border-radius:10px;
    color:inherit;
    text-decoration:none;
    line-height:1.35;
}

.recap-reader-nav a:hover{
    border-color:rgba(218,174,90,.60);
}

.recap-reader-nav a.next{
    text-align:right;
}

.recap-reader-nav a span{
    display:block;
    margin-bottom:5px;
    font-family:Arial,sans-serif;
    font-size:.68rem;
    font-weight:900;
    letter-spacing:.14em;
    text-transform:uppercase;
    opacity:.60;
}

#listen,
#recap{
    scroll-margin-top:30px;
}

@media(max-width:820px){

    .recap-featured{
        grid-template-columns:1fr;
    }

    .recap-feature-image img{
        min-height:0;
        aspect-ratio:16/9;
    }

    .recap-feature-copy{
        padding:26px 22px;
    }

    .recap-library-heading{
        display:block;
    }

    .recap-library-heading > p{
        margin-top:7px;
    }

    .recap-library-grid{
        grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    }

    .recap-reader-main{
        width:min(100% - 22px,1080px);
        padding-top:32px;
    }

    .recap-listen-panel{
        padding:22px 18px;
    }

    .recap-prose{
        padding:28px 22px;
    }
}

@media(max-width:560px){

    .recap-library-grid{
        grid-template-columns:1fr;
    }

    .recap-feature-actions .button{
        width:100%;
        box-sizing:border-box;
        text-align:center;
    }

    .recap-reader-top-actions .button{
        width:100%;
        box-sizing:border-box;
        text-align:center;
    }

    .recap-reader-nav{
        grid-template-columns:1fr;
    }

    .recap-reader-nav a.next{
        text-align:left;
    }

    .recap-nav-empty{
        display:none;
    }
}