/**
 * File Path: assets/css/front/mbs-front-card-hover.css
 * Card Hover Overlay -- Grid, Card, Masonry layouts (UX-002, Session 115)
 * Component of mbs-front.css -- enqueued by MBS_Front_Assets dep: mbs-front.
 * Flat selectors (CSS-002 / CSS-NEST-001 compliance).
 */

/* ==========================================================================
   Cover wrap -- positions the overlay relative to the cover image
   ========================================================================== */

.mbs-card-cover-wrap {
    position: relative;
    overflow: hidden;
}

/* ==========================================================================
   Overlay panel -- full-cover scrim, hidden by default
   ========================================================================== */

.mbs-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease; /* fade-out: no delay — snappy on mouse-leave */
    z-index: 3; /* CV-001: must exceed .mbs-cover-video z-index:2 to appear above spinning video covers */
}

.mbs-book-card:hover .mbs-card-overlay,
.mbs-book-card:focus-within .mbs-card-overlay {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.8s ease 1s; /* CV-001: 1s delay + 0.8s fade = 1.8s to full visibility; gives video time to be observed */
}

/* ==========================================================================
   View Book pill button inside the overlay
   ========================================================================== */

.mbs-card-overlay-btn {
    display: inline-block;
    padding: 8px 22px;
    background: #fff;
    color: var(--mbs-ink, #1f2937);
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

.mbs-card-overlay-btn:hover,
.mbs-card-overlay-btn:focus {
    background: var(--mbs-accent, var(--mbs-teal));
    color: #fff;
}

.mbs-card-overlay-btn:focus-visible {
    outline: 3px solid var(--mbs-accent, var(--mbs-teal));
    outline-offset: 2px;
}

/* Cover link -- force block display so the inner .mbs-wrapper from
   MBS_Cover_Renderer is not constrained by inline box sizing (FE-008 root fix).
   overflow: hidden contains the cover image within rounded card corners. */
.mbs-book-card__cover-link {
    display: block;
    position: relative;
    overflow: hidden;
}

/* Constrain the cover renderer's .mbs-wrapper div to 100% of the link box */
.mbs-book-card__cover-link .mbs-wrapper {
    width: 100%;
}

/* Cover div and image -- explicit block + 100% width ensures the image fills
   the card column width, not its natural pixel width (FE-008). */
.mbs-book-card__cover-link .mbs-cover,
.mbs-book-card__cover-link img {
    width: 100%;
    height: auto;
    display: block;
}

/* Book card info panel */
.mbs-book-card__info {
    padding: 10px 12px 12px;
}

.mbs-book-card__title {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 4px;
    color: var(--mbs-text, #2C3E6B);
}

.mbs-book-card__title a {
    color: inherit;
    text-decoration: none;
}

.mbs-book-card__title a:hover,
.mbs-book-card__title a:focus {
    color: var(--mbs-accent, #4AABB8);
}

.mbs-book-card__author {
    font-size: 0.8rem;
    color: var(--mbs-text-light, #7F8C8D);
    margin: 0 0 4px;
}

.mbs-book-card__teaser {
    font-size: 0.78rem;
    color: var(--mbs-text-muted, #555);
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}