/* BARZ Group blog — the listing (blog.html: intro, category filter, generated cards) and the article pages that
   _scratch/build_blog.py writes (blog/<slug>.html). Linked only by those pages; the site-wide styles.css is unchanged.
   Same file on barzgroup.ae and barzgroup.org (one CSS engine). */

/* ---- listing: the hero introduction ---- */
.phero .lead-sub + .lead-sub{margin-top:14px}
.phero .lead-sub.blog-intro{font-size:1.06rem;color:rgba(233,241,246,.74)}
.phero .lead-sub.blog-cadence{font-size:.95rem;font-weight:600;color:var(--green-400)}

/* ---- listing: category filter (shown by the inline script; without JS every card stays visible) ---- */
.blog-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.blog-filter[hidden]{display:none}
.blog-filter button{font:inherit;font-size:.84rem;font-weight:600;line-height:1.2;padding:.6em 1.05em;border:1px solid var(--line);border-radius:999px;
  background:#fff;color:var(--ink);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.blog-filter button:hover{border-color:var(--teal);color:var(--teal)}
.blog-filter button.on{background:var(--navy-700);border-color:var(--navy-700);color:#fff}
.blog-filter button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.updates .update[hidden]{display:none}
.blog-empty{grid-column:1/-1;margin:0;padding:28px 0;color:var(--slate);font-size:1.05rem}

/* ---- listing: generated cards (same .update markup as the hand-written ones, plus date and industry tags) ---- */
.update .ub .udate{display:block;margin-top:4px;font-size:.75rem;color:rgba(233,241,246,.6)}
.update .ub p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.update .ub .utags{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.update .ub .utags li{font-size:.7rem;line-height:1.3;color:rgba(233,241,246,.78);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:.25em .7em}
.update .uthumb .ut{max-width:calc(100% - 40px)}

/* ---- article page ---- */
.arthero .blog-back{display:inline-block;margin-bottom:10px}
.arthero .meta time{white-space:nowrap}
.blog-article ol{margin:0 0 1.2rem;padding-left:1.4rem}
.blog-article ol li{color:var(--slate);font-size:1.02rem;line-height:1.7;margin-bottom:.4rem}
.blog-article li strong,.blog-article p strong{color:var(--ink)}
.blog-article a{color:var(--blue-500);text-decoration:underline;text-underline-offset:2px}
.blog-article a.cite{font-size:.78em;vertical-align:super;line-height:0;text-decoration:none;color:var(--gold-dark);padding:0 1px}
.blog-article blockquote{margin:1.6em 0;padding:.4em 1.2em;border-left:3px solid var(--green-400);background:var(--paper)}
.blog-article blockquote p{margin:.5em 0;color:var(--navy-700)}
.blog-article h2{scroll-margin-top:90px}
.blog-article ol.sources li{font-size:.92rem;line-height:1.6;overflow-wrap:anywhere;scroll-margin-top:90px}
.blog-article ol.sources li:target{background:var(--paper);outline:1px solid var(--line)}
.blog-table{overflow-x:auto;margin:0 0 1.4rem;-webkit-overflow-scrolling:touch}
.blog-table table{width:100%;min-width:520px;border-collapse:collapse;font-size:.94rem;line-height:1.5}
.blog-table th,.blog-table td{border:1px solid var(--line);padding:.6em .8em;text-align:left;vertical-align:top}
.blog-table th{background:var(--paper);color:var(--ink);font-weight:700}
.blog-table td{color:var(--slate)}
.blog-fixes,.blog-related{margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.blog-fixes h2,.blog-related h2{font-size:1.15rem;margin:0 0 .6em}
.blog-fixes li time{font-weight:600;color:var(--ink)}
.blog-cta{margin:2.2rem 0 0;padding:18px 22px;border:1px solid var(--line);border-left:3px solid var(--gold);background:#fff;font-size:1.02rem}
.blog-cta a{font-weight:700;white-space:nowrap}
.blog-notice{margin-top:2rem;padding:18px 22px;background:var(--paper);border-radius:var(--radius-sm)}
.blog-notice p{font-size:.88rem;line-height:1.65;color:var(--slate);margin:0 0 .7rem}
.blog-notice p:last-child{margin-bottom:0}
.blog-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:1.6rem 0 0}
.blog-tags-label{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.blog-tags ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.blog-tags li{margin:0;font-size:.8rem;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:.3em .8em}
@media(max-width:560px){
  .blog-article ol{padding-left:1.2rem}
  .blog-cta,.blog-notice{padding:16px}
  .blog-cta a{white-space:normal}
}