/**
 * Content Scheduler Pro — frontend styles.
 *
 * Fully responsive images, entrance animations with reduced-motion
 * support, and the admin preview bar.
 */

/* Wrapper ------------------------------------------------------------------- */
.csp-item {
        margin: 0;
}

/* Images: scale to the container, never overflow. ---------------------------- */
/* (Per-plan size caps are applied as inline styles by the renderer:            */
/*  max-width / max-height for "fit inside", exact width/height +               */
/*  object-fit: cover for "fill & crop". The rules below only add the           */
/*  responsive safety net.)                                                     */
.csp-item .csp-img,
.csp-item .csp-picture img,
.csp-item picture img {
        max-width: 100%;
        height: auto;
}
.csp-item .csp-picture,
.csp-item picture {
        display: inline-block;
        max-width: 100%;
}
.csp-item .csp-banner-link {
        display: inline-block;
        max-width: 100%;
}
.csp-logo-link img.custom-logo {
        max-width: 100%;
}

/* Text ------------------------------------------------------------------------ */
.csp-item .csp-text p:first-child {
        margin-top: 0;
}
.csp-item .csp-text p:last-child {
        margin-bottom: 0;
}
.csp-item .csp-text {
        overflow-wrap: break-word;
}

/* Entrance animations (scheduled content only; ~0.5s) --------------------------- */
.csp-anim-fade {
        animation: csp-fade 0.5s ease-out both;
}
.csp-anim-slide-up {
        animation: csp-slide-up 0.5s ease-out both;
}
.csp-anim-zoom {
        animation: csp-zoom 0.5s ease-out both;
}

@keyframes csp-fade {
        from {
                opacity: 0;
        }
        to {
                opacity: 1;
        }
}
@keyframes csp-slide-up {
        from {
                opacity: 0;
                transform: translateY( 16px );
        }
        to {
                opacity: 1;
                transform: none;
        }
}
@keyframes csp-zoom {
        from {
                opacity: 0;
                transform: scale( 0.96 );
        }
        to {
                opacity: 1;
                transform: scale( 1 );
        }
}

/* Respect visitor accessibility settings. */
@media ( prefers-reduced-motion: reduce ) {
        .csp-anim-fade,
        .csp-anim-slide-up,
        .csp-anim-zoom {
                animation: none;
        }
}

/* Admin preview bar (in flow at the top of the page, no layout breakage) --------- */
.csp-preview-bar {
        background: #1d2327;
        color: #fff;
        font: 13px/20px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        padding: 10px 16px;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
}
.csp-preview-bar .csp-preview-label strong {
        color: #72aee6;
}
.csp-preview-bar .csp-preview-label em {
        color: #a7aaad;
        font-style: normal;
}
.csp-preview-bar .csp-preview-frame img,
.csp-preview-bar .csp-preview-frame .csp-picture img,
.csp-preview-bar .csp-preview-frame picture img {
        max-height: 110px;
        max-width: 320px;
        width: auto;
        height: auto;
}
.csp-preview-bar .csp-preview-frame .csp-text {
        color: #dcdcde;
        font-size: 12px;
        max-width: 520px;
        max-height: 90px;
        overflow: hidden;
}
.csp-preview-bar .csp-preview-frame .csp-text p:first-child {
        margin-top: 0;
}
.csp-preview-bar .csp-preview-exit {
        margin-left: auto;
        background: #f0f0f1;
        color: #1d2327;
        border-radius: 3px;
        padding: 4px 12px;
        text-decoration: none;
        font-weight: 600;
        white-space: nowrap;
}
.csp-preview-bar .csp-preview-exit:hover,
.csp-preview-bar .csp-preview-exit:focus {
        background: #fff;
        color: #000;
}