.zlb-site-main{width:100%;max-width:1280px;margin:0 auto;padding:24px 20px 44px;box-sizing:border-box}.zlb-front-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(160px,auto);gap:16px;grid-auto-flow:row dense}.zlb-slot{min-width:0;position:relative;overflow:hidden;background:#fff}.zlb-size-1x1{grid-column:span 1;grid-row:span 1}.zlb-size-2x1{grid-column:span 2;grid-row:span 1}.zlb-size-1x2{grid-column:span 1;grid-row:span 2}.zlb-size-2x2{grid-column:span 2;grid-row:span 2}.zlb-size-3x1{grid-column:span 3;grid-row:span 1}.zlb-size-4x1{grid-column:span 4;grid-row:span 1}.zlb-size-3x2{grid-column:span 3;grid-row:span 2}.zlb-size-4x2{grid-column:span 4;grid-row:span 2}.zlb-slot-title{font-size:22px;margin:0 0 12px;padding-bottom:8px;border-bottom:2px solid #207daf}.zlb-article{position:relative;height:100%;min-height:160px;background:#111;overflow:hidden}.zlb-article-image{display:block;width:100%;height:100%;position:absolute;inset:0}.zlb-article-image img{width:100%;height:100%;object-fit:cover;display:block}.zlb-article:after{content:"";position:absolute;inset:30% 0 0;background:linear-gradient(to bottom,transparent,rgba(0,0,0,.86));pointer-events:none}.zlb-article-overlay{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px;color:#fff}.zlb-article h3{margin:6px 0 4px;line-height:1.12;font-weight:500}.zlb-article-single h3{font-size:clamp(22px,2.2vw,38px)}.zlb-article-compact h3{font-size:18px}.zlb-article h3 a{color:#fff;text-decoration:none}.zlb-category{display:inline-block;background:#207daf;color:#fff;padding:4px 7px;font-size:11px;font-weight:700;text-transform:uppercase}.zlb-article time{font-size:12px;opacity:.88}.zlb-post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;height:100%}.zlb-post-grid .zlb-article{min-height:220px}.zlb-banner,.zlb-banner-link,.zlb-custom-content,.zlb-video,.zlb-sports-live{display:block;width:100%;height:100%}.zlb-banner img,.zlb-banner-link img{width:100%;height:100%;object-fit:cover;display:block}.zlb-banner-placeholder,.zlb-sports-placeholder,.zlb-empty{display:flex;align-items:center;justify-content:center;gap:6px;flex-direction:column;min-height:160px;height:100%;border:1px dashed #c3c4c7;background:#f6f7f7;padding:20px;text-align:center}.zlb-video iframe,.zlb-video video{width:100%;height:100%;min-height:260px;border:0;object-fit:cover}.zlb-slider{position:relative;height:100%}.zlb-slide{display:none;height:100%}.zlb-slide.is-active{display:block}.zlb-slider-prev,.zlb-slider-next{position:absolute;z-index:5;top:50%;transform:translateY(-50%);border:0;background:rgba(0,0,0,.55);color:#fff;width:38px;height:38px;border-radius:50%;font-size:24px;cursor:pointer}.zlb-slider-prev{left:12px}.zlb-slider-next{right:12px}.zlb-sports-placeholder strong{color:#207daf}

/* V1.0.1: title scale follows the homepage slot size only. */
.zlb-slot .zlb-article h3{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-wrap:balance}
.zlb-slot.zlb-size-1x1 .zlb-article h3{font-size:clamp(16px,1.35vw,20px);-webkit-line-clamp:3}
.zlb-slot.zlb-size-2x1 .zlb-article h3{font-size:clamp(18px,1.65vw,23px);-webkit-line-clamp:2}
.zlb-slot.zlb-size-1x2 .zlb-article h3{font-size:clamp(18px,1.55vw,22px);-webkit-line-clamp:5}
.zlb-slot.zlb-size-2x2 .zlb-article h3{font-size:clamp(28px,2.65vw,38px);-webkit-line-clamp:4}
.zlb-slot.zlb-size-3x1 .zlb-article h3{font-size:clamp(21px,2vw,28px);-webkit-line-clamp:2}
.zlb-slot.zlb-size-4x1 .zlb-article h3{font-size:clamp(24px,2.35vw,32px);-webkit-line-clamp:2}
.zlb-slot.zlb-size-3x2 .zlb-article h3{font-size:clamp(30px,2.8vw,40px);-webkit-line-clamp:4}
.zlb-slot.zlb-size-4x2 .zlb-article h3{font-size:clamp(32px,3vw,44px);-webkit-line-clamp:4}
.zlb-slot.zlb-size-1x1 .zlb-article-overlay{padding:12px}.zlb-slot.zlb-size-2x1 .zlb-article-overlay{padding:14px}.zlb-slot.zlb-size-1x2 .zlb-article-overlay{padding:14px}.zlb-slot.zlb-size-2x2 .zlb-article-overlay,.zlb-slot.zlb-size-3x2 .zlb-article-overlay,.zlb-slot.zlb-size-4x2 .zlb-article-overlay{padding:18px 20px}

@media(max-width:900px){.zlb-front-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.zlb-size-3x1,.zlb-size-4x1,.zlb-size-3x2,.zlb-size-4x2{grid-column:span 2}.zlb-slot.zlb-size-3x1 .zlb-article h3,.zlb-slot.zlb-size-4x1 .zlb-article h3{font-size:clamp(21px,3vw,28px)}}@media(max-width:620px){.zlb-site-main{padding:16px 12px 32px}.zlb-front-grid{grid-template-columns:1fr;grid-auto-rows:auto}.zlb-slot[class*="zlb-size-"]{grid-column:span 1;grid-row:auto;min-height:0}.zlb-article{min-height:260px}.zlb-post-grid{grid-template-columns:1fr}.zlb-slot[class*="zlb-size-"] .zlb-article h3{font-size:clamp(22px,6vw,30px);-webkit-line-clamp:4}.zlb-slot[class*="zlb-size-"] .zlb-article-overlay{padding:16px}}

/* V1.0.3: on desktop, single-cell (1x1) cards use a smaller title so long headlines fit better. */
@media(min-width:901px){.zlb-slot.zlb-size-1x1 .zlb-article h3{font-size:clamp(14px,1.1vw,17px);line-height:1.08;-webkit-line-clamp:4}}

/* V1.0.4 ---------------------------------------------------------------
 * Desktop grid uses square base cells. The permanent top-three news slots
 * (hero-main + hero-side-1 + hero-side-2) keep text over the image.
 * Other single-post slots become editorial cards: ~2/3 image + ~1/3 text.
 * -------------------------------------------------------------------- */
@media (min-width: 901px) {
    .zlb-front-grid {
        grid-auto-rows: clamp(190px, calc((100vw - 88px) / 4), 298px);
    }

    /* Ordinary article card: image above, copy below. */
    .zlb-slot.zlb-display-stacked.zlb-type-post .zlb-article {
        display: flex;
        flex-direction: column;
        min-height: 0;
        background: #fff;
    }

    .zlb-slot.zlb-display-stacked.zlb-type-post .zlb-article::after {
        display: none;
    }

    .zlb-slot.zlb-display-stacked.zlb-type-post .zlb-article-image {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        flex: 0 0 66.666%;
        min-height: 0;
        overflow: hidden;
    }

    .zlb-slot.zlb-display-stacked.zlb-type-post .zlb-article-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .zlb-slot.zlb-display-stacked.zlb-type-post .zlb-article-overlay {
        position: relative;
        inset: auto;
        flex: 1 1 33.334%;
        min-height: 0;
        padding: 10px 12px 9px;
        color: #111;
        background: #fff;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        overflow: hidden;
    }

    /* More specific than the optional ZINAS Title Style plugin so ordinary
       cards remain black on white while the top three keep the white overlay. */
    .zlb-active .zlb-slot.zlb-display-stacked.zlb-type-post .zlb-article h3 a,
    .zlb-active .zlb-slot.zlb-display-stacked.zlb-type-post .zlb-article h3 a:hover,
    .zlb-active .zlb-slot.zlb-display-stacked.zlb-type-post .zlb-article h3 a:focus {
        color: #111 !important;
        text-shadow: none !important;
    }

    .zlb-slot.zlb-display-stacked.zlb-type-post .zlb-category {
        padding: 2px 5px;
        font-size: 9px;
        line-height: 1.2;
        margin-bottom: 4px;
    }

    .zlb-slot.zlb-display-stacked.zlb-type-post .zlb-article h3 {
        margin: 0;
        line-height: 1.08;
        font-weight: 600;
    }

    .zlb-slot.zlb-display-stacked.zlb-type-post .zlb-article time {
        display: none;
    }

    /* 1x1 is the main editorial card below the top-three block. */
    .zlb-slot.zlb-display-stacked.zlb-size-1x1 .zlb-article h3 {
        font-size: clamp(14px, 1.05vw, 16px);
        -webkit-line-clamp: 4;
    }

    .zlb-slot.zlb-display-stacked.zlb-size-2x1 .zlb-article h3 {
        font-size: clamp(16px, 1.25vw, 19px);
        -webkit-line-clamp: 3;
    }

    .zlb-slot.zlb-display-stacked.zlb-size-1x2 .zlb-article h3 {
        font-size: clamp(16px, 1.2vw, 19px);
        -webkit-line-clamp: 5;
    }

    .zlb-slot.zlb-display-stacked.zlb-size-2x2 .zlb-article h3,
    .zlb-slot.zlb-display-stacked.zlb-size-3x2 .zlb-article h3,
    .zlb-slot.zlb-display-stacked.zlb-size-4x2 .zlb-article h3 {
        font-size: clamp(19px, 1.55vw, 24px);
        -webkit-line-clamp: 4;
    }

    .zlb-slot.zlb-display-stacked.zlb-size-3x1 .zlb-article h3,
    .zlb-slot.zlb-display-stacked.zlb-size-4x1 .zlb-article h3 {
        font-size: clamp(18px, 1.45vw, 22px);
        -webkit-line-clamp: 3;
    }
}

/* On phones/tablets keep the top-three overlay style, but ordinary article
   cards still use a clean image-above / text-below layout without forcing a
   square viewport-height card. */
@media (max-width: 900px) {
    .zlb-slot.zlb-display-stacked.zlb-type-post .zlb-article {
        display: flex;
        flex-direction: column;
        background: #fff;
        min-height: 0;
    }

    .zlb-slot.zlb-display-stacked.zlb-type-post .zlb-article::after {
        display: none;
    }

    .zlb-slot.zlb-display-stacked.zlb-type-post .zlb-article-image {
        position: relative;
        inset: auto;
        height: auto;
        aspect-ratio: 16 / 9;
        flex: none;
    }

    .zlb-slot.zlb-display-stacked.zlb-type-post .zlb-article-overlay {
        position: relative;
        inset: auto;
        background: #fff;
        color: #111;
        padding: 12px 12px 14px;
    }

    .zlb-active .zlb-slot.zlb-display-stacked.zlb-type-post .zlb-article h3 a,
    .zlb-active .zlb-slot.zlb-display-stacked.zlb-type-post .zlb-article h3 a:hover,
    .zlb-active .zlb-slot.zlb-display-stacked.zlb-type-post .zlb-article h3 a:focus {
        color: #111 !important;
        text-shadow: none !important;
    }

    .zlb-slot.zlb-display-stacked.zlb-type-post .zlb-article time {
        color: #666;
        opacity: 1;
    }
}


/* V1.0.5 ---------------------------------------------------------------
 * All single-post cards, including the top three, use image-above/text-below.
 * Desktop card split is 60% image / 40% text so long 4-line headlines fit.
 * -------------------------------------------------------------------- */
@media (min-width: 901px) {
    .zlb-slot.zlb-display-stacked.zlb-type-post .zlb-article-image {
        flex: 0 0 60%;
    }

    .zlb-slot.zlb-display-stacked.zlb-type-post .zlb-article-overlay {
        flex: 1 1 40%;
        padding: 10px 12px 10px;
    }

    .zlb-slot.zlb-display-stacked.zlb-size-1x1 .zlb-article h3 {
        font-size: clamp(13px, 1vw, 16px);
        line-height: 1.08;
        -webkit-line-clamp: 4;
    }

    .zlb-slot.zlb-display-stacked.zlb-size-2x1 .zlb-article h3 {
        font-size: clamp(16px, 1.3vw, 20px);
        line-height: 1.1;
        -webkit-line-clamp: 4;
    }

    .zlb-slot.zlb-display-stacked.zlb-size-2x2 .zlb-article h3 {
        font-size: clamp(22px, 2vw, 30px);
        line-height: 1.1;
        -webkit-line-clamp: 4;
    }

    .zlb-slot.zlb-display-stacked.zlb-size-1x2 .zlb-article h3,
    .zlb-slot.zlb-display-stacked.zlb-size-3x1 .zlb-article h3,
    .zlb-slot.zlb-display-stacked.zlb-size-4x1 .zlb-article h3,
    .zlb-slot.zlb-display-stacked.zlb-size-3x2 .zlb-article h3,
    .zlb-slot.zlb-display-stacked.zlb-size-4x2 .zlb-article h3 {
        -webkit-line-clamp: 4;
    }
}


/* V1.0.6 ---------------------------------------------------------------
 * Desktop: 1x1 cards stay at 60% image / 40% text.
 * Every card larger than one base cell uses 70% image / 30% text.
 * -------------------------------------------------------------------- */
@media (min-width: 901px) {
    .zlb-slot.zlb-display-stacked.zlb-type-post.zlb-size-1x1 .zlb-article-image {
        flex: 0 0 60%;
    }

    .zlb-slot.zlb-display-stacked.zlb-type-post.zlb-size-1x1 .zlb-article-overlay {
        flex: 1 1 40%;
    }

    .zlb-slot.zlb-display-stacked.zlb-type-post.zlb-size-2x1 .zlb-article-image,
    .zlb-slot.zlb-display-stacked.zlb-type-post.zlb-size-1x2 .zlb-article-image,
    .zlb-slot.zlb-display-stacked.zlb-type-post.zlb-size-2x2 .zlb-article-image,
    .zlb-slot.zlb-display-stacked.zlb-type-post.zlb-size-3x1 .zlb-article-image,
    .zlb-slot.zlb-display-stacked.zlb-type-post.zlb-size-4x1 .zlb-article-image,
    .zlb-slot.zlb-display-stacked.zlb-type-post.zlb-size-3x2 .zlb-article-image,
    .zlb-slot.zlb-display-stacked.zlb-type-post.zlb-size-4x2 .zlb-article-image {
        flex: 0 0 70%;
    }

    .zlb-slot.zlb-display-stacked.zlb-type-post.zlb-size-2x1 .zlb-article-overlay,
    .zlb-slot.zlb-display-stacked.zlb-type-post.zlb-size-1x2 .zlb-article-overlay,
    .zlb-slot.zlb-display-stacked.zlb-type-post.zlb-size-2x2 .zlb-article-overlay,
    .zlb-slot.zlb-display-stacked.zlb-type-post.zlb-size-3x1 .zlb-article-overlay,
    .zlb-slot.zlb-display-stacked.zlb-type-post.zlb-size-4x1 .zlb-article-overlay,
    .zlb-slot.zlb-display-stacked.zlb-type-post.zlb-size-3x2 .zlb-article-overlay,
    .zlb-slot.zlb-display-stacked.zlb-type-post.zlb-size-4x2 .zlb-article-overlay {
        flex: 1 1 30%;
        padding: 9px 12px 9px;
    }

    /* Slightly tighter headline sizing for the shorter 30% text area. */
    .zlb-slot.zlb-display-stacked.zlb-size-2x1 .zlb-article h3 {
        font-size: clamp(15px, 1.15vw, 18px);
        line-height: 1.08;
    }

    .zlb-slot.zlb-display-stacked.zlb-size-2x2 .zlb-article h3 {
        font-size: clamp(20px, 1.75vw, 27px);
        line-height: 1.08;
    }

    .zlb-slot.zlb-display-stacked.zlb-size-1x2 .zlb-article h3,
    .zlb-slot.zlb-display-stacked.zlb-size-3x1 .zlb-article h3,
    .zlb-slot.zlb-display-stacked.zlb-size-4x1 .zlb-article h3,
    .zlb-slot.zlb-display-stacked.zlb-size-3x2 .zlb-article h3,
    .zlb-slot.zlb-display-stacked.zlb-size-4x2 .zlb-article h3 {
        line-height: 1.08;
    }
}
