/* blog.css — Blog: posts page /blog/ (templates/home.html), archives (archive.html), posts (single.html).
   Additive; loaded after theme.css (handle evolt-theme) on every page. Theme tokens only
   (theme.css :root vars, which map to the theme.json presets). */

/* Header: room for the ninth top-level item "Blog". Measured in Chrome (Segoe UI, 1200px container):
   today the menu is one row from 1240px up; with "Blog" and gap 24px it wraps to two rows at every
   desktop width; with gap 14px it stays one row from 1200px up. Overrides theme.css .menu{gap:24px}. */
.menu{gap:14px}

/* Hero (archives + single post): H1 of any length in the panel hero */
.evolt-blog-hero .evolt-blog-title{font-size:clamp(28px,3.6vw,46px);line-height:1.15;max-width:28ch;margin:6px 0 0;overflow-wrap:break-word;hyphens:auto}
.evolt-blog-hero .evolt-blog-meta{margin:16px 0 0}

/* Post list: theme .g3 grid + .scard cards */
.evolt-blog-card{overflow:hidden}
.evolt-blog-card__media{aspect-ratio:16/10;background:var(--tint);overflow:hidden}
.evolt-blog-card__media img{width:100%;height:100%;object-fit:cover}
.evolt-blog-card .bd{flex:1;display:flex;flex-direction:column}
.evolt-blog-card .evolt-blog-card__meta{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:13.5px;line-height:1.4;font-weight:600;color:var(--muted)}
.evolt-blog-card .evolt-blog-card__meta svg{width:15px;height:15px;flex:none;color:var(--primary)}
.evolt-blog-card h3{line-height:1.3;overflow-wrap:break-word;hyphens:auto}
.evolt-blog-card h3 a{color:var(--head)}
.evolt-blog-card h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.evolt-blog-card:hover h3 a{color:var(--primary)}
.evolt-blog-card .more{margin-top:auto;padding-top:16px}
.evolt-blog-pager{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;margin-top:48px}
.evolt-blog-pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 16px;background:#fff;border:1px solid var(--line);font-size:14px;font-weight:700;color:var(--head);text-decoration:none}
.evolt-blog-pager a.page-numbers:hover{border-color:var(--primary);color:var(--primary)}
.evolt-blog-pager .page-numbers.current{background:var(--primary);border-color:var(--primary);color:#fff}
.evolt-blog-pager .page-numbers.dots{background:none;border:0;min-width:0;padding:0 4px}
.evolt-blog-empty{max-width:62ch;background:#fff;box-shadow:var(--sh-card);padding:30px 28px}
.evolt-blog-empty p{margin:0;font-size:15.5px;line-height:1.75;color:var(--text)}
.evolt-blog-empty p+p{margin-top:10px}
.evolt-blog-empty .evolt-blog-empty__t{font-size:19px;font-weight:700;line-height:1.4;color:var(--head)}

/* Single post: featured image + post content in a readable column */
.evolt-blog-figure,.evolt-blog-prose{max-width:760px}
body .evolt-blog-body .evolt-blog-figure{margin:0}
.evolt-blog-figure img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.evolt-blog-figure + .evolt-blog-prose{margin-top:36px}

/* Prose (freelancer Gutenberg content). theme.json sets no h2–h6 sizes and theme.css has no generic
   typography. "body" prefix outranks the :root :where(.is-layout-flow)>* margins from global styles. */
.evolt-blog-prose{font-size:1.0625rem;line-height:1.8;color:var(--text);overflow-wrap:break-word}
body .evolt-blog-prose>*{margin-top:0;margin-bottom:0}
body .evolt-blog-prose>*+*{margin-top:1.15em}
body .evolt-blog-prose>:is(h1,h2,h3,h4,h5,h6){margin-top:1.9em}
body .evolt-blog-prose>:is(h1,h2,h3,h4,h5,h6):first-child{margin-top:0}
body .evolt-blog-prose>:is(h1,h2,h3,h4,h5,h6)+*{margin-top:.55em}
.evolt-blog-prose :is(h1,h2){font-size:clamp(1.5rem,2.6vw,1.9rem);line-height:1.22}
.evolt-blog-prose h3{font-size:1.25rem;line-height:1.3}
.evolt-blog-prose :is(h4,h5,h6){font-size:1.0625rem;line-height:1.35}
.evolt-blog-prose a{color:var(--primary);text-decoration:underline;text-underline-offset:3px}
.evolt-blog-prose a:hover{color:var(--primary-hover)}
.evolt-blog-prose :is(strong,b){color:var(--head)}
.evolt-blog-prose :is(ul,ol){padding-left:1.4em}
.evolt-blog-prose li+li{margin-top:.4em}
.evolt-blog-prose li::marker{color:var(--primary)}
.evolt-blog-prose blockquote{margin-left:0;margin-right:0;padding:20px 24px;border-left:5px solid var(--primary);background:var(--tint);color:var(--head)}
.evolt-blog-prose blockquote p{margin:0}
.evolt-blog-prose blockquote p+p{margin-top:.6em}
.evolt-blog-prose blockquote cite{display:block;margin-top:10px;font-size:14px;font-style:normal;color:var(--muted)}
.evolt-blog-prose figure{margin-left:0;margin-right:0}
.evolt-blog-prose img{height:auto}
.evolt-blog-prose :is(figcaption,.wp-element-caption){margin-top:8px;font-size:14px;line-height:1.5;color:var(--muted)}
body .evolt-blog-prose>hr{margin-top:2em;margin-bottom:2em}
.evolt-blog-prose hr{border:0;border-top:1px solid var(--line2);opacity:1;width:auto;max-width:none}
.evolt-blog-prose .wp-block-table{overflow-x:auto}
.evolt-blog-prose table{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.6}
body .evolt-blog-prose :is(th,td){border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
body .evolt-blog-prose :is(th,thead td){background:var(--tint);color:var(--head);font-weight:700}
.evolt-blog-prose details{border:1px solid var(--line);background:#fff;padding:16px 20px}
.evolt-blog-prose summary{cursor:pointer;font-weight:700;color:var(--head)}
.evolt-blog-prose details[open]>summary{margin-bottom:.6em}
.evolt-blog-prose pre{overflow-x:auto;padding:16px 18px;background:var(--tint);font-size:15px}
.evolt-blog-prose .has-text-align-center{text-align:center}
.evolt-blog-prose .has-text-align-right{text-align:right}
body .evolt-blog-prose .aligncenter{margin-left:auto;margin-right:auto;text-align:center}
.evolt-blog-prose .aligncenter img{margin-inline:auto}
body .evolt-blog-prose .alignleft{float:left;max-width:50%;margin:.3em 1.5em 1em 0}
body .evolt-blog-prose .alignright{float:right;max-width:50%;margin:.3em 0 1em 1.5em}
.evolt-blog-prose :is(.alignwide,.alignfull){max-width:100%}
.evolt-blog-prose::after{content:"";display:table;clear:both}
.evolt-blog-prose iframe{max-width:100%}
/* core buttons are yellow via theme.json (the phone colour) — navy inside posts */
.evolt-blog-prose .wp-block-buttons{display:flex;flex-wrap:wrap;gap:12px}
.evolt-blog-prose .wp-block-button__link{display:inline-flex;align-items:center;min-height:44px;padding:15px 30px;background:var(--primary);color:#fff;font-size:14px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;text-decoration:none;border-radius:0}
.evolt-blog-prose .wp-block-button__link:hover{background:var(--primary-hover);color:#fff}
@media (max-width:760px){
  body .evolt-blog-prose :is(.alignleft,.alignright){float:none;max-width:100%;margin:1.15em 0 0}
  .evolt-blog-figure + .evolt-blog-prose{margin-top:28px}
}