/*
 * DBC — Open-Book Spread  [dbc_book_spread]
 * -------------------------------------------------------------
 * Yrsa (title) + Poppins (body, incl. 600 italic for Read-More hover) are
 * enqueued via wp_enqueue_style('dbc-book-spread-fonts', ...) in
 * dbc-book-spread.php — loaded in PARALLEL with this stylesheet for faster
 * first paint. Do NOT re-add @import here: it serializes the fetch and
 * causes a flash of empty description text on page load.
 */

/* ---------- Container query host ---------- */

.dbc-book-spread {
    container-type: inline-size;
    container-name: dbc-book-spread;

    /* Desktop: original spec. Smaller cover for tablet/mobile in @media below. */
    --dbc-bs-cover-w: 160px;
    --dbc-bs-cover-h: 250px;

    width: min(1200px, calc(100% - 4em)); /* enforce 2em side margins */
    max-width: 1200px;
    margin: 0 auto;
    font-family: "Poppins", sans-serif;
    color: #111;
}

.dbc-book-spread *,
.dbc-book-spread *::before,
.dbc-book-spread *::after {
    box-sizing: border-box;
}

/* ---------- Book frame ---------- */

.dbc-book-spread__book {
    position: relative;
    width: 100%;
    aspect-ratio: 1024 / 729;
    background-image: url("../Images/book-spread-bg.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
}

.dbc-book-spread__inner {
    position: absolute;
    /* Matches the visible page area of book-spread-bg.png. */
    inset: 6% 4.5% 6% 4.5%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3%;
}

.dbc-book-spread__page {
    position: relative;
    min-width: 0;
    min-height: 0;
    /* IMPORTANT: overflow stays VISIBLE at the page level so dropdowns
       (share, Buy Now, bookmark popovers) can escape the page and book
       frame. Text is contained by page1/page2, not by .__page. */
    overflow: visible;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    /* Vertical spacing between the major page-1 sections (title, cover+meta,
       rating, description) and between right-page sections. */
    gap: 20px;

    /* Fixed body text. */
    font-size: 13px;
    line-height: 1.55;
}

.dbc-book-spread__source { display: none !important; }

/* ---------- LEFT PAGE: header ---------- */

.dbc-book-spread__head {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 8px;
    flex: 0 0 auto;
}

.dbc-book-spread__title,
.dbc-book-spread__title-label,
.dbc-book-spread__title-text {
    font-family: "Yrsa", "Times New Roman", serif !important;
    font-weight: 400 !important;               /* label + text share weight */
    /* Theme has h2 rules (18px) that outrank an unflagged declaration —
       force 25/23 everywhere so the label, the text and the h2 itself all
       render identically. */
    font-size: 25px !important;
    line-height: 23px !important;
    letter-spacing: -0.3px !important;         /* tighten the serif glyphs a touch */
    color: #111 !important;
}

.dbc-book-spread__title {
    margin: 0;
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35em;
    min-width: 0;
}

.dbc-book-spread__title-text { word-break: break-word; }

.dbc-book-spread__share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    /* Lift above sibling content so the dropdown list is never behind the cover/meta/description. */
    position: relative;
    z-index: 10;
    /* Optical nudge: baseline-aligned with the title looks a touch low next
       to the tall Yrsa caps, so float the icon up a few pixels. */
    transform: translateY(-9px);
}

/* Scope-only override: shrink the share trigger icon inside this shortcode
   without touching the global .share-icon-trigger size used elsewhere. */
.dbc-book-spread__share .share-icon-trigger {
    width: 20px !important;
    height: 20px !important;
}

.dbc-book-spread__share .share-icon-trigger {
    width: 22px;
    height: 22px;
}

/* ---------- LEFT PAGE: cover + meta ---------- */

/* Real 2-column flex layout. The cover column is a hard fixed width so it
   CANNOT overlap or push into the meta column, regardless of the cover
   image's natural pixel size or any width attributes WP adds. */
.dbc-book-spread__left-info {
    display: flex;
    align-items: flex-start;
    /* Horizontal breathing room between the cover and the author/genre column. */
    gap: 28px;
    /* Extra vertical gap before the star rating below (stacks on top of the
       page flex gap — keeps cover→rating spacing a bit larger than the others). */
    margin-bottom: 6px;
    flex: 0 0 auto;
}

.dbc-book-spread__col-cover {
    /* Hard-locked with !important so a theme/Elementor rule can't widen the
       column. No stray page background to the right of the art. */
    flex: 0 0 var(--dbc-bs-cover-w) !important;
    width: var(--dbc-bs-cover-w) !important;
    max-width: var(--dbc-bs-cover-w) !important;
    min-width: 0;
    background: transparent;
    position: relative;
    /* High z-index so popovers anchored INSIDE the cover (bookmark's
       SHELVES panel, etc.) escape ABOVE the adjacent meta text. The cover
       image itself is width-locked so there's no real layout collision — we
       only need this for absolute-positioned popups. */
    z-index: 5;
}

.dbc-book-spread__col-meta {
    flex: 1 1 auto;         /* takes all remaining horizontal space */
    min-width: 0;           /* allow text to wrap instead of overflow */
    position: relative;
    z-index: 1;             /* under cover's popups, above page background */
}

.dbc-book-spread__cover {
    position: relative;
    width: var(--dbc-bs-cover-w) !important;
    max-width: var(--dbc-bs-cover-w) !important;
    display: block;
    line-height: 0; /* no inline gap under the <img> */
    border-radius: 2px;
    /* Intentionally no overflow:hidden — shelf/bookmark popovers must escape. */
}

/* Force the featured image to exact pixel dimensions. "100%" was being ignored
   in some theme/Elementor stacks; explicit size + !important wins. object-fit:
   cover crops any off-aspect upload without distortion. */
.dbc-book-spread__cover-img,
.dbc-book-spread__col-cover img {
    display: block !important;
    width: var(--dbc-bs-cover-w) !important;
    max-width: var(--dbc-bs-cover-w) !important;
    height: var(--dbc-bs-cover-h) !important;
    object-fit: cover !important;
    object-position: center;
    border-radius: 2px;
    /* No box-shadow: diffuse shadow read as a light fringe on the white page
       to the right of the cover. */
    box-shadow: none;
}

.dbc-book-spread__bookmark {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    pointer-events: auto;
    /* Size slot to the real cover: shortcode’s .dbc-bod-cover is a fixed
       140/130/160 in style.css; without this, a gray .dbc-bod-cover
       “card” and duplicate <img> extend past a narrower --dbc-bs-cover-w. */
    width: var(--dbc-bs-cover-w);
    height: var(--dbc-bs-cover-h);
}

.dbc-book-spread__bookmark .dbc-bod-bookmark-wrap {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.dbc-book-spread .dbc-bod-cover {
    width: 100% !important;
    max-width: 100% !important;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    /* Real art is .dbc-book-spread__cover-img; this layer is only for ribbon + UI. */
    background: transparent !important;
    border-radius: 0 !important;
}

.dbc-book-spread .dbc-bod-cover > img {
    /* Hide the shortcode’s duplicate feature image so no gray “pad” shows. */
    display: none !important;
}

/* Matches the legacy Elementor Text Editor widget for meta: Poppins 300 /
   13 / 23. Label is nudged to 500 so "Author(s):" still reads as a label
   without being heavy-bold. */
/* Shared Poppins base for the meta block — labels and values at 13px. */
.dbc-book-spread__meta,
.dbc-book-spread__meta-label {
    font-family: "Poppins", sans-serif !important;
    font-size: 13px !important;
    line-height: 23px !important;
    letter-spacing: 0.1px;
}

.dbc-book-spread__meta {
    min-width: 0;
    color: #1a1a1a;
    font-weight: 300 !important;
}

.dbc-book-spread__meta-line {
    margin: 0 0 10px 0;
    /* The <p>'s own strut was forcing a tall line box even when inline
       children had smaller line-heights, which is why the wrapped author
       list looked spaced out. Match the value's line-height here. */
    line-height: 20px;
}

.dbc-book-spread__meta-label {
    /* Inspector shows Poppins 300 for the label too (same as value). */
    font-weight: 300 !important;
    /* Force the label onto its own line so the author/genre values wrap below. */
    display: block;
    margin-right: 0;
    margin-bottom: 2px;
    color: #000 !important;
    white-space: nowrap;
}

/* Value wrapper — matches the .text-link-styling spec so author links and
   genre links share the same rhythm even across the separating commas. */
.dbc-book-spread__meta-value {
    /* Make the value its own block so its line-height governs wrapped lines
       (inline spans can't override the parent <p>'s strut — see the
       .__meta-line rule above for the companion fix). */
    display: block;
}

.dbc-book-spread__meta-value,
.dbc-book-spread__meta-value span,
.dbc-book-spread__meta-value a {
    font-family: "Poppins", sans-serif !important;
    font-size: 13px !important;
    line-height: 20px !important;
    font-weight: 300 !important;
    letter-spacing: -0.4px !important;
    word-spacing: 1px !important;
    color: #4682b4 !important;
    text-decoration: none;
    word-break: break-word;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

.dbc-book-spread__meta-value a:hover {
    color: #0a3d6b !important;
    text-decoration: underline;
}

/* ---------- Rating ---------- */

.dbc-book-spread__rating {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    margin: 0;
    font-size: 14px;   /* scales the "(3.34)" count next to the stars */
}

.dbc-book-spread__rating .dbc-search-stars {
    --dbc-star-size: 26px !important;
}

/* ---------- Description pages ---------- */

.dbc-book-spread__page1,
.dbc-book-spread__page2 {
    flex: 1 1 auto;        /* absorb remaining vertical space */
    min-height: 0;

    /* Exact typography from the Elementor Text Editor widget the legacy
       Book-of-the-Day section used (Poppins 13 / 300 / 26 / 0.1 / 0). */
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    font-weight: 300;
    line-height: 26px;
    letter-spacing: 0.1px;
    word-spacing: 0;
    color: #111;

    text-align: justify;
    text-justify: inter-word;     /* stretch word-gaps, not letter-gaps */
    /* Disable automatic hyphenation. The narrow book column was producing
       long stacks of mid-word breaks like "be-", "or-dinary", "char-acter"
       which is awful to read. Prefer slightly wider justified word spacing
       over constant hyphens. */
    hyphens: manual;
    -webkit-hyphens: manual;
    -ms-hyphens: manual;
    /* Safety limits in case a user-agent still hyphenates (rare): require
       long words and never allow more than 2 hyphenated lines in a row. */
    hyphenate-limit-chars: 10 4 4;
    hyphenate-limit-lines: 2;
    overflow: hidden;
    /* Let long words (URLs, compound words) wrap as a last resort, instead
       of forcing hyphenation. */
    word-break: normal;
    overflow-wrap: anywhere;
    /* Improves justified lines on Chrome/Safari — balances word spacing and
       avoids ugly rivers. No-op on older browsers. */
    text-wrap: pretty;
}

/* Page 1: cap description height so the cover, title, authors, genre and
   rating above it get the breathing room they need. The JS binary-search
   measures against this max-height and moves the rest to page 2. */
.dbc-book-spread__page1 {
    max-height: calc(26px * 11);  /* 11 lines of description max on page 1 */
}

/* Page 2: JS trims at word boundary and appends "…". The overflow:hidden
   above is just a safety net in case JS hasn't run yet.
   Unlike page 1, page 2 does NOT flex-grow to fill the right page — we
   size it to its content (capped at 10 lines) so the Read More / Buy Now
   footer sits directly below the trimmed text instead of after a tall
   empty gap. The max-height also gives the JS binary-search a tighter
   bound, so the ellipsis falls at a cleaner word boundary. */
.dbc-book-spread__page2 {
    flex: 0 1 auto;
    max-height: calc(26px * 17);
    overflow: hidden;
}

/* ---------- RIGHT PAGE footer ---------- */

.dbc-book-spread__read-more {
    align-self: flex-start;
    margin-top: 0;
    /* Typography from the legacy Elementor button: Poppins 600 / 15 / 13. */
    font-family: "Poppins", sans-serif !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    line-height: 13px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #111 !important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    /* Tight gap so the chevrons sit right next to the word, like the mock. */
    gap: 6px;
    flex: 0 0 auto;
    font-style: normal;
    transition: color 180ms ease;
}

.dbc-book-spread__read-more:hover,
.dbc-book-spread__read-more:focus-visible {
    /* Plain hover highlight: accent color only, no underline or movement. */
    color: #e0a82e !important;
    text-decoration: none;
    outline: none;
}

/* Heavy stroked chevron pair. currentColor = inherits the link text color
   so it re-tints on hover. Sized to match the cap-height of the 15px
   uppercase Poppins 600 text instead of the old oversized chevrons. */
.dbc-book-spread__read-more-arrow {
    display: inline-block;
    flex: 0 0 auto;
    width: 16px;
    height: 11px;
    overflow: visible;
    transform: translateY(0.5px);    /* nudge 1px lower vs previous -0.5px */
}

.dbc-book-spread__buy {
    align-self: flex-end;
    /* Follow the Read More button directly (separated only by the page's
       20px flex gap) instead of being pinned to the very bottom of the
       right page — keeps the footer pair tight against the trimmed
       description. */
    margin-top: 0;
    margin-left: auto;
    padding-top: 0;
    flex: 0 0 auto;
    /* Lift so the affiliate dropdown list opens on top of the book description / cover. */
    position: relative;
    z-index: 10;
}

.dbc-book-spread__buy .affiliate-dropdown-toggle {
    font-size: 14px;
}

/* =====================================================================
 * RESPONSIVE BREAKPOINTS
 * ---------------------------------------------------------------------
 * Two viewport breaks (aligned to DBC_BP_MOBILE_EXTRA + DBC_BP_MOBILE):
 *   • ≤ 880px  — "tablet mode": description moves entirely to page 2,
 *                 giving the cover / meta / rating more room on page 1.
 *   • ≤ 767px  — "card mode": drop the book illustration and collapse
 *                 to a stacked card. Mirrors DBC_BP_MOBILE (see
 *                 wp-content/themes/dailybookchoice/dbc-breakpoints.php).
 *
 * Source order matters: tablet block must come BEFORE card so card
 * can re-show page 1 on phones. Layout only — typography stays fixed
 * so readability is identical across modes.
 * ===================================================================== */

/* =====================================================================
 * TABLET MODE — description on page 2 only
 * ---------------------------------------------------------------------
 * Hides the page-1 description; the JS (isHidden check) detects this
 * and switches to a "single-pane on page 2" strategy with ellipsis,
 * so the full description still fits (and truncates) cleanly.
 * Matches DBC_BP_MOBILE_EXTRA (dbc-breakpoints.css / dbc-breakpoints.php).
 * ===================================================================== */
@media (max-width: 880px) {
    /* Smaller cover from here through mobile; desktop (881px+) stays 160×250. */
    .dbc-book-spread {
        --dbc-bs-cover-w: 140px;
        --dbc-bs-cover-h: 219px;
    }

    .dbc-book-spread__page {
        padding: 12px 14px;
        gap: 16px;
    }

    .dbc-book-spread__page--left .dbc-book-spread__page1 {
        display: none;
    }

    /* Left page now only holds title + cover/meta + rating. Push
       everything up rather than leaving a void at the bottom. */
    .dbc-book-spread__page--left { justify-content: flex-start; }

    .dbc-book-spread__left-info {
        gap: 26px;
        margin-bottom: 4px;
    }
}

/* =====================================================================
 * CARD MODE — mobile only
 * ---------------------------------------------------------------------
 * Drops the open-book illustration and collapses the spread into a
 * single stacked card. Mirrors Elementor's DBC_BP_MOBILE (767px, see
 * dbc-breakpoints.php) so phones get the card and tablets (768px+)
 * keep the full book cover.
 *
 * The `display:none` on page-2 is observed by the JS (isHidden check),
 * which switches to a "single-pane on page 1" strategy with ellipsis.
 *
 * Keep 767 in sync with DBC_BP_MOBILE if the kit ever changes.
 * ===================================================================== */

@media (max-width: 767px) {
    /* Card cover: narrower than tablet; same 160/250 aspect. */
    .dbc-book-spread {
        --dbc-bs-cover-w: 114px;
        --dbc-bs-cover-h: 178px;
    }

    .dbc-book-spread__book {
        aspect-ratio: auto;
        background-image: none;
        background-color: #fff;
        border: 1px solid #e5e5e5;
        border-radius: 10px;
        padding: 16px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    }

    .dbc-book-spread__inner {
        position: static;
        inset: auto;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .dbc-book-spread__page {
        padding: 0;
        overflow: visible;
        gap: 10px;
    }

    .dbc-book-spread__left-info { gap: 16px; }
    .dbc-book-spread__col-cover {
        flex: 0 0 var(--dbc-bs-cover-w) !important;
        width: var(--dbc-bs-cover-w) !important;
        max-width: var(--dbc-bs-cover-w) !important;
    }
    .dbc-book-spread__cover,
    .dbc-book-spread__cover-img,
    .dbc-book-spread__col-cover img {
        width: var(--dbc-bs-cover-w) !important;
        max-width: var(--dbc-bs-cover-w) !important;
    }
    .dbc-book-spread__cover-img,
    .dbc-book-spread__col-cover img {
        height: var(--dbc-bs-cover-h) !important;
    }

    /* Shrink the Add-to-Shelf ribbon for the narrow card cover. */
    .dbc-book-spread__bookmark .dbc-bod-bookmark-btn {
        width: 28px !important;
        height: 34px !important;
        font-size: 18px !important;
    }

    /* Tighter description leading on the card (desktop/tablet stays 26px). */
    .dbc-book-spread__page1,
    .dbc-book-spread__page2 {
        line-height: 25px;
    }

    /* Card shows ONE description block (page 1 only) with JS-trimmed "…".
       Page 2 is dropped because the card doesn't mimic a 2-page book. */
    .dbc-book-spread__page--right .dbc-book-spread__page2 {
        display: none;
    }
    /* Undo the tablet-mode hide of page 1 — card needs page 1 visible so
       the JS single-pane mode has somewhere to put the description. */
    .dbc-book-spread__page--left .dbc-book-spread__page1 {
        display: block;
    }
    /* Cap page 1 so JS still has a height to measure against. */
    .dbc-book-spread__page1 {
        max-height: 14em;
    }

    .dbc-book-spread__buy {
        align-self: stretch;
        margin-left: 0;
    }
    .dbc-book-spread__buy .affiliate-dropdown-toggle {
        width: 100%;
        justify-content: center;
    }
}

/*
 * Elementor (mobile): `flex-wrap: var(--flex-wrap-mobile)` on `.e-con.e-flex`
 * can make a lone Shortcode child + flex-grow fill a huge used height.
 * Scope strictly to containers whose *direct* inner holds only the book-spread
 * shortcode pattern (matches Navigator: Book Container → Shortcode → .dbc-book-spread).
 *
 * Optional: add class `dbc-book-spread-wrap-fix` on the Book Container for the
 * same rules without :has() (older browsers).
 */
@media (max-width: 767px) {
    .e-con.e-flex:has(> .e-con-inner > .elementor-widget-shortcode .dbc-book-spread),
    .e-con.e-flex.dbc-book-spread-wrap-fix {
        flex-wrap: nowrap !important;
    }

    .e-con.e-flex:has(> .e-con-inner > .elementor-widget-shortcode .dbc-book-spread)
        > .e-con-inner
        > .elementor-widget-shortcode,
    .e-con.e-flex.dbc-book-spread-wrap-fix > .e-con-inner > .elementor-widget-shortcode {
        flex-grow: 0 !important;
    }

    /* Hard stop for the known problematic widget instance on homepage */
    .elementor-element.elementor-element-ea1fe8a.elementor-widget-shortcode {
        flex-grow: 0 !important;
        flex-basis: auto !important;
        align-self: auto !important;
        min-height: 0 !important;
        height: auto !important;
    }

    .elementor-element.elementor-element-ea1fe8a.elementor-widget-shortcode > .elementor-widget-container {
        min-height: 0 !important;
        height: auto !important;
    }

    /* Override Elementor's variable chain that re-enables wrapping on mobile. */
    .e-con.e-flex:has(.elementor-element.elementor-element-ea1fe8a) {
        --flex-wrap-mobile: nowrap !important;
        --flex-wrap: nowrap !important;
    }

    .e-con.e-flex:has(.elementor-element.elementor-element-ea1fe8a) > .e-con-inner {
        flex-wrap: nowrap !important;
    }
}