/* ─────────────────────────────────────────────
   LinkedIn News Block — Frontend Styles v4.0.0
   CSS Grid auto-wrap — 3 cols desktop, 2 tablet, 1 mobile
───────────────────────────────────────────── */

/* ── Block wrapper ── */
.lnb-block {
    width: 100%;
    box-sizing: border-box;
}

/* ── Grid layout — auto-wraps into rows of 3 ── */
.lnb-layout-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: start; /* each card only as tall as its content */
}

/* ── Stack layout ── */
.lnb-layout-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.lnb-layout-stack .lnb-post-card {
    width: 524px;
    max-width: 100%;
}

/* ── Card ── */
.lnb-post-card {
    background: #ffffff;
    border: 1px solid #e4e4e4;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    z-index: 0;
}

.lnb-post-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
    transform: translateY(-2px);
}

/* ── Embed wrapper — scale(0.7) to fit 3 columns cleanly ── */
.lnb-embed-wrapper {
    width: 100%;
    height: 490px; /* 750 × 0.7 = 525, minus ~35px footer room */
    overflow: hidden;
    background: #f8f8f8;
    flex-shrink: 0;
    position: relative;
}

.lnb-embed-wrapper iframe {
    display: block;
    border: none;
    transform: scale(0.7);
    transform-origin: top left;
    width: 143%; /* 100% / 0.7 */
    height: 750px;
    position: absolute;
    top: 0;
    left: 0;
}

/* ── Footer ── */
.lnb-card-footer {
    padding: 10px 14px;
    border-top: 1px solid #eeeeee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: #ffffff;
    flex-shrink: 0;
    border-radius: 0 0 6px 6px;
}

.lnb-li-footer-icon {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #0A66C2;
    text-decoration: none;
    transition: color 0.15s ease;
}

.lnb-li-footer-icon:hover {
    color: #004182;
}

.lnb-card-label {
    font-size: 11px;
    color: #888;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Admin empty notice ── */
.lnb-empty-notice {
    background: #fff8e1;
    border-left: 4px solid #f9a825;
    padding: 12px 16px;
    font-size: 14px;
    border-radius: 4px;
    margin: 8px 0;
}

/* ── Responsive ── */

/* Tablet: 2 columns */
@media (max-width: 900px) {
    .lnb-layout-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .lnb-embed-wrapper {
        height: 420px; /* 700 × 0.6 */
    }
    .lnb-embed-wrapper iframe {
        transform: scale(0.6);
        width: 167%; /* 100% / 0.6 */
        height: 700px;
    }
}

/* Mobile: 1 column, no scaling */
@media (max-width: 560px) {
    .lnb-layout-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .lnb-embed-wrapper {
        height: 600px;
        position: relative;
    }
    .lnb-embed-wrapper iframe {
        transform: none;
        width: 100%;
        height: 600px;
        position: static;
    }
}