/*
 * Bluejay's Corner shared note-card contract.
 *
 * This file is intentionally loaded AFTER both public.css and admin.css.
 * The public board/archive card and the WordPress Live Note Preview therefore
 * share one final media + CTA layout instead of maintaining separate fixes.
 */

/* The media source is never cropped by CSS. The wrapper follows the original
   attachment ratio supplied by the renderer/preview. A square upload therefore
   renders in a square aperture in both places. */
.ii-bjc2-note.context-board .ii-bjc2-note-image-wrap.frame-none,
.ii-bjc2-note.context-archive .ii-bjc2-note-image-wrap.frame-none,
.ii-bjc2-note-preview .ii-bjc2-note-image-wrap.frame-none{
    box-sizing:border-box!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:var(--bjc2-card-image-ratio,1)!important;
    padding:0!important;
    overflow:hidden!important;
    border-radius:12px!important;
    background:rgba(255,255,255,.90)!important;
    box-shadow:0 4px 10px rgba(42,59,72,.10)!important;
}

.ii-bjc2-note.context-board .ii-bjc2-note-image-wrap.frame-none .ii-bjc2-note-photo-window,
.ii-bjc2-note.context-archive .ii-bjc2-note-image-wrap.frame-none .ii-bjc2-note-photo-window,
.ii-bjc2-note-preview .ii-bjc2-note-image-wrap.frame-none .ii-bjc2-note-photo-window{
    position:absolute!important;
    inset:0!important;
    width:auto!important;
    height:auto!important;
    overflow:hidden!important;
    border-radius:inherit!important;
    background:transparent!important;
}

.ii-bjc2-note.context-board .ii-bjc2-note-photo-window > .ii-bjc2-note-image,
.ii-bjc2-note.context-archive .ii-bjc2-note-photo-window > .ii-bjc2-note-image,
.ii-bjc2-note-preview .ii-bjc2-note-photo-window > img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    object-fit:contain!important;
    object-position:center center!important;
    border-radius:inherit!important;
    background:transparent!important;
}

/* The divider/CTA is a real third row after the media row. This is the same
   DOM order used by both the public renderer and the wizard preview. */
.ii-bjc2-note.context-board .ii-bjc2-note-content-safe,
.ii-bjc2-note.context-archive .ii-bjc2-note-content-safe,
.ii-bjc2-note-preview .ii-bjc2-note-content-safe{
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr) auto!important;
    row-gap:8px!important;
}

.ii-bjc2-note.context-board .ii-bjc2-note-main,
.ii-bjc2-note.context-archive .ii-bjc2-note-main,
.ii-bjc2-note-preview .ii-bjc2-note-main{
    min-height:0!important;
    padding-bottom:0!important;
    overflow:hidden!important;
}

.ii-bjc2-note.context-board .ii-bjc2-note-link,
.ii-bjc2-note.context-archive .ii-bjc2-note-link,
.ii-bjc2-note-preview .ii-bjc2-note-link{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    transform:none!important;
    justify-self:center!important;
    align-self:end!important;
    margin:7px auto 1px!important;
}

@media(max-width:700px){
    .ii-bjc2-note.context-board .ii-bjc2-note-content-safe,
    .ii-bjc2-note.context-archive .ii-bjc2-note-content-safe,
    .ii-bjc2-note-preview .ii-bjc2-note-content-safe{
        row-gap:6px!important;
    }
}

/* ========================================================================== */
/* Bluejay's Corner 0.8.59 - preview-parity card contract                     */
/* ========================================================================== */
/*
 * Root fix: the WordPress Live Note Preview renders the standard artboard at
 * its authored 360x300 size, while the public six-column board was shrinking a
 * standard card to the width of two fluid grid tracks (342px in the supplied
 * staging capture). All of the card's internal measurements are authored in
 * intrinsic artboard pixels, so shrinking only the outer article causes the
 * title/copy/media to crowd even though the preview looks correct.
 *
 * Keep public cards at their authored intrinsic size and let the board place
 * those fixed artboards. The same final inner-card geometry is then applied to
 * the board and the Live Note Preview. Public CTA decoration remains public-
 * only, by design.
 */

/* Standard public board cards use the exact same authored artboard as preview. */
.ii-bjc2-board-page .ii-bjc2-note.context-board:not(.format-featured):not(.is-featured){
    box-sizing:border-box!important;
    width:360px!important;
    height:300px!important;
    min-width:360px!important;
    min-height:300px!important;
    max-width:360px!important;
    aspect-ratio:auto!important;
    justify-self:center!important;
}

/* Featured cards retain their authored wide artboard on desktop. */
.ii-bjc2-board-page .ii-bjc2-note.context-board.format-featured,
.ii-bjc2-board-page .ii-bjc2-note.context-board.is-featured{
    box-sizing:border-box!important;
    width:620px!important;
    height:340px!important;
    min-width:620px!important;
    min-height:340px!important;
    max-width:620px!important;
    aspect-ratio:auto!important;
    justify-self:center!important;
}

/* One canonical standard-card interior for public board + Live Note Preview. */
.ii-bjc2-board-page .ii-bjc2-note.context-board:not(.format-featured):not(.is-featured) .ii-bjc2-note-content-safe,
.ii-bjc2-wizard-v2 .ii-bjc2-note-preview:not(.format-featured):not(.is-featured) .ii-bjc2-note-content-safe{
    top:52px!important;
    right:16px!important;
    bottom:22px!important;
    left:20px!important;
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr) auto!important;
    row-gap:8px!important;
    overflow:visible!important;
}

.ii-bjc2-board-page .ii-bjc2-note.context-board:not(.format-featured):not(.is-featured) .ii-bjc2-note-main,
.ii-bjc2-wizard-v2 .ii-bjc2-note-preview:not(.format-featured):not(.is-featured) .ii-bjc2-note-main{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 133px!important;
    align-items:center!important;
    gap:7px!important;
    min-width:0!important;
    min-height:0!important;
    padding-bottom:0!important;
    overflow:hidden!important;
}

.ii-bjc2-board-page .ii-bjc2-note.context-board:not(.format-featured):not(.is-featured):not(.has-image) .ii-bjc2-note-main,
.ii-bjc2-wizard-v2 .ii-bjc2-note-preview:not(.format-featured):not(.is-featured):not(.has-image) .ii-bjc2-note-main{
    grid-template-columns:minmax(0,1fr)!important;
}

.ii-bjc2-board-page .ii-bjc2-note.context-board:not(.format-featured):not(.is-featured) .ii-bjc2-note-copy,
.ii-bjc2-wizard-v2 .ii-bjc2-note-preview:not(.format-featured):not(.is-featured) .ii-bjc2-note-copy{
    display:flex!important;
    min-width:0!important;
    min-height:0!important;
    padding-right:1px!important;
    flex-direction:column!important;
    justify-content:center!important;
    overflow:hidden!important;
}

/* Match the preview's clean card typography instead of applying a separate
   public-only display face that changes wrapping and line height. */
.ii-bjc2-board-page .ii-bjc2-note.context-board:not(.format-featured):not(.is-featured) .ii-bjc2-note-title,
.ii-bjc2-wizard-v2 .ii-bjc2-note-preview:not(.format-featured):not(.is-featured) .ii-bjc2-note-title{
    margin:0 0 8px!important;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
    font-size:21px!important;
    font-weight:600!important;
    line-height:1.03!important;
    letter-spacing:0!important;
    text-transform:none!important;
    -webkit-line-clamp:2!important;
}

.ii-bjc2-board-page .ii-bjc2-note.context-board:not(.format-featured):not(.is-featured) .ii-bjc2-note-excerpt,
.ii-bjc2-wizard-v2 .ii-bjc2-note-preview:not(.format-featured):not(.is-featured) .ii-bjc2-note-excerpt{
    margin:0!important;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
    font-size:12px!important;
    font-weight:400!important;
    line-height:1.3!important;
    text-align:center!important;
    -webkit-line-clamp:4!important;
}

/* Exact preview media aperture: 133px square, flush image window, no hidden
   5px public-only inset. A square source therefore fills the same square in
   both admin preview and the public board. */
.ii-bjc2-board-page .ii-bjc2-note.context-board:not(.format-featured):not(.is-featured) .ii-bjc2-note-image-wrap.frame-none,
.ii-bjc2-wizard-v2 .ii-bjc2-note-preview:not(.format-featured):not(.is-featured) .ii-bjc2-note-image-wrap.frame-none{
    box-sizing:border-box!important;
    width:133px!important;
    height:133px!important;
    min-width:133px!important;
    min-height:133px!important;
    max-width:133px!important;
    max-height:133px!important;
    aspect-ratio:1/1!important;
    padding:0!important;
    transform:none!important;
    overflow:hidden!important;
    border-radius:12px!important;
    background:rgba(255,255,255,.90)!important;
    box-shadow:0 4px 10px rgba(42,59,72,.10)!important;
}

.ii-bjc2-board-page .ii-bjc2-note.context-board:not(.format-featured):not(.is-featured) .ii-bjc2-note-image-wrap.frame-none .ii-bjc2-note-photo-window,
.ii-bjc2-wizard-v2 .ii-bjc2-note-preview:not(.format-featured):not(.is-featured) .ii-bjc2-note-image-wrap.frame-none .ii-bjc2-note-photo-window{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    min-height:0!important;
    border-radius:inherit!important;
    overflow:hidden!important;
    background:transparent!important;
}

.ii-bjc2-board-page .ii-bjc2-note.context-board:not(.format-featured):not(.is-featured) .ii-bjc2-note-image-wrap.frame-none .ii-bjc2-note-image,
.ii-bjc2-wizard-v2 .ii-bjc2-note-preview:not(.format-featured):not(.is-featured) .ii-bjc2-note-image-wrap.frame-none img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    object-fit:contain!important;
    object-position:center center!important;
    border-radius:inherit!important;
    background:transparent!important;
}

/* The public CTA keeps the existing orange locked-note button. Only its layout
   lane is standardized: divider below the complete text/media row, then button. */
.ii-bjc2-board-page .ii-bjc2-note.context-board:not(.format-featured):not(.is-featured) .ii-bjc2-note-link{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    justify-self:center!important;
    align-self:end!important;
    width:auto!important;
    max-width:calc(100% - 28px)!important;
    margin:7px auto 1px!important;
    transform:none!important;
}
.ii-bjc2-board-page .ii-bjc2-note.context-board:not(.format-featured):not(.is-featured) .ii-bjc2-note-link::before{
    top:-10px!important;
    width:318px!important;
    max-width:318px!important;
}
.ii-bjc2-board-page .ii-bjc2-note.context-board:not(.format-featured):not(.is-featured) a.ii-bjc2-note-link:hover,
.ii-bjc2-board-page .ii-bjc2-note.context-board:not(.format-featured):not(.is-featured) a.ii-bjc2-note-link:focus-visible{
    transform:translateY(-2px) scale(1.025)!important;
}
.ii-bjc2-board-page .ii-bjc2-note.context-board:not(.format-featured):not(.is-featured) a.ii-bjc2-note-link:active{
    transform:translateY(1px) scale(.99)!important;
}

/* On phones, featured cards intentionally use the standard visual composition.
   Keep the authored 360x300 artboard when it fits; only shrink below 360px when
   the physical viewport leaves no alternative. */
@media(max-width:700px){
    .ii-bjc2-board-page .ii-bjc2-note.context-board,
    .ii-bjc2-board-page .ii-bjc2-note.context-board.format-featured,
    .ii-bjc2-board-page .ii-bjc2-note.context-board.is-featured{
        width:min(360px,100%)!important;
        height:auto!important;
        min-width:0!important;
        min-height:0!important;
        max-width:360px!important;
        aspect-ratio:6/5!important;
        justify-self:center!important;
    }
}