/* ==========================================================================
   BLOG-SINGLE.CSS — Individual blog post page only (single.php).
   Loaded on top of base.css. Covers the post header, optional cover image,
   and a readable typeset for the post body (.blog-content, filled by
   the_content() — headings, paragraphs, lists, quotes, images, code).

   Posts on this site are authored in Elementor, so .blog-content actually
   receives Elementor's own widget markup (.elementor-heading-title,
   .elementor-text-editor, etc.), not plain WordPress blocks. The
   "ELEMENTOR CONTENT OVERRIDES" section re-skins that markup to match the
   plain h2/p/etc. rules above it. Elementor's Global Colors/Fonts apply
   fairly specific/inline styling, so those overrides use !important —
   scoped strictly to .blog-content, so nothing outside a single post (the
   Elementor editor UI, other Elementor-built pages) is affected.
   ========================================================================== */

.blog-single{
  background:var(--light-bg); color:var(--black);
}

/* Title/meta on the left, cover image on the right, side by side — instead
   of the image stacked full-width below the title. Falls back to a single
   centered column automatically when a post has no featured image
   (.no-cover), and drops to stacked (image below title) on mobile in the
   breakpoint at the bottom of this file. */
.blog-single-top{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:40px;
  padding:70px clamp(20px,5vw,64px) 0;
}
.blog-single-top.no-cover{
  grid-template-columns:1fr;
}
.blog-single-head{
  padding:0 0 50px;
  max-width:700px;
}
.blog-single-top.no-cover .blog-single-head{
  max-width:960px;
}
.blog-single-head .eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--orange); margin-bottom:16px;
}
.blog-single-head h1{
  font-family:'Fraunces',serif; font-weight:500;
  font-size:clamp(28px,4vw,46px); line-height:1.14;
}
.blog-single-meta{
  font-family:'IBM Plex Mono',monospace; font-size:13px; color:#6b6656;
  margin-top:18px;
}
.blog-single-sep{margin:0 6px;}

.blog-single-cover{
  width:100%; aspect-ratio:4/3; max-height:460px;
  overflow:hidden; border-radius:4px;
  align-self:center;
}
.blog-single-cover img{width:100%; height:100%; object-fit:cover; display:block;}

.blog-content{
  max-width:970px; margin:0 auto;
  padding:60px clamp(20px,5vw,64px) 40px;
  font-family:'Inter',sans-serif; font-size:17px; line-height:1.8;
  color:#2b2820;
}
.blog-content > *:first-child{margin-top:0;}
.blog-content p{margin:0 0 24px;}
.blog-content h2{
  font-family:'Fraunces',serif; font-weight:500; font-size:clamp(24px,3vw,34px);
  line-height:1.25; margin:48px 0 20px;
}
.blog-content h3{
  font-family:'Fraunces',serif; font-weight:500; font-size:clamp(20px,2.4vw,26px);
  margin:36px 0 16px;
}
.blog-content ul,
.blog-content ol{margin:0 0 24px 22px;}
.blog-content li{margin-bottom:10px; line-height:1.7;}
.blog-content a{color:var(--orange); text-decoration:underline; text-underline-offset:3px;}
.blog-content a:hover{color:#c8461a;}
.blog-content blockquote{
  border-left:3px solid var(--orange);
  padding:4px 0 4px 24px; margin:32px 0;
  font-family:'Fraunces',serif; font-style:italic; font-size:19px; color:#4a453d;
}
.blog-content img{max-width:100%; height:auto; border-radius:3px; margin:32px 0; display:block;}
.blog-content figcaption{
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:#8a857c;
  margin-top:-20px; margin-bottom:32px;
}
.blog-content code{
  background:rgba(0,0,0,0.06); padding:2px 6px; border-radius:3px; font-size:0.9em;
}
.blog-content pre{
  background:#1b1a18; color:var(--cream);
  padding:20px; border-radius:4px; overflow-x:auto; margin:0 0 24px;
}
.blog-content pre code{background:none; padding:0; color:inherit;}

/* ---------- ELEMENTOR CONTENT OVERRIDES --------------------------------
   Posts are authored in Elementor, so the_content() above actually renders
   Elementor's widget markup, not plain WordPress blocks. Elementor applies
   its own Global Colors/Fonts with fairly high specificity, so these use
   !important — scoped to .blog-content only, so nothing outside a single
   post (Elementor's editor UI, other Elementor pages) is touched.
   ------------------------------------------------------------------------ */

/* Strip Elementor's own section/column chrome — .blog-content already
   controls width and side padding, so let widgets flow inside it. */
.blog-content .elementor,
.blog-content .elementor-section,
.blog-content .elementor-widget-wrap{
  max-width:none !important; width:100% !important;
  padding:0 !important; margin:0 !important;
  background:transparent !important;
}
.blog-content .elementor-container,
.blog-content .elementor-row{
  max-width:none !important; width:100% !important;
  flex-wrap:wrap !important;
  padding:0 !important; margin:0 !important;
  background:transparent !important;
}
.blog-content .elementor-column{
  max-width:none !important; width:100% !important;
  flex-basis:100% !important; flex-grow:1 !important; flex-shrink:1 !important;
  padding:0 !important; margin:0 !important;
  background:transparent !important;
}
.blog-content .elementor-section{margin-bottom:8px !important;}
.blog-content .elementor-widget{margin-bottom:0 !important;}
.blog-content .elementor-column-gap-default > .elementor-column > .elementor-element-populated{
  padding:0 !important;
}

/* Headings — Elementor's Heading widget renders <h1–h6 class="elementor-heading-title">,
   so match by tag to keep the same size scale as the plain h2/h3 rules above. */
.blog-content .elementor-heading-title{
  font-family:'Fraunces',serif !important; font-weight:500 !important;
  color:var(--black) !important;
}
.blog-content h2.elementor-heading-title{
  font-size:clamp(24px,3vw,34px) !important; line-height:1.25 !important;
  margin:48px 0 20px !important;
}
.blog-content h3.elementor-heading-title{
  font-size:clamp(20px,2.4vw,26px) !important; line-height:1.3 !important;
  margin:36px 0 16px !important;
}
.blog-content h4.elementor-heading-title,
.blog-content h5.elementor-heading-title,
.blog-content h6.elementor-heading-title{
  font-family:'IBM Plex Mono',monospace !important; font-weight:600 !important;
  font-size:13px !important; letter-spacing:0.08em !important; text-transform:uppercase !important;
  color:var(--orange) !important; margin:28px 0 12px !important;
}

/* Body text — Elementor's Text Editor widget wraps content in
   .elementor-text-editor, with paragraphs inside. */
.blog-content .elementor-text-editor,
.blog-content .elementor-text-editor p{
  font-family:'Inter',sans-serif !important; font-size:17px !important; line-height:1.8 !important;
  color:#2b2820 !important; margin:0 0 24px !important;
}
.blog-content .elementor-text-editor p:last-child{margin-bottom:0 !important;}
.blog-content .elementor-text-editor ul,
.blog-content .elementor-text-editor ol{margin:0 0 24px 22px !important;}
.blog-content .elementor-text-editor li{margin-bottom:10px !important; line-height:1.7 !important;}
.blog-content .elementor-text-editor a{
  color:var(--orange) !important; text-decoration:underline !important; text-underline-offset:3px !important;
}
.blog-content .elementor-text-editor a:hover{color:#c8461a !important;}
.blog-content .elementor-text-editor blockquote{
  border-left:3px solid var(--orange) !important;
  padding:4px 0 4px 24px !important; margin:32px 0 !important;
  font-family:'Fraunces',serif !important; font-style:italic !important;
  font-size:19px !important; color:#4a453d !important;
}

/* Images — Image widget, plus any inline <img> Elementor renders elsewhere
   in the content. */
.blog-content .elementor-widget-image img,
.blog-content .elementor-image img{
  max-width:100% !important; height:auto !important; border-radius:3px !important;
  margin:32px 0 !important; display:block !important;
}

/* Buttons — in case a post uses Elementor's Button widget inline in the
   copy, keep it on-brand instead of Elementor's default blue pill. */
.blog-content .elementor-button{
  background:var(--black) !important; color:var(--cream) !important;
  border-radius:3px !important; font-family:'IBM Plex Mono',monospace !important;
  font-size:13px !important; padding:12px 22px !important; border:none !important;
  transition:background .3s ease !important;
}
.blog-content .elementor-button:hover{background:var(--orange) !important;}

.blog-single-footer{
  max-width:900px; margin:0 auto;
  padding:20px clamp(20px,5vw,64px) 100px;
}
.blog-back-link{
  font-family:'IBM Plex Mono',monospace; font-size:13px;
  border-bottom:1px solid var(--black); padding-bottom:3px;
  transition:color .3s cubic-bezier(.22,1,.36,1), border-color .3s cubic-bezier(.22,1,.36,1);
}
.blog-back-link:hover{color:var(--orange); border-color:var(--orange);}

/* ---------- More from the blog: 3-card teaser + view-all button ----------
   Compact, self-contained here (rather than loading blog.css's row-layout
   card) so this page keeps its own small CSS payload — image on top,
   title below, same as the original blog listing card. */
.blog-more{
  background:var(--black);
  padding:60px clamp(20px,5vw,64px) 110px;
}
/* .section-label (base.css) has its own side padding for sections that have
   none of their own — .blog-more already pads itself, so reset it here to
   avoid the label sitting further in than the cards below it. */
.blog-more .section-label{
  padding:0; margin-bottom:22px;
}
.blog-more-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
}
.blog-more .blog-card{
  display:flex; flex-direction:column;
  background:#1b1a18;
  border:1px solid rgba(238,234,225,0.14);
  border-radius:4px;
  overflow:hidden;
  transition:transform .35s cubic-bezier(.22,1,.36,1), border-color .35s cubic-bezier(.22,1,.36,1);
}
.blog-more .blog-card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,90,31,0.5);
}
.blog-more .blog-card-media{
  aspect-ratio:16/10;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.blog-more .blog-card-media img{width:100%; height:100%; object-fit:cover; display:block;}
.blog-more .blog-card-fallback{
  font-family:'Fraunces',serif; font-size:36px; font-weight:500;
  color:rgba(238,234,225,0.25);
}
.blog-more .blog-card-body{
  padding:18px 20px 20px;
  display:flex; flex-direction:column; gap:8px;
}
.blog-more .blog-card-body h3{
  font-family:'Fraunces',serif; font-weight:500; font-size:17px; line-height:1.3;
  color:var(--cream);
}
.blog-more .blog-card-date{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:#8a857c;
}
.blog-more-view-all{
  margin-top:36px; text-align:center;
}
.blog-more-view-all a{
  display:inline-block;
  font-family:'Familjen Grotesk',sans-serif; font-weight:500; font-size:15px;
  color:var(--cream);
  border-bottom:1px solid var(--cream-dim); padding-bottom:3px;
  transition:color .35s cubic-bezier(.22,1,.36,1), border-color .35s cubic-bezier(.22,1,.36,1);
}
.blog-more-view-all a:hover{color:var(--orange); border-color:var(--orange);}

@media (max-width:900px){
  .blog-more-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:900px){
  .blog-single-top{grid-template-columns:1fr; gap:26px; padding:100px 20px 0;}
  .blog-single-head{max-width:none; padding:0 0 26px;}
  .blog-single-top.no-cover .blog-single-head{padding:0 0 26px;}
  .blog-single-cover{aspect-ratio:16/10; max-height:none;}
}
@media (max-width:760px){
  .blog-single-top{padding:100px 20px 0;}
  .blog-content{padding:40px 20px 20px; font-size:16px;}
  .blog-single-footer{padding:10px 20px 70px;}
  .blog-more{padding:40px 20px 70px;}
  .blog-more-grid{grid-template-columns:1fr; gap:18px;}
}