/* Peptide Works -- blog index and category archives.
 *
 * The blog listing is NOT a page: /blog/ is `page_for_posts`, so WordPress
 * ignores the page's content and Elementor's ARCHIVE template (120, and 12665
 * for categories) draws it. A page template cannot reach it, which is why this
 * is a stylesheet rather than the treatment /faqs/ and /about-us/ got.
 *
 * Scoped to the blog/category/tag body classes so it cannot touch the product
 * archives, which share Elementor's `location-archive`.
 */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/newsreader-400.woff2') format('woff2');}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/newsreader-500.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-sans-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-sans-500.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/ibm-plex-sans-600.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-mono-500.woff2') format('woff2');}

.pw-blog-archive .elementor-location-archive{
  font-family:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:#16191B;
}

/* ---- hero band -----------------------------------------------------------
 * Three absolutely-positioned decorations (a 100px squiggle, a 50px squiggle
 * and an 80px hexagon outline) sat over a white-to-green gradient. They are the
 * only ornament anywhere in the redesign, they carry no meaning, and one of
 * them overlapped the H1's descenders. Gone, and the gradient flattened to the
 * same #F2F7EF band the article pages use. */
.pw-blog-archive .elementor-location-archive > .e-con:first-child{
  background-image:none !important;
  background-color:#F2F7EF !important;
  border-bottom:1px solid rgba(22,25,27,0.07);
}
.pw-blog-archive .elementor-location-archive > .e-con:first-child > .e-con-inner{
  padding-block:clamp(32px,4.6vw,64px) !important;
}
.pw-blog-archive .elementor-location-archive .elementor-absolute{display:none !important;}

/* Eyebrow, headline, standfirst -- the article pages' scale exactly, so a
   reader moving from /blog/ to a post does not change typeface or jump two
   heading sizes. Was Rufina 64px/700. */
.pw-blog-archive .elementor-location-archive > .e-con:first-child .elementor-widget-heading:first-of-type .elementor-heading-title{
  font-family:'IBM Plex Mono',ui-monospace,monospace !important;
  font-size:11px !important;
  font-weight:400 !important;
  letter-spacing:0.16em !important;
  text-transform:uppercase !important;
  color:#3F7A4C !important;
}
.pw-blog-archive .elementor-location-archive h1,
.pw-blog-archive .elementor-location-archive h1.elementor-heading-title{
  font-family:'Newsreader',Georgia,serif !important;
  font-weight:500 !important;
  font-size:clamp(34px,4.4vw,56px) !important;
  line-height:1.04 !important;
  letter-spacing:-0.018em !important;
  color:#16191B !important;
  max-width:22ch;
}
.pw-blog-archive .elementor-location-archive > .e-con:first-child .elementor-widget-text-editor{
  font-size:17px !important;
  line-height:1.55 !important;
  color:#4A544D !important;
  max-width:62ch;
}

/* ---- section heading ----------------------------------------------------- */
.pw-blog-archive .elementor-location-archive h2,
.pw-blog-archive .elementor-location-archive h2.elementor-heading-title{
  font-family:'Newsreader',Georgia,serif !important;
  font-weight:500 !important;
  font-size:clamp(26px,3vw,34px) !important;
  line-height:1.14 !important;
  letter-spacing:-0.015em !important;
  color:#16191B !important;
}

/* ---- post cards ----------------------------------------------------------
 * Elementor stretches the grid row but not the card inside it, so a post with
 * no thumbnail left a tall empty box beside a short one. Making the item a
 * flex column and the card `height:100%` is what levels them. */
.pw-blog-archive .elementor-grid-item{display:flex !important;}
.pw-blog-archive .elementor-post__card{
  display:flex !important;
  flex-direction:column !important;
  height:100% !important;
  width:100%;
  background:#FFFFFF !important;
  border:1px solid rgba(22,25,27,0.11) !important;
  border-radius:16px !important;
  overflow:hidden !important;
  box-shadow:none !important;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.pw-blog-archive .elementor-post__card:hover{
  border-color:rgba(29,92,44,0.4) !important;
  box-shadow:0 18px 40px -30px rgba(18,61,29,0.6) !important;
}
.pw-blog-archive .elementor-post__thumbnail{
  aspect-ratio:16/10 !important;
  padding-bottom:0 !important;   /* Elementor sizes these with a padding hack */
  height:auto !important;
}
.pw-blog-archive .elementor-post__thumbnail img{
  position:absolute;inset:0;
  width:100% !important;height:100% !important;
  object-fit:cover !important;
}
/* A post with no featured image gets no thumbnail element at all, so its card
   was all text next to a card with a photo -- equal height, but with a large
   void where the picture should be. A placeholder band keeps the row reading as
   a grid, and uses the same stripe as the product cards' "photo pending" so it
   is recognisably a missing image rather than a design flourish. */
.pw-blog-archive .elementor-post__card:not(:has(.elementor-post__thumbnail))::before{
  content:"";
  display:block;
  aspect-ratio:16/10;
  background:repeating-linear-gradient(135deg,#E7EFE2 0 10px,#EDF3E9 10px 20px);
  border-bottom:1px solid rgba(22,25,27,0.08);
}

.pw-blog-archive .elementor-post__text{
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
  padding:18px 18px 20px !important;
  margin:0 !important;
}
.pw-blog-archive .elementor-post__badge{
  background:#1D5C2C !important;
  color:#FFFFFF !important;
  font-family:'IBM Plex Mono',ui-monospace,monospace !important;
  font-size:10.5px !important;
  font-weight:500 !important;
  letter-spacing:0.1em !important;
  text-transform:uppercase !important;
  border-radius:999px !important;
  padding:5px 10px !important;
  top:12px !important;right:12px !important;left:auto !important;
}
.pw-blog-archive .elementor-post__title{margin:0 0 8px !important;}
.pw-blog-archive .elementor-post__title,
.pw-blog-archive .elementor-post__title a{
  font-family:'IBM Plex Sans',system-ui,sans-serif !important;
  font-size:17px !important;
  font-weight:600 !important;
  line-height:1.3 !important;
  color:#16191B !important;
  text-decoration:none !important;
  text-wrap:pretty;
}
.pw-blog-archive .elementor-post__title a:hover{color:#1D5C2C !important;}
/* The excerpt was cut mid-sentence with no ellipsis ("...research for its").
   Clamped to three lines so every card ends the same way and on purpose. */
.pw-blog-archive .elementor-post__excerpt{margin:0 0 14px !important;}
.pw-blog-archive .elementor-post__excerpt p{
  font-size:14.5px !important;
  line-height:1.6 !important;
  color:#4A544D !important;
  margin:0 !important;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.pw-blog-archive .elementor-post__read-more-wrapper{margin-top:auto !important;}
.pw-blog-archive .elementor-post__read-more{
  font-family:'IBM Plex Sans',system-ui,sans-serif !important;
  font-size:14px !important;
  font-weight:600 !important;
  color:#1D5C2C !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  text-decoration:none !important;
}
.pw-blog-archive .elementor-post__read-more:hover{color:#123D1D !important;}

/* ---- categories rail ----------------------------------------------------- */
.pw-blog-archive .elementor-widget-wp-widget-categories{
  background:#FFFFFF;
  border:1px solid rgba(22,25,27,0.11);
  border-radius:16px;
  padding:20px 22px 22px;
}
.pw-blog-archive .elementor-widget-wp-widget-categories .elementor-widget-container > h5,
.pw-blog-archive .elementor-widget-wp-widget-categories .widget-title{
  font-family:'Newsreader',Georgia,serif !important;
  font-weight:500 !important;
  font-size:21px !important;
  color:#16191B !important;
  margin:0 0 12px !important;
}
.pw-blog-archive .elementor-widget-wp-widget-categories ul{
  list-style:none !important;margin:0 !important;padding:0 !important;
}
.pw-blog-archive .elementor-widget-wp-widget-categories li{
  margin:0 !important;padding:0 !important;
  border-top:1px solid rgba(22,25,27,0.08);
}
.pw-blog-archive .elementor-widget-wp-widget-categories li:first-child{border-top:0;}
.pw-blog-archive .elementor-widget-wp-widget-categories li a{
  display:block;
  padding:9px 0;
  font-size:14.5px;
  color:#2C3630 !important;
  text-decoration:none !important;
}
.pw-blog-archive .elementor-widget-wp-widget-categories li a:hover{color:#1D5C2C !important;}

/* ---- pagination ---------------------------------------------------------- */
.pw-blog-archive .elementor-pagination{
  margin-top:clamp(24px,3vw,36px) !important;
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
}
.pw-blog-archive .elementor-pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 12px;
  border:1px solid rgba(29,92,44,0.22);
  border-radius:999px;
  font-size:14px;color:#1D5C2C;text-decoration:none;
}
.pw-blog-archive .elementor-pagination .page-numbers:hover{background:#F2F7EF;border-color:#1D5C2C;}
.pw-blog-archive .elementor-pagination .page-numbers.current{
  background:#1D5C2C;border-color:#1D5C2C;color:#FFFFFF;
}