/*
 * OnStorio Cover Display Sync v1.0.1
 * Presentation-only.
 * PHONE WEB is intentionally untouched.
 */

/* ---------------- PREVIEW ----------------
   JS marks the modal as FIT or FILL from the actual Write controls.
*/
#os-story-live-preview-cover {
    position: relative !important;
    overflow: hidden !important;
    background: transparent !important;
}

#os-story-live-preview-cover-image {
    display:block !important;
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    object-position:center center !important;
    transform:none !important;
}

/* Fit = show whole authored cover. */
#os-story-live-preview-cover.os-sync-fit #os-story-live-preview-cover-image {
    object-fit:contain !important;
}

/* Fill = proportionally enlarge and crop overflow. Never squeeze. */
#os-story-live-preview-cover.os-sync-fill #os-story-live-preview-cover-image {
    object-fit:cover !important;
}

/* ---------------- DESKTOP WEB FEED ----------------
   Preserve existing card geometry. Respect stored Fit/Fill classes.
*/
@media (min-width:681px) {
    body:not(.onstorio-app-mode) .os-cover-link.os-cover-raster {
        overflow:hidden !important;
    }

    body:not(.onstorio-app-mode) .os-cover-link.os-cover-raster.os-cover-fit-fit .os-selected-cover {
        width:100% !important;
        height:100% !important;
        object-fit:contain !important;
        object-position:center center !important;
        transform:none !important;
    }

    body:not(.onstorio-app-mode) .os-cover-link.os-cover-raster.os-cover-fit-fill .os-selected-cover {
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;
        object-position:center center !important;
        transform:none !important;
    }
}

/* ---------------- APP FEED ONLY ----------------
   Phone browser remains untouched.
*/
@media (max-width:680px) {
    body.onstorio-app-mode .os-cover-link.os-cover-raster {
        overflow:hidden !important;
        isolation:isolate !important;
        background:#111 !important;
    }

    body.onstorio-app-mode .os-cover-link.os-cover-raster.os-cover-fit-fit .os-selected-cover {
        width:100% !important;
        height:100% !important;
        object-fit:contain !important;
        object-position:center center !important;
        transform:none !important;
        background:transparent !important;
        position:relative !important;
        z-index:2 !important;
    }

    body.onstorio-app-mode .os-cover-link.os-cover-raster.os-cover-fit-fill .os-selected-cover {
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;
        object-position:center center !important;
        transform:none !important;
        background:transparent !important;
        position:relative !important;
        z-index:2 !important;
    }

    /* Existing background/shade stays, but make it so blurry that logos,
       titles and author text cannot be read or look duplicated.
       It should read only as soft colors from the cover. */
    body.onstorio-app-mode .os-cover-link.os-cover-raster::before {
        display:block !important;
        content:"" !important;
        position:absolute !important;
        inset:-70px !important;
        z-index:0 !important;
        background-image:var(--os-cover-bg) !important;
        background-size:cover !important;
        background-position:center center !important;
        background-repeat:no-repeat !important;
        filter:blur(58px) brightness(.68) saturate(1.08) !important;
        transform:scale(1.22) !important;
        opacity:.92 !important;
        pointer-events:none !important;
    }

    /* Add a soft wash above the extreme blur to remove any remaining
       recognizable lettering/shapes while preserving cover colors. */
    body.onstorio-app-mode .os-cover-link.os-cover-raster::after {
        content:"" !important;
        position:absolute !important;
        inset:0 !important;
        z-index:1 !important;
        background:rgba(0,0,0,.08) !important;
        pointer-events:none !important;
    }

    body.onstorio-app-mode .os-cover-link.os-cover-raster .os-mobile-tap,
    body.onstorio-app-mode .os-cover-link.os-cover-raster .os-mobile-tap-overlay {
        position:absolute !important;
        z-index:5 !important;
    }
}

/* No generic <=680px browser rule by design. */


/* v1.0.2 — Preview only: never paint artificial black bands around the cover. */
#os-story-live-preview-cover::before,
#os-story-live-preview-cover::after {
    background: transparent !important;
}