/* 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;
    }
}