/* ===== Scope everything to the widget root ===== */
.ebf-widget {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* ===== Category Pills ===== */
.ebf-widget .ebf-categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px;
}

.ebf-widget .ebf-cat-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #000 !important;
    background-color: #fff !important;
    color: #000 !important;
    padding: 8px 18px !important;
    font-size: 14px !important;
    font-weight: 500;
    border-radius: 999px !important; /* strong pill */
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.25s ease;
    line-height: 1.2;
    text-decoration: none !important;
    font-family: inherit;
}
.ebf-widget .ebf-cat-btn:hover {
    background-color: #f2f2f2 !important;
}
.ebf-widget .ebf-cat-btn.active {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #000 !important;
}

/* Icon container + sizes (SVG, <i>, IMG) */
.ebf-widget .ebf-cat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ebf-widget .ebf-cat-icon img {
    width: 18px; height: 18px; object-fit: contain; display: inline-block;
}
.ebf-widget .ebf-cat-icon i {
    width: 18px; height: 18px; font-size: 16px; line-height: 1; display: inline-block;
}
.ebf-widget .ebf-cat-icon svg {
    width: 18px; height: 18px; display: inline-block; fill: currentColor;
}

/* ===== Grid ===== */
.ebf-widget .ebf-posts-wrapper {
    display: grid;
    gap: 30px;
}
.ebf-widget .ebf-posts-wrapper[data-cols="1"] { grid-template-columns: repeat(1, 1fr); }
.ebf-widget .ebf-posts-wrapper[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.ebf-widget .ebf-posts-wrapper[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.ebf-widget .ebf-posts-wrapper[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
  .ebf-widget .ebf-posts-wrapper[data-cols="4"] { grid-template-columns: repeat(3, 1fr); }
  .ebf-widget .ebf-posts-wrapper[data-cols="3"] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .ebf-widget .ebf-posts-wrapper { grid-template-columns: 1fr !important; }
}

/* ===== Post Card ===== */
.ebf-widget .ebf-post-card,
.ebf-widget .ebf-post-card * { box-sizing: border-box; }

.ebf-widget .ebf-post-card {
    background: #fff !important;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    height: 100%;
}
.ebf-widget .ebf-post-thumb img {
    width: 100%; height: auto; object-fit: cover; border-radius: 4px; margin-bottom: 12px;
}
.ebf-widget .ebf-post-title {
    font-size: 20px !important; font-weight: 700 !important; margin: 0 0 10px !important; line-height: 1.3 !important;
    color: #1a1a1a !important;
}
.ebf-widget .ebf-post-excerpt {
    flex-grow: 1; font-size: 15px; color: #4a4a4a; margin: 0 0 16px;
}
.ebf-widget .ebf-read-more {
    align-self: start;
    padding: 10px 16px !important;
    border: 2px solid #000 !important;
    background: #f6c744 !important;
    color: #000 !important;
    text-decoration: none !important;
    border-radius: 4px;
    font-weight: 700;
    transition: all 0.2s ease;
    display: inline-block;
}
.ebf-widget .ebf-read-more:hover {
    background: #000 !important; color: #f6c744 !important;
}

/* ===== Pagination ===== */
.ebf-widget .ebf-pagination-wrapper { margin-top: 30px; text-align: right; }
.ebf-widget .ebf-pagination { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.ebf-widget .ebf-page-number {
    padding: 8px 14px;
    background: #eee;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    transition: background .2s, color .2s;
}
.ebf-widget .ebf-page-number:hover,
.ebf-widget .ebf-page-number.active { background: #000; color: #fff; }

/* ===== No Posts ===== */
.ebf-widget .ebf-no-posts { text-align: center; font-style: italic; color: #777; margin-top: 40px; }