/* ==========================================================================
   Esteril Process Solutions — Blog styles (archive + single)
   Namespaced under .eb-*  so nothing collides with Astra / Elementor.
   v1.2 — title case, centred single layout, wider hero, share rail,
          fixed-header clearance, share block moves below the article on
          narrow screens, eyebrow stacks on mobile.
   ========================================================================== */

.eb-page{
  --ink:#16232c;      /* headings / near-black slate */
  --body:#45535d;     /* body copy */
  --muted:#8492a0;    /* meta, captions */
  --accent:#0090c4;   /* Esteril cyan-blue */
  --accent-2:#0b6e97; /* hover / darker */
  --bg:#f2f6f8;       /* page background */
  --surface:#ffffff;  /* cards / article */
  --line:#e2e9ed;     /* hairline borders */
  --cta:#0e2a38;      /* dark teal-navy conversion band */

  background:var(--bg);
  color:var(--body);
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}

/* Heading reset: ONLY line-height. Colour + margin are owned by each
   component class below, otherwise this rule out-specifies them. */
.eb-page h1,.eb-page h2,.eb-page h3{line-height:1.18;}
.eb-page a{color:inherit;text-decoration:none;}
.eb-page img{max-width:100%;height:auto;display:block;}

/* Top padding clears the fixed site header. */
.eb-wrap{max-width:1120px;margin:0 auto;padding:150px 24px 88px;}

/* ---- Shared meta line (the "instrument readout") --------------------------- */
.eb-meta{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.eb-meta > span{display:inline-flex;align-items:center;}
.eb-meta > span + span::before{
  content:"";width:3px;height:3px;border-radius:50%;
  background:currentColor;margin-right:12px;opacity:.6;
}
.eb-tag{color:var(--accent);font-weight:600;}
.eb-meta > .eb-tag + span::before{background:var(--muted);}

/* ---- Eyebrow --------------------------------------------------------------- */
.eb-eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin:0 0 18px;font-weight:600;
  display:inline-flex;align-items:center;gap:12px;
}
.eb-eyebrow::before{               /* short "weld seam" rule — Esteril signature */
  content:"";width:34px;height:2px;flex-shrink:0;
  background:linear-gradient(90deg,var(--accent),rgba(0,144,196,0));
}
.eb-eyebrow--link:hover{color:var(--accent-2);}

/* ==========================================================================
   ARCHIVE / BLOG INDEX
   ========================================================================== */
.eb-masthead{
  border-bottom:1px solid var(--line);
  padding-bottom:40px;margin-bottom:48px;
}
.eb-masthead-row{
  display:grid;grid-template-columns:1.3fr .9fr;gap:40px;align-items:end;
}
.eb-title{
  font-size:clamp(30px,4vw,46px);font-weight:700;letter-spacing:-.02em;
  color:var(--ink);margin:0;
  text-transform:none;
}
.eb-lede{font-size:16px;color:var(--body);margin:0;max-width:42ch;}

.eb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 24px;}

/* Card ---------------------------------------------------------------------- */
.eb-card{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
  position:relative;
}
.eb-card::before{                  /* weld-seam accent, revealed on hover */
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--accent),rgba(0,144,196,0));
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease;z-index:2;
}
.eb-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px -22px rgba(16,42,56,.45);
  border-color:#d3dde3;
}
.eb-card:hover::before{transform:scaleX(1);}

.eb-card-media{display:block;aspect-ratio:16/10;overflow:hidden;background:#eef3f6;}
.eb-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.eb-card:hover .eb-card-media img{transform:scale(1.04);}

.eb-media-fallback{
  display:block;width:100%;height:100%;
  background:
    linear-gradient(180deg,#dfe9ee,#eef3f6),
    repeating-linear-gradient(90deg,rgba(0,144,196,.10) 0 1px,transparent 1px 22px);
}

.eb-card-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1;}
.eb-card-title{
  font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin:0 0 10px;
}
.eb-card-title a:hover{color:var(--accent-2);}
.eb-card-excerpt{
  font-size:14.5px;color:var(--body);margin:0 0 18px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.eb-card-foot{
  margin:auto 0 0;padding-top:16px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
  font-size:13px;color:var(--muted);
}
.eb-readlink{font-weight:600;color:var(--accent);display:inline-flex;gap:7px;align-items:center;}
.eb-readlink span{transition:transform .2s ease;}
.eb-readlink:hover{color:var(--accent-2);}
.eb-readlink:hover span{transform:translateX(3px);}

/* Featured card (page 1, first post) ---------------------------------------- */
.eb-card--feature{grid-column:1 / -1;flex-direction:row;align-items:stretch;}
.eb-card--feature .eb-card-media{aspect-ratio:auto;flex:0 0 52%;min-height:340px;}
.eb-card--feature .eb-card-body{padding:40px 44px;justify-content:center;}
.eb-card--feature .eb-card-title{font-size:clamp(24px,2.4vw,32px);letter-spacing:-.02em;}
.eb-card--feature .eb-card-excerpt{-webkit-line-clamp:3;font-size:16px;max-width:52ch;}

/* Pagination ---------------------------------------------------------------- */
.eb-pagination{margin-top:56px;display:flex;justify-content:center;}
.eb-pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 12px;margin:0 4px;
  border:1px solid var(--line);border-radius:9px;background:var(--surface);
  font-size:14px;font-weight:500;color:var(--body);transition:all .2s ease;
}
.eb-pagination .page-numbers:hover{border-color:var(--accent);color:var(--accent);}
.eb-pagination .page-numbers.current{background:var(--accent);border-color:var(--accent);color:#fff;}
.eb-empty{text-align:center;color:var(--muted);padding:60px 0;}

/* Do not style anything in the site footer */
.eb-page footer a,
.eb-page .eb-ft a,
.eb-page .site-footer a,
.eb-page #colophon a {
  color: revert;
}

/* ==========================================================================
   SINGLE POST
   ========================================================================== */
/* Wide outer box positions the share rail + lets the hero break out;
   .eb-article-inner holds the readable text column.
   Top padding clears the fixed site header. */
.eb-page--single .eb-article{
  max-width:1040px;margin:0 auto;padding:150px 24px 88px;position:relative;
}
.eb-article-inner{max-width:820px;margin-left:auto;margin-right:auto;}
.eb-article-inner--body{position:relative;}

/* Force single posts to true full width + centre, regardless of Astra's
   sidebar column or flex container. !important is deliberate here: we are
   replacing Astra's single-post layout, and its container rules out-rank
   plain selectors. */
.single-post #secondary,
.single-post .widget-area{display:none !important;}
.single-post .site-content > .ast-container{
  max-width:100% !important;display:block !important;
  padding-left:0 !important;padding-right:0 !important;
}
.single-post #primary,
.single-post .content-area,
.single-post #main,
.single-post .site-main{
  width:100% !important;max-width:100% !important;
  flex:1 1 100% !important;margin:0 !important;display:block !important;
}
.eb-page--single{width:100%;}
.eb-page--single .eb-article{margin-left:auto;margin-right:auto;}

.eb-article-head{margin-bottom:36px;text-align:center;}
.eb-article-head .eb-eyebrow{margin-bottom:22px;}
.eb-article-title{
  font-size:clamp(28px,4vw,42px);font-weight:700;letter-spacing:-.025em;
  color:var(--ink);text-transform:none;margin:0 0 26px;
}
.eb-meta--article{justify-content:center;margin-bottom:0;font-size:12px;}

/* Hero image — wider than the text column */
.eb-article-hero{
  width:100%;margin:0 auto 48px;border-radius:16px;overflow:hidden;border:1px solid var(--line);
}
.eb-article-hero img{width:100%;}

/* Article body typography (renders the_content output) ---------------------- */
.eb-article-body{font-size:17.5px;color:var(--body);line-height:1.72;}
.eb-article-body > * + *{margin-top:1.35em;}
.eb-article-body h2{
  font-size:26px;font-weight:600;color:var(--ink);letter-spacing:-.015em;
  margin-top:2em;margin-bottom:.1em;padding-top:.4em;
}
.eb-article-body h3{font-size:20px;font-weight:600;color:var(--ink);margin-top:1.7em;}
.eb-article-body p{margin:0;}
.eb-article-body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
.eb-article-body a:hover{color:var(--accent-2);}
.eb-article-body ul,.eb-article-body ol{padding-left:1.3em;}
.eb-article-body li{margin-top:.55em;}
.eb-article-body li::marker{color:var(--accent);}
.eb-article-body img{border-radius:12px;margin:1.8em 0;}
.eb-article-body blockquote{
  margin:1.8em 0;padding:6px 0 6px 24px;border-left:3px solid var(--accent);
  font-size:19px;color:var(--ink);font-weight:500;
}
.eb-article-body strong{color:var(--ink);}

/* ---- Share rail (Medium-style, left of the article) ----------------------- */
.eb-share{position:absolute;left:-104px;top:0;height:100%;}
.eb-share-rail{
  position:sticky;top:130px;
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.eb-share-label{
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:4px;
}
.eb-share-btn{
  width:42px;height:42px;border-radius:50%;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);
  cursor:pointer;transition:all .2s ease;position:relative;
}
.eb-share-btn svg{width:18px;height:18px;fill:currentColor;}
.eb-share-btn--link svg{fill:none;stroke:currentColor;stroke-width:2;}
.eb-share-btn:hover{color:var(--accent);border-color:var(--accent);background:#ecf7fc;transform:translateY(-2px);}
.eb-share-btn.is-copied::after{
  content:"Copied";position:absolute;left:50%;top:-30px;transform:translateX(-50%);
  background:var(--ink);color:#fff;font-family:"IBM Plex Mono",monospace;
  font-size:10px;letter-spacing:.05em;padding:4px 8px;border-radius:5px;white-space:nowrap;
}

/* Conversion band ----------------------------------------------------------- */
.eb-cta{
  margin:64px 0 0;background:var(--cta);color:#dbe7ee;
  border-radius:18px;padding:44px 44px 40px;position:relative;overflow:hidden;
}
.eb-cta::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(0,144,196,.08) 0 1px,transparent 1px 26px);
  opacity:.5;
}
.eb-cta-inner{position:relative;z-index:1;}
.eb-cta-kicker{
  font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:#4fc0e6;margin:0 0 14px;font-weight:600;
}
.eb-cta-head{color:#fff;font-size:24px;font-weight:600;letter-spacing:-.015em;margin:0 0 12px;max-width:30ch;}
.eb-cta-text{font-size:15.5px;margin:0 0 26px;max-width:56ch;color:#b9cdd8;}
.eb-cta-btn{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--accent);color:#fff;font-weight:600;font-size:15px;
  padding:13px 26px;border-radius:10px;transition:background .2s ease,transform .2s ease;
}
.eb-cta-btn::after{content:"→";}
.eb-cta-btn:hover{background:#0aa0d8;transform:translateY(-1px);}
.eb-cta-links{
  margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;
  font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.03em;
}
.eb-cta-links > span{text-transform:uppercase;color:#7f9aa8;margin-right:4px;}
.eb-cta-links a{
  color:#dbe7ee;border:1px solid rgba(255,255,255,.18);border-radius:99px;
  padding:6px 14px;transition:all .2s ease;
}
.eb-cta-links a:hover{border-color:var(--accent);color:#fff;background:rgba(0,144,196,.18);}

/* Related ------------------------------------------------------------------- */
.eb-related{margin-top:64px;border-top:1px solid var(--line);padding-top:40px;}
.eb-related-title{
  font-size:15px;font-family:"IBM Plex Mono",monospace;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  margin:0 0 26px;font-weight:600;
}
.eb-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.eb-card--sm .eb-card-body{padding:18px 18px 20px;}
.eb-card--sm .eb-card-title{font-size:16px;margin:0;}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* Below 1240px the gutter is too tight for a sticky rail, so the share block
   moves to the end of the article, just above the CTA. Label sits on its own
   line with the icons centred beneath it. The order values do the moving,
   which is why the body wrapper becomes a flex column here. */
@media (max-width:1240px){
  .eb-article-inner--body{display:flex;flex-direction:column;}
  .eb-article-body{order:1;}
  .eb-share{order:2;}
  .eb-cta{order:3;}
  .eb-related{order:4;}

  .eb-share{
    position:static;left:auto;top:auto;height:auto;
    margin:52px 0 0;padding-top:36px;
    border-top:1px solid var(--line);
  }
  .eb-share-rail{
    position:static;top:auto;
    flex-direction:row;flex-wrap:wrap;justify-content:center;
    gap:12px;
  }
  .eb-share-label{
    flex:0 0 100%;
    text-align:center;
    margin:0 0 6px;
  }
  .eb-cta{margin-top:52px;}
}

@media (max-width:900px){
  .eb-grid{grid-template-columns:repeat(2,1fr);}
  .eb-masthead-row{grid-template-columns:1fr;gap:18px;align-items:start;}
  .eb-card--feature{flex-direction:column;}
  .eb-card--feature .eb-card-media{flex:auto;min-height:0;aspect-ratio:16/9;}
  .eb-card--feature .eb-card-body{padding:28px 26px 30px;}
  .eb-related-grid{grid-template-columns:1fr;}
}

@media (max-width:560px){
  .eb-wrap{padding:110px 18px 64px;}
  .eb-grid{grid-template-columns:1fr;}
  .eb-cta{padding:32px 26px;}
  .eb-page--single .eb-article{padding:110px 18px 64px;}

  /* Long category names should not be squeezed against the accent line */
  .eb-eyebrow{flex-direction:column;gap:10px;}
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */
.eb-page a:focus-visible,
.eb-pagination .page-numbers:focus-visible,
.eb-share-btn:focus-visible,
.eb-cta-btn:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;
}
@media (prefers-reduced-motion:reduce){
  .eb-page *,.eb-page *::before,.eb-page *::after{
    transition:none !important;animation:none !important;
  }
  .eb-card:hover{transform:none;}
  .eb-card:hover .eb-card-media img{transform:none;}
  .eb-share-btn:hover{transform:none;}
}