/* ============================================================
   Insights Blog Plugin — Frontend Styles
   Matches reference design exactly: image top, text bottom
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap');

:root {
  --ib-accent:       #1a56db;
  --ib-accent-hover: #1447b0;
  --ib-text:         #111827;
  --ib-muted:        #6b7280;
  --ib-border:       #e5e7eb;
  --ib-bg:           #f8faff;
  --ib-white:        #ffffff;
  --ib-radius:       12px;
  --ib-shadow:       0 1px 4px rgba(0,0,0,.07), 0 2px 10px rgba(0,0,0,.04);
  --ib-shadow-hover: 0 6px 24px rgba(26,86,219,.13);
  --ib-font:         'Red Hat Display', system-ui, sans-serif;
}

/* Category colour palette */
.ib-cat-color-lead-management    { color: #4f46e5 !important; background: #eef2ff !important; }
.ib-cat-color-networking-tips    { color: #059669 !important; background: #ecfdf5 !important; }
.ib-cat-color-sales-productivity { color: #d97706 !important; background: #fffbeb !important; }
.ib-cat-color-business-growth    { color: #7c3aed !important; background: #f5f3ff !important; }

.ib-blog-wrap * { box-sizing: border-box; }

.ib-blog-wrap {
  font-family: var(--ib-font);
  color: var(--ib-text);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 60px;
}

/* HERO */
.ib-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  background: linear-gradient(135deg, #f0f5ff 0%, #e8f0fe 100%);
  border-radius: 20px;
  padding: 50px 52px;
  margin-bottom: 36px;
  position: relative;
  overflow: hidden;
}
.ib-hero::before {
  content:'';position:absolute;top:-60px;right:-60px;width:260px;height:260px;
  border-radius:50%;background:radial-gradient(circle,rgba(26,86,219,.1),transparent 70%);
  pointer-events:none;
}
.ib-hero-title {
  font-family:'Red Hat Display',system-ui,sans-serif;font-size:clamp(24px,3vw,36px);font-weight:700;
  line-height:1.25;color:#0f172a;margin:0 0 14px;
}
.ib-hero-sub { font-size:15px;color:#475569;line-height:1.65;margin:0 0 24px; }
.ib-hero-img { display:flex;justify-content:flex-end;align-items:center; }
.ib-hero-img img,.ib-hero-svg {
  width:100%;max-width:420px;border-radius:12px;
  filter:drop-shadow(0 8px 20px rgba(26,86,219,.12));
}

/* Search */
.ib-search-wrap { position:relative;max-width:360px; }
.ib-search-box {
  display:flex;align-items:center;gap:10px;background:#fff;
  border:1.5px solid var(--ib-border);border-radius:50px;padding:11px 20px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);transition:border .2s,box-shadow .2s;
}
.ib-search-box:focus-within { border-color:var(--ib-accent);box-shadow:0 0 0 3px rgba(26,86,219,.12); }
.ib-search-box svg { color:var(--ib-muted);flex-shrink:0; }
.ib-search-box input { border:none;outline:none;font-size:14px;font-family:var(--ib-font);color:var(--ib-text);background:transparent;width:100%; }
.ib-search-box input::placeholder { color:#9ca3af; }
.ib-search-results {
  position:absolute;top:calc(100% + 6px);left:0;right:0;
  background:#fff;border:1px solid var(--ib-border);border-radius:12px;
  box-shadow:0 8px 30px rgba(0,0,0,.12);z-index:100;overflow:hidden;
}
.ib-search-results a { display:flex;align-items:center;gap:10px;padding:10px 14px;text-decoration:none;color:var(--ib-text);font-size:13px;transition:background .15s; }
.ib-search-results a:hover { background:#f0f5ff; }
.ib-search-results img { width:36px;height:36px;border-radius:6px;object-fit:cover; }
.ib-search-results .ib-no-results { padding:16px;font-size:13px;color:var(--ib-muted);text-align:center; }

/* TABS */
/* TABS — now sits between featured card and article grid */
.ib-tabs { display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 20px;padding:0; }
.ib-tab {
  display:inline-flex;align-items:center;gap:6px;padding:8px 18px;
  border-radius:50px;font-size:13px;font-weight:600;font-family:var(--ib-font);
  border:1.5px solid var(--ib-border);background:#fff;color:#4b5563;
  cursor:pointer;transition:all .2s;white-space:nowrap;
}
.ib-tab:hover { background:#0278FE; border-color:#0278FE; color:#ffffff; }
.ib-tab.active { background:var(--ib-accent);border-color:var(--ib-accent);color:#fff;box-shadow:0 3px 12px rgba(26,86,219,.3); }

/* LAYOUT */
.ib-content { display:block; }
.ib-content.ib-has-sidebar { display:grid;grid-template-columns:1fr 300px;gap:36px;align-items:start; }
.ib-section-title { font-family:'Red Hat Display',system-ui,sans-serif;font-size:22px;font-weight:700;color:#0f172a;margin:28px 0 16px; }
.ib-section-title:first-child { margin-top:0; }

/* FEATURED CARD */
.ib-featured-card {
  background:#fff;border:1px solid var(--ib-border);border-radius:var(--ib-radius);
  padding:28px 28px 28px 32px;
  display:grid;grid-template-columns:1fr 280px;gap:28px;align-items:center;
  box-shadow:var(--ib-shadow);margin-bottom:8px;
  transition:box-shadow .25s,transform .25s;
}
/* No image set — collapse to single column */
.ib-featured-card.ib-no-img {
  grid-template-columns: 1fr;
}
.ib-featured-card:hover { box-shadow:var(--ib-shadow-hover);transform:translateY(-2px); }

.ib-badge {
  display:inline-flex;align-items:center;gap:5px;padding:4px 12px;
  border-radius:50px;font-size:11px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;margin-bottom:12px;
}
.ib-badge-featured { background:#eff6ff;color:var(--ib-accent);border:1px solid #bfdbfe; }

.ib-featured-title { font-family:'Red Hat Display',system-ui,sans-serif;font-size:clamp(20px,2.2vw,26px);font-weight:700;line-height:1.3;margin:0 0 14px; }
.ib-featured-title a { text-decoration:none;color:#0f172a;transition:color .2s; }
.ib-featured-title a:hover { color:var(--ib-accent); }
.ib-featured-excerpt p { color:#4b5563;font-size:14px;line-height:1.75;margin:0 0 8px; }

.ib-featured-footer { display:flex;align-items:center;gap:16px;margin-top:18px;flex-wrap:wrap; }

.ib-feat-cat-tag {
  display:inline-block;font-size:10px;font-weight:700;
  letter-spacing:.1em;padding:3px 10px;border-radius:4px;
}

.ib-read-more-btn {
  display:inline-flex;align-items:center;gap:6px;
  background:var(--ib-accent);color:#fff !important;
  padding:10px 22px;border-radius:50px;font-size:13px;font-weight:600;
  text-decoration:none !important;transition:all .2s;
  box-shadow:0 3px 10px rgba(26,86,219,.28);
}
.ib-read-more-btn:hover { background:var(--ib-accent-hover);transform:translateY(-1px);box-shadow:0 6px 18px rgba(26,86,219,.32); }

.ib-featured-img { border-radius:10px;overflow:hidden;background:#f1f5f9;height:220px; }
.ib-featured-img img { width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s; }
.ib-featured-card:hover .ib-featured-img img { transform:scale(1.04); }

/* ARTICLE GRID — IMAGE ON TOP, TEXT ON BOTTOM */
.ib-articles-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}

.ib-article-card {
  background:#fff;
  border:1px solid var(--ib-border);
  border-radius:var(--ib-radius);
  overflow:hidden;
  box-shadow:var(--ib-shadow);
  transition:box-shadow .25s,transform .25s;
  display:flex;
  flex-direction:column;   /* ← image first, body second */
}

.ib-article-card:hover {
  box-shadow:var(--ib-shadow-hover);
  transform:translateY(-3px);
}

/* IMAGE — always on top, full width */
.ib-card-img {
  position:relative;
  width:100%;
  height:190px;             /* consistent height across all cards */
  overflow:hidden;
  background:#f1f5f9;
  flex-shrink:0;
}

.ib-card-img img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s ease;
}

.ib-article-card:hover .ib-card-img img { transform:scale(1.05); }

/* Badge overlaid bottom-left on image */
.ib-img-badge {
  position:absolute;
  bottom:10px;left:12px;
  background:var(--ib-accent);
  color:#fff;font-size:10px;font-weight:700;
  padding:3px 10px;border-radius:50px;
  letter-spacing:.06em;text-transform:uppercase;z-index:2;
}

/* TEXT — always below image */
.ib-card-body {
  padding:16px 18px 18px;
  display:flex;flex-direction:column;flex:1;
}

/* Category pill */
.ib-card-cat {
  display:inline-block;
  font-size:10px;font-weight:700;
  letter-spacing:.1em;padding:3px 10px;
  border-radius:4px;margin-bottom:10px;width:fit-content;
}

.ib-card-title {
  font-family:'Red Hat Display',system-ui,sans-serif;font-size:15px;font-weight:700;
  line-height:1.4;margin:0 0 9px;color:#0f172a;
}
.ib-card-title a { text-decoration:none;color:inherit;transition:color .2s; }
.ib-card-title a:hover { color:var(--ib-accent); }

.ib-card-excerpt {
  font-size:13px;color:#6b7280;line-height:1.65;
  margin:0 0 14px;flex:1;
}

/* Footer row */
.ib-card-footer {
  display:flex;justify-content:space-between;align-items:center;
  padding-top:12px;border-top:1px solid #f3f4f6;margin-top:auto;
}

.ib-card-cat-link {
  display:inline-flex;align-items:center;gap:5px;
  font-size:12px;font-weight:600;
  text-decoration:none !important;transition:opacity .2s;
}
.ib-card-cat-link:hover { opacity:.75; }

.ib-cat-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--ib-accent); }

/* override dot colour per category */
.ib-card-cat-link.ib-cat-color-lead-management    .ib-cat-dot { background:#4f46e5; }
.ib-card-cat-link.ib-cat-color-networking-tips    .ib-cat-dot { background:#059669; }
.ib-card-cat-link.ib-cat-color-sales-productivity .ib-cat-dot { background:#d97706; }
.ib-card-cat-link.ib-cat-color-business-growth    .ib-cat-dot { background:#7c3aed; }

.ib-card-read-more { font-size:12px;font-weight:600;color:#9ca3af;text-decoration:none;transition:color .2s; }
.ib-card-read-more:hover { color:var(--ib-accent); }

.ib-no-posts {
  grid-column:1/-1;padding:40px;text-align:center;color:var(--ib-muted);font-size:15px;
  background:#fff;border-radius:var(--ib-radius);border:1px dashed var(--ib-border);
}

/* SIDEBAR */
.ib-sidebar { display:flex;flex-direction:column;gap:20px;position:sticky;top:24px; }
.ib-sidebar-widget { background:#fff;border:1px solid var(--ib-border);border-radius:var(--ib-radius);padding:20px 22px;box-shadow:var(--ib-shadow); }
.ib-widget-title { font-size:15px;font-weight:700;color:#0f172a;margin:0 0 16px;font-family:'Red Hat Display',system-ui,sans-serif; }
.ib-widget-header { display:flex;align-items:center;gap:10px;margin-bottom:10px; }
.ib-widget-header .ib-widget-title { margin-bottom:0; }
.ib-widget-icon { font-size:20px;width:38px;height:38px;background:#eff6ff;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.ib-widget-sub { font-size:13px;color:var(--ib-muted);margin:0 0 14px;line-height:1.55; }

/* Popular */
.ib-popular-list { list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0; }
.ib-popular-list li { display:flex;align-items:flex-start;gap:10px;padding:11px 0;border-bottom:1px solid #f3f4f6; }
.ib-popular-list li:last-child { border-bottom:none;padding-bottom:0; }
.ib-popular-list li:first-child { padding-top:0; }
.ib-popular-icon { width:28px;height:28px;background:#eff6ff;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;margin-top:1px; }
.ib-popular-list a { font-size:13px;font-weight:600;color:#374151;text-decoration:none;line-height:1.45;transition:color .2s; }
.ib-popular-list a:hover { color:var(--ib-accent); }

/* Updates */
.ib-update-list { list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px; }
.ib-update-list li { display:flex;align-items:center;gap:8px;font-size:13px;color:#374151; }
.ib-check { width:18px;height:18px;background:#d1fae5;color:#059669;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;flex-shrink:0; }

/* Newsletter */
.ib-newsletter-form { display:flex;flex-direction:column;gap:10px; }
.ib-newsletter-form input { border:1.5px solid var(--ib-border);border-radius:8px;padding:10px 14px;font-size:13px;font-family:var(--ib-font);outline:none;width:100%;transition:border .2s,box-shadow .2s; }
.ib-newsletter-form input:focus { border-color:var(--ib-accent);box-shadow:0 0 0 3px rgba(26,86,219,.1); }
.ib-subscribe-btn { background:var(--ib-accent);color:#fff;border:none;border-radius:8px;padding:12px;font-size:14px;font-weight:700;font-family:var(--ib-font);cursor:pointer;width:100%;transition:background .2s,transform .2s;box-shadow:0 3px 10px rgba(26,86,219,.28); }
.ib-subscribe-btn:hover { background:var(--ib-accent-hover);transform:translateY(-1px); }
.ib-subscribe-btn:disabled { opacity:.6;cursor:not-allowed;transform:none; }

/* ANIMATIONS */
@keyframes ib-fadeup { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
.ib-featured-card { animation:ib-fadeup .4s ease both; }
.ib-articles-grid .ib-article-card { animation:ib-fadeup .4s ease both; }
.ib-articles-grid .ib-article-card:nth-child(1){animation-delay:.04s}
.ib-articles-grid .ib-article-card:nth-child(2){animation-delay:.08s}
.ib-articles-grid .ib-article-card:nth-child(3){animation-delay:.12s}
.ib-articles-grid .ib-article-card:nth-child(4){animation-delay:.16s}
.ib-articles-grid .ib-article-card:nth-child(5){animation-delay:.20s}
.ib-articles-grid .ib-article-card:nth-child(6){animation-delay:.24s}
.ib-article-card.ib-hidden { display:none !important; }

/* RESPONSIVE */
@media(max-width:960px){
  .ib-content.ib-has-sidebar{grid-template-columns:1fr}
  .ib-sidebar{position:static}
}
@media(max-width:700px){
  .ib-hero{grid-template-columns:1fr;padding:28px 20px}
  .ib-hero-img{display:none}
  .ib-search-wrap{max-width:100%}
  .ib-featured-card{grid-template-columns:1fr;padding:20px}
  .ib-featured-img{height:180px}
  .ib-articles-grid{grid-template-columns:1fr}
}

/* ── Tab filter loading state ── */
.ib-filter-loading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 60px 20px;
  font-size: 14px;
  color: var(--ib-muted);
  font-weight: 600;
}

.ib-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2.5px solid #e5e7eb;
  border-top-color: var(--ib-accent);
  border-radius: 50%;
  animation: ib-spin .7s linear infinite;
  flex-shrink: 0;
}

@keyframes ib-spin {
  to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════
   SINGLE ARTICLE PAGE — LAYOUT + SIDEBAR
═══════════════════════════════════════ */
.ib-single-wrap { padding-top: 0; }

.ib-single-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 60px;
}

.ib-single-content {
  min-width: 0;
}

/* Sidebar — sticky, identical styles to blog listing sidebar */
.ib-single-sidebar {
  position: sticky;
  top: 30px;
}

/* Remove underlines from all sidebar links */
.ib-single-sidebar a,
.ib-single-sidebar a:hover {
  text-decoration: none !important;
}

/* Responsive */
@media (max-width: 960px) {
  .ib-single-layout {
    grid-template-columns: 1fr;
  }
  .ib-single-sidebar {
    position: static;
  }
}

/* ── Back button & Breadcrumb ── */
.ib-single-topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ib-border);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

.ib-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1.5px solid var(--ib-border);
  color: #374151 !important;
  text-decoration: none !important;
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--ib-font);
  transition: all .2s;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.ib-back-btn:hover {
  background: var(--ib-accent) !important;
  border-color: var(--ib-accent) !important;
  color: #fff !important;
  transform: translateX(-2px);
}

.ib-single-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #9ca3af;
}

.ib-single-breadcrumb a {
  color: #6b7280 !important;
  text-decoration: none !important;
  transition: color .2s;
}

.ib-single-breadcrumb a:hover { color: var(--ib-accent) !important; }

.ib-bc-sep { color: #d1d5db; }

.ib-bc-cat {
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.ib-bc-title {
  color: #374151;
  font-weight: 500;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Article meta row (date · read time · author) ── */
.ib-single-header { margin-bottom: 20px; }

.ib-single-title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  color: #111827;
  margin: 10px 0 4px;
}

.ib-single-featured-img {
  margin: 20px 0 28px;
  border-radius: 12px;
  overflow: hidden;
}

.ib-single-featured-img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

.ib-single-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.ib-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: #6b7280;
  font-weight: 500;
}

.ib-meta-item svg { color: #9ca3af; flex-shrink: 0; }
.ib-meta-sep { color: #d1d5db; font-size: 16px; }

/* ── Bottom back button ── */
.ib-single-footer {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--ib-border);
}

/* ═══════════════════════════════════════
   SINGLE PAGE — LATEST 3 ARTICLES
═══════════════════════════════════════ */
.ib-related-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px 20px;
  border-top: 2px solid var(--ib-border);
}

.ib-related-title {
  font-family: var(--ib-font);
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 24px;
}

.ib-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.ib-related-card {
  background: #fff;
  border: 1px solid var(--ib-border);
  border-radius: var(--ib-radius);
  overflow: hidden;
  box-shadow: var(--ib-shadow);
  display: flex;
  flex-direction: column;
  transition: box-shadow .25s, transform .25s;
}

.ib-related-card:hover {
  box-shadow: var(--ib-shadow-hover);
  transform: translateY(-3px);
}

.ib-related-img {
  width: 100%;
  height: 170px;
  overflow: hidden;
  background: #f1f5f9;
  flex-shrink: 0;
}

.ib-related-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s;
}

.ib-related-card:hover .ib-related-img img {
  transform: scale(1.05);
}

.ib-related-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ib-related-card-title {
  font-family: var(--ib-font);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 9px;
  color: #0f172a;
}

.ib-related-card-title a {
  text-decoration: none !important;
  color: inherit;
  transition: color .2s;
}

.ib-related-card-title a:hover { color: var(--ib-accent); }

.ib-related-excerpt {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.65;
  margin: 0 0 14px;
  flex: 1;
}

.ib-related-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid #f3f4f6;
  margin-top: auto;
}

.ib-related-date {
  font-size: 12px;
  color: #9ca3af;
  font-weight: 500;
}

/* Responsive */
@media (max-width: 768px) {
  .ib-related-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 769px) and (max-width: 960px) {
  .ib-related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ═══════════════════════════════════════
   PAGINATION
═══════════════════════════════════════ */
.ib-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 32px 0 8px;
  flex-wrap: wrap;
}

.ib-page-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fff;
  border: 1.5px solid var(--ib-border);
  color: #374151;
  padding: 9px 18px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--ib-font);
  cursor: pointer;
  transition: all .2s;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.ib-page-btn:hover {
  background: var(--ib-accent);
  border-color: var(--ib-accent);
  color: #fff;
  box-shadow: 0 3px 12px rgba(26,86,219,.2);
}

.ib-page-numbers {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ib-page-num {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1.5px solid var(--ib-border);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--ib-font);
  color: #374151;
  cursor: pointer;
  transition: all .2s;
}

.ib-page-num:hover {
  background: #F8F7FF;
  border-color: #F8F7FF;
  color: #0278FE;
}

.ib-page-num.active {
  background: var(--ib-accent);
  border-color: var(--ib-accent);
  color: #fff;
  box-shadow: 0 3px 10px rgba(26,86,219,.3);
  cursor: default;
}




/* ── Comments section ── */
.ib-comments-section {
  margin-top: 48px;
  padding-top: 36px;
  border-top: 2px solid #e5e7eb;
}

.ib-comments-title {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 24px;
  padding: 0;
}

/* Reset any theme float/position interference on our comment list */
.ib-comment-list,
.ib-comment-list * {
  box-sizing: border-box;
}

.ib-comment-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 40px !important;
}

.ib-comment {
  padding: 20px 0 !important;
  border-bottom: 1px solid #f0f0f0 !important;
  overflow: hidden;
}

.ib-comment:last-child {
  border-bottom: none !important;
}

.ib-comment-body {
  display: block !important;
}

/* Header: force flex, override any theme float on avatar */
.ib-comment-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 10px !important;
  overflow: hidden;
}

.ib-comment-avatar {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 50% !important;
  float: none !important;
  position: static !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  order: 0 !important;
}

.ib-comment-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
  flex: 1 !important;
  float: none !important;
  position: static !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ib-comment-name {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  display: block !important;
  line-height: 1.3 !important;
}

.ib-comment-date {
  font-size: 12px !important;
  color: #9ca3af !important;
  display: block !important;
  line-height: 1.3 !important;
}

.ib-comment-text {
  font-size: 14px !important;
  color: #374151 !important;
  line-height: 1.7 !important;
  margin: 0 0 8px 56px !important;
  padding: 0 !important;
  float: none !important;
}

.ib-comment-text p {
  margin: 0 0 6px !important;
}

.ib-comment-text p:last-child {
  margin-bottom: 0 !important;
}

.ib-comment-pending {
  font-size: 13px !important;
  color: #f59e0b !important;
  font-style: italic !important;
}

.ib-comment-reply {
  margin-left: 56px !important;
  padding: 0 !important;
  float: none !important;
  clear: both !important;
}

.ib-comment-reply a,
.ib-comment-reply .comment-reply-link {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--ib-accent, #1a56db) !important;
  text-decoration: none !important;
  background: none !important;
  padding: 0 !important;
  border: none !important;
}

.ib-comment-reply a:hover {
  text-decoration: underline !important;
}

/* Nested replies */
.ib-comment-list .children {
  list-style: none !important;
  padding: 0 0 0 56px !important;
  margin: 12px 0 0 !important;
  border-left: 3px solid #e5e7eb !important;
}

/* Comment form */
.ib-comments-section #respond {
  margin-top: 8px;
  padding: 0;
}

.ib-comments-section #respond h3,
.ib-comments-section .ib-comments-title {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 20px;
}

.ib-comment-form p {
  margin-bottom: 16px !important;
}

.ib-comment-form label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  margin-bottom: 6px !important;
}

.ib-comment-form input[type="text"],
.ib-comment-form input[type="email"],
.ib-comment-form input[type="url"],
.ib-comment-form textarea,
.ib-comments-section #respond input[type="text"],
.ib-comments-section #respond input[type="email"],
.ib-comments-section #respond textarea {
  width: 100% !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 8px !important;
  outline: none !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
  color: #111827 !important;
  background: #fff !important;
  transition: border-color .2s !important;
  box-shadow: none !important;
}

.ib-comment-form input:focus,
.ib-comment-form textarea:focus,
.ib-comments-section #respond input:focus,
.ib-comments-section #respond textarea:focus {
  border-color: var(--ib-accent, #1a56db) !important;
}

.ib-comment-form textarea,
.ib-comments-section #respond textarea {
  min-height: 130px !important;
  resize: vertical !important;
}

.ib-comment-submit,
.ib-comments-section #respond input[type="submit"] {
  background: var(--ib-accent, #1a56db) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 11px 28px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  font-family: inherit !important;
  transition: opacity .2s !important;
  box-shadow: none !important;
}

.ib-comment-submit:hover,
.ib-comments-section #respond input[type="submit"]:hover {
  opacity: 0.88 !important;
}

.ib-comments-section .comment-notes,
.ib-comments-section .logged-in-as {
  font-size: 13px !important;
  color: #6b7280 !important;
  margin-bottom: 16px !important;
}

.ib-comment-avatar-wrap {
  flex-shrink: 0 !important;
  width: 44px !important;
  height: 44px !important;
  float: none !important;
  position: static !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ib-comment-avatar-wrap img {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  float: none !important;
  position: static !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Clickable card images ── */
.ib-card-img-link {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 0;
  cursor: pointer;
}

.ib-card-img-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}

.ib-card-img:hover .ib-card-img-link img,
.ib-featured-img:hover .ib-card-img-link img,
.ib-related-img:hover .ib-card-img-link img {
  transform: scale(1.04);
}

/* ── Hide theme's post title + meta header on ib_article single pages ── */
/* Targets the most common theme header patterns */
.single-ib_article .entry-header,
.single-ib_article .post-header,
.single-ib_article .article-header,
.single-ib_article .page-header,
.single-ib_article .post-title-wrap,
.single-ib_article .entry-title,
.single-ib_article h1.entry-title,
.single-ib_article h1.post-title,
.single-ib_article .post-meta,
.single-ib_article .entry-meta,
.single-ib_article .post-author,
.single-ib_article .byline,
.single-ib_article .posted-on,
.single-ib_article .post-date {
  display: none !important;
}