/* beta.20 — WordPress-native blog layouts; scoped so landing pages remain unchanged. */
.okg-blog,.okg-post{width:100%;max-width:var(--okg-site-width,1200px);margin-inline:auto;padding:20px 20px 42px;min-width:0}
.okg-blog-heading{margin:0 0 20px}.okg-blog-heading h1{font-size:clamp(23px,2.4vw,32px);font-weight:800;line-height:1.24;margin:0 0 10px;color:#152943}.okg-blog-heading p,.okg-blog-archive-description{color:#62758e;font-size:15px;margin:0}
.okg-blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.okg-blog-grid .okg-blog-card{display:flex;flex-direction:column;padding:0;border:1px solid #dae5f2;background:#fff;border-radius:5px;min-width:0;overflow:hidden;box-shadow:0 2px 5px #0b325308;height:100%}
.okg-blog-card-image{display:block;position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#e7f1fc}
.okg-blog-card-image img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;aspect-ratio:16/9}
.okg-blog-placeholder{width:100%;height:100%;display:flex;justify-content:center;align-items:center;background:linear-gradient(130deg,#e7f1fc,#f6f9fe);color:#0a5db6;font-size:21px;font-weight:800;letter-spacing:.09em}
.okg-blog-card-body{padding:16px;display:flex;flex-direction:column;flex:1;gap:8px}
.okg-blog-card-date{font-size:12px;color:#71829b}
.okg-blog-card h2{font-size:19px;line-height:1.4;font-weight:750;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.okg-blog-card h2 a{color:#152943;text-decoration:none}.okg-blog-card h2 a:hover,.okg-blog-card h2 a:focus-visible{color:#086ad2;text-decoration:underline}
.okg-blog-card p{margin:0;color:#586a80;font-size:14px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;flex:1}
.okg-blog-readmore{font-size:14px;font-weight:700;color:#0669c9;text-decoration:none;margin-top:7px}.okg-blog-readmore:hover{text-decoration:underline}
.okg-blog .navigation.pagination{margin:25px 0 0}.okg-blog .nav-links{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.okg-blog .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:38px;min-height:38px;padding:8px 12px;border:1px solid #dae5f2;border-radius:5px;text-decoration:none;color:#0564c8;font-size:14px}
.okg-blog .page-numbers.current{background:#0564c8;color:#fff;border-color:#0564c8}.okg-blog .page-numbers:hover:not(.current){background:#edf5ff}
.okg-blog-empty{padding:25px;background:#f5f9fe;border:1px solid #dbe9f6;border-radius:5px}
.okg-post{padding-top:20px;max-width:var(--okg-site-width,1200px)}.okg-post-article{max-width:820px;margin:0 auto;color:#20324c}
.okg-post-heading h1{font-size:clamp(27px,3vw,38px);line-height:1.25;color:#132642;margin:0 0 12px;font-weight:800}
.okg-post-meta{display:flex;align-items:center;flex-wrap:wrap;gap:12px;color:#6b7f97;font-size:13px;margin:0 0 20px}.okg-post-category{padding:3px 9px;background:#eff6ff;border-radius:5px;color:#0668c7}
.okg-post-featured{margin:0 0 24px}.okg-post-featured img{width:100%;height:auto;max-height:470px;object-fit:cover;aspect-ratio:16/9;border-radius:5px;display:block}
.okg-post-content{font-size:16px;line-height:1.78;color:#283951;overflow-wrap:anywhere}.okg-post-content p{margin:0 0 1.2em}
.okg-post-content h2,.okg-post-content h3{color:#132642;line-height:1.35;margin:1.7em 0 .65em;font-weight:800}
.okg-post-content h2{font-size:25px}.okg-post-content h3{font-size:20px}
.okg-post-content ul,.okg-post-content ol{padding-left:26px;margin:1em 0}.okg-post-content li{margin-bottom:.45em}
.okg-post-content img{max-width:100%;height:auto;border-radius:5px}.okg-post-content figure{max-width:100%;margin:18px auto}.okg-post-content figcaption{font-size:13px;color:#71829b;text-align:center}
.okg-post-content a{color:#086ad2;text-underline-offset:2px}.okg-post-content blockquote{border-left:3px solid #0564c8;margin:22px 0;padding:12px 20px;background:#f2f7fe}
.okg-post-content table{display:block;overflow-x:auto;border-collapse:collapse;max-width:100%;width:100%}.okg-post-content th,.okg-post-content td{border:1px solid #dce5ef;padding:9px 12px}
.okg-post-footer{margin-top:30px;padding-top:20px;border-top:1px solid #e0e9f3}.okg-post-footer a{text-decoration:none;font-weight:700;color:#086ad2}
@media(max-width:900px){.okg-blog,.okg-post{padding-left:14px;padding-right:14px;padding-top:16px}.okg-blog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media(max-width:560px){.okg-blog,.okg-post{padding-left:10px;padding-right:10px;padding-top:14px;padding-bottom:28px}.okg-blog-grid{grid-template-columns:1fr;gap:14px}.okg-blog-card h2{font-size:18px}.okg-post-heading h1{font-size:26px}.okg-post-content h2{font-size:23px}.okg-post-content h3{font-size:19px}}

/* beta.21 — WordPress-native Blog article with right sidebar.
   Desktop uses the site-wide 1200px rail; only the reading column is narrower.
   Sidebar is data-backed and never manually duplicates WP posts/categories/tags. */
.okg-post-layout{
 display:grid;grid-template-columns:minmax(0,820px) minmax(250px,1fr);
 gap:28px;align-items:start;width:100%;min-width:0;
}
.okg-post-layout > *{min-width:0}
.okg-post-layout .okg-post-article{max-width:none;margin:0;min-width:0}
/* beta.22: The article panel itself needs the same 1px frame as the sidebar
   widgets and archive cards. Beta.21 only framed the sidebar, so the entire
   left article visually blended into the white site canvas.
   The panel is ONLY on single posts; no change to page or archive shells. */
.okg-post-layout > article.okg-post-article{
 box-sizing:border-box;min-width:0;
 background:#fff;
 border:1px solid #dfe8f2;
 border-radius:5px;
 padding:20px;
 box-shadow:0 2px 7px rgba(20,53,91,.045);
}
@media(max-width:900px){
 .okg-post-layout > article.okg-post-article{padding:16px}
}
@media(max-width:560px){
 .okg-post-layout > article.okg-post-article{padding:12px}
}

.okg-post-layout .okg-post-featured{max-width:100%}
.okg-post-layout .okg-post-content figure.wp-block-image,
.okg-post-layout .okg-post-content .wp-block-image{margin:16px 0 22px}
.okg-post-layout .okg-post-content img{display:block;max-width:100%;height:auto;object-fit:contain}
.okg-post-layout .okg-post-content > :first-child{margin-top:0}
.okg-post-layout .okg-post-content{font-size:16px;line-height:1.78;word-wrap:break-word}
.okg-post-layout .okg-post-content h2{font-size:24px;margin:28px 0 12px}
.okg-post-layout .okg-post-content h3{font-size:19px;margin:24px 0 10px}
.okg-post-layout .okg-post-content p{margin:0 0 16px}
.okg-post-layout .okg-post-content :is(pre,code){max-width:100%;overflow-wrap:anywhere}
.okg-post-layout .okg-post-content pre{overflow-x:auto}
.okg-blog-sidebar{display:flex;flex-direction:column;gap:18px;min-width:0}
.okg-sidebar-widget{padding:18px;background:#fff;border:1px solid #dfe8f2;border-radius:5px;min-width:0}
.okg-sidebar-widget h2{margin:0 0 15px;font-size:18px;line-height:1.35;color:#152943;font-weight:800}
.okg-sidebar-search-form{display:flex;width:100%;min-width:0;gap:7px}
.okg-sidebar-search-form input[type=search]{min-width:0;width:100%;flex:1;border:1px solid #cad8e8;border-radius:5px;padding:11px 10px;font:inherit;font-size:14px;background:#fff;color:#17243a}
.okg-sidebar-search-form button{border:0;border-radius:5px;background:#0564c8;color:#fff;font-weight:700;font-size:13px;padding:10px 12px;cursor:pointer}
.okg-sidebar-search-form button:hover{background:#004da1}
.okg-sidebar-posts,.okg-sidebar-categories,.okg-sidebar-tags{padding:0;margin:0;list-style:none}
.okg-sidebar-posts{display:grid;gap:12px}
.okg-sidebar-posts li + li{padding-top:12px;border-top:1px solid #e6edf6}
.okg-sidebar-post-link{display:flex;align-items:flex-start;gap:11px;text-decoration:none;color:#17243a}
.okg-sidebar-post-link:hover strong{color:#0564c8}
.okg-sidebar-thumb{display:flex;width:84px;min-width:84px;height:63px;object-fit:cover;border-radius:5px;background:#e6f0fa}
.okg-sidebar-thumb-empty{align-items:center;justify-content:center;color:#0564c8;font-size:16px;font-weight:800}
.okg-sidebar-post-info{min-width:0;display:flex;flex-direction:column;gap:5px}
.okg-sidebar-post-info strong{font-size:13px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.okg-sidebar-post-info time{font-size:11px;color:#72829a}
.okg-sidebar-categories li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #e8edf4}
.okg-sidebar-categories li:last-child{border-bottom:0;padding-bottom:0}
.okg-sidebar-categories a{text-decoration:none;color:#1169c5;font-size:14px;font-weight:600}
.okg-sidebar-categories a:hover{text-decoration:underline}
.okg-sidebar-categories span{font-size:12px;color:#75869a;background:#f1f6fc;padding:2px 7px;border-radius:5px}
.okg-sidebar-tags{display:flex;flex-wrap:wrap;gap:8px}
.okg-sidebar-tags li{margin:0}
.okg-sidebar-tags a{display:inline-block;color:#0564c8;background:#eff6ff;border:1px solid #dae9f9;border-radius:5px;text-decoration:none;font-size:12px;padding:5px 9px}
.okg-sidebar-tags a:hover{background:#dcecff}
.okg-sidebar-empty{font-size:13px;color:#71829b}
.okg-post-layout :is(a,button,input):focus-visible{outline:2px solid #0564c8;outline-offset:2px}
/* Existing blog card shell uses flex stretch, now nine cards make complete
   rows (3×3 desktop) without changing the WordPress global posts option. */
.okg-blog-grid{align-items:stretch}
.okg-blog-grid > .okg-blog-card{min-width:0;height:100%}
@media(max-width:1000px){
 .okg-post-layout{grid-template-columns:minmax(0,1fr) 275px;gap:20px}
 .okg-sidebar-widget{padding:14px}
 .okg-sidebar-thumb{width:68px;min-width:68px;height:58px}
}
@media(max-width:800px){
 .okg-post-layout{grid-template-columns:1fr;gap:26px}
 .okg-blog-sidebar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
 .okg-blog-sidebar .okg-sidebar-widget{min-width:0}
}
@media(max-width:560px){
 .okg-post-layout .okg-post-content{font-size:15px;line-height:1.75}
 .okg-post-layout .okg-post-content h2{font-size:22px}
 .okg-post-layout .okg-post-content h3{font-size:18px}
 .okg-blog-sidebar{display:flex;gap:14px}
 .okg-sidebar-widget{padding:14px}
}

/* WordPress-natively labeled search fields stay accessible, not visibly inline. */
.okg-blog-sidebar .screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* beta.23 — two-stage blog detail. Stage 1 is a 2-column intro with its
   summary on the left and exactly one article image on the right. Stage 2
   preserves the framed reading panel + five data-backed sidebar widgets. */
.okg-post-hero{
 display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
 align-items:center;gap:24px;min-width:0;
 background:#fff;border:1px solid #dfe8f2;border-radius:5px;
 padding:20px;box-shadow:0 2px 7px rgba(20,53,91,.045);
 margin:0 0 20px;
}
.okg-post-hero > *{min-width:0}
.okg-post-hero-copy{display:flex;flex-direction:column;justify-content:center;min-width:0}
.okg-post-hero-copy h1{
 font-size:clamp(27px,2.7vw,38px);font-weight:800;line-height:1.24;
 color:#132642;margin:0 0 14px;overflow-wrap:break-word;
}
.okg-post-hero-copy .okg-post-meta{margin:0 0 17px}
.okg-post-hero-description{font-size:16px;line-height:1.75;color:#536981;margin:0;overflow-wrap:anywhere}
.okg-post-hero-media{
 display:flex;flex-direction:column;align-items:stretch;justify-content:center;
 margin:0;min-width:0;border-radius:5px;overflow:hidden;
 background:#e7f1fc;
}
.okg-post-hero-media > img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:5px}
.okg-post-hero-media figcaption{padding:8px 10px;color:#62758e;font-size:12px;line-height:1.5;background:#fff}
.okg-post-hero-placeholder{
 display:flex;align-items:center;justify-content:center;
 width:100%;aspect-ratio:16/9;
 font-size:clamp(26px,3.3vw,46px);font-weight:850;color:#0a63c0;
 background:linear-gradient(135deg,#e7f1fc,#f7faff);
}
/* Detail section has a separate panel; its title/meta now live in Stage 1. */
.okg-post-layout > article.okg-post-article{align-self:start}
.okg-post-layout > article.okg-post-article .okg-post-content{margin:0}
.okg-post-layout > article.okg-post-article .okg-post-content > :first-child{margin-top:0}
@media(max-width:900px){
 .okg-post-hero{gap:16px;padding:16px;margin-bottom:16px}
 .okg-post-hero-copy h1{font-size:clamp(25px,3vw,32px)}
 .okg-post-hero-description{font-size:15px}
}
@media(max-width:760px){
 .okg-post-hero{grid-template-columns:minmax(0,1fr);gap:14px}
 .okg-post-hero-media{width:100%}
}
@media(max-width:560px){
 .okg-post-hero{padding:12px;margin-bottom:14px}
 .okg-post-hero-copy h1{font-size:26px;margin-bottom:10px}
 .okg-post-hero-copy .okg-post-meta{margin-bottom:12px}
 .okg-post-hero-description{font-size:14px;line-height:1.7}
}