/* ===== 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;width:100%;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;
}

.code-block {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    margin: 20px 0;
    background: #f8fafc;
}

.code-block .header {
    background: #eef2f7;
    color: #64748b;
    font-size: 11.5px;
    font-weight: 600;
	text-transform: uppercase;
    padding: 10px 15px;
    border-bottom: 1px solid #e2e8f0;
}

.code-block .p-3 {
    padding: 15px!important;
    font-family: Consolas, Monaco, monospace;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    overflow-x: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@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}

/* --- POSTS --- */
.ue-post {
  --ue-bg: #ffffff; --ue-text: #1f2937; --ue-heading: #111827; --ue-muted: #6b7280;
  --ue-blue: #1d4ed8; --ue-blue-dark: #1e3a8a; --ue-blue-light: #eff6ff; --ue-blue-border: #bfdbfe;
  --ue-rule: #e5e7eb; --ue-stripe: #f8fafc;
  --ue-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ue-serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --ue-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  display: block; background: var(--ue-bg); color: var(--ue-text);
  font-family: var(--ue-serif); font-size: 18px; line-height: 1.7; text-align: left;
}
.ue-post .ue-wrap { margin: 0 auto; padding: 0 20px; }
.ue-post .ue-hero { border-top: 6px solid var(--ue-blue); border-bottom: 1px solid var(--ue-rule); padding: 56px 20px 32px; margin: 0; background: var(--ue-bg); }
.ue-post .ue-toc { position: static; height: auto; background: var(--ue-blue-light); border: 1px solid var(--ue-blue-border); border-radius: 10px; padding: 18px 24px; margin: 36px 0 8px; font-family: var(--ue-sans); font-size: 15px; }
.ue-post .ue-toc strong { color: var(--ue-blue); display: block; margin-bottom: 6px; }
.ue-post .ue-toc ol { margin: 0; padding-left: 20px; }
.ue-post .ue-toc a { color: var(--ue-text); text-decoration: none; }
.ue-post .ue-toc a:hover { color: var(--ue-blue); text-decoration: underline; }
.ue-post .ue-main { padding-bottom: 64px; }
.ue-post h2, .ue-post h3 { font-family: var(--ue-sans); color: var(--ue-heading); line-height: 1.3; font-weight: 700; text-transform: none; letter-spacing: normal; }
.ue-post h2 { font-size: 28px; margin: 56px 0 16px; border: 0; }
.ue-post h3 { font-size: 21px; margin: 32px 0 10px; padding: 0; border: 0; color: var(--ue-blue); }
.ue-post p { margin: 0 0 18px; }
.ue-post ul, .ue-post ol { padding-left: 26px; margin: 0 0 20px; }
.ue-post ul { list-style: disc; }
.ue-post ol { list-style: decimal; }
.ue-post li { margin: 0 0 8px; }
.ue-post li ul { margin-top: 6px; list-style: circle; }
.ue-post a { color: var(--ue-blue); text-decoration: underline; }
.ue-post a:hover { color: var(--ue-bluedark); }
.ue-post strong { color: var(--ue-heading); font-weight: 700; }
.ue-post em { font-style: italic; }
.ue-post code { font-family: var(--ue-mono); font-size: .85em; background: var(--ue-blue-light); color: var(--ue-blue-dark); border: 1px solid var(--ue-blue-border); border-radius: 4px; padding: 1px 5px; }
.ue-post .ue-table-wrap { overflow-x: auto; margin: 8px 0 26px; }
.ue-post table { width: 100%; border-collapse: collapse; border: 0; margin: 0; font-family: var(--ue-sans); font-size: 15px; line-height: 1.5; }
.ue-post thead th { background: var(--ue-blue); color: #ffffff; text-align: left; font-weight: 600; padding: 10px 12px; border: 0; }
.ue-post thead th:first-child { border-top-left-radius: 8px; }
.ue-post thead th:last-child { border-top-right-radius: 8px; }
.ue-post td { padding: 9px 12px; border: 0; border-bottom: 1px solid var(--ue-rule); vertical-align: top; background: var(--ue-bg); color: var(--ue-text); }
.ue-post tbody tr:nth-child(even) td { background: var(--ue-stripe); }
.ue-post td code { white-space: nowrap; }
.ue-post .ue-callout { background: var(--ue-blue-light); border-left: 5px solid var(--ue-blue); border-radius: 0 8px 8px 0; padding: 16px 20px; margin: 24px 0; }
.ue-post .ue-callout p:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
  .ue-post { font-size: 17px; }
  .ue-post h2 { font-size: 24px; }
}