/* ============================================================
   UTILITY CLUB — BLOG (/blog, /blog/<slug>, categories, tags)
   Extends uch-pillar.css tokens. All classes namespaced .ucb-.
   Also loaded inside the CMS editor (TinyMCE content_css) so the
   writer sees the callout / CTA styles while editing.
   ============================================================ */
:root {
    --uc-navy: #0c2233; --uc-navy-deep: #081826; --uc-green: #19ce67; --uc-green-dark: #12b155;
    --uc-green-ink: #03200f; --uc-mint: #e8faf0; --uc-cloud: #f5f9fc; --uc-ink: #16283a;
    --uc-slate: #55687a; --uc-line: #e3ecf3; --uc-radius: 18px; --uc-shadow: 0 18px 45px rgba(12, 34, 51, 0.10);
}

/* ---------- Hero ---------- */
.ucb-hero { position: relative; color: #fff; overflow: hidden; padding: 26px 0 54px;
    background: linear-gradient(90deg, rgba(8,24,38,.97) 0%, rgba(8,24,38,.92) 45%, rgba(8,24,38,.72) 100%), url('../img/uc-hero-min.png') right center/cover no-repeat; }
.ucb-hero .container { position: relative; z-index: 2; }
.ucb-hero .uc-crumbs { padding: 0 0 20px; }
.ucb-hero .uc-crumbs .container { padding-left: 0; padding-right: 0; }
.ucb-hero h1 { color: #fff; font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; margin: 10px 0 14px; max-width: 900px; text-transform: none; }
.ucb-hero .ucb-lede { color: #cfe0ec; font-size: 1.12rem; line-height: 1.65; max-width: 760px; margin: 0 0 20px; }
.ucb-cat-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(25,206,103,.14); border: 1px solid rgba(25,206,103,.45); color: #b8f5d3; font-weight: 700; font-size: 13px; letter-spacing: .4px; padding: 6px 14px; border-radius: 999px; text-decoration: none; text-transform: uppercase; }
.ucb-cat-badge:hover { color: #fff; background: rgba(25,206,103,.28); }
.ucb-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; color: #c6d8e5; font-size: 14px; }
.ucb-meta .ucb-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--uc-green); color: var(--uc-green-ink); display: inline-grid; place-items: center; font-weight: 800; font-size: 14px; margin-right: 8px; }
.ucb-meta strong { color: #fff; font-weight: 700; }
.ucb-meta i { color: var(--uc-green); margin-right: 5px; }
.ucb-hero--list { padding-bottom: 60px; }
.ucb-hero--list h1 { margin-top: 0; }
.ucb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.ucb-chip { display: inline-block; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.28); color: #e6eef5; font-weight: 600; font-size: 13.5px; text-decoration: none; transition: all .2s; }
.ucb-chip:hover, .ucb-chip.active { background: var(--uc-green); border-color: var(--uc-green); color: var(--uc-green-ink); }
.ucb-preview-bar { background: #b54708; color: #fff; text-align: center; font-weight: 700; padding: 10px 16px; font-size: 14px; }
.ucb-preview-bar a { color: #fff; text-decoration: underline; }

/* ---------- Article layout ---------- */
.ucb-wrap { padding: 44px 0 70px; }
.ucb-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; }
@media (max-width: 991px) { .ucb-grid { grid-template-columns: 1fr; gap: 32px; } }
.ucb-article { max-width: 780px; min-width: 0; }
.ucb-featured { margin: -100px 0 32px; position: relative; z-index: 3; }
.ucb-featured img { width: 100%; height: auto; max-height: 460px; object-fit: cover; border-radius: var(--uc-radius); box-shadow: var(--uc-shadow); display: block; }
.ucb-featured figcaption { font-size: 13px; color: var(--uc-slate); margin-top: 8px; }
@media (max-width: 991px) { .ucb-featured { margin-top: -60px; } }
.ucb-body { font-size: 17.5px; line-height: 1.75; color: var(--uc-ink); }
.ucb-body > * + * { margin-top: 1.1em; }
.ucb-body h2, .ucb-body h3, .ucb-body h4 { color: var(--uc-navy); font-weight: 800; line-height: 1.25; text-transform: none; scroll-margin-top: 110px; }
.ucb-body h2 { font-size: 1.7rem; margin-top: 1.9em; padding-top: .3em; }
.ucb-body h3 { font-size: 1.32rem; margin-top: 1.6em; }
.ucb-body h4 { font-size: 1.12rem; margin-top: 1.4em; }
.ucb-body p { margin-bottom: 0; }
.ucb-body a { color: var(--uc-green-dark); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(18,177,85,.35); text-underline-offset: 3px; }
.ucb-body a:hover { color: var(--uc-navy); text-decoration-color: currentColor; }
.ucb-body ul, .ucb-body ol { padding-left: 1.4em; }
.ucb-body li + li { margin-top: .4em; }
.ucb-body li::marker { color: var(--uc-green-dark); font-weight: 700; }
.ucb-body img { max-width: 100%; height: auto; border-radius: 12px; }
.ucb-body figure { margin: 1.6em 0; }
.ucb-body figure.image { display: table; }
.ucb-body figcaption { font-size: 13.5px; color: var(--uc-slate); margin-top: 8px; text-align: center; }
.ucb-body img.uc-img-full { width: 100%; }
.ucb-body img.uc-img-left { float: left; max-width: 46%; margin: .3em 1.4em 1em 0; }
.ucb-body img.uc-img-right { float: right; max-width: 46%; margin: .3em 0 1em 1.4em; }
.ucb-body blockquote { border-left: 4px solid var(--uc-green); background: var(--uc-cloud); margin: 1.6em 0; padding: 18px 22px; border-radius: 0 12px 12px 0; font-size: 1.08em; color: var(--uc-navy); }
.ucb-body blockquote p:last-child { margin-bottom: 0; }
.ucb-body table { width: 100%; border-collapse: collapse; font-size: 15.5px; margin: 1.6em 0; border: 1px solid var(--uc-line); border-radius: 12px; overflow: hidden; }
.ucb-body th, .ucb-body td { padding: 11px 14px; border-bottom: 1px solid var(--uc-line); text-align: left; vertical-align: top; }
.ucb-body th { background: var(--uc-navy); color: #fff; font-weight: 700; }
.ucb-body tr:nth-child(even) td { background: #f9fbfd; }
.ucb-body pre { background: #0f1f2c; color: #e6eef5; padding: 16px 18px; border-radius: 12px; overflow: auto; font-size: 14px; }
.ucb-body code { background: var(--uc-cloud); padding: 2px 6px; border-radius: 6px; font-size: .92em; }
.ucb-body pre code { background: transparent; padding: 0; }
.ucb-body hr { border: 0; border-top: 1px solid var(--uc-line); margin: 2.2em 0; }
.ucb-body iframe { max-width: 100%; border-radius: 12px; }
.ucb-body .uc-lead { font-size: 1.2em; color: var(--uc-slate); line-height: 1.6; }
.ucb-body .uc-small { font-size: .88em; color: var(--uc-slate); }
.ucb-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Callouts (also styled inside the editor) */
.uc-callout { position: relative; border-radius: 14px; padding: 18px 20px 18px 56px; margin: 1.6em 0; border: 1px solid var(--uc-line); background: var(--uc-cloud); font-size: .97em; }
.uc-callout::before { font-family: 'boxicons'; position: absolute; left: 18px; top: 16px; font-size: 24px; line-height: 1; }
.uc-callout > :first-child { margin-top: 0; }
.uc-callout > :last-child { margin-bottom: 0; }
.uc-callout--tip { background: var(--uc-mint); border-color: #b9efd0; }
.uc-callout--tip::before { content: '\e9ce'; color: var(--uc-green-dark); }
.uc-callout--warn { background: #fff8e6; border-color: #ffe2a3; }
.uc-callout--warn::before { content: '\ea5a'; color: #b54708; }
.uc-callout--key { background: #eef5ff; border-color: #c9dcff; }
.uc-callout--key::before { content: '\eab6'; color: #175cd3; }
/* Editor (TinyMCE) doesn't load boxicons — fall back to emoji labels */
body.mce-content-body .uc-callout::before { font-family: inherit; font-size: 18px; }
body.mce-content-body .uc-callout--tip::before { content: '💡'; }
body.mce-content-body .uc-callout--warn::before { content: '⚠️'; }
body.mce-content-body .uc-callout--key::before { content: '🔑'; }
body.mce-content-body .uc-inline-cta { border: 2px dashed #19ce67; padding: 16px; border-radius: 12px; }
body.mce-content-body .uc-inline-cta::before { content: 'Compare CTA box (auto-styled on the site; put a heading + a line of text here)'; display: block; font-size: 12px; color: #12b155; font-weight: 700; margin-bottom: 6px; }

/* Inline CTA (writer-inserted via Styles, or auto-appended) */
.uc-inline-cta { background: linear-gradient(120deg, #0c2233, #16324a); color: #fff; border-radius: var(--uc-radius); padding: 28px 30px; margin: 2.2em 0; display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.uc-inline-cta h3, .uc-inline-cta h4, .uc-inline-cta strong { color: #fff; margin: 0 0 4px; font-size: 1.25rem; }
.uc-inline-cta p { color: #cfe0ec; margin: 0; font-size: 15.5px; }
.uc-inline-cta a, .uc-inline-cta .uc-btn-link { text-decoration: none; }
.uc-btn-link, .ucb-btn { display: inline-block; padding: 13px 26px; border-radius: 50px; font-weight: 800; font-size: 15.5px; text-decoration: none !important; background: linear-gradient(135deg, #19ce67, #1de575); color: var(--uc-green-ink) !important; box-shadow: 0 10px 26px rgba(25,206,103,.35); transition: transform .2s, box-shadow .2s; white-space: nowrap; }
.uc-btn-link:hover, .ucb-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(25,206,103,.45); }
.ucb-btn--ghost { background: transparent; color: var(--uc-navy) !important; border: 2px solid var(--uc-navy); box-shadow: none; }

/* TOC */
.ucb-toc { background: #fff; border: 1px solid var(--uc-line); border-radius: 14px; padding: 18px 20px; }
.ucb-toc h2, .ucb-toc .ucb-toc-title { font-size: 13px; text-transform: uppercase; letter-spacing: 1.4px; font-weight: 800; color: var(--uc-slate); margin: 0 0 12px; }
.ucb-toc ol { list-style: none; margin: 0; padding: 0; }
.ucb-toc li { margin: 0; }
.ucb-toc li.l3 { padding-left: 14px; }
.ucb-toc a { display: block; padding: 6px 0; font-size: 14.5px; color: var(--uc-ink); text-decoration: none; border-left: 2px solid transparent; padding-left: 10px; margin-left: -12px; line-height: 1.35; }
.ucb-toc a:hover, .ucb-toc a.active { color: var(--uc-green-dark); border-left-color: var(--uc-green); }
.ucb-toc--inline { margin: 0 0 30px; }
@media (min-width: 992px) { .ucb-toc--inline { display: none; } }
.ucb-toc--inline summary { cursor: pointer; font-weight: 800; color: var(--uc-navy); list-style: none; }
.ucb-toc--inline summary::-webkit-details-marker { display: none; }
.ucb-toc--inline summary::after { content: '+'; float: right; font-weight: 800; color: var(--uc-green-dark); }
.ucb-toc--inline[open] summary::after { content: '–'; }
.ucb-toc--inline ol { margin-top: 12px; }

/* Sidebar */
.ucb-side { position: sticky; top: 100px; display: grid; gap: 22px; }
@media (max-width: 991px) { .ucb-side { position: static; } .ucb-side .ucb-toc { display: none; } }
.ucb-side-cta { background: linear-gradient(160deg, #0c2233, #16324a); color: #fff; border-radius: var(--uc-radius); padding: 26px 24px; box-shadow: var(--uc-shadow); }
.ucb-side-cta h3 { color: #fff; font-size: 1.25rem; font-weight: 800; margin: 0 0 8px; text-transform: none; }
.ucb-side-cta p { color: #cfe0ec; font-size: 14.5px; line-height: 1.55; margin: 0 0 16px; }
.ucb-side-cta .ucb-btn { display: block; text-align: center; }
.ucb-side-cta .ucb-side-call { display: block; text-align: center; color: #b8f5d3; font-weight: 700; margin-top: 12px; font-size: 14px; text-decoration: none; }
.ucb-side-box { background: #fff; border: 1px solid var(--uc-line); border-radius: 14px; padding: 18px 20px; }
.ucb-side-box h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 1.4px; font-weight: 800; color: var(--uc-slate); margin: 0 0 12px; }
.ucb-side-box ul { list-style: none; margin: 0; padding: 0; }
.ucb-side-box li a { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; color: var(--uc-ink); text-decoration: none; font-weight: 600; font-size: 14.5px; border-bottom: 1px solid var(--uc-line); }
.ucb-side-box li:last-child a { border-bottom: 0; }
.ucb-side-box li a:hover { color: var(--uc-green-dark); }
.ucb-side-box li a span { color: var(--uc-slate); font-size: 12.5px; font-weight: 600; background: var(--uc-cloud); border-radius: 999px; padding: 2px 9px; }
.ucb-side-box .ucb-mini { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--uc-line); text-decoration: none; }
.ucb-side-box .ucb-mini:last-child { border-bottom: 0; }
.ucb-side-box .ucb-mini img { width: 68px; height: 52px; object-fit: cover; border-radius: 8px; flex: none; }
.ucb-side-box .ucb-mini strong { display: block; color: var(--uc-ink); font-size: 14px; line-height: 1.35; font-weight: 700; }
.ucb-side-box .ucb-mini span { color: var(--uc-slate); font-size: 12.5px; }
.ucb-side-box .ucb-mini:hover strong { color: var(--uc-green-dark); }

/* Tags / share / author / FAQ / prev-next */
.ucb-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 34px 0 0; }
.ucb-tags a { background: var(--uc-cloud); border: 1px solid var(--uc-line); color: var(--uc-slate); font-weight: 600; font-size: 13px; padding: 6px 12px; border-radius: 999px; text-decoration: none; }
.ucb-tags a:hover { background: var(--uc-mint); color: var(--uc-green-dark); border-color: #b9efd0; }
.ucb-share { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--uc-line); }
.ucb-share span { font-weight: 700; color: var(--uc-slate); font-size: 13.5px; margin-right: 6px; }
.ucb-share a, .ucb-share button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--uc-line); background: #fff; display: inline-grid; place-items: center; color: var(--uc-navy); text-decoration: none; font-size: 17px; cursor: pointer; transition: all .2s; }
.ucb-share a:hover, .ucb-share button:hover { background: var(--uc-navy); color: #fff; border-color: var(--uc-navy); }
.ucb-author { display: flex; gap: 18px; align-items: flex-start; background: var(--uc-cloud); border-radius: var(--uc-radius); padding: 24px 26px; margin-top: 36px; }
.ucb-author .ucb-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--uc-navy); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 20px; flex: none; }
.ucb-author strong { display: block; color: var(--uc-ink); font-size: 1.05rem; margin-bottom: 4px; }
.ucb-author p { margin: 0; color: var(--uc-slate); font-size: 15px; line-height: 1.6; }
.ucb-faq { margin-top: 44px; }
.ucb-faq h2 { font-size: 1.6rem; font-weight: 800; color: var(--uc-navy); margin-bottom: 16px; text-transform: none; }
.ucb-faq details { border: 1px solid var(--uc-line); border-radius: 12px; padding: 0 20px; margin-bottom: 10px; background: #fff; }
.ucb-faq details[open] { border-color: #b9efd0; box-shadow: 0 6px 20px rgba(12,34,51,.06); }
.ucb-faq summary { cursor: pointer; padding: 16px 30px 16px 0; font-weight: 700; color: var(--uc-ink); font-size: 1.02rem; list-style: none; position: relative; }
.ucb-faq summary::-webkit-details-marker { display: none; }
.ucb-faq summary::after { content: '+'; position: absolute; right: 0; top: 14px; font-size: 22px; font-weight: 800; color: var(--uc-green-dark); }
.ucb-faq details[open] summary::after { content: '–'; }
.ucb-faq .ucb-faq-a { padding: 0 0 18px; color: var(--uc-slate); font-size: 15.5px; line-height: 1.7; }
.ucb-prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 44px; }
@media (max-width: 575px) { .ucb-prevnext { grid-template-columns: 1fr; } }
.ucb-prevnext a { display: block; border: 1px solid var(--uc-line); border-radius: 14px; padding: 16px 18px; text-decoration: none; color: var(--uc-ink); background: #fff; transition: all .2s; }
.ucb-prevnext a:hover { border-color: var(--uc-green); transform: translateY(-2px); box-shadow: var(--uc-shadow); }
.ucb-prevnext a small { display: block; color: var(--uc-slate); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; margin-bottom: 4px; }
.ucb-prevnext a strong { font-size: 15px; line-height: 1.35; font-weight: 700; }
.ucb-prevnext a.next { text-align: right; }

/* Cards / lists */
.ucb-section-title { font-size: 1.6rem; font-weight: 800; color: var(--uc-navy); margin: 0 0 22px; text-transform: none; }
.ucb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 24px; }
.ucb-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--uc-line); border-radius: var(--uc-radius); overflow: hidden; text-decoration: none !important; color: inherit; transition: transform .25s, box-shadow .25s, border-color .25s; height: 100%; }
.ucb-card:hover { transform: translateY(-4px); box-shadow: var(--uc-shadow); border-color: #b9efd0; }
.ucb-card .ucb-card-img { aspect-ratio: 16 / 9; background: var(--uc-cloud) linear-gradient(135deg, #e8faf0, #f5f9fc); overflow: hidden; position: relative; }
.ucb-card .ucb-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.ucb-card:hover .ucb-card-img img { transform: scale(1.04); }
.ucb-card .ucb-card-img .ucb-ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--uc-green-dark); font-size: 44px; opacity: .55; }
.ucb-card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.ucb-card-cat { font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 800; color: var(--uc-green-dark); margin-bottom: 8px; }
.ucb-card h3 { font-size: 1.15rem; line-height: 1.35; font-weight: 800; color: var(--uc-ink); margin: 0 0 10px; text-transform: none; }
.ucb-card p { color: var(--uc-slate); font-size: 14.5px; line-height: 1.6; margin: 0 0 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ucb-card .ucb-card-meta { margin-top: auto; color: var(--uc-slate); font-size: 13px; display: flex; gap: 12px; flex-wrap: wrap; }
.ucb-card .ucb-card-meta i { color: var(--uc-green-dark); margin-right: 3px; }
.ucb-featured-card { display: grid; grid-template-columns: 1.15fr 1fr; background: #fff; border: 1px solid var(--uc-line); border-radius: var(--uc-radius); overflow: hidden; text-decoration: none !important; color: inherit; margin-bottom: 40px; transition: transform .25s, box-shadow .25s; }
.ucb-featured-card:hover { transform: translateY(-3px); box-shadow: var(--uc-shadow); }
.ucb-featured-card .ucb-card-img { aspect-ratio: auto; min-height: 320px; }
.ucb-featured-card .ucb-card-body { padding: 36px 38px; justify-content: center; }
.ucb-featured-card h2 { font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem); font-weight: 800; line-height: 1.25; color: var(--uc-ink); margin: 0 0 12px; text-transform: none; }
.ucb-featured-card p { color: var(--uc-slate); font-size: 16px; line-height: 1.65; margin: 0 0 18px; }
.ucb-featured-card .ucb-more { color: var(--uc-green-dark); font-weight: 800; }
@media (max-width: 767px) { .ucb-featured-card { grid-template-columns: 1fr; } .ucb-featured-card .ucb-card-img { min-height: 220px; } .ucb-featured-card .ucb-card-body { padding: 24px; } }
.ucb-list-wrap { padding: 50px 0 70px; }
.ucb-list-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 44px; align-items: start; }
@media (max-width: 991px) { .ucb-list-grid { grid-template-columns: 1fr; } }
.ucb-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 40px; flex-wrap: wrap; }
.ucb-pagination a, .ucb-pagination span { min-width: 40px; height: 40px; padding: 0 12px; display: inline-grid; place-items: center; border-radius: 10px; border: 1px solid var(--uc-line); background: #fff; color: var(--uc-ink); font-weight: 700; text-decoration: none; font-size: 14.5px; }
.ucb-pagination a:hover { border-color: var(--uc-green); color: var(--uc-green-dark); }
.ucb-pagination span.cur { background: var(--uc-navy); border-color: var(--uc-navy); color: #fff; }
.ucb-empty { text-align: center; padding: 60px 20px; color: var(--uc-slate); background: var(--uc-cloud); border-radius: var(--uc-radius); }
.ucb-empty i { font-size: 40px; color: var(--uc-green-dark); display: block; margin-bottom: 10px; }
.ucb-related { padding-top: 54px; margin-top: 54px; border-top: 1px solid var(--uc-line); }

/* 404 */
.ucb-404 { text-align: center; padding: 90px 20px; }
.ucb-404 .big { font-size: 5rem; font-weight: 800; color: var(--uc-green); line-height: 1; letter-spacing: -.04em; }
.ucb-404 h1 { font-size: 2rem; font-weight: 800; color: var(--uc-navy); margin: 10px 0 12px; text-transform: none; }
.ucb-404 p { color: var(--uc-slate); font-size: 1.05rem; max-width: 520px; margin: 0 auto 26px; }
.ucb-404 .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }