/*
 * Eterna Perfect World — Homepage Classes Gallery v2
 * Loaded after zenith-modern.css to make the class cards deterministic.
 * Artwork is a real image block (8:12 / 2:3), never a background.
 * Text lives in a separate panel below the artwork.
 */
#classes .zn-class-grid.zn-class-grid-portrait{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:22px !important;
    width:100% !important;
    max-width:1240px !important;
    margin-inline:auto !important;
    align-items:start !important;
}

#classes .zn-class-card.zn-class-card-portrait.zn-class-card-8x12{
    appearance:none !important;
    -webkit-appearance:none !important;
    position:relative !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:0 !important;
    width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    padding:0 !important;
    border:1px solid rgba(188,66,36,.46) !important;
    border-radius:14px !important;
    background:#0a0c10 !important;
    color:inherit !important;
    text-align:left !important;
    overflow:hidden !important;
    cursor:pointer !important;
    isolation:isolate !important;
    box-shadow:0 18px 48px rgba(0,0,0,.26),inset 0 0 0 1px rgba(255,255,255,.018) !important;
    transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease !important;
}

#classes .zn-class-card.zn-class-card-portrait.zn-class-card-8x12:hover,
#classes .zn-class-card.zn-class-card-portrait.zn-class-card-8x12:focus-visible{
    transform:translateY(-5px) !important;
    border-color:rgba(245,181,35,.76) !important;
    box-shadow:0 28px 68px rgba(0,0,0,.38),0 0 30px rgba(216,84,28,.08) !important;
    outline:none !important;
}

#classes .zn-class-card.zn-class-card-portrait.zn-class-card-8x12 .zn-class-card-media{
    position:relative !important;
    inset:auto !important;
    z-index:auto !important;
    display:block !important;
    width:100% !important;
    aspect-ratio:8 / 12 !important;
    height:auto !important;
    min-height:0 !important;
    flex:0 0 auto !important;
    overflow:hidden !important;
    background:#090b0e !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
}

#classes .zn-class-card.zn-class-card-portrait.zn-class-card-8x12 .zn-class-card-image{
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    display:block !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    object-fit:cover !important;
    object-position:center top !important;
    filter:none !important;
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    image-rendering:auto !important;
    -webkit-backface-visibility:hidden !important;
    backface-visibility:hidden !important;
}

#classes .zn-class-card.zn-class-card-portrait.zn-class-card-8x12:hover .zn-class-card-image,
#classes .zn-class-card.zn-class-card-portrait.zn-class-card-8x12:focus-visible .zn-class-card-image{
    filter:none !important;
    opacity:1 !important;
    transform:none !important;
}

#classes .zn-class-card.zn-class-card-portrait.zn-class-card-8x12 .zn-class-card-fallback{
    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;
    display:grid !important;
    place-items:center !important;
    background:radial-gradient(circle at 50% 35%,rgba(223,79,24,.26),transparent 28%),radial-gradient(circle at 50% 75%,rgba(240,181,38,.08),transparent 38%),#090b0e !important;
}

#classes .zn-class-card.zn-class-card-portrait.zn-class-card-8x12 .zn-class-card-fallback b{
    color:rgba(242,193,87,.28) !important;
    font-family:Georgia,"Times New Roman",serif !important;
    font-size:clamp(58px,6vw,92px) !important;
    letter-spacing:-.06em !important;
    text-shadow:0 0 45px rgba(232,89,26,.20) !important;
}

#classes .zn-class-card.zn-class-card-portrait.zn-class-card-8x12 .zn-class-card-content{
    position:relative !important;
    inset:auto !important;
    z-index:auto !important;
    display:flex !important;
    flex:1 1 auto !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    width:100% !important;
    min-height:138px !important;
    padding:18px 18px 16px !important;
    background:linear-gradient(180deg,#111318 0%,#0a0c10 100%) !important;
}

#classes .zn-class-card.zn-class-card-portrait.zn-class-card-8x12 .zn-class-card-content > strong{
    display:block !important;
    margin:0 !important;
    color:#fff4dc !important;
    font-family:Georgia,"Times New Roman",serif !important;
    font-size:18px !important;
    font-weight:700 !important;
    letter-spacing:-.015em !important;
    line-height:1.12 !important;
    text-transform:uppercase !important;
    text-shadow:none !important;
}

#classes .zn-class-card.zn-class-card-portrait.zn-class-card-8x12 .zn-class-card-kicker{
    display:block !important;
    margin:6px 0 0 !important;
    color:#e6b758 !important;
    font-size:8px !important;
    font-weight:900 !important;
    letter-spacing:.16em !important;
    line-height:1.25 !important;
    text-transform:uppercase !important;
    opacity:.94 !important;
}

#classes .zn-class-card.zn-class-card-portrait.zn-class-card-8x12 .zn-class-card-description{
    display:-webkit-box !important;
    min-height:3em !important;
    margin-top:9px !important;
    overflow:hidden !important;
    color:#aeb4bc !important;
    font-size:10px !important;
    line-height:1.5 !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
}

#classes .zn-class-card.zn-class-card-portrait.zn-class-card-8x12 .zn-class-card-action{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    width:100% !important;
    max-height:none !important;
    margin-top:auto !important;
    padding-top:12px !important;
    color:#efc15a !important;
    font-size:9px !important;
    font-weight:900 !important;
    letter-spacing:.1em !important;
    opacity:.78 !important;
    text-transform:uppercase !important;
    overflow:visible !important;
}

#classes .zn-class-card.zn-class-card-portrait.zn-class-card-8x12:hover .zn-class-card-action,
#classes .zn-class-card.zn-class-card-portrait.zn-class-card-8x12:focus-visible .zn-class-card-action{
    color:#ffd36d !important;
    opacity:1 !important;
}

@media (max-width:1120px){
    #classes .zn-class-grid.zn-class-grid-portrait{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        max-width:930px !important;
        gap:20px !important;
    }
}

@media (max-width:760px){
    #classes .zn-class-grid.zn-class-grid-portrait{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        max-width:620px !important;
        gap:14px !important;
    }
    #classes .zn-class-card.zn-class-card-portrait.zn-class-card-8x12 .zn-class-card-content{
        min-height:124px !important;
        padding:15px 14px 13px !important;
    }
    #classes .zn-class-card.zn-class-card-portrait.zn-class-card-8x12 .zn-class-card-content > strong{
        font-size:16px !important;
    }
}

@media (max-width:460px){
    #classes .zn-class-grid.zn-class-grid-portrait{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:10px !important;
    }
    #classes .zn-class-card.zn-class-card-portrait.zn-class-card-8x12{
        border-radius:10px !important;
    }
    #classes .zn-class-card.zn-class-card-portrait.zn-class-card-8x12 .zn-class-card-content{
        min-height:112px !important;
        padding:12px 10px 10px !important;
    }
    #classes .zn-class-card.zn-class-card-portrait.zn-class-card-8x12 .zn-class-card-content > strong{
        font-size:13px !important;
    }
    #classes .zn-class-card.zn-class-card-portrait.zn-class-card-8x12 .zn-class-card-description{
        font-size:8px !important;
        line-height:1.42 !important;
    }
    #classes .zn-class-card.zn-class-card-portrait.zn-class-card-8x12 .zn-class-card-action{
        display:none !important;
    }
}