/* ----- Top row (tabs + search) ----- */
.bgc-blog-wrap { margin: 8px 0 24px; }
.bgc-blog-top {
  display:flex; gap:24px; align-items:center; justify-content:space-between;
  margin: 12px 0 24px;
}
.bgc-tabs { display:flex; gap:28px; list-style:none; padding:0; margin:0; }
.bgc-tabs a {
    text-decoration: none;
    color: #1d1d1f;
    padding: 6px 4px;
    position: relative;
    font-weight: 700;
    text-decoration: none !important;
    font-family: 'Darker Grotesque';
    font-size: 20px;
}
.bgc-tabs a.is-active::after {
  content:""; position:absolute; left:0; right:0; bottom:-8px; height:3px;
  background:#F28A17; border-radius:3px;
}

/* Search */
.bgc-blog-search { display:flex; gap:12px; align-items:center; }
.bgc-search-field { display:flex; align-items:center; gap:8px; background:#fff; border-radius:28px; padding:10px 14px; box-shadow:0 2px 10px rgba(0,0,0,.06); min-width:450px; border: 2px solid #FFC392;}
.bgc-search-field input { border:0; outline:0; width:100%; font:inherit; color:#222; }
.bgc-btn {
    border: 0;
    padding: 10px 18px;
    border-radius: 999px;
    background: linear-gradient(45deg, #FFC392, #FF7300);
    color: #fff;
    font-weight: 600;
    position: absolute;
    right: 0;
    padding: 20px 30px;
    font-family: 'Darker Grotesque';
    font-size: 20px;
}

/* ----- Grid ----- */
.bgc-post-grid { display:grid; gap:32px; }
.bgc-post-grid.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.bgc-post-grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.bgc-post-grid.cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

.bgc-post-card .thumb img { width:100%; height:250px; border-radius:16px; display:block; }
.bgc-post-card .pill {
  display:inline-block; font-size:.85rem; padding:.25rem .6rem; border-radius:999px;
  background:#FFE8D2; color:#9b4e00; margin:10px 0;
}
.bgc-post-card .title { 
    font-size:1.25rem; 
    line-height:1.3; 
    margin:6px 0 8px; 
    font-family: 'Darker Grotesque';
    font-weight: 700;
}
.bgc-post-card .title a { color:#111; text-decoration:none; }
.bgc-post-card .excerpt {
    color: #979797;
    font-family: 'Poppins';
    font-size: 12px;
}
.bgc-post-card .meta { margin-top:12px; display:flex; align-items:center; justify-content:space-between; }
.bgc-post-card .meta .author {
    font-family: 'Darker Grotesque';
    text-transform: capitalize;
    font-weight: 700;
    font-size: 20px;
    display: flex;
    align-items: center;
}

.bgc-post-card .meta .author .avatar-wrap img {
    border-radius: 100%;
}

.bgc-post-card .author .avatar { margin-right:6px; }
.bgc-post-card .btn-read {
    background: linear-gradient(45deg, #FFC392, #FF7300);
    color: #fff;
    padding: .55rem 1rem;
    border-radius: 999px;
    text-decoration: none !important;
    padding: 10px 40px;
}

/* ----- Pagination ----- */
.bgc-pagination ul { display:flex; align-items:center; gap:10px; list-style:none; padding:0; margin:24px 0; flex-wrap:wrap; }
.bgc-pagination a, .bgc-pagination span {
    display: inline-block;
    padding: .45rem .75rem;
    border-radius: 8px;
    text-decoration: none !important;
    color: #000;
}

.bgc-pagination {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin: 50px 0px;
}

.bgc-pagination span.nav-prev i.fa-chevron-left {
    margin-right: 10px;
    background: linear-gradient(45deg, #FFC392, #FF7300);
    color: #fff;
    padding: 10px 15px;
    border-radius: 100%;
    font-size: 20px;
}

.bgc-pagination span.nav-next i.fa-chevron-right {
    margin-left: 10px;
    background: linear-gradient(45deg, #FFC392, #FF7300);
    color: #fff;
    padding: 10px 15px;
    border-radius: 100%;
    font-size: 20px;
}

.bgc-pagination .current {
    border: 2px solid #E8690040;
    background: linear-gradient(45deg, #fff, #FFF0E4);
}

/* Responsive niceties */
@media (max-width: 900px) {
  .bgc-blog-top { flex-direction:column; align-items:stretch; gap:16px; }
  .bgc-tabs { flex-wrap:wrap; gap:18px; }
  .bgc-search-field { min-width:0; width:100%; }
  .bgc-post-grid.cols-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 600px) {
  .bgc-post-grid.cols-2,
  .bgc-post-grid.cols-3,
  .bgc-post-grid.cols-4 { grid-template-columns: 1fr; }
}