/* Stream RV — blog (index + single post), ported verbatim from the signed-off
   design (Blog.html). Scoped to .srv-blog; review divider bands not shipped. */

/* ============================================================================
   STREAM RV — BLOG  ·  wrapper: .srv-blog
   TWO layouts in this one file, stacked with labeled divider bands:
     A) Blog INDEX  (/blog)         — featured post + card grid
     B) SINGLE POST (/blog/{slug})  — long-form reading layout
   The dev implements each as its own WordPress template; the divider bands
   (.demo-divider) are REVIEW-ONLY — delete them.
   Self-contained Elementor-ready block. All styles scoped under .srv-blog,
   tokens on the wrapper (NOT :root), no global resets. No header/footer.
   DEV: all posts/dates/images are placeholder content bound to real posts.
   ============================================================================ */

.srv-blog{
  --primary:#0d1919; --primary-container:#222e2e; --on-primary:#ffffff;
  --secondary:#81550c; --brass-mid:#96682a; --secondary-container:#fdc171;
  --secondary-fixed:#ffddb5;
  --background:#fbf9f8; --surface:#f5f3f3; --on-surface-variant:#424848;
  --body-text:#1b1c1c; --outline:#c2c7c7;
  --line:rgba(34,46,46,.13); --line-2:rgba(34,46,46,.08);
  --maxw:1220px; --pad:26px;

  font-family:'Libre Franklin',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  color:var(--body-text);background:var(--background);line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.srv-blog *{box-sizing:border-box;}
.srv-blog [hidden]{display:none!important;}
.srv-blog img{display:block;max-width:100%;}
.srv-blog h1,.srv-blog h2,.srv-blog h3{font-family:'Vollkorn','Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;font-weight:600;margin:0;
  color:var(--primary-container);letter-spacing:-.02em;line-height:1.12;text-wrap:balance;}
.srv-blog p{margin:0;}
.srv-blog a{color:inherit;}
.srv-blog a[href^="tel:"]{white-space:nowrap;}
.srv-blog :focus-visible{outline:2px solid var(--brass-mid);outline-offset:2px;border-radius:2px;}

.srv-blog .cw{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}
.srv-blog .eyebrow{font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--secondary);margin:0 0 16px;display:flex;align-items:center;gap:11px;}
.srv-blog .eyebrow::before{content:"";width:24px;height:1.5px;background:var(--brass-mid);flex:none;}

/* category + meta bits shared by both layouts */
.srv-blog .pcat{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--secondary);}
.srv-blog .pdate{font-size:13px;color:var(--on-surface-variant);}
.srv-blog .pdot{display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--outline);
  vertical-align:middle;margin:0 8px;}


/* ============================================================
   LAYOUT A — BLOG INDEX
   ============================================================ */
.srv-blog .ihero{padding:clamp(52px,6vw,84px) 0 clamp(34px,3.6vw,48px);}
.srv-blog .ihero h1{font-size:clamp(36px,4.8vw,60px);letter-spacing:-.025em;}
.srv-blog .ihero h1 em{font-style:italic;color:var(--secondary);font-weight:500;}
.srv-blog .ihero__sub{font-size:clamp(16px,1.4vw,18px);color:var(--on-surface-variant);max-width:52ch;margin-top:18px;}

/* featured post */
.srv-blog .feat{padding-bottom:clamp(36px,4vw,56px);border-bottom:1px solid var(--line-2);}
.srv-blog .feat__card{display:grid;grid-template-columns:1.15fr .85fr;background:var(--surface);
  border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;}
.srv-blog .feat__art{position:relative;min-height:340px;}
.srv-blog .feat__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.srv-blog .feat__body{padding:clamp(26px,3vw,44px);display:flex;flex-direction:column;justify-content:center;gap:14px;}
.srv-blog .feat__body h2{font-size:clamp(24px,2.8vw,36px);}
.srv-blog .feat__body p{font-size:15.5px;color:var(--on-surface-variant);max-width:48ch;}
.srv-blog .feat__more{font-size:14.5px;font-weight:600;color:var(--secondary);}
@media (prefers-reduced-motion: no-preference){
  .srv-blog .feat__card{transition:box-shadow .2s ease,border-color .2s ease;}
  .srv-blog .feat__card:hover{box-shadow:0 28px 60px -32px rgba(34,46,46,.45);border-color:var(--secondary-container);}
  .srv-blog .feat__card:hover h2{color:var(--secondary);}
}

/* card grid */
.srv-blog .grid{padding:clamp(36px,4vw,56px) 0 clamp(20px,2.4vw,32px);}
.srv-blog .grid__inner{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.6vw,34px);}
.srv-blog .pcard{display:flex;flex-direction:column;text-decoration:none;border-radius:14px;}
.srv-blog .pcard__art{aspect-ratio:16/10;border-radius:12px;overflow:hidden;border:1px solid var(--line);
  position:relative;margin-bottom:16px;background:var(--surface);}
.srv-blog .pcard__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.srv-blog .pcard h3{font-size:21px;line-height:1.2;margin:8px 0 9px;}
.srv-blog .pcard__ex{font-size:14.5px;color:var(--on-surface-variant);line-height:1.55;margin-bottom:12px;}
.srv-blog .pcard__more{font-size:14px;font-weight:600;color:var(--secondary);margin-top:auto;}
@media (prefers-reduced-motion: no-preference){
  .srv-blog .pcard__art img{transition:transform .25s ease;}
  .srv-blog .pcard:hover .pcard__art img{transform:scale(1.04);}
  .srv-blog .pcard:hover h3{color:var(--secondary);}
}

/* pagination */
.srv-blog .pager{display:flex;justify-content:center;padding:clamp(20px,2.4vw,32px) 0 clamp(56px,6vw,84px);}
.srv-blog .pager a{font-size:14.5px;font-weight:600;color:var(--secondary);text-decoration:none;
  border:1.5px solid var(--secondary);border-radius:4px;padding:13px 24px;min-height:48px;
  display:inline-flex;align-items:center;}
.srv-blog .pager a:hover{background:var(--secondary);color:#fff;}

/* ============================================================
   LAYOUT B — SINGLE POST
   ============================================================ */
.srv-blog .post{background:var(--background);}
.srv-blog .post__top{border-bottom:1px solid var(--line-2);padding:18px 0;}
.srv-blog .post__back{font-size:13.5px;font-weight:600;color:var(--secondary);text-decoration:none;}
.srv-blog .post__back:hover{color:var(--brass-mid);}
.srv-blog .post__head{max-width:820px;margin:0 auto;padding:clamp(44px,5vw,72px) var(--pad) clamp(28px,3vw,40px);
  text-align:center;}
.srv-blog .post__head h1{font-size:clamp(32px,4.2vw,52px);letter-spacing:-.025em;}
.srv-blog .post__meta{margin-top:18px;}
.srv-blog .post__hero{max-width:1080px;margin:0 auto;padding:0 var(--pad);}
.srv-blog .post__hero-art{border-radius:16px;overflow:hidden;aspect-ratio:16/8;position:relative;
  box-shadow:0 30px 60px -34px rgba(13,25,25,.4);}
.srv-blog .post__hero-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.srv-blog .post__hero-cap{font-size:12.5px;color:var(--on-surface-variant);text-align:center;margin-top:12px;}

/* article body — calm long-form typography */
.srv-blog .article{max-width:680px;margin:0 auto;padding:clamp(36px,4.4vw,60px) var(--pad) clamp(48px,5.5vw,80px);}
.srv-blog .article p{font-size:17.5px;line-height:1.75;color:var(--body-text);margin:0 0 26px;}
.srv-blog .article p:last-child{margin-bottom:0;}
.srv-blog .article a{color:var(--secondary);font-weight:600;text-decoration:none;border-bottom:1.5px solid rgba(184,132,58,.35);}
.srv-blog .article a:hover{border-bottom-color:var(--brass-mid);}
.srv-blog .article h2{font-size:clamp(25px,2.6vw,31px);margin:44px 0 16px;}
.srv-blog .article h3{font-size:21px;margin:34px 0 12px;}
.srv-blog .article ul,.srv-blog .article ol{margin:0 0 26px;padding-left:24px;}
.srv-blog .article li{font-size:17px;line-height:1.7;color:var(--body-text);margin-bottom:10px;}
.srv-blog .article li::marker{color:var(--brass-mid);font-weight:600;}
.srv-blog .article blockquote{margin:36px 0;padding:6px 0 6px 26px;border-left:3px solid var(--brass-mid);}
.srv-blog .article blockquote p{font-family:'Vollkorn','Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;font-size:21.5px;line-height:1.5;
  font-weight:500;font-style:italic;color:var(--primary-container);margin:0;}
.srv-blog .article figure{margin:36px 0;}
.srv-blog .article figure .fart{border-radius:12px;overflow:hidden;border:1px solid var(--line);}
.srv-blog .article figcaption{font-size:12.5px;color:var(--on-surface-variant);margin-top:10px;text-align:center;}

/* end-of-post strip */
.srv-blog .post__end{border-top:1px solid var(--line);background:var(--surface);}
.srv-blog .post__end-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px 30px;padding:clamp(24px,2.8vw,36px) 0;}
.srv-blog .post__end-txt{font-size:14.5px;color:var(--on-surface-variant);max-width:52ch;}
.srv-blog .post__end-txt b{color:var(--body-text);font-weight:600;}
.srv-blog .post__end a.back{font-size:14.5px;font-weight:600;color:var(--secondary);text-decoration:none;}
.srv-blog .post__end a.back:hover{color:var(--brass-mid);}

/* ===== RESPONSIVE ===== */
@media (max-width:940px){
  .srv-blog .feat__card{grid-template-columns:1fr;}
  .srv-blog .feat__art{min-height:0;aspect-ratio:16/9;}
  .srv-blog .grid__inner{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .srv-blog{--pad:20px;}
  .srv-blog .grid__inner{grid-template-columns:1fr;}
  .srv-blog .article p{font-size:16.5px;}
  .srv-blog .post__end-row{flex-direction:column;align-items:flex-start;}
}