/* ebc-focus-blog.v3.lean.css
   Goal: theme-agnostic "single blog" styling that NEVER goes full-bleed,
   but also adapts to whatever container width the host theme uses.

   Driver JS sets per-article:
   --ebcfb-maxw: <px>   (detected)
   --ebcfb-top-offset: <px> (fixed/sticky header height)
*/

.ebc-focus-blog{
  --ebcfb-maxw: 960px;                /* default fallback */
  --ebcfb-gutter: clamp(14px, 3.2vw, 24px);
  --ebcfb-padY: clamp(18px, 4.8vw, 56px);
  --ebcfb-prose: 72ch;

  /* token bridge (Forms/IFC if present) */
  --ebcfb-text: var(--ws-text-primary, var(--ifc-content, inherit));
  --ebcfb-muted: var(--ws-text-muted, rgba(0,0,0,.68));
  --ebcfb-border: var(--ws-border, rgba(0,0,0,.12));
  --ebcfb-link: var(--ws-accent, var(--ifc-accent, inherit));
  --ebcfb-radius: var(--ifc-radius, 16px);
  --ebcfb-shadow: 0 10px 30px rgba(0,0,0,.08);
  --ebcfb-hero-h: clamp(240px, 40vw, 560px);

  display:block;
  width:100%;
  color:var(--ebcfb-text);
}

.ebc-focus-blog, .ebc-focus-blog *{ box-sizing:border-box; }

.ebcfb-page-title-host.page-title{
  position:relative;
  padding:100px 0;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  overflow:hidden;
}
.ebcfb-page-title-host.page-title::before{
  content:"";
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:.5;
  background:#000;
}
.ebcfb-page-title-host.page-title > .container{
  position:relative;
  z-index:1;
}
.ebcfb-page-title-host.page-title .block h1{
  color:#fff !important;
  font-weight:800;
  font-size:clamp(42px, 5.4vw, 64px);
  line-height:1.12;
  background-image:none !important;
  -webkit-text-fill-color:currentColor !important;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Container: new markup (.ebcfb-container) + legacy alias (.ebcfb-shell) */
.ebc-focus-blog :is(.ebcfb-container,.ebcfb-shell){
  width:100%;
  max-width: min(var(--ebcfb-maxw), calc(100vw - (var(--ebcfb-gutter) * 2)));
  margin:0 auto;
  padding: calc(var(--ebcfb-padY) + var(--ebcfb-top-offset, 0px)) var(--ebcfb-gutter) var(--ebcfb-padY);
}

/* Header */
.ebc-focus-blog :is(.ebcfb-header,.ebcfb-head){ margin: 0 0 18px; }

/* Title: neutralize theme gradient/clip tricks */
.ebc-focus-blog .ebcfb-title{
  font-weight: 860;
  font-size: clamp(30px, 5.5vw, 52px);
  line-height: 1.08;
  margin: 0 0 12px;

  color: var(--ebcfb-text) !important;
  background-image: none !important;
  -webkit-text-fill-color: currentColor !important;

  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Meta */
.ebc-focus-blog :is(.ebcfb-date,.ebcfb-meta){
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  margin:10px 0 0;
  font-size:14px;
  line-height:1.4;
  color:var(--ebcfb-muted);
}
.ebc-focus-blog :is(.ebcfb-date,.ebcfb-meta) b{
  color:var(--ebcfb-text);
  font-weight:650;
}

/* Hero */
.ebc-focus-blog .ebcfb-hero{ margin: 18px 0 26px; }
.ebc-focus-blog .ebcfb-hero-frame{
  width:100%;
  height:var(--ebcfb-hero-h);
  border-radius:var(--ebcfb-radius);
  overflow:hidden;
  border:1px solid var(--ebcfb-border);
  box-shadow:var(--ebcfb-shadow);
  background: rgba(0,0,0,.03);
}
.ebc-focus-blog .ebcfb-hero-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Prose: new (.ebcfb-prose) + legacy (.ebcfb-body) */
.ebc-focus-blog :is(.ebcfb-prose,.ebcfb-body){
  max-width: min(var(--ebcfb-prose), 100%);
  font-size:18px;
  line-height:1.75;
}
.ebc-focus-blog :is(.ebcfb-prose,.ebcfb-body) :where(p){ margin:0 0 1.05em; }

.ebc-focus-blog :is(.ebcfb-prose,.ebcfb-body) :where(a){
  color:var(--ebcfb-link);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.ebc-focus-blog :is(.ebcfb-prose,.ebcfb-body) :where(h2,h3,h4){
  font-weight:820;
  line-height:1.2;
  margin:1.6em 0 .6em;
  scroll-margin-top: calc(var(--ebcfb-top-offset, 0px) + 16px);
}
.ebc-focus-blog :is(.ebcfb-prose,.ebcfb-body) :where(h2){ font-size:30px; }
.ebc-focus-blog :is(.ebcfb-prose,.ebcfb-body) :where(h3){ font-size:24px; }
.ebc-focus-blog :is(.ebcfb-prose,.ebcfb-body) :where(h4){ font-size:20px; }

.ebc-focus-blog :is(.ebcfb-prose,.ebcfb-body) :where(ul,ol){ margin:0 0 1.1em 1.25em; }
.ebc-focus-blog :is(.ebcfb-prose,.ebcfb-body) :where(li){ margin:.35em 0; }

.ebc-focus-blog :is(.ebcfb-prose,.ebcfb-body) :where(blockquote){
  margin:1.2em 0;
  padding:.85em 1em;
  border-left:4px solid var(--ebcfb-border);
  border-radius:12px;
  background: rgba(0,0,0,.03);
}

.ebc-focus-blog :is(.ebcfb-prose,.ebcfb-body) :where(code){
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:.95em;
  padding:.15em .35em;
  border:1px solid var(--ebcfb-border);
  border-radius:10px;
  background: rgba(0,0,0,.04);
}

.ebc-focus-blog :is(.ebcfb-prose,.ebcfb-body) :where(pre){
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:14px;
  line-height:1.6;
  padding:14px 16px;
  border:1px solid var(--ebcfb-border);
  border-radius:var(--ebcfb-radius);
  background: rgba(0,0,0,.04);
  overflow:auto;
  margin:1.2em 0;
}
.ebc-focus-blog :is(.ebcfb-prose,.ebcfb-body) :where(pre code){
  padding:0; border:0; background:transparent;
}

@media (max-width:420px){
  .ebc-focus-blog :is(.ebcfb-prose,.ebcfb-body){ font-size:16px; }
  .ebc-focus-blog .ebcfb-hero-frame{ height: clamp(190px,55vw,320px); }
}