/**
 * File Path: assets/css/blocks-editor.css
 * Editor-only styles for the three dynamic Gutenberg blocks; scoped to the block editor context.
 * @package MyBookShowroom
 * @since   1.0.0
 */

/* Token defaults for the block editor context — mirror the plugin FREE defaults.
   When live editor color customization ships (Task #41), wp_add_inline_style()
   will override these values with the user's saved choices from Settings → Appearance. */
:root {
    --mbs-accent:    #4AABB8;
    --mbs-button-bg: #2C3E6B;
}

/* Core editor scoping */
.editor-styles-wrapper .mbs-block,
.block-editor .mbs-block {
    box-sizing: border-box;
}

/* Featured Book Block */
.editor-styles-wrapper .mbs-block-featured-book,
.block-editor .mbs-block-featured-book {
    border: 2px dashed var(--mbs-accent);
    border-radius: 8px;
    padding: 20px;
    background: #fff;
    max-width: 420px;
    margin: 0 auto;
}

.editor-styles-wrapper .mbs-block-featured-book h3,
.block-editor .mbs-block-featured-book h3 {
    margin: 12px 0 8px;
    font-size: 1.25rem;
    color: var(--mbs-text, var(--mbs-navy));
}

.editor-styles-wrapper .mbs-block-featured-book .mbs-book-author,
.block-editor .mbs-block-featured-book .mbs-book-author {
    color: #666;
    font-style: italic;
    margin-bottom: 12px;
}

/* Book Grid Block */
.editor-styles-wrapper .mbs-block-book-grid,
.block-editor .mbs-block-book-grid {
    border: 2px dashed var(--mbs-accent);
    border-radius: 8px;
    padding: 20px;
    background: #f9f9f9;
}

.editor-styles-wrapper .mbs-block-book-grid .mbs-layout-grid,
.block-editor .mbs-block-book-grid .mbs-layout-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

.editor-styles-wrapper .mbs-block-book-grid .mbs-book-card,
.block-editor .mbs-block-book-grid .mbs-book-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    padding: 8px;
    text-align: center;
}

.editor-styles-wrapper .mbs-block-book-grid .mbs-book-card img,
.block-editor .mbs-block-book-grid .mbs-book-card img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

/* Buy Links Block */
.editor-styles-wrapper .mbs-block-buy-links,
.block-editor .mbs-block-buy-links {
    border: 2px dashed var(--mbs-accent);
    border-radius: 8px;
    padding: 20px;
    background: #fff;
    max-width: 380px;
}

.editor-styles-wrapper .mbs-block-buy-links .mbs-order-now-btn,
.block-editor .mbs-block-buy-links .mbs-order-now-btn {
    background: var(--mbs-button-bg);
    color: #fff;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    text-align: center;
    display: inline-block;
    margin-bottom: 12px;
}

/* Inspector Controls Styling */
.editor-styles-wrapper .components-panel__body.mbs-block-inspector,
.block-editor .components-panel__body.mbs-block-inspector {
    border-top: 1px solid #e0e0e0;
}

.editor-styles-wrapper .mbs-inspector-book-picker,
.block-editor .mbs-inspector-book-picker {
    margin-bottom: 16px;
}

/* Live preview placeholder when no book selected */
.editor-styles-wrapper .mbs-block-placeholder,
.block-editor .mbs-block-placeholder {
    border: 2px dashed #ddd;
    color: #999;
    padding: 40px 20px;
    text-align: center;
    border-radius: 6px;
    font-style: italic;
}

/* Dark mode support (matches mbs-front.css pattern) */
@media (prefers-color-scheme: dark) {
    .editor-styles-wrapper .mbs-block-featured-book,
    .block-editor .mbs-block-featured-book {
        background: #2c2c2c;
        border-color: var(--mbs-accent);
    }

    .editor-styles-wrapper .mbs-block-featured-book h3,
    .block-editor .mbs-block-featured-book h3 {
        color: #e0e0e0;
    }

    .editor-styles-wrapper .mbs-block-book-grid,
    .block-editor .mbs-block-book-grid {
        background: #1f1f1f;
    }

    .editor-styles-wrapper .mbs-block-book-grid .mbs-book-card,
    .block-editor .mbs-block-book-grid .mbs-book-card {
        background: #2c2c2c;
        border-color: #555;
    }

    .editor-styles-wrapper .mbs-block-buy-links,
    .block-editor .mbs-block-buy-links {
        background: #2c2c2c;
    }
}

/* Focus states for accessibility */
.editor-styles-wrapper .mbs-order-now-btn:focus,
.block-editor .mbs-order-now-btn:focus {
    outline: 3px solid var(--mbs-accent);
    outline-offset: 2px;
}

/* ─── Cover images — editor preview sizing ─────────────────────────────────── */
/* ServerSideRender renders PHP output without mbs-front.css. Without these     */
/* rules, .mbs-cover images render at the full attachment URL natural size and  */
/* can flood the editor canvas. Max-width: 110px constrains standalone          */
/* book-cover blocks. Grid-layout overrides below restore accurate previews.    */
.editor-styles-wrapper .mbs-cover,
.block-editor .mbs-cover {
    max-width: 110px;
    margin: 0 auto;
}

.editor-styles-wrapper .mbs-cover img,
.block-editor .mbs-cover img {
    width: 100%;
    height: auto;
    display: block;
}

/* ─── Cover sizing overrides — accurate editor previews ───────────────────── */
/* Fix 5: Grid-layout covers inside .mbs-book-card are fluid on the front end.  */
/* Cancel the blanket 110px cap so the editor preview matches what visitors see. */
.editor-styles-wrapper .mbs-book-card .mbs-wrapper .mbs-cover,
.block-editor .mbs-book-card .mbs-wrapper .mbs-cover {
    max-width: none;
    margin: 0;
}

/* Fix 2: Featured-book block cover — proportional to its 420px container.      */
/* Matches the clamp() value in mbs-front.css.                                  */
.editor-styles-wrapper .mbs-block-featured-book .mbs-cover,
.block-editor .mbs-block-featured-book .mbs-cover {
    max-width: clamp(160px, 40%, 220px);
}

/* ─── Multi-section blocks — light editor frame ─────────────────────────────── */
/* single-book, book-teaser, author, series, universe, and similar blocks render  */
/* complex multi-section PHP output. A dashed border signals "this is a block"   */
/* and prevents the content from blending with the editor canvas.                */
.editor-styles-wrapper .mbs-block-single-book,
.editor-styles-wrapper .mbs-block-book-teaser,
.editor-styles-wrapper .mbs-block-author,
.editor-styles-wrapper .mbs-block-series,
.editor-styles-wrapper .mbs-block-universe,
.editor-styles-wrapper .mbs-block-genre,
.editor-styles-wrapper .mbs-block-collection,
.editor-styles-wrapper .mbs-block-reading-order,
.editor-styles-wrapper .mbs-block-endorsements,
.editor-styles-wrapper .mbs-block-timeline,
.editor-styles-wrapper .mbs-block-new-releases,
.editor-styles-wrapper .mbs-block-coming-soon,
.editor-styles-wrapper .mbs-block-related-books,
.editor-styles-wrapper .mbs-block-bestseller,
.editor-styles-wrapper .mbs-block-catalog,
.editor-styles-wrapper .mbs-block-author-directory,
.editor-styles-wrapper .mbs-block-series-directory,
.editor-styles-wrapper .mbs-block-book-club,
.editor-styles-wrapper .mbs-block-term-list,
.block-editor .mbs-block-single-book,
.block-editor .mbs-block-book-teaser,
.block-editor .mbs-block-author,
.block-editor .mbs-block-series,
.block-editor .mbs-block-universe,
.block-editor .mbs-block-genre,
.block-editor .mbs-block-collection,
.block-editor .mbs-block-reading-order,
.block-editor .mbs-block-endorsements,
.block-editor .mbs-block-timeline,
.block-editor .mbs-block-new-releases,
.block-editor .mbs-block-coming-soon,
.block-editor .mbs-block-related-books,
.block-editor .mbs-block-bestseller,
.block-editor .mbs-block-catalog,
.block-editor .mbs-block-author-directory,
.block-editor .mbs-block-series-directory,
.block-editor .mbs-block-book-club,
.block-editor .mbs-block-term-list {
    border: 2px dashed var(--mbs-accent);
    border-radius: 8px;
    padding: 16px;
    background: #fff;
}

/* ─── Universe / Series / Collection banner — editor preview constraint ──────── */
/* mbs-front-pro-*-archive.css is not loaded in the block editor.                 */
/* Mirror max-height + object-fit so the SSR preview is proportional to the grid. */
.editor-styles-wrapper .mbs-universe-banner-img,
.editor-styles-wrapper .mbs-series-banner-img,
.editor-styles-wrapper .mbs-collection-banner-img,
.block-editor .mbs-universe-banner-img,
.block-editor .mbs-series-banner-img,
.block-editor .mbs-collection-banner-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: cover;
    border-radius: 6px;
}

/* ─── Layout grid — general rule for all SSR block previews ─────────────────── */
/* mbs-front.css grid rules are CSS-nested inside .mbs-wrapper and are not        */
/* loaded in the block editor. Every block that uses MBS_Layout_Grid::render()    */
/* (Related Books, Universe, Series, Collection, New Releases, etc.) needs this   */
/* rule so the editor SSR preview shows a grid rather than a single column.       */
/* The more-specific .mbs-block-book-grid .mbs-layout-grid rule above wins for    */
/* the Book Grid block (higher specificity — no conflict).                         */
.editor-styles-wrapper .mbs-layout-grid,
.block-editor .mbs-layout-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1.5rem;
}
