/* ==========================================================
   Fictioneer Child Theme
   Story Hero
========================================================== */

.story-hero {
    display: flex;
    align-items: flex-start;
    gap: 40px;

    padding: 35px;
    margin-bottom: 40px;

    border-radius: 12px;

    background: rgba(40,40,40,.45);
    backdrop-filter: blur(8px);
}

/* Cover */

.story-hero__cover {
    flex: 0 0 260px;
}

.story-hero__cover img {
    width: 100%;
    height: auto;

    display: block;

    border-radius: 10px;

    box-shadow:
        0 15px 40px rgba(0,0,0,.35);
}

/* Right side */

.story-hero__content {
    flex: 1;
    min-width: 0;
}

/* Title */

.story-hero__title {
    font-size: 2.8rem;
    line-height: 1.2;
    font-weight: 700;

    margin-bottom: 10px;
}

/* Meta */

.story-hero__meta {

    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:18px;

    margin-bottom:18px;

    color:var(--fg-600);
    font-size:.95rem;
}

/* Rating */

.story-hero__rating{

    font-size:1rem;

    margin-bottom:24px;

    color:#f5c542;
}

.story-hero__rating span{

    color:var(--fg-600);
}

/* Buttons */

.story-hero__buttons{

    display:flex;
    gap:15px;

    flex-wrap:wrap;

    margin-bottom:25px;
}

.story-hero__buttons a{

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

    padding:14px 26px;

    border-radius:8px;

    font-weight:700;

    text-decoration:none;

    transition:.2s;
}

.story-hero__buttons a:hover{

    transform:translateY(-2px);
}

/* Read buttons */

.story-hero__buttons .primary{

    background:#d7a937;

    color:white;
}

/* Bookshelf */

.story-hero__buttons .secondary{

    background:transparent;

    border:2px solid #d7a937;

    color:#d7a937;
}

/* Genres */

.story-hero__genres{

    display:flex;

    flex-wrap:wrap;

    gap:8px;
}

/* Mobile */

@media (max-width:900px){

.story-hero{

    flex-direction:column;
}

.story-hero__cover{

    width:220px;

    max-width:100%;
}

.story-hero__title{

    font-size:2rem;
}

}