/* ===== Shared look: uses your theme's colours when it defines them ===== */
.blog-grid,.blog-pagination{
  --blog-accent:var(--main-600,#2f5fd0);
  --blog-accent-soft:var(--main-50,rgba(47,95,208,.12));
  --blog-line:rgba(128,128,128,.28);
}
 
/* ===== Listing: card grid ===== */
.blog-intro{margin:0 0 20px;opacity:.85}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:24px}
 
.blog-card{position:relative;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--blog-line);border-radius:14px;background:transparent;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.blog-card:hover{transform:translateY(-3px);border-color:var(--blog-accent);box-shadow:0 10px 28px rgba(0,0,0,.12)}
.blog-card:focus-within{outline:2px solid var(--blog-accent);outline-offset:2px}
 
.blog-card__media{position:relative;aspect-ratio:1200/630;overflow:hidden;background:var(--blog-accent-soft)}
.blog-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.blog-card:hover .blog-card__media img{transform:scale(1.04)}
 
.blog-card__body{display:flex;flex-direction:column;flex:1;gap:10px;padding:18px 20px 16px}
.blog-card__tags{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:6px}
.blog-tag{padding:2px 10px;border-radius:99px;background:var(--blog-accent-soft);color:var(--blog-accent);font-size:.75rem;font-weight:600;line-height:1.6;text-decoration:none}
.blog-tag:hover{background:var(--blog-accent);color:#fff}
 
.blog-card__title{margin:0;font-size:1.15rem;line-height:1.35}
.blog-card__title a{color:inherit;text-decoration:none}
.blog-card__title a::after{content:"";position:absolute;inset:0;z-index:1}   /* whole card is clickable */
.blog-card:hover .blog-card__title a{color:var(--blog-accent)}
 
.blog-card__excerpt{margin:0;font-size:.925rem;opacity:.8;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
 
.blog-card__meta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;padding-top:12px;border-top:1px solid var(--blog-line);font-size:.8rem}
.blog-card__meta time{opacity:.75;white-space:nowrap}
.blog-card__more{color:var(--blog-accent);font-weight:600;white-space:nowrap}
 
/* The newest post on page 1 spans the full width */
.blog-card--featured{grid-column:1/-1}
@media (min-width:768px){
  .blog-card--featured{flex-direction:row}
  .blog-card--featured .blog-card__media{flex:0 0 52%;aspect-ratio:auto;min-height:280px}
  .blog-card--featured .blog-card__body{justify-content:center;gap:14px;padding:28px 32px}
  .blog-card--featured .blog-card__title{font-size:1.6rem}
  .blog-card--featured .blog-card__excerpt{font-size:1rem;-webkit-line-clamp:5;line-clamp:5}
  .blog-card--featured .blog-card__meta{margin-top:6px}
}
@media (prefers-reduced-motion:reduce){
  .blog-card,.blog-card__media img{transition:none}
  .blog-card:hover,.blog-card:hover .blog-card__media img{transform:none}
}

/* ===== Pagination ===== */
.blog-pagination{margin-top:32px;text-align:center}
.blog-pagination .pagination{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;list-style:none}
.blog-pagination .pagination .page-item{margin:0}
.blog-pagination .pagination .page-item:not(:first-child) .page-link{margin-left:0}
.blog-pagination .pagination .page-link,
.blog-pagination .pagination .page-item:first-child .page-link,
.blog-pagination .pagination .page-item:last-child .page-link{
  display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 14px;
  border:1px solid var(--blog-line);border-radius:10px;background:transparent;color:inherit;
  font-weight:600;font-size:.95rem;line-height:1;text-decoration:none;box-shadow:none;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.blog-pagination .pagination a.page-link:hover,
.blog-pagination .pagination a.page-link:focus-visible{border-color:var(--blog-accent);background:var(--blog-accent-soft);color:var(--blog-accent);outline:0}
.blog-pagination .pagination .page-item.active .page-link{background:var(--blog-accent);border-color:var(--blog-accent);color:#fff}
.blog-pagination .pagination .page-item.disabled .page-link{min-width:0;padding:0 4px;border-color:transparent;opacity:.55}
.blog-pagination__count{margin:12px 0 0;font-size:.85rem;opacity:.7}
@media (max-width:480px){
  .blog-pagination .pagination .page-link{min-width:38px;height:38px;padding:0 10px}
}

.blog-meta{margin:8px 0 16px;padding:5px 2px;}
.blog-card .blog-meta{margin:8px 0}
.blog-hero{display:block;max-width:625px;height:auto;border-radius:8px;margin:0 auto 25px}
.blog-content img,.blog-content video,.blog-content iframe{max-width:100%;height:auto}
.blog-content pre{overflow-x:auto}

.meta-link {transition:color .2s ease-in-out;color:#797a95;vertical-align:middle;text-decoration:none}
.meta-link:not(.media) {display:inline-block}
.meta-link:hover {color:#4d4e64;text-decoration:none}
.meta-link>i {font-size:1.25em;opacity:.75;vertical-align:middle}
.meta-divider {display:inline-block;width:1px;height:1rem;margin:0 .625rem;background-color:#dfdfec;vertical-align:middle}

.blog-content h2, .blog-content h3 {margin-top:30px;}
.breadcrumb {list-style-type:none!important}
.blog-content article:first-of-type {
  width: 100%;
}
.blog-content ul, .blog-content ol {padding-left:30px;}
.blog-content ul ul, .blog-content ul ol, .blog-content ol ul, .blog-content ol ol {padding-left:0;}
.blog-content ol,
.blog-content ul {list-style-type:disc}
.blog-content {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  color:var(--gray-400);
}
.highlight {
  padding-left: 10px;
  border-left: 5px solid #3b82f6;
  border-image-source: linear-gradient(to bottom, #1e3a8a, #3b82f6);
  border-image-slice: 1;

  background: linear-gradient(to right, #1e3a8a 0%, #3b82f6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
h3.highlight code {
  background: none !important;
  color: inherit !important;
  -webkit-text-fill-color: inherit;
  padding: 0;
  font-family: monospace;
}

@media (max-width:767px){.blog-card{flex-direction:column;gap:12px}.blog-card__img{flex-basis:auto}}
.blog-preview-banner{background:#fff4d6;color:#5c4400;border:1px solid #f0d78a;border-radius:6px;padding:10px 14px;margin-bottom:16px;font-weight:600}