/* Mediazip – CFF Video Top Stories 1.5.0 */

#cff.mz-cff-topstories,
.cff.mz-cff-topstories {
    --mz-video-accent: #2f80ed;
    --mz-video-radius: 16px;
    --mz-video-bg: #111315;
    --mz-video-surface: #171a1e;
    --mz-video-text: #f5f7fa;
    --mz-video-muted: #9aa1aa;
    --mz-video-gap: clamp(18px, 2vw, 28px);

    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: clamp(18px, 2.3vw, 32px) !important;
    background-color: var(--mz-video-bg) !important;
    background-image: radial-gradient(circle at 0 0, color-mix(in srgb, var(--mz-video-accent) 9%, transparent), transparent 35%) !important;
    border: 1px solid rgba(255,255,255,.055) !important;
    border-radius: 22px !important;
    color: var(--mz-video-text) !important;
    overflow: visible !important;
}

/* Header */
.mz-cff-topstories .mz-cff-module-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin: 0 0 clamp(20px, 2.2vw, 30px);
    padding: 0 0 16px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.mz-cff-topstories .mz-cff-module-head__text {
    min-width: 0;
}

.mz-cff-topstories .mz-cff-module-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 5px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .15em;
    color: var(--mz-video-accent);
}

.mz-cff-topstories .mz-cff-module-kicker::before {
    content: "";
    width: 18px;
    height: 2px;
    border-radius: 99px;
    background: currentColor;
}

.mz-cff-topstories .mz-cff-module-title {
    float: none !important;
    width: auto !important;
    clear: none !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--mz-video-text) !important;
    font-size: clamp(25px, 2.4vw, 36px) !important;
    font-weight: 760 !important;
    line-height: 1.08 !important;
    letter-spacing: -.025em !important;
}

.mz-cff-topstories .mz-cff-module-subtitle {
    float: none !important;
    width: auto !important;
    clear: none !important;
    margin: 7px 0 0 !important;
    padding: 0 !important;
    color: var(--mz-video-muted) !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}

.mz-cff-topstories .mz-cff-module-all {
    flex: 0 0 auto;
    color: #d9dde3 !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.18) !important;
    transition: color .2s ease, border-color .2s ease;
}

.mz-cff-topstories .mz-cff-module-all:hover {
    color: #fff !important;
    border-color: var(--mz-video-accent) !important;
    text-decoration: none !important;
}

.mz-cff-topstories.mz-cff-hide-original-header .cff-header,
.mz-cff-topstories.mz-cff-hide-original-header .cff-visual-header {
    display: none !important;
}

/* Kill CFF masonry/column geometry only inside this module */
#cff.mz-cff-topstories .cff-posts-wrap,
#cff.mz-cff-topstories .cff-masonry-posts,
.cff.mz-cff-topstories .cff-posts-wrap,
.cff.mz-cff-topstories .cff-masonry-posts {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    align-items: start !important;
    gap: var(--mz-video-gap) !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    column-count: initial !important;
    column-gap: normal !important;
    transform: none !important;
    box-sizing: border-box !important;
}

#cff.mz-cff-topstories .cff-posts-wrap > .cff-item,
#cff.mz-cff-topstories .cff-posts-wrap > .cff-album-item,
.cff.mz-cff-topstories .cff-posts-wrap > .cff-item,
.cff.mz-cff-topstories .cff-posts-wrap > .cff-album-item {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    float: none !important;
    clear: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    break-inside: auto !important;
    -webkit-column-break-inside: auto !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}


.mz-cff-topstories .cff-posts-wrap > .mz-cff-hidden {
    display: none !important;
}

/* Remove social chrome from the editorial grid. The lightbox is untouched. */
.mz-cff-topstories .cff-posts-wrap > .cff-item > .cff-author,
.mz-cff-topstories .cff-posts-wrap > .cff-item > .cff-date,
.mz-cff-topstories .cff-posts-wrap > .cff-item > .cff-meta-wrap,
.mz-cff-topstories .cff-posts-wrap > .cff-item > .cff-post-links,
.mz-cff-topstories .cff-posts-wrap > .cff-item > .cff-comments-box,
.mz-cff-topstories .cff-posts-wrap > .cff-item > .cff-view-comments,
.mz-cff-topstories .cff-posts-wrap > .cff-item .cff-expand,
.mz-cff-topstories .cff-posts-wrap > .cff-album-item .cff-album-count {
    display: none !important;
}

/* Standard media card */
.mz-cff-topstories .cff-media-wrap,
.mz-cff-topstories .cff-html5-video,
.mz-cff-topstories .cff-iframe-wrap,
.mz-cff-topstories .cff-photo,
.mz-cff-topstories .cff-photos,
.mz-cff-topstories .cff-vidLink,
.mz-cff-topstories .cff-album-cover {
    box-sizing: border-box !important;
    max-width: 100% !important;
}

.mz-cff-topstories .cff-posts-wrap > .cff-item:not(.mz-cff-lead) .cff-html5-video,
.mz-cff-topstories .cff-posts-wrap > .cff-item:not(.mz-cff-lead) .cff-iframe-wrap,
.mz-cff-topstories .cff-posts-wrap > .cff-item:not(.mz-cff-lead) .cff-photo,
.mz-cff-topstories .cff-posts-wrap > .cff-item:not(.mz-cff-lead) .cff-photos,
.mz-cff-topstories .cff-posts-wrap > .cff-item:not(.mz-cff-lead) .cff-vidLink,
.mz-cff-topstories .cff-posts-wrap > .cff-album-item:not(.mz-cff-lead) .cff-album-cover {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 9 / 16 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: var(--mz-video-radius) !important;
    background: #090a0b !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.035) inset;
    transition: transform .25s ease, box-shadow .25s ease;
}

/* Top four are a little less tall so the hero and 2x2 block balance visually. */
.mz-cff-topstories .cff-posts-wrap > .mz-cff-featured .cff-html5-video,
.mz-cff-topstories .cff-posts-wrap > .mz-cff-featured .cff-iframe-wrap,
.mz-cff-topstories .cff-posts-wrap > .mz-cff-featured .cff-photo,
.mz-cff-topstories .cff-posts-wrap > .mz-cff-featured .cff-photos,
.mz-cff-topstories .cff-posts-wrap > .mz-cff-featured .cff-vidLink,
.mz-cff-topstories .cff-posts-wrap > .mz-cff-featured .cff-album-cover {
    aspect-ratio: 4 / 5 !important;
}

.mz-cff-topstories .cff-posts-wrap img.cff-feed-image,
.mz-cff-topstories .cff-posts-wrap img.cff-poster,
.mz-cff-topstories .cff-posts-wrap .cff-album-cover img,
.mz-cff-topstories .cff-posts-wrap .cff-photo img,
.mz-cff-topstories .cff-posts-wrap .cff-html5-video > img,
.mz-cff-topstories .cff-posts-wrap .cff-iframe-img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mz-cff-topstories .cff-posts-wrap > .cff-item:not(.mz-cff-lead):hover .cff-html5-video,
.mz-cff-topstories .cff-posts-wrap > .cff-item:not(.mz-cff-lead):hover .cff-photo,
.mz-cff-topstories .cff-posts-wrap > .cff-item:not(.mz-cff-lead):hover .cff-vidLink,
.mz-cff-topstories .cff-posts-wrap > .cff-album-item:not(.mz-cff-lead):hover .cff-album-cover {
    transform: translateY(-2px) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.22) !important;
}


/* Premium hover overlay for cards */
.mz-cff-topstories .cff-posts-wrap > .cff-item:not(.mz-cff-lead) .mz-cff-hover-panel,
.mz-cff-topstories .cff-posts-wrap > .cff-album-item:not(.mz-cff-lead) .mz-cff-hover-panel {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
}

.mz-cff-topstories .cff-posts-wrap > .cff-item:not(.mz-cff-lead) .mz-cff-hover-panel::before,
.mz-cff-topstories .cff-posts-wrap > .cff-album-item:not(.mz-cff-lead) .mz-cff-hover-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--mz-video-radius);
    background: rgba(12,14,16,.50);
    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);
}

.mz-cff-topstories .cff-posts-wrap > .cff-item:not(.mz-cff-lead) .mz-cff-hover-panel__inner,
.mz-cff-topstories .cff-posts-wrap > .cff-album-item:not(.mz-cff-lead) .mz-cff-hover-panel__inner {
    position: relative;
    z-index: 1;
    max-width: 88%;
    padding: 14px 14px 13px;
    border-radius: 14px;
    background: rgba(8,10,12,.74);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 12px 32px rgba(0,0,0,.22);
    text-align: center;
}

.mz-cff-topstories .cff-posts-wrap > .cff-item:not(.mz-cff-lead) .mz-cff-hover-panel__kicker,
.mz-cff-topstories .cff-posts-wrap > .cff-album-item:not(.mz-cff-lead) .mz-cff-hover-panel__kicker {
    display: inline-block;
    margin: 0 0 8px;
    color: var(--mz-video-accent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.mz-cff-topstories .cff-posts-wrap > .cff-item:not(.mz-cff-lead) .mz-cff-hover-panel__title,
.mz-cff-topstories .cff-posts-wrap > .cff-album-item:not(.mz-cff-lead) .mz-cff-hover-panel__title {
    color: #fff;
    font-size: 14px;
    font-weight: 680;
    line-height: 1.34;
    letter-spacing: -.01em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

@media (hover: hover) and (pointer: fine) {
    .mz-cff-topstories .cff-posts-wrap > .cff-item:not(.mz-cff-lead):hover .cff-html5-video,
    .mz-cff-topstories .cff-posts-wrap > .cff-item:not(.mz-cff-lead):hover .cff-photo,
    .mz-cff-topstories .cff-posts-wrap > .cff-item:not(.mz-cff-lead):hover .cff-vidLink,
    .mz-cff-topstories .cff-posts-wrap > .cff-album-item:not(.mz-cff-lead):hover .cff-album-cover {
        filter: grayscale(.22) brightness(.72) saturate(.92);
    }

    .mz-cff-topstories .cff-posts-wrap > .cff-item:not(.mz-cff-lead):hover .mz-cff-hover-panel,
    .mz-cff-topstories .cff-posts-wrap > .cff-album-item:not(.mz-cff-lead):hover .mz-cff-hover-panel {
        opacity: 1;
    }
}

@media (hover: none), (pointer: coarse) {
    .mz-cff-topstories .cff-posts-wrap > .cff-item:not(.mz-cff-lead) .mz-cff-hover-panel,
    .mz-cff-topstories .cff-posts-wrap > .cff-album-item:not(.mz-cff-lead) .mz-cff-hover-panel {
        display: none;
    }
}

/* Clean titles */
.mz-cff-topstories .cff-posts-wrap > .cff-item:not(.mz-cff-lead) .cff-post-text,
.mz-cff-topstories .cff-posts-wrap > .cff-album-item:not(.mz-cff-lead) .cff-album-info {
    float: none !important;
    clear: none !important;
    width: auto !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    margin: 12px 2px 0 !important;
    padding: 0 !important;
    color: #dfe5eb !important;
    font-size: 13.5px !important;
    font-weight: 560 !important;
    line-height: 1.45 !important;
    letter-spacing: -.008em !important;
    -webkit-line-clamp: 3 !important;
    max-height: 4.35em !important;
}

.mz-cff-topstories .cff-posts-wrap .cff-post-text *,
.mz-cff-topstories .cff-posts-wrap .cff-post-text a,
.mz-cff-topstories .cff-posts-wrap .cff-text,
.mz-cff-topstories .cff-posts-wrap .cff-album-info,
.mz-cff-topstories .cff-posts-wrap .cff-album-info a {
    color: inherit !important;
    font: inherit !important;
    text-decoration: none !important;
}

/* HERO: spans 2 columns / 2 rows on desktop */
.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead {
    grid-column: span 2 !important;
    grid-row: span 2 !important;
    align-self: stretch !important;
    min-height: 100% !important;
    overflow: hidden !important;
    border-radius: calc(var(--mz-video-radius) + 2px) !important;
    background: #090a0b !important;
}

.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent 38%, rgba(0,0,0,.12) 55%, rgba(0,0,0,.86) 100%);
}

.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-media-wrap,
.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-html5-video,
.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-iframe-wrap,
.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-photo,
.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-photos,
.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-vidLink,
.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-album-cover {
    position: absolute !important;
    z-index: 1 !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: inherit !important;
    overflow: hidden !important;
    background: #090a0b !important;
}

.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-post-text,
.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-album-info {
    position: absolute !important;
    z-index: 4 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    float: none !important;
    clear: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 72px clamp(16px, 2vw, 26px) clamp(18px, 2vw, 26px) !important;
    color: #fff !important;
    font-size: clamp(19px, 1.8vw, 27px) !important;
    font-weight: 720 !important;
    line-height: 1.12 !important;
    letter-spacing: -.022em !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* Play button: compact and editorial, but keep original click behavior. */
.mz-cff-topstories .cff-posts-wrap svg.cff-playbtn {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    fill: #fff !important;
}

.mz-cff-topstories .cff-posts-wrap .cff-html5-play,
.mz-cff-topstories .cff-posts-wrap .cff-photo-hover {
    z-index: 5 !important;
}

.mz-cff-topstories .cff-posts-wrap .cff-html5-play::before {
    width: 48px !important;
    height: 48px !important;
    background: rgba(10,12,14,.62) !important;
    border: 1px solid rgba(255,255,255,.65) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 8px 28px rgba(0,0,0,.25);
}

.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-html5-play::before {
    width: 62px !important;
    height: 62px !important;
}

/* Lead label inserted with a real element from JS would be ideal; this chip is created via an attribute. */
.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead > .mz-cff-lead-chip {
    position: absolute;
    z-index: 6;
    top: 16px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    color: #fff;
    background: var(--mz-video-accent);
    background: color-mix(in srgb, var(--mz-video-accent) 78%, #000);
    box-shadow: 0 6px 20px rgba(0,0,0,.2);
    font-size: 9px;
    font-weight: 800;
    line-height: 26px;
    letter-spacing: .08em;
    text-transform: uppercase;
    pointer-events: none;
}

/* Native CFF button stays functional for JS, but is visually replaced. */
.mz-cff-topstories .cff-load-more.mz-cff-native-load {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mz-cff-topstories .mz-cff-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 170px;
    min-height: 44px;
    margin: 30px auto 0 !important;
    padding: 0 19px !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    border-radius: 999px !important;
    outline: 0 !important;
    background: rgba(255,255,255,.045) !important;
    color: #f1f3f5 !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.mz-cff-topstories .mz-cff-more:hover {
    background: rgba(255,255,255,.08) !important;
    border-color: rgba(255,255,255,.24) !important;
    transform: translateY(-1px);
}

.mz-cff-topstories .mz-cff-more:disabled {
    opacity: .55;
    cursor: wait;
    transform: none;
}

.mz-cff-topstories .mz-cff-more__arrow {
    color: var(--mz-video-accent);
    font-size: 16px;
}

.mz-cff-topstories .cff-no-more-posts {
    display: none !important;
}

/* Tablet: hero full width, then two columns. */
@media (max-width: 1099px) {
    #cff.mz-cff-topstories .cff-posts-wrap,
    #cff.mz-cff-topstories .cff-masonry-posts,
    .cff.mz-cff-topstories .cff-posts-wrap,
    .cff.mz-cff-topstories .cff-masonry-posts {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .mz-cff-topstories .cff-posts-wrap > .mz-cff-lead {
        grid-column: span 2 !important;
        grid-row: auto !important;
        aspect-ratio: 16 / 9 !important;
        min-height: 0 !important;
    }

    .mz-cff-topstories .cff-posts-wrap > .mz-cff-featured .cff-html5-video,
    .mz-cff-topstories .cff-posts-wrap > .mz-cff-featured .cff-iframe-wrap,
    .mz-cff-topstories .cff-posts-wrap > .mz-cff-featured .cff-photo,
    .mz-cff-topstories .cff-posts-wrap > .mz-cff-featured .cff-photos,
    .mz-cff-topstories .cff-posts-wrap > .mz-cff-featured .cff-vidLink,
    .mz-cff-topstories .cff-posts-wrap > .mz-cff-featured .cff-album-cover {
        aspect-ratio: 9 / 16 !important;
    }
}

/* Mobile: full-width lead, 2 x 2 featured, rest 2 columns. */
@media (max-width: 640px) {
    #cff.mz-cff-topstories,
    .cff.mz-cff-topstories {
        padding: 16px 12px 20px !important;
        border-radius: 16px !important;
        --mz-video-gap: 14px 10px;
        --mz-video-radius: 14px;
    }

    .mz-cff-topstories .mz-cff-module-head {
        align-items: flex-start;
        margin-bottom: 17px;
        padding-bottom: 12px;
    }

    .mz-cff-topstories .mz-cff-module-kicker {
        font-size: 9px;
    }

    .mz-cff-topstories .mz-cff-module-title {
        font-size: 26px !important;
    }

    .mz-cff-topstories .mz-cff-module-subtitle {
        margin-top: 5px !important;
        font-size: 11px !important;
        max-width: 250px;
    }

    .mz-cff-topstories .mz-cff-module-all {
        font-size: 11px !important;
        padding-top: 6px !important;
    }

    .mz-cff-topstories .cff-posts-wrap > .mz-cff-lead {
        aspect-ratio: 4 / 5 !important;
        border-radius: calc(var(--mz-video-radius) + 1px) !important;
    }

    .mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-post-text,
    .mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-album-info {
        padding: 58px 15px 16px !important;
        font-size: 20px !important;
        line-height: 1.14 !important;
        -webkit-line-clamp: 3 !important;
    }

    .mz-cff-topstories .cff-posts-wrap > .cff-item:not(.mz-cff-lead) .cff-post-text,
    .mz-cff-topstories .cff-posts-wrap > .cff-album-item:not(.mz-cff-lead) .cff-album-info {
        margin-top: 9px !important;
        font-size: 12px !important;
        line-height: 1.38 !important;
        max-height: 4.14em !important;
    }

    .mz-cff-topstories .cff-posts-wrap .cff-html5-play::before {
        width: 42px !important;
        height: 42px !important;
    }

    .mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-html5-play::before {
        width: 56px !important;
        height: 56px !important;
    }

    .mz-cff-topstories .mz-cff-more {
        margin-top: 24px !important;
        min-height: 42px;
        min-width: 160px;
        font-size: 12px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mz-cff-topstories *,
    .mz-cff-topstories *::before,
    .mz-cff-topstories *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}

/* =========================================================
   1.2.0 — exact support for CFF album/video feed markup
   The live miejska.pl feed uses .cff-album-item, not .cff-item.
   ========================================================= */

#cff.mz-cff-topstories .cff-posts-wrap,
.cff.mz-cff-topstories .cff-posts-wrap {
    gap: 34px 28px !important;
}

#cff.mz-cff-topstories .cff-posts-wrap > .cff-album-item,
.cff.mz-cff-topstories .cff-posts-wrap > .cff-album-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 0 2px !important;
}

/* Hide the tiny CFF-generated caption and replace it with our editorial caption. */
.mz-cff-topstories .cff-posts-wrap > .cff-album-item > .cff-album-info,
.mz-cff-topstories .cff-posts-wrap > .cff-album-item > p:not(.mz-cff-card-caption) {
    display: none !important;
}

.mz-cff-topstories .cff-posts-wrap > .cff-album-item:not(.mz-cff-lead) > .cff-album-cover,
.mz-cff-topstories .cff-posts-wrap > .cff-album-item:not(.mz-cff-lead) > .cff-html5-video,
.mz-cff-topstories .cff-posts-wrap > .cff-album-item:not(.mz-cff-lead) > .cff-vidLink {
    position: relative !important;
    isolation: isolate;
    transform: none !important;
    box-shadow: none !important;
}

.mz-cff-topstories .cff-posts-wrap > .cff-album-item:not(.mz-cff-lead) > .cff-album-cover img,
.mz-cff-topstories .cff-posts-wrap > .cff-album-item:not(.mz-cff-lead) > .cff-html5-video img,
.mz-cff-topstories .cff-posts-wrap > .cff-album-item:not(.mz-cff-lead) > .cff-vidLink img {
    transition: transform .28s ease, filter .28s ease, opacity .28s ease !important;
}

/* Caption visible below each reel. */
.mz-cff-topstories .mz-cff-card-caption {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    min-height: 2.9em;
    margin: 12px 2px 0 !important;
    color: #e8edf2 !important;
    font-size: 14.5px !important;
    font-weight: 620 !important;
    line-height: 1.45 !important;
    letter-spacing: -.012em !important;
}

/* The old caption elements are no longer needed once our generated caption exists. */
.mz-cff-topstories .cff-album-item:not(.mz-cff-lead) > .cff-post-text,
.mz-cff-topstories .cff-album-item:not(.mz-cff-lead) > .cff-album-info {
    display: none !important;
}

/* Overlay lives inside the media cover, so it always matches the reel rectangle. */
.mz-cff-topstories .cff-album-item:not(.mz-cff-lead) .cff-album-cover > .mz-cff-hover-panel,
.mz-cff-topstories .cff-album-item:not(.mz-cff-lead) .cff-html5-video > .mz-cff-hover-panel,
.mz-cff-topstories .cff-album-item:not(.mz-cff-lead) .cff-vidLink > .mz-cff-hover-panel {
    position: absolute !important;
    inset: 0 !important;
    z-index: 20 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 18px !important;
    border-radius: inherit !important;
    background: rgba(10,12,14,.56) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .24s ease !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.mz-cff-topstories .cff-album-item:not(.mz-cff-lead) .mz-cff-hover-panel::before {
    display: none !important;
}

.mz-cff-topstories .cff-album-item:not(.mz-cff-lead) .mz-cff-hover-panel__inner {
    position: relative !important;
    width: min(92%, 310px) !important;
    max-width: 92% !important;
    padding: 18px 17px 17px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 15px !important;
    background: rgba(8,10,12,.78) !important;
    box-shadow: 0 16px 38px rgba(0,0,0,.28) !important;
    text-align: center !important;
    transform: translateY(6px) !important;
    transition: transform .24s ease !important;
}

.mz-cff-topstories .cff-album-item:not(.mz-cff-lead) .mz-cff-hover-panel__kicker {
    display: block !important;
    margin: 0 0 9px !important;
    color: var(--mz-video-accent) !important;
    font-size: 9px !important;
    font-weight: 820 !important;
    line-height: 1.2 !important;
    letter-spacing: .13em !important;
    text-transform: uppercase !important;
}

.mz-cff-topstories .cff-album-item:not(.mz-cff-lead) .mz-cff-hover-panel__title {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 5 !important;
    overflow: hidden !important;
    color: #fff !important;
    font-size: clamp(13px, 1.05vw, 16px) !important;
    font-weight: 700 !important;
    line-height: 1.36 !important;
    letter-spacing: -.015em !important;
}

@media (hover: hover) and (pointer: fine) {
    .mz-cff-topstories .cff-album-item:not(.mz-cff-lead):hover .cff-album-cover > img,
    .mz-cff-topstories .cff-album-item:not(.mz-cff-lead):hover .cff-html5-video > img,
    .mz-cff-topstories .cff-album-item:not(.mz-cff-lead):hover .cff-vidLink > img {
        transform: scale(1.025) !important;
        filter: grayscale(.28) brightness(.62) saturate(.82) !important;
    }

    .mz-cff-topstories .cff-album-item:not(.mz-cff-lead):hover .mz-cff-hover-panel {
        opacity: 1 !important;
    }

    .mz-cff-topstories .cff-album-item:not(.mz-cff-lead):hover .mz-cff-hover-panel__inner {
        transform: translateY(0) !important;
    }
}

/* Optional lead caption generated only when usable feed text is available. */
.mz-cff-topstories .mz-cff-lead-copy {
    position: absolute !important;
    z-index: 7 !important;
    left: 20px !important;
    right: 20px !important;
    bottom: 20px !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 16px 17px !important;
    border-radius: 15px !important;
    background: rgba(8,10,12,.72) !important;
    border: 1px solid rgba(255,255,255,.11) !important;
    color: #fff !important;
    font-size: clamp(18px, 1.55vw, 25px) !important;
    font-weight: 730 !important;
    line-height: 1.18 !important;
    letter-spacing: -.02em !important;
    pointer-events: none !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

@media (max-width: 640px) {
    #cff.mz-cff-topstories .cff-posts-wrap,
    .cff.mz-cff-topstories .cff-posts-wrap {
        gap: 24px 14px !important;
    }

    .mz-cff-topstories .mz-cff-card-caption {
        min-height: 2.8em;
        margin-top: 9px !important;
        font-size: 12.5px !important;
        line-height: 1.4 !important;
    }

    .mz-cff-topstories .mz-cff-hover-panel {
        display: none !important;
    }

    .mz-cff-topstories .mz-cff-lead-copy {
        left: 13px !important;
        right: 13px !important;
        bottom: 13px !important;
        padding: 13px 14px !important;
        border-radius: 12px !important;
        font-size: 18px !important;
    }
}

/* =========================================================
   1.3.0 — full hover copy + Polish-safe typography
   ========================================================= */

/* Use a Polish-safe editorial stack. Open Sans is used when the site already
   provides it; otherwise Segoe UI / Arial provide complete Polish glyphs. */
.mz-cff-topstories .mz-cff-card-caption,
.mz-cff-topstories .mz-cff-hover-panel,
.mz-cff-topstories .mz-cff-hover-panel__inner,
.mz-cff-topstories .mz-cff-hover-panel__title,
.mz-cff-topstories .mz-cff-lead-copy {
    font-family: "Open Sans", "Segoe UI", Arial, sans-serif !important;
}

/* No MIEJSKA.PL / WIDEO label inside the hover card. */
.mz-cff-topstories .mz-cff-hover-panel__kicker {
    display: none !important;
}

/* The hover copy is never line-clamped. Full text remains in the DOM and is
   readable; exceptionally long descriptions can scroll inside the reel. */
.mz-cff-topstories .cff-album-item:not(.mz-cff-lead) .mz-cff-hover-panel {
    padding: 16px !important;
    overflow: hidden !important;
}

.mz-cff-topstories .cff-album-item:not(.mz-cff-lead) .mz-cff-hover-panel__inner {
    width: min(94%, 360px) !important;
    max-width: 94% !important;
    max-height: calc(100% - 22px) !important;
    overflow-y: auto !important;
    padding: 17px 16px !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.32) transparent;
}

.mz-cff-topstories .cff-album-item:not(.mz-cff-lead) .mz-cff-hover-panel__inner::-webkit-scrollbar {
    width: 4px;
}

.mz-cff-topstories .cff-album-item:not(.mz-cff-lead) .mz-cff-hover-panel__inner::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.32);
    border-radius: 999px;
}

.mz-cff-topstories .cff-album-item:not(.mz-cff-lead) .mz-cff-hover-panel__title {
    display: block !important;
    -webkit-box-orient: initial !important;
    -webkit-line-clamp: initial !important;
    line-clamp: initial !important;
    max-height: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    color: #fff !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    line-height: 1.48 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

/* Gradually reduce the font only for genuinely long Facebook descriptions.
   Nothing is truncated. */
.mz-cff-topstories .mz-cff-hover-panel__title.mz-copy-short {
    font-size: 16px !important;
    line-height: 1.45 !important;
}

.mz-cff-topstories .mz-cff-hover-panel__title.mz-copy-medium {
    font-size: 14.5px !important;
}

.mz-cff-topstories .mz-cff-hover-panel__title.mz-copy-long {
    font-size: 13px !important;
    line-height: 1.42 !important;
}

.mz-cff-topstories .mz-cff-hover-panel__title.mz-copy-xlong {
    font-size: 12px !important;
    line-height: 1.4 !important;
}

/* Desktop: the description lives on hover, so the duplicated caption below
   the reel disappears and the grid becomes lighter. */
@media (hover: hover) and (pointer: fine) and (min-width: 769px) {
    .mz-cff-topstories .cff-album-item:not(.mz-cff-lead) > .mz-cff-card-caption {
        display: none !important;
    }

    #cff.mz-cff-topstories .cff-posts-wrap,
    .cff.mz-cff-topstories .cff-posts-wrap {
        row-gap: 30px !important;
        column-gap: 24px !important;
    }
}

/* Touch devices have no reliable hover, so keep the caption below the reel. */
@media (hover: none), (pointer: coarse), (max-width: 768px) {
    .mz-cff-topstories .cff-album-item:not(.mz-cff-lead) > .mz-cff-card-caption {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 3 !important;
        overflow: hidden !important;
        font-family: "Open Sans", "Segoe UI", Arial, sans-serif !important;
    }
}


/* =========================================================
   1.4.1 — lead copy: always use our truncated editorial copy
   ========================================================= */
/* CFF can place its own album/video text in slightly different nesting
   depending on the feed response. Suppress every native text block inside
   the lead card so it can never cover the hero with the full description. */
.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-album-info,
.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-post-text,
.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-text,
.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead > p:not(.mz-cff-lead-copy),
.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-album-cover .cff-album-info,
.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-album-cover .cff-post-text {
    display: none !important;
    visibility: hidden !important;
}

/* Our generated copy is the only text overlay on the lead card. */
.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead > .mz-cff-lead-copy {
    display: -webkit-box !important;
    visibility: visible !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-height: calc(3 * 1.18em + 32px) !important;
}


/* =========================================================
   1.5.0 — premium editorial module header + 3-row grid rhythm
   ========================================================= */
.mz-cff-topstories .mz-cff-module-head {
    position: relative !important;
    isolation: isolate;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 220px;
    gap: 44px !important;
    margin: 0 0 38px !important;
    padding: 34px 38px 36px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 18px !important;
    background:
        radial-gradient(circle at 9% -15%, rgba(47,128,237,.25), transparent 37%),
        linear-gradient(110deg, #0c131d 0%, #0a1119 48%, #09111b 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        0 1px 0 rgba(0,0,0,.18);
}

.mz-cff-topstories .mz-cff-module-head::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 580px;
    height: 580px;
    right: -250px;
    top: -390px;
    border: 1px solid rgba(47,128,237,.34);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 70%, rgba(47,128,237,.11), transparent 58%);
    box-shadow: 0 0 70px rgba(47,128,237,.08);
    pointer-events: none;
}

.mz-cff-topstories .mz-cff-module-head::after {
    content: "";
    position: absolute;
    z-index: 2;
    left: 38px;
    right: 38px;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--mz-video-accent) 0 12%, rgba(47,128,237,.22) 24%, rgba(255,255,255,.09) 55%, transparent 100%);
    box-shadow: -18px 0 26px rgba(47,128,237,.28);
    pointer-events: none;
}

.mz-cff-topstories .mz-cff-module-head__text {
    position: relative;
    z-index: 3;
    min-width: 0;
    max-width: 72%;
}

.mz-cff-topstories .mz-cff-module-kicker {
    display: inline-flex !important;
    align-items: center !important;
    gap: 13px !important;
    margin: 0 0 13px !important;
    color: #cbd5e1 !important;
    font-family: "Open Sans", "Segoe UI", Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: .26em !important;
    text-transform: uppercase !important;
}

.mz-cff-topstories .mz-cff-module-kicker::before {
    width: 34px !important;
    height: 3px !important;
    background: linear-gradient(90deg, var(--mz-video-accent), #67b2ff) !important;
    box-shadow: 0 0 13px rgba(47,128,237,.42);
}

.mz-cff-topstories .mz-cff-module-title {
    margin: 0 !important;
    color: #f8fafc !important;
    font-family: "Open Sans", "Segoe UI", Arial, sans-serif !important;
    font-size: clamp(48px, 5vw, 72px) !important;
    font-weight: 760 !important;
    line-height: .98 !important;
    letter-spacing: -.055em !important;
    text-shadow: 0 5px 26px rgba(0,0,0,.22);
}

.mz-cff-topstories .mz-cff-module-subtitle {
    margin: 17px 0 0 !important;
    color: #aeb9c7 !important;
    font-family: "Open Sans", "Segoe UI", Arial, sans-serif !important;
    font-size: clamp(14px, 1.35vw, 18px) !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    letter-spacing: .005em !important;
}

.mz-cff-topstories .mz-cff-module-all {
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
    align-self: center;
    margin-right: 4px !important;
    padding: 12px 0 11px !important;
    border: 0 !important;
    border-bottom: 2px solid var(--mz-video-accent) !important;
    color: #dbe6f2 !important;
    font-family: "Open Sans", "Segoe UI", Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: -.01em !important;
    text-decoration: none !important;
    transition: color .2s ease, padding-right .2s ease, border-color .2s ease !important;
}

.mz-cff-topstories .mz-cff-module-all:hover {
    color: #fff !important;
    padding-right: 5px !important;
    border-color: #7dbbff !important;
}

/* Keep the regular 4-column grid breathing evenly below Top Stories. */
@media (min-width: 1100px) {
    #cff.mz-cff-topstories .cff-posts-wrap,
    .cff.mz-cff-topstories .cff-posts-wrap {
        row-gap: 34px !important;
        column-gap: 26px !important;
    }
}

@media (max-width: 760px) {
    .mz-cff-topstories .mz-cff-module-head {
        min-height: 0;
        align-items: flex-start !important;
        gap: 16px !important;
        margin-bottom: 24px !important;
        padding: 24px 20px 26px !important;
        border-radius: 15px !important;
    }

    .mz-cff-topstories .mz-cff-module-head::before {
        width: 320px;
        height: 320px;
        right: -205px;
        top: -220px;
    }

    .mz-cff-topstories .mz-cff-module-head::after {
        left: 20px;
        right: 20px;
    }

    .mz-cff-topstories .mz-cff-module-head__text {
        max-width: 74%;
    }

    .mz-cff-topstories .mz-cff-module-kicker {
        gap: 9px !important;
        margin-bottom: 9px !important;
        font-size: 8.5px !important;
        letter-spacing: .21em !important;
    }

    .mz-cff-topstories .mz-cff-module-kicker::before {
        width: 23px !important;
        height: 2px !important;
    }

    .mz-cff-topstories .mz-cff-module-title {
        font-size: clamp(34px, 11vw, 46px) !important;
        letter-spacing: -.045em !important;
    }

    .mz-cff-topstories .mz-cff-module-subtitle {
        margin-top: 10px !important;
        max-width: 300px;
        font-size: 11.5px !important;
        line-height: 1.45 !important;
    }

    .mz-cff-topstories .mz-cff-module-all {
        margin-top: 5px !important;
        font-size: 10.5px !important;
        padding: 8px 0 7px !important;
        white-space: nowrap;
    }
}

@media (max-width: 430px) {
    .mz-cff-topstories .mz-cff-module-head {
        display: block !important;
    }

    .mz-cff-topstories .mz-cff-module-head__text {
        max-width: 100%;
    }

    .mz-cff-topstories .mz-cff-module-all {
        display: inline-block;
        margin-top: 17px !important;
    }
}


/* =========================================================
   1.5.1 — mobile lead card hardening
   CFF may reapply masonry/lazy-video geometry on iOS after our layout runs.
   Force the lead reel to remain a normal full-width grid item and make every
   layer of the Facebook cover fill the card.
   ========================================================= */
@media (max-width: 768px) {
    #cff.mz-cff-topstories .cff-posts-wrap > .cff-album-item.mz-cff-lead,
    .cff.mz-cff-topstories .cff-posts-wrap > .cff-album-item.mz-cff-lead {
        display: block !important;
        position: relative !important;
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        place-self: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 4 / 5 !important;
        inset: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        overflow: hidden !important;
        opacity: 1 !important;
        visibility: visible !important;
        border-radius: calc(var(--mz-video-radius) + 1px) !important;
        background: #090a0b !important;
        z-index: 1 !important;
    }

    #cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead > .cff-album-cover,
    .cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead > .cff-album-cover,
    #cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead > .cff-html5-video,
    .cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead > .cff-html5-video,
    #cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead > .cff-vidLink,
    .cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead > .cff-vidLink {
        display: block !important;
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        opacity: 1 !important;
        visibility: visible !important;
        border-radius: inherit !important;
    }

    #cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-lightbox-link,
    .cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-lightbox-link {
        display: block !important;
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    #cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead img,
    .cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead img,
    #cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-feed-image,
    .cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-feed-image,
    #cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-poster,
    .cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-poster,
    #cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-iframe-img,
    .cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-iframe-img {
        display: block !important;
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    #cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead::after,
    .cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead::after {
        z-index: 3 !important;
    }

    #cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead > .mz-cff-lead-copy,
    .cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead > .mz-cff-lead-copy {
        z-index: 6 !important;
    }
}


/* 1.6.0 final CTA */
.mz-cff-topstories .mz-cff-facebook-more {
    text-decoration: none !important;
}
.mz-cff-topstories .mz-cff-facebook-more:hover,
.mz-cff-topstories .mz-cff-facebook-more:focus {
    text-decoration: none !important;
}
\n\n/* Mediazip 1.6.1 – footer CTA + lowercase brand */
.mz-cff-topstories .mz-cff-module-kicker {
    text-transform: none !important;
}

/* The generic load-more control must truly disappear when JS marks it hidden. */
.mz-cff-topstories .mz-cff-more[hidden] {
    display: none !important;
}

/* Final Facebook CTA is the only footer control on desktop and is centered. */
.mz-cff-topstories .mz-cff-facebook-more:not([hidden]) {
    display: flex !important;
    width: max-content !important;
    max-width: calc(100% - 24px) !important;
    margin: 30px auto 0 !important;
}

@media (max-width: 640px) {
    .mz-cff-topstories .mz-cff-facebook-more:not([hidden]) {
        margin: 24px auto 0 !important;
    }
}

/* 1.7.0 – Meta API reel statistics */
.mz-cff-topstories .cff-album-cover,
.mz-cff-topstories .cff-html5-video,
.mz-cff-topstories .cff-iframe-wrap,
.mz-cff-topstories .cff-photo,
.mz-cff-topstories .cff-photos,
.mz-cff-topstories .cff-vidLink {
    position: relative;
}

.mz-cff-topstories .mz-cff-reel-stats {
    position: absolute;
    z-index: 7;
    top: 11px;
    right: 11px;
    display: none;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    padding: 5px 9px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 999px;
    background: rgba(8,10,12,.68);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 16px rgba(0,0,0,.18);
    color: #fff;
    font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
    font-size: 11px;
    font-weight: 650;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    pointer-events: none;
}

.mz-cff-topstories .mz-cff-reel-stats--ready {
    display: inline-flex;
}

.mz-cff-topstories .mz-cff-reel-stats__plays,
.mz-cff-topstories .mz-cff-reel-stats__reactions {
    display: inline-flex;
    align-items: center;
}

.mz-cff-topstories .mz-cff-reel-stats__reactions {
    color: rgba(255,255,255,.9);
}

@media (hover: hover) and (pointer: fine) {
    .mz-cff-topstories .cff-album-item:not(.mz-cff-lead):hover .mz-cff-reel-stats,
    .mz-cff-topstories .cff-item:not(.mz-cff-lead):hover .mz-cff-reel-stats {
        opacity: 0;
        transition: opacity .16s ease;
    }
}

@media (max-width: 640px) {
    .mz-cff-topstories .mz-cff-reel-stats {
        top: 8px;
        right: 8px;
        gap: 6px;
        min-height: 25px;
        padding: 4px 7px;
        font-size: 10px;
    }
}

/* =========================================================
   1.8.0 — MOBILE EDITORIAL MOSAIC
   Mobile only: 2/3 lead + two stacked 1/3 cards,
   then full-width horizontal reels one below another.
   Desktop/tablet remain unchanged.
   ========================================================= */
@media (max-width: 640px) {
    /* Two-column editorial mosaic: 2/3 + 1/3. */
    #cff.mz-cff-topstories .cff-posts-wrap,
    #cff.mz-cff-topstories .cff-masonry-posts,
    .cff.mz-cff-topstories .cff-posts-wrap,
    .cff.mz-cff-topstories .cff-masonry-posts {
        display: grid !important;
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        grid-auto-rows: auto !important;
        column-gap: 8px !important;
        row-gap: 10px !important;
        align-items: stretch !important;
        height: auto !important;
    }

    /* Main reel: left 2/3, spanning both small cards. */
    #cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead,
    .cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead {
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        aspect-ratio: 9 / 16 !important;
        overflow: hidden !important;
        border-radius: 15px !important;
    }

    #cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead > .cff-album-cover,
    #cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead > .cff-html5-video,
    #cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead > .cff-vidLink,
    .cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead > .cff-album-cover,
    .cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead > .cff-html5-video,
    .cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead > .cff-vidLink {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: auto !important;
        border-radius: inherit !important;
        overflow: hidden !important;
    }

    /* Two small reels stacked at right. */
    #cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="2"],
    .cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="2"] {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    #cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="3"],
    .cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="3"] {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    #cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="2"],
    #cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="3"],
    .cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="2"],
    .cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="3"] {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 9 / 16 !important;
        align-self: start !important;
        overflow: hidden !important;
        border-radius: 13px !important;
    }

    #cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="2"] > .cff-album-cover,
    #cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="3"] > .cff-album-cover,
    #cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="2"] > .cff-html5-video,
    #cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="3"] > .cff-html5-video,
    #cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="2"] > .cff-vidLink,
    #cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="3"] > .cff-vidLink,
    .cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="2"] > .cff-album-cover,
    .cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="3"] > .cff-album-cover,
    .cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="2"] > .cff-html5-video,
    .cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="3"] > .cff-html5-video,
    .cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="2"] > .cff-vidLink,
    .cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="3"] > .cff-vidLink {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: auto !important;
        border-radius: inherit !important;
        overflow: hidden !important;
    }

    /* All later reels are full-width horizontal editorial rows. */
    #cff.mz-cff-topstories .cff-posts-wrap > .cff-album-item:not(.mz-cff-lead):not([data-mz-rank="2"]):not([data-mz-rank="3"]),
    #cff.mz-cff-topstories .cff-posts-wrap > .cff-item:not(.mz-cff-lead):not([data-mz-rank="2"]):not([data-mz-rank="3"]),
    .cff.mz-cff-topstories .cff-posts-wrap > .cff-album-item:not(.mz-cff-lead):not([data-mz-rank="2"]):not([data-mz-rank="3"]),
    .cff.mz-cff-topstories .cff-posts-wrap > .cff-item:not(.mz-cff-lead):not([data-mz-rank="2"]):not([data-mz-rank="3"]) {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        position: relative !important;
        width: 100% !important;
        min-height: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border-radius: 14px !important;
    }

    #cff.mz-cff-topstories .cff-posts-wrap > .cff-album-item:not(.mz-cff-lead):not([data-mz-rank="2"]):not([data-mz-rank="3"]) > .cff-album-cover,
    #cff.mz-cff-topstories .cff-posts-wrap > .cff-item:not(.mz-cff-lead):not([data-mz-rank="2"]):not([data-mz-rank="3"]) > .cff-html5-video,
    #cff.mz-cff-topstories .cff-posts-wrap > .cff-item:not(.mz-cff-lead):not([data-mz-rank="2"]):not([data-mz-rank="3"]) > .cff-vidLink,
    .cff.mz-cff-topstories .cff-posts-wrap > .cff-album-item:not(.mz-cff-lead):not([data-mz-rank="2"]):not([data-mz-rank="3"]) > .cff-album-cover,
    .cff.mz-cff-topstories .cff-posts-wrap > .cff-item:not(.mz-cff-lead):not([data-mz-rank="2"]):not([data-mz-rank="3"]) > .cff-html5-video,
    .cff.mz-cff-topstories .cff-posts-wrap > .cff-item:not(.mz-cff-lead):not([data-mz-rank="2"]):not([data-mz-rank="3"]) > .cff-vidLink {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
        overflow: hidden !important;
        border-radius: inherit !important;
    }

    /* Hero + two small cards keep a strong edge-to-edge crop. */
    #cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead img,
    #cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="2"] img,
    #cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="3"] img,
    .cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead img,
    .cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="2"] img,
    .cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="3"] img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    /* Later horizontal rows show as much of the original vertical frame as possible.
       A blurred copy of the same thumbnail fills the empty side space. */
    #cff.mz-cff-topstories .mz-cff-mobile-contain-media,
    .cff.mz-cff-topstories .mz-cff-mobile-contain-media {
        position: relative !important;
        isolation: isolate !important;
        background: #090b0e !important;
    }

    #cff.mz-cff-topstories .mz-cff-mobile-contain-media::before,
    .cff.mz-cff-topstories .mz-cff-mobile-contain-media::before {
        content: "";
        position: absolute;
        z-index: 0;
        inset: -8%;
        background-image: var(--mz-mobile-thumb);
        background-size: cover;
        background-position: center;
        filter: blur(16px) brightness(.52) saturate(.9);
        transform: scale(1.08);
        opacity: .95;
        pointer-events: none;
    }

    #cff.mz-cff-topstories .mz-cff-mobile-contain-media::after,
    .cff.mz-cff-topstories .mz-cff-mobile-contain-media::after {
        content: "";
        position: absolute;
        z-index: 1;
        inset: 0;
        background: linear-gradient(90deg, rgba(4,7,10,.18), transparent 24%, transparent 76%, rgba(4,7,10,.18));
        pointer-events: none;
    }

    #cff.mz-cff-topstories .mz-cff-mobile-contain-media img,
    .cff.mz-cff-topstories .mz-cff-mobile-contain-media img {
        position: relative !important;
        z-index: 2 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
    }

    /* Small right cards: concise copy over the image, no extra block below. */
    #cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="2"] > .mz-cff-card-caption,
    #cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="3"] > .mz-cff-card-caption,
    .cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="2"] > .mz-cff-card-caption,
    .cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="3"] > .mz-cff-card-caption {
        position: absolute !important;
        z-index: 12 !important;
        left: 8px !important;
        right: 8px !important;
        bottom: 8px !important;
        display: -webkit-box !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        max-height: 3.15em !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
        color: #fff !important;
        font-size: 10.5px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-shadow: 0 2px 8px rgba(0,0,0,.85) !important;
        pointer-events: none !important;
    }

    /* Full-width later reels: title over image, newsroom-style. */
    #cff.mz-cff-topstories .cff-posts-wrap > .cff-album-item:not(.mz-cff-lead):not([data-mz-rank="2"]):not([data-mz-rank="3"]) > .mz-cff-card-caption,
    #cff.mz-cff-topstories .cff-posts-wrap > .cff-item:not(.mz-cff-lead):not([data-mz-rank="2"]):not([data-mz-rank="3"]) > .mz-cff-card-caption,
    .cff.mz-cff-topstories .cff-posts-wrap > .cff-album-item:not(.mz-cff-lead):not([data-mz-rank="2"]):not([data-mz-rank="3"]) > .mz-cff-card-caption,
    .cff.mz-cff-topstories .cff-posts-wrap > .cff-item:not(.mz-cff-lead):not([data-mz-rank="2"]):not([data-mz-rank="3"]) > .mz-cff-card-caption {
        position: absolute !important;
        z-index: 12 !important;
        left: 12px !important;
        right: 12px !important;
        bottom: 10px !important;
        display: -webkit-box !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        max-height: 3em !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
        color: #fff !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-shadow: 0 2px 10px rgba(0,0,0,.9) !important;
        pointer-events: none !important;
    }

    /* Dark lower gradient improves title legibility without hiding the image. */
    #cff.mz-cff-topstories .cff-posts-wrap > .cff-album-item:not(.mz-cff-lead)::after,
    #cff.mz-cff-topstories .cff-posts-wrap > .cff-item:not(.mz-cff-lead)::after,
    .cff.mz-cff-topstories .cff-posts-wrap > .cff-album-item:not(.mz-cff-lead)::after,
    .cff.mz-cff-topstories .cff-posts-wrap > .cff-item:not(.mz-cff-lead)::after {
        content: "";
        position: absolute;
        z-index: 10;
        left: 0;
        right: 0;
        bottom: 0;
        height: 48%;
        border-radius: 0 0 inherit inherit;
        background: linear-gradient(180deg, transparent, rgba(4,7,10,.78));
        pointer-events: none;
    }

    /* Stats stay compact and above the gradient. */
    #cff.mz-cff-topstories .mz-cff-reel-stats,
    .cff.mz-cff-topstories .mz-cff-reel-stats {
        z-index: 14 !important;
    }

    /* Hero copy remains readable but visually lighter on mobile. */
    #cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead > .mz-cff-lead-copy,
    .cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead > .mz-cff-lead-copy {
        left: 10px !important;
        right: 10px !important;
        bottom: 10px !important;
        padding: 10px 11px !important;
        border-radius: 11px !important;
        font-size: 14px !important;
        line-height: 1.2 !important;
        -webkit-line-clamp: 3 !important;
    }
}

/* =========================================================
   1.8.2 — MOBILE MOSAIC FIX + TWO-COLUMN VERTICAL GRID
   First block: 2/3 hero + two stacked 1/3 reels.
   Everything below: two vertical reels per row.
   This block deliberately has higher specificity than the
   older iOS lead hardening rules from 1.5.1.
   ========================================================= */
@media (max-width: 640px) {
    #cff.mz-cff-topstories .cff-posts-wrap,
    #cff.mz-cff-topstories .cff-masonry-posts,
    .cff.mz-cff-topstories .cff-posts-wrap,
    .cff.mz-cff-topstories .cff-masonry-posts {
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        grid-template-rows: auto auto !important;
        grid-auto-rows: auto !important;
        grid-auto-flow: row !important;
        gap: 10px 8px !important;
        align-items: stretch !important;
        width: 100% !important;
        height: auto !important;
    }

    /* Hero: exactly the left 2/3 and both top rows. */
    #cff.mz-cff-topstories .cff-posts-wrap > .cff-album-item.mz-cff-lead,
    #cff.mz-cff-topstories .cff-posts-wrap > .cff-item.mz-cff-lead,
    .cff.mz-cff-topstories .cff-posts-wrap > .cff-album-item.mz-cff-lead,
    .cff.mz-cff-topstories .cff-posts-wrap > .cff-item.mz-cff-lead {
        grid-column: 1 / 5 !important;
        grid-row: 1 / 3 !important;
        order: 0 !important;
        display: block !important;
        position: relative !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;
        place-self: stretch !important;
        margin: 0 !important;
        overflow: hidden !important;
        border-radius: 15px !important;
    }

    /* Right column: two stacked cards. */
    #cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="2"],
    .cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="2"] {
        grid-column: 5 / 7 !important;
        grid-row: 1 !important;
        order: 0 !important;
    }

    #cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="3"],
    .cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="3"] {
        grid-column: 5 / 7 !important;
        grid-row: 2 !important;
        order: 0 !important;
    }

    #cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="2"],
    #cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="3"],
    .cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="2"],
    .cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="3"] {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 9 / 16 !important;
        margin: 0 !important;
        overflow: hidden !important;
        border-radius: 13px !important;
    }

    /* The three top cards always use edge-to-edge cover. */
    #cff.mz-cff-topstories .cff-posts-wrap > .cff-album-item.mz-cff-lead > .cff-album-cover,
    #cff.mz-cff-topstories .cff-posts-wrap > .cff-item.mz-cff-lead > .cff-html5-video,
    #cff.mz-cff-topstories .cff-posts-wrap > .cff-item.mz-cff-lead > .cff-vidLink,
    #cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="2"] > .cff-album-cover,
    #cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="3"] > .cff-album-cover,
    #cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="2"] > .cff-html5-video,
    #cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="3"] > .cff-html5-video,
    #cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="2"] > .cff-vidLink,
    #cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="3"] > .cff-vidLink,
    .cff.mz-cff-topstories .cff-posts-wrap > .cff-album-item.mz-cff-lead > .cff-album-cover,
    .cff.mz-cff-topstories .cff-posts-wrap > .cff-item.mz-cff-lead > .cff-html5-video,
    .cff.mz-cff-topstories .cff-posts-wrap > .cff-item.mz-cff-lead > .cff-vidLink,
    .cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="2"] > .cff-album-cover,
    .cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="3"] > .cff-album-cover,
    .cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="2"] > .cff-html5-video,
    .cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="3"] > .cff-html5-video,
    .cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="2"] > .cff-vidLink,
    .cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="3"] > .cff-vidLink {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        aspect-ratio: auto !important;
        margin: 0 !important;
        border-radius: inherit !important;
        overflow: hidden !important;
    }

    #cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead img,
    #cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="2"] img,
    #cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="3"] img,
    .cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead img,
    .cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="2"] img,
    .cff.mz-cff-topstories .cff-posts-wrap > [data-mz-rank="3"] img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    /* Every later reel: two equal vertical cards per row. */
    #cff.mz-cff-topstories .cff-posts-wrap > .cff-album-item:not(.mz-cff-lead):not([data-mz-rank="2"]):not([data-mz-rank="3"]),
    #cff.mz-cff-topstories .cff-posts-wrap > .cff-item:not(.mz-cff-lead):not([data-mz-rank="2"]):not([data-mz-rank="3"]),
    .cff.mz-cff-topstories .cff-posts-wrap > .cff-album-item:not(.mz-cff-lead):not([data-mz-rank="2"]):not([data-mz-rank="3"]),
    .cff.mz-cff-topstories .cff-posts-wrap > .cff-item:not(.mz-cff-lead):not([data-mz-rank="2"]):not([data-mz-rank="3"]) {
        grid-column: span 3 !important;
        grid-row: auto !important;
        order: 0 !important;
        position: relative !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 9 / 16 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border-radius: 14px !important;
    }

    #cff.mz-cff-topstories .cff-posts-wrap > .cff-album-item:not(.mz-cff-lead):not([data-mz-rank="2"]):not([data-mz-rank="3"]) > .cff-album-cover,
    #cff.mz-cff-topstories .cff-posts-wrap > .cff-item:not(.mz-cff-lead):not([data-mz-rank="2"]):not([data-mz-rank="3"]) > .cff-html5-video,
    #cff.mz-cff-topstories .cff-posts-wrap > .cff-item:not(.mz-cff-lead):not([data-mz-rank="2"]):not([data-mz-rank="3"]) > .cff-vidLink,
    .cff.mz-cff-topstories .cff-posts-wrap > .cff-album-item:not(.mz-cff-lead):not([data-mz-rank="2"]):not([data-mz-rank="3"]) > .cff-album-cover,
    .cff.mz-cff-topstories .cff-posts-wrap > .cff-item:not(.mz-cff-lead):not([data-mz-rank="2"]):not([data-mz-rank="3"]) > .cff-html5-video,
    .cff.mz-cff-topstories .cff-posts-wrap > .cff-item:not(.mz-cff-lead):not([data-mz-rank="2"]):not([data-mz-rank="3"]) > .cff-vidLink {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: auto !important;
        overflow: hidden !important;
        border-radius: inherit !important;
        background: #090b0e !important;
    }

    /* For two-column vertical cards show the whole portrait thumbnail when possible. */
    #cff.mz-cff-topstories .cff-posts-wrap > .cff-album-item:not(.mz-cff-lead):not([data-mz-rank="2"]):not([data-mz-rank="3"]) img,
    #cff.mz-cff-topstories .cff-posts-wrap > .cff-item:not(.mz-cff-lead):not([data-mz-rank="2"]):not([data-mz-rank="3"]) img,
    .cff.mz-cff-topstories .cff-posts-wrap > .cff-album-item:not(.mz-cff-lead):not([data-mz-rank="2"]):not([data-mz-rank="3"]) img,
    .cff.mz-cff-topstories .cff-posts-wrap > .cff-item:not(.mz-cff-lead):not([data-mz-rank="2"]):not([data-mz-rank="3"]) img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    /* Captions on the two-column cards stay compact. */
    #cff.mz-cff-topstories .cff-posts-wrap > .cff-album-item:not(.mz-cff-lead):not([data-mz-rank="2"]):not([data-mz-rank="3"]) > .mz-cff-card-caption,
    #cff.mz-cff-topstories .cff-posts-wrap > .cff-item:not(.mz-cff-lead):not([data-mz-rank="2"]):not([data-mz-rank="3"]) > .mz-cff-card-caption,
    .cff.mz-cff-topstories .cff-posts-wrap > .cff-album-item:not(.mz-cff-lead):not([data-mz-rank="2"]):not([data-mz-rank="3"]) > .mz-cff-card-caption,
    .cff.mz-cff-topstories .cff-posts-wrap > .cff-item:not(.mz-cff-lead):not([data-mz-rank="2"]):not([data-mz-rank="3"]) > .mz-cff-card-caption {
        left: 9px !important;
        right: 9px !important;
        bottom: 9px !important;
        font-size: 11.5px !important;
        line-height: 1.25 !important;
        -webkit-line-clamp: 2 !important;
        max-height: 2.6em !important;
    }
}


/* =========================================================
   1.8.3 — VISUAL SKIN ONLY
   IMPORTANT: no card/grid geometry is changed here.
   ========================================================= */
#cff.mz-cff-topstories,
.cff.mz-cff-topstories {
    background:
        radial-gradient(circle at 8% 0%, rgba(43,126,232,.14), transparent 31%),
        radial-gradient(circle at 96% 7%, rgba(37,99,235,.08), transparent 24%),
        linear-gradient(180deg, #111923 0%, #0d141c 42%, #0b1016 100%) !important;
    border-color: rgba(116,170,235,.16) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 18px 50px rgba(0,0,0,.16) !important;
}

/* Premium edge treatment on every reel without changing dimensions. */
#cff.mz-cff-topstories .cff-posts-wrap > .cff-album-item,
#cff.mz-cff-topstories .cff-posts-wrap > .cff-item,
.cff.mz-cff-topstories .cff-posts-wrap > .cff-album-item,
.cff.mz-cff-topstories .cff-posts-wrap > .cff-item {
    box-shadow:
        inset 0 0 0 1px rgba(115,177,245,.26),
        0 8px 22px rgba(0,0,0,.22) !important;
}

/* Slightly stronger outline for the hero. */
#cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead,
.cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead {
    box-shadow:
        inset 0 0 0 1px rgba(106,176,255,.36),
        0 12px 30px rgba(0,0,0,.26) !important;
}

/* Header: compact portal-video treatment. */
.mz-cff-topstories .mz-cff-module-head {
    min-height: 0 !important;
    margin: 0 0 clamp(20px, 2.1vw, 30px) !important;
    padding: clamp(18px, 2vw, 26px) clamp(18px, 2.2vw, 30px) !important;
    border: 1px solid rgba(112,176,245,.16) !important;
    border-radius: 18px !important;
    background:
        radial-gradient(circle at 12% -20%, rgba(47,128,237,.20), transparent 48%),
        linear-gradient(105deg, rgba(15,26,39,.98), rgba(9,16,25,.98)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        0 12px 30px rgba(0,0,0,.18) !important;
}

.mz-cff-topstories .mz-cff-module-head::before {
    width: 330px !important;
    height: 330px !important;
    right: -180px !important;
    top: -235px !important;
    border-color: rgba(47,128,237,.27) !important;
}

.mz-cff-topstories .mz-cff-module-head::after {
    left: 22px !important;
    right: 22px !important;
    background: linear-gradient(90deg, var(--mz-video-accent), rgba(47,128,237,.22) 24%, transparent 76%) !important;
}

.mz-cff-topstories .mz-cff-module-head__text {
    max-width: 72% !important;
}

.mz-cff-topstories .mz-cff-module-kicker {
    margin: 0 0 8px !important;
    gap: 8px !important;
    color: #aebbd0 !important;
    font-size: 9px !important;
    letter-spacing: .14em !important;
}

.mz-cff-topstories .mz-cff-module-kicker::before {
    width: 17px !important;
    height: 2px !important;
}

.mz-cff-topstories .mz-cff-module-title {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: clamp(31px, 3.3vw, 44px) !important;
    line-height: 1 !important;
    letter-spacing: -.035em !important;
}

.mz-cff-topstories .mz-cff-module-title::before {
    content: "";
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: rgba(47,128,237,.10);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='18' fill='none' stroke='%232f80ed' stroke-width='2.5'/%3E%3Cpath d='M16 12.8 29 20 16 27.2Z' fill='%232f80ed'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    box-shadow: 0 0 18px rgba(47,128,237,.16);
}

.mz-cff-topstories .mz-cff-module-subtitle {
    margin-top: 8px !important;
    color: #92a2b7 !important;
    font-size: 12px !important;
}

.mz-cff-topstories .mz-cff-module-all {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    border: 1px solid rgba(89,157,238,.44) !important;
    border-radius: 999px !important;
    background: rgba(13,24,36,.72) !important;
    color: #dbe8f7 !important;
    font-size: 11.5px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.mz-cff-topstories .mz-cff-module-all:hover {
    padding-right: 14px !important;
    color: #fff !important;
    border-color: rgba(112,183,255,.72) !important;
    background: rgba(24,45,68,.82) !important;
}

.mz-cff-topstories .mz-cff-module-all__arrow {
    color: #62a8f7;
    font-size: 15px;
    line-height: .8;
}

/* The Facebook CTA now lives in the header. Remove only the duplicate footer CTA. */
.mz-cff-topstories .mz-cff-facebook-more {
    display: none !important;
}

@media (max-width: 640px) {
    #cff.mz-cff-topstories,
    .cff.mz-cff-topstories {
        padding: 12px !important;
        border-radius: 18px !important;
        background:
            radial-gradient(circle at 7% 0%, rgba(47,128,237,.13), transparent 27%),
            linear-gradient(180deg, #111a25 0%, #0d141d 52%, #0a1016 100%) !important;
    }

    .mz-cff-topstories .mz-cff-module-head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        margin-bottom: 16px !important;
        padding: 15px 14px !important;
        border-radius: 15px !important;
    }

    .mz-cff-topstories .mz-cff-module-head__text {
        max-width: calc(100% - 105px) !important;
    }

    .mz-cff-topstories .mz-cff-module-kicker {
        display: none !important;
    }

    .mz-cff-topstories .mz-cff-module-title {
        gap: 8px !important;
        font-size: 27px !important;
        white-space: nowrap;
    }

    .mz-cff-topstories .mz-cff-module-title::before {
        width: 31px;
        height: 31px;
    }

    .mz-cff-topstories .mz-cff-module-subtitle {
        margin-top: 5px !important;
        max-width: 220px !important;
        font-size: 9px !important;
        line-height: 1.25 !important;
        letter-spacing: .04em !important;
        text-transform: uppercase;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mz-cff-topstories .mz-cff-module-all {
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 8px 10px !important;
        font-size: 9.5px !important;
        white-space: nowrap;
    }

    .mz-cff-topstories .mz-cff-module-all__arrow {
        font-size: 12px;
    }
}

/* =========================================================
   1.8.4 — VISUAL POLISH ONLY
   No grid/card geometry changes. Glow, complete mobile subtitle,
   unified reel-stat icons and 20% smaller mobile stats pill.
   ========================================================= */

/* Give every reel the same soft blue edge/glow language as the header. */
#cff.mz-cff-topstories .cff-posts-wrap > .cff-album-item .cff-album-cover,
#cff.mz-cff-topstories .cff-posts-wrap > .cff-item .cff-html5-video,
#cff.mz-cff-topstories .cff-posts-wrap > .cff-item .cff-iframe-wrap,
#cff.mz-cff-topstories .cff-posts-wrap > .cff-item .cff-photo,
#cff.mz-cff-topstories .cff-posts-wrap > .cff-item .cff-photos,
#cff.mz-cff-topstories .cff-posts-wrap > .cff-item .cff-vidLink,
.cff.mz-cff-topstories .cff-posts-wrap > .cff-album-item .cff-album-cover,
.cff.mz-cff-topstories .cff-posts-wrap > .cff-item .cff-html5-video,
.cff.mz-cff-topstories .cff-posts-wrap > .cff-item .cff-iframe-wrap,
.cff.mz-cff-topstories .cff-posts-wrap > .cff-item .cff-photo,
.cff.mz-cff-topstories .cff-posts-wrap > .cff-item .cff-photos,
.cff.mz-cff-topstories .cff-posts-wrap > .cff-item .cff-vidLink {
    box-shadow:
        inset 0 0 0 1px rgba(111,178,255,.34),
        0 0 0 1px rgba(47,128,237,.07),
        0 7px 20px rgba(0,0,0,.22),
        0 0 16px rgba(47,128,237,.11) !important;
}

/* Slightly richer hero glow, still without changing dimensions. */
#cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-album-cover,
#cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-html5-video,
#cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-iframe-wrap,
#cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-photo,
#cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-photos,
#cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-vidLink,
.cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-album-cover,
.cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-html5-video,
.cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-iframe-wrap,
.cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-photo,
.cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-photos,
.cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-vidLink {
    box-shadow:
        inset 0 0 0 1px rgba(112,183,255,.48),
        0 0 0 1px rgba(47,128,237,.10),
        0 10px 26px rgba(0,0,0,.25),
        0 0 20px rgba(47,128,237,.15) !important;
}

/* Unified stat icon system — both play and heart are the same SVG style. */
.mz-cff-topstories .mz-cff-reel-stats {
    gap: 8px !important;
}

.mz-cff-topstories .mz-cff-reel-stats__item {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: 0 !important;
}

.mz-cff-topstories .mz-cff-reel-stats__icon {
    display: block !important;
    width: 11px !important;
    height: 11px !important;
    flex: 0 0 11px !important;
    fill: currentColor !important;
    color: rgba(255,255,255,.96) !important;
    filter: none !important;
}

.mz-cff-topstories .mz-cff-reel-stats__plays,
.mz-cff-topstories .mz-cff-reel-stats__reactions {
    color: rgba(255,255,255,.96) !important;
    line-height: 1 !important;
}

@media (max-width: 640px) {
    /* The subtitle must be fully readable; allow it to wrap instead of ellipsis. */
    .mz-cff-topstories .mz-cff-module-head__text {
        min-width: 0 !important;
    }

    .mz-cff-topstories .mz-cff-module-subtitle {
        width: 100% !important;
        max-width: none !important;
        margin-top: 5px !important;
        font-size: 9px !important;
        line-height: 1.3 !important;
        letter-spacing: .025em !important;
        text-transform: none !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        display: block !important;
    }

    /* Exactly ~20% smaller than the previous mobile pill. */
    .mz-cff-topstories .mz-cff-reel-stats {
        top: 7px !important;
        right: 7px !important;
        gap: 5px !important;
        min-height: 20px !important;
        padding: 3px 6px !important;
        border-radius: 999px !important;
        font-size: 8px !important;
        line-height: 1 !important;
        -webkit-backdrop-filter: blur(7px) !important;
        backdrop-filter: blur(7px) !important;
    }

    .mz-cff-topstories .mz-cff-reel-stats__item {
        gap: 3px !important;
    }

    .mz-cff-topstories .mz-cff-reel-stats__icon {
        width: 9px !important;
        height: 9px !important;
        flex-basis: 9px !important;
    }

    /* Keep the glow visible on the small cards without making them visually heavy. */
    #cff.mz-cff-topstories .cff-posts-wrap > .cff-album-item .cff-album-cover,
    #cff.mz-cff-topstories .cff-posts-wrap > .cff-item .cff-html5-video,
    #cff.mz-cff-topstories .cff-posts-wrap > .cff-item .cff-iframe-wrap,
    #cff.mz-cff-topstories .cff-posts-wrap > .cff-item .cff-photo,
    #cff.mz-cff-topstories .cff-posts-wrap > .cff-item .cff-photos,
    #cff.mz-cff-topstories .cff-posts-wrap > .cff-item .cff-vidLink,
    .cff.mz-cff-topstories .cff-posts-wrap > .cff-album-item .cff-album-cover,
    .cff.mz-cff-topstories .cff-posts-wrap > .cff-item .cff-html5-video,
    .cff.mz-cff-topstories .cff-posts-wrap > .cff-item .cff-iframe-wrap,
    .cff.mz-cff-topstories .cff-posts-wrap > .cff-item .cff-photo,
    .cff.mz-cff-topstories .cff-posts-wrap > .cff-item .cff-photos,
    .cff.mz-cff-topstories .cff-posts-wrap > .cff-item .cff-vidLink {
        box-shadow:
            inset 0 0 0 1px rgba(111,178,255,.38),
            0 6px 16px rgba(0,0,0,.20),
            0 0 12px rgba(47,128,237,.12) !important;
    }
}

/* =========================================================
   1.8.5 — MOBILE POLISH / CONSISTENCY
   Layout geometry is intentionally untouched.
   ========================================================= */

/* A real luminous border around each reel card. This sits above the image
   and is independent from the image's own box-shadow, so the glow remains
   visible even when CFF clips/replaces media elements. */
#cff.mz-cff-topstories .cff-posts-wrap > .cff-album-item,
#cff.mz-cff-topstories .cff-posts-wrap > .cff-item,
.cff.mz-cff-topstories .cff-posts-wrap > .cff-album-item,
.cff.mz-cff-topstories .cff-posts-wrap > .cff-item {
    position: relative !important;
    border-radius: var(--mz-video-radius) !important;
    box-shadow:
        0 0 0 1px rgba(74, 153, 245, .48),
        0 0 11px rgba(47, 128, 237, .22),
        0 9px 22px rgba(0, 0, 0, .24) !important;
}

#cff.mz-cff-topstories .cff-posts-wrap > .cff-album-item::before,
#cff.mz-cff-topstories .cff-posts-wrap > .cff-item::before,
.cff.mz-cff-topstories .cff-posts-wrap > .cff-album-item::before,
.cff.mz-cff-topstories .cff-posts-wrap > .cff-item::before {
    content: "";
    position: absolute;
    z-index: 25;
    inset: 0;
    border: 1px solid rgba(111, 183, 255, .62);
    border-radius: inherit;
    box-shadow:
        inset 0 0 10px rgba(47, 128, 237, .08),
        0 0 8px rgba(47, 128, 237, .20);
    pointer-events: none;
}

#cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead,
.cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead {
    box-shadow:
        0 0 0 1px rgba(94, 170, 255, .62),
        0 0 15px rgba(47, 128, 237, .28),
        0 12px 28px rgba(0, 0, 0, .28) !important;
}

/* There is already a Facebook CTA in the header. Never show the lower
   custom/native "Pokaż więcej" controls. */
#cff.mz-cff-topstories > button.mz-cff-more,
.cff.mz-cff-topstories > button.mz-cff-more,
#cff.mz-cff-topstories .cff-load-more,
.cff.mz-cff-topstories .cff-load-more,
#cff.mz-cff-topstories .mz-cff-facebook-more,
.cff.mz-cff-topstories .mz-cff-facebook-more {
    display: none !important;
}

@media (max-width: 640px) {
    /* 20% smaller than the 1.8.4 mobile stats pill. */
    #cff.mz-cff-topstories .mz-cff-reel-stats,
    .cff.mz-cff-topstories .mz-cff-reel-stats {
        top: 5px !important;
        right: 5px !important;
        gap: 4px !important;
        min-height: 16px !important;
        padding: 2px 5px !important;
        border-radius: 999px !important;
        font-size: 6.4px !important;
        line-height: 1 !important;
        -webkit-backdrop-filter: blur(6px) !important;
        backdrop-filter: blur(6px) !important;
    }

    #cff.mz-cff-topstories .mz-cff-reel-stats__item,
    .cff.mz-cff-topstories .mz-cff-reel-stats__item {
        gap: 2px !important;
    }

    #cff.mz-cff-topstories .mz-cff-reel-stats__icon,
    .cff.mz-cff-topstories .mz-cff-reel-stats__icon {
        width: 7px !important;
        height: 7px !important;
        flex: 0 0 7px !important;
    }

    /* Keep the subtitle compact but fully visible. */
    .mz-cff-topstories .mz-cff-module-subtitle {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        max-width: none !important;
        width: 100% !important;
    }

    /* Make the border/glow visible on small cards without changing their size. */
    #cff.mz-cff-topstories .cff-posts-wrap > .cff-album-item,
    #cff.mz-cff-topstories .cff-posts-wrap > .cff-item,
    .cff.mz-cff-topstories .cff-posts-wrap > .cff-album-item,
    .cff.mz-cff-topstories .cff-posts-wrap > .cff-item {
        box-shadow:
            0 0 0 1px rgba(79, 159, 248, .52),
            0 0 9px rgba(47, 128, 237, .25),
            0 7px 18px rgba(0, 0, 0, .22) !important;
    }
}


/* =========================================================
   1.8.6 — DESKTOP/TABLET HEADER + HERO CORNER FIX
   No layout/grid geometry changes.
   ========================================================= */
@media (min-width: 641px) {
    /* Remove the small miejska.pl kicker and reclaim the vertical space. */
    .mz-cff-topstories .mz-cff-module-kicker {
        display: none !important;
    }

    .mz-cff-topstories .mz-cff-module-head {
        padding-top: clamp(14px, 1.45vw, 19px) !important;
        padding-bottom: clamp(14px, 1.45vw, 19px) !important;
    }

    .mz-cff-topstories .mz-cff-module-title {
        margin-top: 0 !important;
    }

    .mz-cff-topstories .mz-cff-module-subtitle {
        margin-top: 6px !important;
    }

    /* Keep every layer of the hero clipped to exactly the same rounded shape. */
    #cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead,
    .cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead {
        overflow: hidden !important;
        isolation: isolate;
        background: transparent !important;
        -webkit-mask-image: -webkit-radial-gradient(white, black);
    }

    #cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead::after,
    .cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead::after {
        border-radius: inherit !important;
        overflow: hidden !important;
    }

    #cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-media-wrap,
    #cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-album-cover,
    #cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-html5-video,
    #cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-iframe-wrap,
    #cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-photo,
    #cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-photos,
    #cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-vidLink,
    .cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-media-wrap,
    .cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-album-cover,
    .cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-html5-video,
    .cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-iframe-wrap,
    .cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-photo,
    .cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-photos,
    .cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-vidLink {
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: inherit !important;
        overflow: hidden !important;
        background: transparent !important;
        clip-path: inset(0 round calc(var(--mz-video-radius) + 2px));
    }

    #cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-lightbox-link,
    #cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-album-cover > a,
    .cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-lightbox-link,
    .cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-album-cover > a {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: inherit !important;
        overflow: hidden !important;
    }

    #cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead img,
    .cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead img {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        max-width: none !important;
        object-fit: cover !important;
        object-position: center !important;
        border-radius: inherit !important;
    }
}

/* =========================================================
   1.8.7 — hard desktop/tablet visual fixes
   Versioned asset path intentionally bypasses stale optimizer/CDN caches.
   ========================================================= */
@media (min-width: 641px) {
    #cff.mz-cff-topstories .mz-cff-module-kicker,
    .cff.mz-cff-topstories .mz-cff-module-kicker {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    #cff.mz-cff-topstories .mz-cff-module-head,
    .cff.mz-cff-topstories .mz-cff-module-head {
        min-height: 0 !important;
        padding-top: 18px !important;
        padding-bottom: 18px !important;
    }

    #cff.mz-cff-topstories .mz-cff-module-subtitle,
    .cff.mz-cff-topstories .mz-cff-module-subtitle {
        margin-top: 5px !important;
    }

    /* Hero corner hardening: no black parent/background may show through. */
    #cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead,
    .cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead {
        overflow: hidden !important;
        border-radius: calc(var(--mz-video-radius) + 2px) !important;
        background: transparent !important;
        isolation: isolate !important;
        clip-path: inset(0 round calc(var(--mz-video-radius) + 2px)) !important;
    }

    #cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead::after,
    .cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead::after {
        border-radius: calc(var(--mz-video-radius) + 2px) !important;
    }

    #cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead > .cff-album-cover,
    #cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead > .cff-html5-video,
    #cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead > .cff-vidLink,
    #cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead > .cff-photo,
    #cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead > .cff-photos,
    #cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead > .cff-iframe-wrap,
    .cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead > .cff-album-cover,
    .cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead > .cff-html5-video,
    .cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead > .cff-vidLink,
    .cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead > .cff-photo,
    .cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead > .cff-photos,
    .cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead > .cff-iframe-wrap {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: calc(var(--mz-video-radius) + 2px) !important;
        overflow: hidden !important;
        background: transparent !important;
        clip-path: inset(0 round calc(var(--mz-video-radius) + 2px)) !important;
    }

    #cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-lightbox-link,
    .cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead .cff-lightbox-link {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: calc(var(--mz-video-radius) + 2px) !important;
        overflow: hidden !important;
    }

    #cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead img,
    .cff.mz-cff-topstories .cff-posts-wrap > .mz-cff-lead img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        max-width: none !important;
        object-fit: cover !important;
        object-position: center !important;
        border-radius: calc(var(--mz-video-radius) + 2px) !important;
    }
}

/* =========================================================
   1.9.0 — SINGLE POST REELS STRIP
   Exactly 3 vertical reels in one row on desktop and mobile.
   Injected above the Newspaper "Popularne na stronie" block.
   ========================================================= */
.mz-cff-entry-reels {
    --mz-entry-accent: #2f80ed;
    --mz-entry-radius: 15px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 24px 0 30px;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid rgba(88, 163, 255, .24);
    background:
        radial-gradient(circle at 8% 0%, rgba(47,128,237,.16), transparent 38%),
        linear-gradient(145deg, #111a25 0%, #0e141c 58%, #0b1016 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 0 0 1px rgba(47,128,237,.05),
        0 12px 32px rgba(0,0,0,.20),
        0 0 22px rgba(47,128,237,.10);
    color: #f6f8fb;
    overflow: hidden;
}

.mz-cff-entry-reels--staged {
    visibility: hidden;
}

.mz-cff-entry-reels__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid rgba(88, 163, 255, .25);
    border-radius: 16px;
    background:
        radial-gradient(circle at 16% 0%, rgba(47,128,237,.18), transparent 44%),
        linear-gradient(135deg, rgba(18,34,52,.94), rgba(10,18,27,.96));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 0 17px rgba(47,128,237,.10);
}

.mz-cff-entry-reels__head-text {
    min-width: 0;
}

.mz-cff-entry-reels__title-row {
    display: flex;
    align-items: center;
    gap: 9px;
}

.mz-cff-entry-reels__play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border: 2px solid #2389ff;
    border-radius: 50%;
    color: #2389ff;
    box-shadow: 0 0 13px rgba(35,137,255,.20);
}

.mz-cff-entry-reels__play svg {
    display: block;
    width: 15px;
    height: 15px;
    fill: currentColor;
}

.mz-cff-entry-reels__title {
    margin: 0 !important;
    padding: 0 !important;
    color: #f7f9fc !important;
    font-family: "Open Sans", "Segoe UI", Arial, sans-serif !important;
    font-size: 24px !important;
    font-weight: 760 !important;
    line-height: 1 !important;
    letter-spacing: -.025em !important;
}

.mz-cff-entry-reels__subtitle {
    margin: 5px 0 0 39px !important;
    padding: 0 !important;
    color: #9eabb9 !important;
    font-family: "Open Sans", "Segoe UI", Arial, sans-serif !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
}

.mz-cff-entry-reels__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 13px;
    border: 1px solid rgba(88,163,255,.54);
    border-radius: 999px;
    color: #fff !important;
    background: rgba(8,16,25,.54);
    font-family: "Open Sans", "Segoe UI", Arial, sans-serif !important;
    font-size: 10px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 0 12px rgba(47,128,237,.10);
}

.mz-cff-entry-reels__more:hover {
    color: #fff !important;
    border-color: rgba(88,163,255,.88);
    background: rgba(25,65,105,.38);
    text-decoration: none !important;
}

/* Reset the main Top Stories shell when the CFF feed is used inside this strip. */
.mz-cff-entry-reels .mz-cff-entry-feed,
.mz-cff-entry-reels #cff.mz-cff-entry-feed,
.mz-cff-entry-reels .cff.mz-cff-entry-feed {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.mz-cff-entry-reels .mz-cff-entry-feed > .mz-cff-module-head,
.mz-cff-entry-reels .mz-cff-entry-feed .cff-header,
.mz-cff-entry-reels .mz-cff-entry-feed .cff-visual-header,
.mz-cff-entry-reels .mz-cff-entry-feed .cff-load-more,
.mz-cff-entry-reels .mz-cff-entry-feed .mz-cff-more,
.mz-cff-entry-reels .mz-cff-entry-feed .mz-cff-facebook-more {
    display: none !important;
}

.mz-cff-entry-reels .mz-cff-entry-feed .cff-posts-wrap,
.mz-cff-entry-reels .mz-cff-entry-feed .cff-masonry-posts {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    grid-auto-flow: row !important;
    gap: 12px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    column-count: initial !important;
}

.mz-cff-entry-reels .mz-cff-entry-feed .cff-posts-wrap > .mz-cff-entry-card {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    float: none !important;
    clear: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    overflow: visible !important;
    flex-direction: column !important;
}

.mz-cff-entry-reels .mz-cff-entry-feed .mz-cff-entry-card > .cff-author,
.mz-cff-entry-reels .mz-cff-entry-feed .mz-cff-entry-card > .cff-date,
.mz-cff-entry-reels .mz-cff-entry-feed .mz-cff-entry-card > .cff-meta-wrap,
.mz-cff-entry-reels .mz-cff-entry-feed .mz-cff-entry-card > .cff-post-links,
.mz-cff-entry-reels .mz-cff-entry-feed .mz-cff-entry-card > .cff-comments-box,
.mz-cff-entry-reels .mz-cff-entry-feed .mz-cff-entry-card > .cff-view-comments,
.mz-cff-entry-reels .mz-cff-entry-feed .mz-cff-entry-card > .cff-post-text,
.mz-cff-entry-reels .mz-cff-entry-feed .mz-cff-entry-card > .cff-album-info,
.mz-cff-entry-reels .mz-cff-entry-feed .mz-cff-entry-card .cff-album-count,
.mz-cff-entry-reels .mz-cff-entry-feed .mz-cff-entry-card .mz-cff-card-caption,
.mz-cff-entry-reels .mz-cff-entry-feed .mz-cff-entry-card .mz-cff-hover-panel,
.mz-cff-entry-reels .mz-cff-entry-feed .mz-cff-entry-card .mz-cff-lead-copy {
    display: none !important;
}

.mz-cff-entry-reels .mz-cff-entry-card .cff-album-cover,
.mz-cff-entry-reels .mz-cff-entry-card .cff-html5-video,
.mz-cff-entry-reels .mz-cff-entry-card .cff-iframe-wrap,
.mz-cff-entry-reels .mz-cff-entry-card .cff-photo,
.mz-cff-entry-reels .mz-cff-entry-card .cff-photos,
.mz-cff-entry-reels .mz-cff-entry-card .cff-vidLink {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 9 / 16 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(88,163,255,.56) !important;
    border-radius: var(--mz-entry-radius) !important;
    background: #090d12 !important;
    box-shadow:
        0 0 0 1px rgba(47,128,237,.08),
        0 0 13px rgba(47,128,237,.22),
        0 10px 20px rgba(0,0,0,.28) !important;
}

.mz-cff-entry-reels .mz-cff-entry-card .cff-album-cover img,
.mz-cff-entry-reels .mz-cff-entry-card .cff-photo img,
.mz-cff-entry-reels .mz-cff-entry-card .cff-html5-video > img,
.mz-cff-entry-reels .mz-cff-entry-card img.cff-feed-image,
.mz-cff-entry-reels .mz-cff-entry-card img.cff-poster,
.mz-cff-entry-reels .mz-cff-entry-card .cff-iframe-img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mz-cff-entry-reels__caption {
    position: absolute;
    z-index: 7;
    left: 6px;
    right: 6px;
    bottom: 6px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    padding: 8px 7px 7px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 9px;
    background: linear-gradient(180deg, rgba(9,12,16,.22), rgba(8,10,13,.82));
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #fff;
    font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,.65);
    pointer-events: none;
}

/* Compact stats on the three-card strip. */
.mz-cff-entry-reels .mz-cff-reel-stats {
    top: 6px !important;
    right: 6px !important;
    min-height: 19px !important;
    padding: 3px 6px !important;
    gap: 5px !important;
    border-radius: 999px !important;
    font-size: 7px !important;
    line-height: 1 !important;
}

.mz-cff-entry-reels .mz-cff-reel-stats__item {
    gap: 2px !important;
}

.mz-cff-entry-reels .mz-cff-reel-stats__icon {
    width: 8px !important;
    height: 8px !important;
    flex: 0 0 8px !important;
}

@media (max-width: 640px) {
    .mz-cff-entry-reels {
        margin: 20px 0 24px;
        padding: 10px;
        border-radius: 17px;
    }

    .mz-cff-entry-reels__head {
        gap: 8px;
        margin-bottom: 10px;
        padding: 10px;
        border-radius: 14px;
    }

    .mz-cff-entry-reels__play {
        flex-basis: 25px;
        width: 25px;
        height: 25px;
        border-width: 1.5px;
    }

    .mz-cff-entry-reels__play svg {
        width: 12px;
        height: 12px;
    }

    .mz-cff-entry-reels__title-row {
        gap: 7px;
    }

    .mz-cff-entry-reels__title {
        font-size: 20px !important;
    }

    .mz-cff-entry-reels__subtitle {
        margin-left: 32px !important;
        margin-top: 4px !important;
        font-size: 7.8px !important;
        white-space: nowrap !important;
    }

    .mz-cff-entry-reels__more {
        min-height: 29px;
        padding: 0 10px;
        font-size: 8px !important;
        gap: 5px;
    }

    .mz-cff-entry-reels .mz-cff-entry-feed .cff-posts-wrap,
    .mz-cff-entry-reels .mz-cff-entry-feed .cff-masonry-posts {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    .mz-cff-entry-reels .mz-cff-entry-card .cff-album-cover,
    .mz-cff-entry-reels .mz-cff-entry-card .cff-html5-video,
    .mz-cff-entry-reels .mz-cff-entry-card .cff-iframe-wrap,
    .mz-cff-entry-reels .mz-cff-entry-card .cff-photo,
    .mz-cff-entry-reels .mz-cff-entry-card .cff-photos,
    .mz-cff-entry-reels .mz-cff-entry-card .cff-vidLink {
        border-radius: 11px !important;
        box-shadow:
            0 0 0 1px rgba(47,128,237,.06),
            0 0 9px rgba(47,128,237,.22),
            0 7px 14px rgba(0,0,0,.24) !important;
    }

    .mz-cff-entry-reels__caption {
        left: 3px;
        right: 3px;
        bottom: 3px;
        padding: 5px 3px 4px;
        border-radius: 7px;
        font-size: 7.4px;
        line-height: 1.18;
        -webkit-line-clamp: 3;
    }

    .mz-cff-entry-reels .mz-cff-reel-stats {
        top: 3px !important;
        right: 3px !important;
        min-height: 14px !important;
        padding: 2px 4px !important;
        gap: 3px !important;
        font-size: 5.4px !important;
    }

    .mz-cff-entry-reels .mz-cff-reel-stats__item {
        gap: 1px !important;
    }

    .mz-cff-entry-reels .mz-cff-reel-stats__icon {
        width: 6px !important;
        height: 6px !important;
        flex-basis: 6px !important;
    }
}