/* =====================================================================
   FB26 BLOG LAYER — article + archive styling for fokusbad.dk
   Deploy as: wp-content/uploads/fb26/fb26-blog.css?v=N
   Load AFTER fb26-shared.css on the two blog templates only
   (wp_template 572 "home" archive, 597 "single").

   SCOPING RULE: every selector is gated to a blog context — either
   under the `.fb26-blog` wrapper class the templates add to the
   `.fb26-root` element, or via `body:has(.fb26-blog)` for markup that
   WordPress prints outside the wrapper (the blog snippet's sticky bar).
   Nothing here can bleed onto the forside or other fb26 pages.

   INJECTED BLOG-CTA (do NOT break): fokusbad-blog-cta.php splices an
   <aside id="fb-inline-cta" class="fb-inline-cta"> (with the CF7 5088
   form) into the_content at ~55%. Its structure/IDs are owned by the
   snippet and MUST be treated as fixed. We only RESTYLE its existing
   classes. Because the snippet prints its own <style> in wp_footer
   (after this sheet), every override of a `.fb-inline-cta*` class is
   raised to `.fb26-root .fb-inline-cta*` (0,2,0) so it wins the cascade
   over the snippet's `.fb-inline-cta*` (0,1,0) regardless of order.
   The CF7 form itself keeps its GLOBAL `.fbcf7` skin (fbcf7-global.css,
   mu-plugin) — we do not touch `.fbcf7 *`.

   MOBILE-FIRST: base rules target 360–430px reading; wider screens are
   progressive `min-width` enhancements.
   ===================================================================== */

.fb26-blog{
  --art-measure:59rem;      /* ~92ch reading column — article-narrow but roomier (matches post-content contentSize 948px) */
  --art-wide:66rem;         /* header + featured image width (matches post-content wideSize 1056px) */
  --art-pad:clamp(20px,5vw,28px);
  background:var(--paper);
}

/* narrow reading container + wide chrome container (header / media / footer) */
.fb26-blog .artwrap{max-width:var(--art-measure);margin-inline:auto;padding-inline:var(--art-pad)}
.fb26-blog .artwrap-wide{max-width:var(--art-wide);margin-inline:auto;padding-inline:var(--art-pad)}
/* hero inner spans full content width like the forside (.wrap/--maxw);
   ONLY the hero — article body keeps --art-measure, artfoot keeps --art-wide */
.fb26-blog .fb26-arthero .artwrap-wide{max-width:var(--maxw)}
/* archive / index / search list pages share the article body's reading width (948px), not the wider chrome */
.fb26-blog .fb26-archead .artwrap-wide,
.fb26-blog .fb26-arcbody .artwrap-wide{max-width:var(--maxw)}

/* ===================== ARTICLE HEADER (single) — full-bleed cover hero ====
   Live-article cover look (live-rendered-5322: wp-block-cover alignfull,
   featured image bg, dim-30, overlaid serif title) rebuilt in the forside
   .fb26-hero grammar: dark photo, bottom scrim, transparent header over it
   that goes glass on scroll (id="top" is the shared.js trigger). The glass
   .fb26-artmeta pill is kept verbatim, now in the hero's content flow.
   Previews have no WP core cover CSS, so we own the cover layout ourselves
   (abs image + dim span + inner z-index) — same pattern as .fb26-cardgrid. */
.fb26-blog .fb26-arthead{padding:0}
.fb26-blog .fb26-arthero{
  position:relative;display:flex;align-items:flex-end;overflow:hidden;
  background:var(--ink);min-height:clamp(420px,58svh,640px);
  padding:0;margin:0;
}
/* featured image injected by WP as .wp-block-cover__image-background */
.fb26-blog .fb26-arthero .wp-block-cover__image-background{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
}
/* the cover's own dim span (dimRatio 30, contrast overlay) */
.fb26-blog .fb26-arthero .wp-block-cover__background{
  position:absolute;inset:0;z-index:1;background:var(--ink);opacity:.3;
}
/* forside-grammar bottom scrim for title/pill legibility over any photo */
.fb26-blog .fb26-arthero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(18,14,13,.62) 0%,rgba(18,14,13,.18) 42%,rgba(18,14,13,0) 68%);
}
.fb26-blog .fb26-arthero .wp-block-cover__inner-container{
  position:relative;z-index:3!important;width:100%;
  padding:calc(70px + clamp(2.4rem,6vw,4rem)) 0 clamp(1.9rem,4vw,2.9rem);
}
/* crumbs — base look shared with .fb26-archead (kept below in ARCHIVE),
   here re-colored for on-photo */
.fb26-blog .fb26-arthead .crumbs,
.fb26-blog .fb26-archead .crumbs{
  font-size:.82rem;color:var(--muted-2);margin:0 0 1rem;line-height:1.4;
}
.fb26-blog .fb26-arthead .crumbs a,
.fb26-blog .fb26-archead .crumbs a{color:var(--muted-2);text-decoration:none;text-underline-offset:2px}
.fb26-blog .fb26-arthead .crumbs a:hover,
.fb26-blog .fb26-archead .crumbs a:hover{color:var(--brown);text-decoration:underline}
.fb26-blog .fb26-arthero .crumbs,
.fb26-blog .fb26-arthero .crumbs a{color:rgba(242,236,228,.85);text-shadow:0 1px 12px rgba(0,0,0,.35)}
.fb26-blog .fb26-arthero .crumbs a:hover{color:#fff}
/* category eyebrow — forside on-dark kicker colors */
.fb26-blog .fb26-arthead .cat{
  display:inline-flex;align-items:center;gap:.6rem;margin:0 0 1rem;
  font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:#E9E2D7;
}
.fb26-blog .fb26-arthead .cat::before{content:"";width:26px;height:1px;background:#E9E2D7;opacity:.7;flex:none}
.fb26-blog .fb26-arthead .cat a{color:inherit;text-decoration:none}
.fb26-blog .fb26-arthead .cat a:hover{color:#fff}
/* title — serif editorial, light over the cover (re-shown over the shared
   .fb26-root .wp-block-post-title{display:none!important} as before) */
.fb26-blog .fb26-arthead h1,
.fb26-blog .fb26-arthead .wp-block-post-title{
  display:block!important;
  font-family:Cardo,"Iowan Old Style",Georgia,serif;
  font-weight:400;line-height:1.1;letter-spacing:-.01em;color:#fff;
  font-size:clamp(1.95rem,5.4vw,3.1rem);margin:0;max-width:24ch;text-wrap:balance;
  text-shadow:0 2px 30px rgba(0,0,0,.4);
}
/* the [pv_laesetid] shortcode ships inline font-size/offset that misaligns inside the pill — normalise it to the pill's own type */
.fb26-blog .fb26-artmeta .pv-laesetid{font-size:inherit!important;position:static!important;top:auto!important;vertical-align:baseline!important}
/* meta pill — restored to the old pages' pv-auto-bubble look (light glassmorphism, greige text) */
.fb26-blog .fb26-artmeta{
  display:inline-flex;flex-wrap:nowrap;align-items:center;gap:14px;
  margin:1.25rem 0 0;padding:5px 16px;border-radius:22px;
  font-size:.86rem;font-weight:500;color:#E1DFDB;line-height:1;
  letter-spacing:.005em;font-variant-numeric:tabular-nums;
  max-width:calc(100% - 24px);box-sizing:border-box;
  background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(234,241,248,.20));
  -webkit-backdrop-filter:blur(10px) saturate(120%);
  backdrop-filter:blur(10px) saturate(120%);
  border:1px solid rgba(14,33,56,.10);
  box-shadow:0 6px 18px rgba(14,33,56,.06);
}
.fb26-blog .fb26-artmeta p{margin:0}
.fb26-blog .fb26-artmeta .sep{opacity:.55}
.fb26-blog .fb26-artmeta a{color:#E1DFDB;text-decoration:none;transition:opacity .2s}
.fb26-blog .fb26-artmeta a:hover{opacity:.8}
.fb26-blog .fb26-artmeta .wp-block-post-date{margin:0}

/* ===== DESKTOP (>=769px): crumbs + kicker full rows; title (left) and the
   glass meta pill (right) share the hero's bottom baseline row ===== */
@media(min-width:769px){
  .fb26-blog .fb26-arthero .artwrap-wide{
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    align-items:end;column-gap:clamp(1.5rem,3vw,3rem);
  }
  .fb26-blog .fb26-arthero .cat{grid-column:1 / -1}
  .fb26-blog .fb26-arthero h1,
  .fb26-blog .fb26-arthero .wp-block-post-title{grid-column:1}
  .fb26-blog .fb26-arthero .fb26-artmeta{grid-column:2;justify-self:end;align-self:end;margin:0}
  /* breadcrumbs moved below the meta pill, right-aligned under it */
  .fb26-blog .fb26-arthero .crumbs{grid-column:2;justify-self:end;text-align:right;margin:.55rem 0 0}
}

/* ===== MOBILE (<=768px): same full-bleed dark cover as desktop, just shorter.
   Replaced the old round-1 light-header/framed-image treatment 2026-07-14 per
   owner request — mobile now matches the PC article hero (dark cover, title +
   glass pill overlaid). All the desktop cover rules above apply as-is; only
   height/padding are tuned and breadcrumbs are hidden. ===== */
@media(max-width:768px){
  .fb26-blog .fb26-arthero{min-height:clamp(360px,54svh,480px)}
  .fb26-blog .fb26-arthero .wp-block-cover__inner-container{
    padding:calc(64px + clamp(1.6rem,6vw,2.6rem)) 0 clamp(1.6rem,5vw,2.4rem);
  }
  /* breadcrumbs add little value in the mobile hero (kept on PC) */
  .fb26-blog .fb26-arthero .crumbs{display:none}
  .fb26-blog .fb26-artmeta{margin-top:1rem}
}

/* ===================== ARTICLE BODY TYPOGRAPHY ===================== */
/* post-content renders <div class="entry-content wp-block-post-content">.
   The reading measure comes from the block's constrained contentSize;
   these rules set the vertical rhythm + fb26 look. */
.fb26-blog .entry-content{
  padding-top:clamp(2.2rem,5vw,3.2rem);
  color:var(--body);
  font-size:1.075rem;line-height:1.78;
}
.fb26-blog .entry-content > *{margin-top:0}
.fb26-blog .entry-content p{
  margin:0 0 1.15em;color:var(--body);
  font-size:1.075rem;line-height:1.78;
}
.fb26-blog .entry-content h2{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:640;letter-spacing:-.02em;line-height:1.14;color:var(--ink);
  font-size:clamp(1.4rem,3.4vw,1.85rem);
  margin:2em 0 .55em;text-wrap:balance;scroll-margin-top:88px;
}
.fb26-blog .entry-content h3{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:620;letter-spacing:-.015em;line-height:1.2;color:var(--ink);
  font-size:clamp(1.2rem,2.6vw,1.4rem);margin:1.7em 0 .5em;scroll-margin-top:88px;
}
.fb26-blog .entry-content h4{
  font-weight:600;color:var(--ink);font-size:1.08rem;margin:1.5em 0 .45em;letter-spacing:-.01em;
}
/* links in body */
.fb26-blog .entry-content a{
  color:var(--brown);font-weight:500;
  text-decoration:underline;text-decoration-color:rgba(101,87,78,.4);text-underline-offset:3px;
  text-decoration-thickness:1px;transition:color .2s,text-decoration-color .2s;
}
.fb26-blog .entry-content a:hover{color:var(--brown-d);text-decoration-color:var(--brown)}
.fb26-blog .entry-content strong,.fb26-blog .entry-content b{font-weight:650;color:var(--ink)}
.fb26-blog .entry-content em{font-style:italic}

/* lists */
.fb26-blog .entry-content ul,.fb26-blog .entry-content ol{
  margin:0 0 1.3em;padding-left:0;list-style:none;
}
.fb26-blog .entry-content ul > li,.fb26-blog .entry-content ol > li{
  position:relative;padding-left:1.7rem;margin:0 0 .55em;line-height:1.68;color:var(--body);
}
.fb26-blog .entry-content ul > li::before{
  content:"";position:absolute;left:.15rem;top:.62em;width:7px;height:7px;border-radius:2px;
  background:var(--brown);opacity:.85;
}
.fb26-blog .entry-content ol{counter-reset:fbli}
.fb26-blog .entry-content ol > li{counter-increment:fbli}
.fb26-blog .entry-content ol > li::before{
  content:counter(fbli);position:absolute;left:0;top:.05em;
  font-size:.82em;font-weight:650;color:var(--brown);font-variant-numeric:tabular-nums;
}
/* keep author's inline list spacing from clobbering our bullets, but let
   inline padding-left still read — reset any inline padding on li text */
.fb26-blog .entry-content li > ul,.fb26-blog .entry-content li > ol{margin:.5em 0 0}

/* images / figures */
.fb26-blog .entry-content figure,
.fb26-blog .entry-content .wp-block-image{margin:1.7em 0}
.fb26-blog .entry-content img{
  display:block;max-width:100%;height:auto;border-radius:var(--r-s);
}
.fb26-blog .entry-content .is-style-rounded img,
.fb26-blog .entry-content figure.is-style-rounded img{border-radius:var(--r)}
.fb26-blog .entry-content figcaption{
  margin:.6rem 0 0;font-size:.86rem;color:var(--muted-2);line-height:1.5;text-align:center;
}

/* blockquote */
.fb26-blog .entry-content blockquote{
  margin:1.7em 0;padding:.2rem 0 .2rem 1.3rem;border-left:3px solid var(--brown);
  font-family:Cardo,"Iowan Old Style",Georgia,serif;font-size:1.2rem;line-height:1.5;color:var(--ink);
}
.fb26-blog .entry-content blockquote p{font-size:inherit;line-height:inherit;color:inherit}

/* tables — the source posts wrap tables in an overflow-x div; support both */
.fb26-blog .entry-content .wp-block-table,
.fb26-blog .entry-content > div[style*="overflow-x"]{margin:1.7em 0}
.fb26-blog .entry-content table{
  border-collapse:collapse;width:100%;font-size:.96rem;line-height:1.5;
}
.fb26-blog .entry-content th,
.fb26-blog .entry-content td{
  border:1px solid var(--line);padding:.7rem .85rem;text-align:left;vertical-align:top;
}
.fb26-blog .entry-content thead th,
.fb26-blog .entry-content th{background:var(--base2);font-weight:650;color:var(--ink)}

/* code */
.fb26-blog .entry-content code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:var(--base2);border-radius:5px;padding:.12em .38em;
}
.fb26-blog .entry-content pre{
  background:var(--ink);color:#EDE7DF;border-radius:var(--r-s);padding:1rem 1.15rem;
  overflow-x:auto;font-size:.9rem;line-height:1.55;margin:1.7em 0;
}
.fb26-blog .entry-content pre code{background:none;padding:0;color:inherit}

/* horizontal rule */
.fb26-blog .entry-content hr{border:0;height:1px;background:var(--line);margin:2.2em 0}

/* ===================== INJECTED BLOG-CTA (restyle only) =====================
   Structure (fixed, from fokusbad-blog-cta.php):
     aside#fb-inline-cta.fb-inline-cta
       .fb-inline-cta__pitch
         .fb-inline-cta__title / .fb-inline-cta__lead
         ul.fb-inline-cta__usps > li
         figure.fb-inline-cta__person > img + figcaption
       .fb-inline-cta__form > [contact-form-7 id=5088] (.fbcf7 — global skin)
   All overrides raised to .fb26-root … to beat the footer <style>. */
.fb26-root .fb-inline-cta{
  margin:clamp(2rem,6vw,3rem) auto;padding:clamp(1.4rem,4vw,2.1rem);
  max-width:var(--art-measure);scroll-margin-top:90px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 30px 64px -34px rgba(26,21,20,.34);
  display:grid;grid-template-columns:1fr;gap:1.3rem;
}
.fb26-root .fb-inline-cta__title{
  font-family:Cardo,"Iowan Old Style",Georgia,serif;font-weight:400;
  font-size:clamp(1.4rem,3.4vw,1.75rem);line-height:1.14;letter-spacing:-.01em;
  color:var(--ink);margin:0 0 .5rem;
}
.fb26-root .fb-inline-cta__lead{
  margin:0 0 1.1rem;font-size:1.02rem;line-height:1.55;color:var(--body);
}
.fb26-root .fb-inline-cta__usps{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.fb26-root .fb-inline-cta__usps li{
  position:relative;padding-left:1.6rem;font-size:.98rem;line-height:1.4;color:var(--body);
}
/* single clean checkmark — content:"" overrides the snippet's ✓ char; no circle badge, no ::after */
.fb26-root .fb-inline-cta__usps li::before{
  content:"";position:absolute;left:.15rem;top:.3em;width:.34rem;height:.62rem;
  border:solid var(--brown);border-width:0 2px 2px 0;border-radius:0;background:none;
  transform:rotate(45deg);
}
.fb26-root .fb-inline-cta__usps li::after{content:none}
.fb26-root .fb-inline-cta__person{margin:0;display:none}
.fb26-root .fb-inline-cta__person figcaption{margin:.5rem 0 0;font-size:.86rem;color:var(--muted-2);text-align:left}
@media(min-width:720px){
  .fb26-root .fb-inline-cta{grid-template-columns:.92fr 1.08fr;gap:1.4rem 2.1rem;align-items:end}
  .fb26-root .fb-inline-cta__pitch{display:flex;flex-direction:column}
  .fb26-root .fb-inline-cta__person{display:block;margin-top:1.4rem}
  .fb26-root .fb-inline-cta__person img{
    width:150px;height:150px;object-fit:cover;object-position:50% 30%;border-radius:var(--r-s);display:block;
  }
}
/* The CF7 form (.fbcf7) inside keeps the global mu-plugin skin — untouched. */

/* ===================== ARTICLE FOOTER (tags + prev/next) ===================== */
.fb26-blog .fb26-artfoot{padding:clamp(2rem,5vw,3.2rem) 0 clamp(3rem,7vw,5rem)}
.fb26-blog .fb26-tags{display:flex;flex-wrap:wrap;gap:.55rem;margin:0 0 clamp(1.6rem,4vw,2.4rem)}
.fb26-blog .fb26-tags .wp-block-post-terms{display:flex;flex-wrap:wrap;gap:.55rem}
.fb26-blog .fb26-tags a{
  background:#fff;border:1px solid var(--line);border-radius:100px;
  padding:.4rem 1rem;font-size:.88rem;font-weight:500;color:var(--ink);text-decoration:none;
  transition:border-color .2s,transform .2s;
}
.fb26-blog .fb26-tags a:hover{border-color:var(--brown);transform:translateY(-2px)}

.fb26-blog .fb26-postnav{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:clamp(1.4rem,3vw,2rem);
}
.fb26-blog .fb26-postnav .wp-block-post-navigation-link{font-size:.95rem;max-width:48%}
.fb26-blog .fb26-postnav .wp-block-post-navigation-link.post-navigation-link-next{text-align:right;margin-left:auto}
.fb26-blog .fb26-postnav a{color:var(--brown);font-weight:600;text-decoration:none}
.fb26-blog .fb26-postnav a:hover{color:var(--brown-d);text-decoration:underline;text-underline-offset:3px}
@media(max-width:520px){
  .fb26-blog .fb26-postnav{flex-direction:column;gap:1rem}
  .fb26-blog .fb26-postnav .wp-block-post-navigation-link{max-width:none}
  .fb26-blog .fb26-postnav .wp-block-post-navigation-link.post-navigation-link-next{text-align:left}
}

/* ===================== ARCHIVE (home / 572) ===================== */
.fb26-blog .fb26-archead{
  padding-top:calc(70px + clamp(3rem,7vw,5.5rem));
  padding-bottom:clamp(1.4rem,4vw,2.4rem);
}
.fb26-blog .fb26-archead .kicker{margin-bottom:.9rem}
.fb26-blog .fb26-archead h1,
.fb26-blog .fb26-archead .wp-block-heading{
  font-family:Cardo,"Iowan Old Style",Georgia,serif;font-weight:400;
  font-size:clamp(2.4rem,7vw,4rem);line-height:1.04;letter-spacing:-.015em;color:var(--ink);margin:0;
}
.fb26-blog .fb26-archead .arclead{
  margin:1rem 0 0;max-width:52ch;font-size:clamp(1.05rem,1.6vw,1.18rem);line-height:1.6;color:var(--body);
}

/* search */
.fb26-blog .fb26-arcsearch{margin:clamp(1.6rem,4vw,2.4rem) 0 0}
.fb26-blog .fb26-arcsearch .wp-block-search__label{
  display:block;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--muted-2);margin:0 0 .55rem;
}
.fb26-blog .fb26-arcsearch .wp-block-search__inside-wrapper{
  display:flex;align-items:center;
  max-width:30rem;border:1px solid var(--line);border-radius:100px;background:#fff;overflow:hidden;
  box-shadow:0 1px 2px rgba(26,21,20,.05);transition:border-color .2s,box-shadow .2s;
}
.fb26-blog .fb26-arcsearch .wp-block-search__inside-wrapper:focus-within{
  border-color:var(--brown);box-shadow:0 0 0 4px rgba(101,87,78,.12);
}
.fb26-blog .fb26-arcsearch input.wp-block-search__input{
  flex:1 1 auto;min-width:0;
  border:0;background:transparent;padding:.75rem 1.1rem;font-size:16px;color:var(--ink);min-height:46px;
}
.fb26-blog .fb26-arcsearch input.wp-block-search__input:focus{outline:none}
.fb26-blog .fb26-arcsearch .wp-block-search__button{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  margin:0;background:var(--brown);color:#fff;border:0;border-radius:100px;
  padding:0 1.15rem;font-weight:600;cursor:pointer;transition:background .2s;min-height:46px;
}
.fb26-blog .fb26-arcsearch .wp-block-search__button:hover{background:var(--brown-d)}
.fb26-blog .fb26-arcsearch .wp-block-search__button svg{fill:currentColor}
/* Artikler/arkiv/søg header = dark hero band so the transparent site-header (white nav) stays legible */
.fb26-blog .fb26-archead{background:var(--ink)}
.fb26-blog .fb26-archead h1,
.fb26-blog .fb26-archead .wp-block-heading{color:#fff}
.fb26-blog .fb26-archead .arclead{color:#E7E0D5}
.fb26-blog .fb26-archead .crumbs,
.fb26-blog .fb26-archead .crumbs a{color:rgba(242,236,228,.85)}
.fb26-blog .fb26-archead .crumbs a:hover{color:#fff}
.fb26-blog .fb26-archead .fb26-arcsearch .wp-block-search__label{color:#E9E2D7}

/* section heading above the grid */
/* breathing room between the hero band and the list on every archive/search/blog surface */
.fb26-blog .fb26-arcbody{padding-top:clamp(2.4rem,5vw,4rem)}
.fb26-blog .fb26-arcgridhead{
  font-weight:640;letter-spacing:-.018em;color:var(--ink);
  font-size:clamp(1.3rem,2.6vw,1.6rem);margin:0 0 clamp(1.2rem,3vw,1.8rem);
}

/* card grid — explicit responsive columns (mobile-first: 1 col; 2 ≥561px; 3 ≥901px).
   Grouped with .is-layout-grid so the same columns beat WP's generated
   .wp-container-* auto-fill rule live AND render in static previews
   (previews have no WP core CSS, so we must own display:grid ourselves). */
.fb26-blog .fb26-cardgrid,
.fb26-blog .fb26-cardgrid.is-layout-grid{
  display:grid;grid-template-columns:1fr;
  gap:clamp(2.4rem,5vw,3.4rem) clamp(1.2rem,2vw,1.8rem);
}
@media(min-width:561px){
  .fb26-blog .fb26-cardgrid,
  .fb26-blog .fb26-cardgrid.is-layout-grid{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:901px){
  .fb26-blog .fb26-cardgrid,
  .fb26-blog .fb26-cardgrid.is-layout-grid{grid-template-columns:repeat(3,1fr)}
}
/* each card group */
.fb26-blog .fb26-card{margin:0;gap:0}
.fb26-blog .fb26-card .fb26-card-media{margin:0 0 1rem}
.fb26-blog .fb26-card .fb26-card-media img,
.fb26-blog .fb26-card .wp-block-post-featured-image img{
  display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  border-radius:var(--r);box-shadow:0 1px 2px rgba(26,21,20,.06);
  transition:transform .5s var(--ease),box-shadow .45s ease;
}
.fb26-blog .fb26-card .fb26-card-media a{display:block;overflow:hidden;border-radius:var(--r)}
.fb26-blog .fb26-card .fb26-card-media a:hover img{transform:scale(1.04);box-shadow:0 20px 44px -22px rgba(26,21,20,.4)}
.fb26-blog .fb26-card .wp-block-post-title{
  display:block!important;/* re-show over shared .fb26-root .wp-block-post-title{display:none} */
  font-weight:620;letter-spacing:-.015em;line-height:1.22;color:var(--ink);
  font-size:1.18rem;margin:.45rem 0 .5rem;
}
.fb26-blog .fb26-card .wp-block-post-title a{color:inherit;text-decoration:none;transition:color .2s}
.fb26-blog .fb26-card .wp-block-post-title a:hover{color:var(--brown)}
.fb26-blog .fb26-card .fb26-card-meta{
  font-size:.82rem;color:var(--muted-2);margin:0 0 .55rem;font-variant-numeric:tabular-nums;
  display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;
}
.fb26-blog .fb26-card .fb26-card-meta .sep{opacity:.5}
.fb26-blog .fb26-card .fb26-card-meta a{color:inherit;text-decoration:none}
.fb26-blog .fb26-card .wp-block-post-excerpt{margin:0}
.fb26-blog .fb26-card .wp-block-post-excerpt p,
.fb26-blog .fb26-card .wp-block-post-excerpt__excerpt{
  font-size:.95rem;line-height:1.55;color:var(--muted-2);margin:0;
}
.fb26-blog .fb26-card .wp-block-post-excerpt__more-link{
  display:inline-block;margin-top:.5rem;color:var(--brown);font-weight:600;font-size:.9rem;
  text-decoration:none;
}
.fb26-blog .fb26-card .wp-block-post-excerpt__more-link:hover{text-decoration:underline;text-underline-offset:3px}

/* no-results */
.fb26-blog .wp-block-query-no-results p{color:var(--muted-2);font-size:1.05rem}

/* pagination */
.fb26-blog .wp-block-query-pagination{
  margin-top:clamp(2rem,4vw,3rem);gap:.5rem 1rem;align-items:center;
}
.fb26-blog .wp-block-query-pagination a,
.fb26-blog .wp-block-query-pagination .wp-block-query-pagination-numbers span{
  color:var(--ink);text-decoration:none;font-weight:500;
}
.fb26-blog .wp-block-query-pagination-previous,
.fb26-blog .wp-block-query-pagination-next{
  color:var(--brown);font-weight:600;
}
.fb26-blog .wp-block-query-pagination-previous:hover,
.fb26-blog .wp-block-query-pagination-next:hover{color:var(--brown-d);text-decoration:underline;text-underline-offset:3px}
.fb26-blog .wp-block-query-pagination .current{color:var(--brown);font-weight:700}

/* last-content -> footer breathing room. Archive & search end the page with
   .fb26-arcbody (grid + pagination) directly against the footer; index ends
   with .fb26-arcclose instead, so this is an explicit opt-in modifier.
   Value = the forside .sec bottom padding (fb26 section-to-footer rhythm). */
.fb26-blog .fb26-arcbody-end{padding-bottom:clamp(3rem,5vw,5rem)}

/* archive closing CTA band (reuses the shared .close pattern lightly) */
.fb26-blog .fb26-arcclose{text-align:center;padding:clamp(2.4rem,6vw,4rem) 0 clamp(3rem,7vw,4.6rem)}
.fb26-blog .fb26-arcclose p{margin:0 0 1.3rem;font-size:clamp(1.15rem,2.2vw,1.4rem);color:var(--ink);font-weight:500}
.fb26-blog .fb26-arcclose .cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem}

/* ===================== SNIPPET STICKY BAR (leave functional; light polish)
   Printed in wp_footer OUTSIDE .fb26-root, so we target it via
   body:has(.fb26-blog) (0,2,0) which beats the snippet's .fb-sticky-cta.
   The snippet is already brand-brown; we only round it to fb26. ===== */
@media(max-width:781px){
  body:has(.fb26-blog) .fb-sticky-cta a{border-radius:100px;font-weight:600}
}

/* ===================== HEADER — solid from scroll 0 (B2) =====================
   Hero-less blog pages (archive/index/search/404) have NO dark hero under the
   fixed header, so the shared `.fb26-hd:not(.scrolled)` white logo/nav/burger
   would sit on the light arthead (--paper) and be invisible. Force the forside
   "scrolled" glass look from scroll 0. Each rule counters a shared
   :not(.scrolled) rule with +1 class, so it wins regardless of scroll state /
   JS timing. Values copied verbatim from fb26-shared.css .fb26-hd.scrolled.
   The single (fb26-artpage) is EXCLUDED — it now has a dark cover hero and uses
   the shared default: white-on-photo, glass past 50% of #top. ========= */
.fb26-blog:not(.fb26-artpage) .fb26-hd{background:rgba(245,242,237,.62);backdrop-filter:blur(26px) saturate(2);-webkit-backdrop-filter:blur(26px) saturate(2);border-bottom:1px solid rgba(255,255,255,.5);box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 -1px 0 rgba(26,21,20,.04) inset,0 10px 34px rgba(26,21,20,.09);height:64px}
.fb26-blog:not(.fb26-artpage) .fb26-hd:not(.scrolled) .logo .l-light{opacity:0}
.fb26-blog:not(.fb26-artpage) .fb26-hd:not(.scrolled) .logo .l-dark{opacity:1}
.fb26-blog:not(.fb26-artpage) .fb26-hd:not(.scrolled) nav a,.fb26-blog:not(.fb26-artpage) .fb26-hd:not(.scrolled) .hd-tel{color:var(--ink);text-shadow:none;opacity:.9}
.fb26-blog:not(.fb26-artpage) .fb26-hd:not(.scrolled) .btn-ghost{color:var(--ink);border-color:rgba(26,21,20,.2)}
.fb26-blog:not(.fb26-artpage) .fb26-hd:not(.scrolled) .hd-burger span{background:var(--ink)}

/* ===================== REDUCED MOTION ===================== */
@media(prefers-reduced-motion:reduce){
  .fb26-blog .fb26-card .fb26-card-media img{transition:none}
}