/**
 * File Path: assets/css/front/mbs-front-hero.css
 * Single-book page hero — two-column layout (cover + details),
 * buy-links zone, and external links zone (Goodreads / BookBub).
 * Component of mbs-front.css — enqueued by MBS_Front_Assets dep: mbs-front.
 * Flat selectors (CSS-002 / CSS-NEST-001 compliance).
 * @package MyBookShowroom
 * @since   1.0.0
 */

/* ==========================================================================
   Book Hero — two-column flex layout
   Left:  .mbs-book-hero-cover  (flex-basis 200 px — cover image)
   Right: .mbs-book-hero-details (title, author, badges, teaser, formats)
   ========================================================================== */

.mbs-book-hero {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    margin-bottom: 0;
}

.mbs-book-hero-cover {
    flex: 0 0 200px;
    width: 200px;
}

.mbs-book-hero-cover img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.mbs-book-hero-details {
    flex: 1 1 0;
    min-width: 0;
}

/* ==========================================================================
   Book title and author byline
   ========================================================================== */

.mbs-book-title {
    margin: 0 0 0.25rem;
    font-size: 1.875rem;
    line-height: 1.15;
    color: var(--mbs-text-strong, #111);
    word-break: break-word;
}

.mbs-book-author {
    margin: 0 0 1rem;
    font-size: 1.0625rem;
    color: var(--mbs-text-muted, #555);
}

.mbs-book-author a {
    color: var(--mbs-link, var(--mbs-teal));
    text-decoration: none;
}

.mbs-book-author a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Teaser — inline in hero right column
   Base .mbs-teaser styles remain in mbs-front-single.css;
   this rule only adjusts its placement within the hero.
   ========================================================================== */

.mbs-book-hero-details .mbs-teaser {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

/* ==========================================================================
   Buy Links zone — full-width strip directly below the hero
   ========================================================================== */

.mbs-buy-links-zone {
    margin: 1.5rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--mbs-border, #ECF0F1);
}

/* Reset the top margin that mbs-front-buy-links.css adds to .mbs-buy-links */
.mbs-buy-links-zone .mbs-buy-links {
    margin-top: 0;
}

/* ==========================================================================
   External Links zone — Goodreads / StoryGraph / BookBub below buy links
   ========================================================================== */

.mbs-external-links-zone {
    margin: 0.75rem 0 0;
}

/* section-goodreads.php renders .mbs-external-links inside this zone */
.mbs-external-links-zone .mbs-external-links {
    margin: 0;
    padding: 0;
    border-top: none;
}

/* ==========================================================================
   Responsive — stack columns on narrow viewports
   ========================================================================== */

@media (max-width: 600px) {
    .mbs-book-hero {
        flex-direction: column;
        gap: 20px;
    }

    .mbs-book-hero-cover {
        flex: 0 0 auto;
        width: 160px;
    }

    .mbs-book-title {
        font-size: 1.375rem;
    }

    .mbs-buy-links-zone {
        margin-top: 1.25rem;
        padding-top: 0.875rem;
    }
}

/* ==========================================================================
   Hero entrance animations
   Cover slides in from the left; details column slides in from the right.
   Wrapped in prefers-reduced-motion so users who opt out see no animation.
   ========================================================================== */

@keyframes mbs-slide-from-left {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes mbs-slide-from-right {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .mbs-book-hero-cover {
        animation: mbs-slide-from-left 0.5s cubic-bezier(0.25, 0, 0.25, 1) both;
    }

    .mbs-book-hero-details {
        animation: mbs-slide-from-right 0.5s cubic-bezier(0.25, 0, 0.25, 1) 0.1s both;
    }
}

/* ==========================================================================
   Archive Hero layout -- cover sizing (FE-010)
   The cover renderer outputs <div class="mbs-wrapper"> which becomes a flex
   item inside .mbs-layout-hero. clamp(140px, 22vw, 240px) sizes the cover
   proportionally to the viewport: 140px floor (phones/narrow), scales with
   viewport width up to 240px cap. Mobile override removed -- clamp handles it.
   Flat selectors per CSS-NEST-001.
   ========================================================================== */

.mbs-layout-hero .mbs-wrapper {
    flex: 0 0 clamp(140px, 22vw, 240px);
    width: clamp(140px, 22vw, 240px);
    min-width: 0;
}

.mbs-layout-hero .mbs-wrapper .mbs-cover,
.mbs-layout-hero .mbs-wrapper img,
.mbs-layout-hero .mbs-wrapper video {
    width: 100%;
    max-width: 100%; /* override --mbs-cover-max-width clamp — wrapper is already constrained */
    height: auto;
    display: block;
}

/* Divider between hero book rows in archive context */
.mbs-layout-hero + .mbs-layout-hero {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--mbs-border, #ECF0F1);
}

/* Single-book page: allow cover to fill the .mbs-book-hero-cover column.
   Without this, the Phase 4 --mbs-cover-max-width clamp caps at 110px
   (18% of the 200px wrapper = 36px -> clamp floor 110px). */
.mbs-book-hero-cover .mbs-cover {
    max-width: 100%;
}