/*
 * AvidVinyl Build 060 — Record Grading Guide Version 1.0
 * Visual polish only. Grading wording and logic are unchanged.
 */

/* Tighten the page opening. */
.info-page{
    padding-top:22px !important;
}

.info-page .breadcrumbs{
    margin-bottom:18px !important;
}

/* Bring the hero elements together. */
.info-page .info-hero{
    row-gap:14px !important;
    column-gap:28px !important;
    margin-top:0 !important;
    padding-top:10px !important;
    padding-bottom:18px !important;
}

.info-page .info-hero > .eyebrow{
    margin-bottom:2px !important;
}

.info-page .info-hero h1{
    margin-top:0 !important;
    margin-bottom:8px !important;
}

/* Make the explanatory copy easier to read. */
.info-page .info-hero > p:last-child{
    max-width:540px !important;
    font-size:1rem !important;
    line-height:1.65 !important;
    color:#4b4742 !important;
}

/* Sleeve-first notice: same design, just more breathing room. */
.info-page > .notice-card{
    padding-top:22px !important;
    padding-bottom:22px !important;
    margin-top:2px !important;
    margin-bottom:24px !important;
}

.info-page > .notice-card strong{
    display:block;
    margin-bottom:8px !important;
}

/* Equal-height grading cards with consistent internal alignment. */
.grading-list{
    align-items:stretch !important;
}

.grading-list article{
    height:100% !important;
    min-height:152px !important;
    padding:24px 22px !important;
    display:flex !important;
    align-items:flex-start !important;
    gap:18px !important;
}

.grading-list article > div:last-child{
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    min-width:0;
}

.grading-list h2{
    margin-top:0 !important;
    margin-bottom:8px !important;
    font-size:1.24rem !important;
    line-height:1.2 !important;
}

.grading-list p{
    margin:0 !important;
    line-height:1.62 !important;
}

/* Preserve the existing circular grade badges exactly, just lock their position. */
.grade-badge{
    flex:0 0 auto !important;
}

/* Keep the lower information cards aligned nicely too. */
.info-grid.two-column{
    align-items:stretch !important;
}

.info-grid.two-column article{
    height:100% !important;
}

@media(max-width:900px){
    .info-page{
        padding-top:18px !important;
    }

    .info-page .info-hero{
        row-gap:12px !important;
        column-gap:20px !important;
    }

    .grading-list article{
        min-height:142px !important;
        padding:21px 19px !important;
    }

    .grading-list h2{
        font-size:1.18rem !important;
    }
}

@media(max-width:640px){
    .info-page{
        padding-top:14px !important;
    }

    .info-page .breadcrumbs{
        margin-bottom:14px !important;
    }

    .info-page .info-hero{
        padding-top:6px !important;
        padding-bottom:14px !important;
    }

    .info-page .info-hero > p:last-child{
        font-size:.95rem !important;
    }

    .info-page > .notice-card{
        padding-top:18px !important;
        padding-bottom:18px !important;
        margin-bottom:18px !important;
    }

    .grading-list article{
        min-height:auto !important;
        padding:18px 16px !important;
        gap:14px !important;
    }

    .grading-list h2{
        font-size:1.12rem !important;
    }

    .grading-list p{
        line-height:1.55 !important;
    }
}

/* =========================================================
   AvidVinyl Build 071.16 — Grading Guide Mobile Polish
   Mobile-only typography refinement.
   Desktop layout remains unchanged.
   ========================================================= */

@media(max-width:640px){

    .info-page .info-hero h1{
        font-size:clamp(3rem,15vw,4.25rem) !important;
        line-height:.96 !important;
        letter-spacing:-.03em !important;
        margin-bottom:12px !important;
    }

    .info-page .info-hero > p:last-child{
        font-size:.90rem !important;
        line-height:1.52 !important;
    }

    .info-page > .notice-card strong{
        font-size:1.18rem !important;
        line-height:1.28 !important;
        margin-bottom:10px !important;
    }

    .info-page > .notice-card p{
        font-size:.92rem !important;
        line-height:1.5 !important;
    }
}



/* =========================================================
   AvidVinyl Build 071.16.1 — Final Grading Guide Mobile Polish
   Further reduces the hero heading on phones only.
   Desktop remains unchanged.
   ========================================================= */

@media(max-width:640px){
    .info-page .info-hero h1{
        font-size:clamp(2.25rem,11vw,3.2rem) !important;
        line-height:1.00 !important;
        letter-spacing:-.025em !important;
    }
}


/* =========================================================
   AvidVinyl Build 071.16.2 — Final Grading Hero Sizing
   Phone-only refinement. Desktop remains unchanged.
   ========================================================= */

@media(max-width:640px){
    .info-page .info-hero h1{
        font-size:clamp(2.15rem,12vw,3.25rem) !important;
        line-height:.98 !important;
        letter-spacing:-.025em !important;
        margin-bottom:14px !important;
    }

    .info-page .info-hero > p:last-child{
        font-size:.86rem !important;
        line-height:1.48 !important;
    }
}


/* =========================================================
   AvidVinyl Build 071.16.3 — Grading Guide Mobile Spacing
   Reduces only the gap between the hero copy and notice card.
   Desktop remains unchanged.
   ========================================================= */

@media(max-width:640px){
    .info-page .info-hero{
        padding-bottom:8px !important;
        margin-bottom:0 !important;
    }

    .info-page > .notice-card{
        margin-top:0 !important;
    }
}