/*
 * 190-bs-blog-archive.css — BlackSpace Blog Index (/blog/)
 * Version 3 · March 2026 · Ground-up rebuild matching mockup v2.
 * Every property uses !important — Elementor Pro post CSS specificity.
 *
 * Body class: .page-id-16277
 * Page layout: Elementor Full Width, no sidebar.
 *
 * TEMPLATE STRUCTURE (build in Elementor in this order):
 *
 *   Section 1 — Hero
 *     CSS class: bs-blog-hero
 *     Inner: 2-col flex (heading col left, search col right)
 *       Col A: Text widget (kicker) + Heading H1 + Text widget (sub)
 *       Col B: Ajax Search Pro shortcode widget
 *
 *   Section 2 — Category filter bar
 *     CSS class: bs-blog-cat-bar
 *     Inner: HTML widget (nav links)
 *
 *   Section 3 — Featured post
 *     CSS class: bs-blog-featured
 *     Inner: Text widget (label row) + HTML widget (2-col featured card)
 *
 *   Section 4 — Posts grid
 *     CSS class: bs-blog-posts
 *     Inner: HTML widget (header row) + Elementor Posts widget (cards skin)
 *
 *   Section 5 — Email CTA
 *     CSS class: bs-blog-email-cta
 *     Inner: Heading + Text + Elementor Form
 *
 * Colors: #b0743e bronze | #1e1919 deep-brown | #ffffff white
 *   #c8925e bronze-300 | #efd9c0 bronze-100 | #f7eee5 bronze-050
 *   #f5f0eb warm-off-white | #8c5d31 bronze-700 | #474747 graphite
 *   #e6e6e6 silver-mist | #1a1a1a neutral-900 | #2e2e2e neutral-700
 */

/* ─── Strip WoodMart wrapper padding ─────────────────────── */
.page-id-16277 .wd-content-layout {
  padding: 0 !important;
}

/* ══════════════════════════════════════════════════════════
   SECTION 1 — HERO
   CSS class: bs-blog-hero
   ══════════════════════════════════════════════════════════ */

.bs-blog-hero {
  background-color: #1e1919 !important;
  background-image:
    radial-gradient(ellipse 70% 60% at 30% 50%, rgba(176,116,62,0.20) 0%, transparent 65%),
    repeating-linear-gradient(-45deg, transparent, transparent 44px,
      rgba(255,255,255,0.018) 44px, rgba(255,255,255,0.018) 45px) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Amber bottom line */
.bs-blog-hero::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, #b0743e, transparent) !important;
  opacity: 0.45 !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Section container settings in Elementor:
   Layout → Stretch: Yes | Content Width: Boxed 1200px
   Padding: 72px top, 64px bottom, 40px sides */
.bs-blog-hero .e-con-inner,
.bs-blog-hero > .e-con-inner {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 48px !important;
}

/* ── Kicker text ─────────────────────────────────────────── */
/* Assign CSS class: bs-blog-hero-kicker to the Text widget */
.bs-blog-hero-kicker .elementor-widget-container p,
.bs-blog-hero-kicker .elementor-widget-container div {
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #c8925e !important;
  margin-bottom: 14px !important;
  font-family: Verdana, Geneva, sans-serif !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
}

/* ── H1 Heading ──────────────────────────────────────────── */
/* Heading widget, HTML tag H1. No CSS class needed — target via hero context */
.bs-blog-hero .elementor-widget-heading .elementor-heading-title {
  font-size: 3rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
  font-family: Verdana, Geneva, sans-serif !important;
  margin: 0 0 12px !important;
}
/* <em> inside title → bronze-300 */
.bs-blog-hero .elementor-widget-heading .elementor-heading-title em {
  font-style: normal !important;
  color: #c8925e !important;
}

/* ── Sub-text ────────────────────────────────────────────── */
/* Assign CSS class: bs-blog-hero-sub to the Text widget */
.bs-blog-hero-sub .elementor-widget-container p,
.bs-blog-hero-sub .elementor-widget-container div {
  font-size: 0.875rem !important;
  color: rgba(255,255,255,0.55) !important;
  line-height: 1.6 !important;
  max-width: 440px !important;
  font-family: Verdana, Geneva, sans-serif !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Left column (heading col) ───────────────────────────── */
/* Assign CSS class: bs-blog-hero-text-col to the column/container */
.bs-blog-hero-text-col {
  flex: 1 !important;
  min-width: 0 !important;
}

/* ── Right column (search col) ───────────────────────────── */
/* Assign CSS class: bs-blog-hero-search-col to the column/container */
.bs-blog-hero-search-col {
  flex-shrink: 0 !important;
  width: 320px !important;
}

/* Ajax Search Pro input styling */
.bs-blog-hero-search-col .asp_search_input,
.bs-blog-hero-search-col input[type="search"],
.bs-blog-hero-search-col input[type="text"] {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 50px !important;
  color: #ffffff !important;
  font-family: Verdana, Geneva, sans-serif !important;
  font-size: 0.8125rem !important;
  padding: 12px 20px !important;
  width: 100% !important;
  outline: none !important;
  box-sizing: border-box !important;
}
.bs-blog-hero-search-col input::placeholder {
  color: rgba(255,255,255,0.35) !important;
}
.bs-blog-hero-search-col input:focus {
  border-color: rgba(176,116,62,0.55) !important;
  background: rgba(255,255,255,0.13) !important;
}
.bs-blog-hero-search-col .asp_search_submit,
.bs-blog-hero-search-col button[type="submit"] {
  background: #b0743e !important;
  border: none !important;
  border-radius: 0 50px 50px 0 !important;
  color: #ffffff !important;
  cursor: pointer !important;
  padding: 12px 18px !important;
  transition: background 0.15s !important;
}
.bs-blog-hero-search-col .asp_search_submit:hover {
  background: #8c5d31 !important;
}
/* ASP container */
.bs-blog-hero-search-col .asp_w_container {
  border-radius: 50px !important;
  overflow: hidden !important;
}

/* ══════════════════════════════════════════════════════════
   SECTION 2 — CATEGORY FILTER BAR
   CSS class: bs-blog-cat-bar
   Widget: HTML widget containing <nav> with <a> links
   ══════════════════════════════════════════════════════════ */

.bs-blog-cat-bar {
  background: #ffffff !important;
  border-bottom: 1px solid #e6e6e6 !important;
  padding: 0 !important;
}

/* Strip Elementor default padding from this section */
.bs-blog-cat-bar .e-con-inner,
.bs-blog-cat-bar > .e-con-inner {
  padding: 0 40px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

.bs-blog-cat-bar .elementor-widget-container {
  padding: 0 !important;
}

/* Nav row */
.bs-blog-cat-bar nav,
.bs-blog-cat-bar .bs-cat-nav {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
.bs-blog-cat-bar nav::-webkit-scrollbar,
.bs-blog-cat-bar .bs-cat-nav::-webkit-scrollbar {
  display: none !important;
}

/* Category pill links */
.bs-blog-cat-bar a {
  display: inline-flex !important;
  align-items: center !important;
  padding: 16px 20px !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #474747 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  border-bottom: 2px solid transparent !important;
  transition: color 0.15s, border-color 0.15s !important;
  font-family: Verdana, Geneva, sans-serif !important;
}
.bs-blog-cat-bar a:hover {
  color: #b0743e !important;
}
.bs-blog-cat-bar a.current-cat,
.bs-blog-cat-bar a.active,
.bs-blog-cat-bar a:first-child {
  color: #b0743e !important;
  border-bottom-color: #b0743e !important;
}

/* ══════════════════════════════════════════════════════════
   SECTION 3 — FEATURED POST
   CSS class: bs-blog-featured
   Widgets: Text widget (label) + HTML widget (card)
   ══════════════════════════════════════════════════════════ */

.bs-blog-featured {
  background: #ffffff !important;
}
.bs-blog-featured .e-con-inner,
.bs-blog-featured > .e-con-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 56px 40px !important;
  box-sizing: border-box !important;
}

/* ── Featured label row ──────────────────────────────────── */
/* Assign CSS class: bs-blog-featured-label to the Text widget */
.bs-blog-featured-label .elementor-widget-container {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 28px !important;
  padding: 0 !important;
}
.bs-blog-featured-label .elementor-widget-container p,
.bs-blog-featured-label .elementor-widget-container div {
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #b0743e !important;
  font-family: Verdana, Geneva, sans-serif !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
}
/* Trailing rule line via ::after on the widget container */
.bs-blog-featured-label .elementor-widget-container::after {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
  background: #e6e6e6 !important;
  display: block !important;
}

/* ── Featured card ───────────────────────────────────────── */
/*
 * IMPORTANT: The HTML widget must use <div class="bs-featured-card">
 * as the outer wrapper — NOT <a>. Browsers auto-close <a> tags that
 * contain block-level elements (div, h2, p), leaving the wrapper empty.
 * Use a <div> wrapper and put the link on the CTA button only.
 *
 * Correct HTML structure for the widget:
 *
 *   <div class="bs-featured-card">
 *     <div class="bs-featured-card__body">
 *       <span class="bs-featured-card__cat">Seller Spotlight</span>
 *       <h2 class="bs-featured-card__title">...</h2>
 *       <p class="bs-featured-card__excerpt">...</p>
 *       <div class="bs-featured-card__meta">...</div>
 *       <a href="[URL]" class="bs-featured-card__cta">Read the story →</a>
 *     </div>
 *     <div class="bs-featured-card__img">
 *       <img src="[IMG]" alt="..."/>
 *     </div>
 *   </div>
 *
 * If the widget was accidentally saved with <a> as the outer wrapper,
 * the CSS below also handles the broken DOM the browser produces.
 */

/* Card: the .elementor-widget-container IS the 2-col grid and carries
   all card styles (border, radius, shadow, hover). The inner
   .bs-featured-card <div> is a passthrough — it must NOT create its
   own grid, otherwise it would sit inside column-1 of the container
   grid and split its children a second time. */

.bs-blog-featured .elementor-widget-html .elementor-widget-container {
  display: grid !important;
  grid-template-columns: 1fr 42% !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  border: 1px solid #e6e6e6 !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}
.bs-blog-featured .elementor-widget-html .elementor-widget-container:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,0.10) !important;
  transform: translateY(-2px) !important;
}

/* .bs-featured-card <div>: passthrough — display:contents makes it
   invisible to the grid so its children (__body and __img) become
   direct grid items of .elementor-widget-container */
.bs-blog-featured .bs-featured-card {
  display: contents !important;
}

/* Hide the empty auto-closed <a> — only present if widget was saved
   with <a> outer wrapper before the HTML fix was applied */
.bs-blog-featured .elementor-widget-html .elementor-widget-container > a.bs-featured-card:first-child {
  display: none !important;
}

/* ── Content pane (left column) ──────────────────────────── */
.bs-blog-featured .bs-featured-card__body {
  padding: 48px 44px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  background: #ffffff !important;
  min-width: 0 !important;
}

/* The inner <a class="bs-featured-card"> that browsers create when
   nesting <a> inside a block element — strip card styles, show as content */
.bs-featured-card__body > a.bs-featured-card {
  display: flex !important;
  flex-direction: column !important;
  text-decoration: none !important;
  color: inherit !important;
  flex: 1 !important;
  order: -1 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  grid-template-columns: none !important;
  transform: none !important;
  overflow: visible !important;
}

/* Category badge pill */
.bs-blog-featured .bs-featured-card__cat {
  display: inline-block !important;
  font-size: 0.5625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #b0743e !important;
  background: #f7eee5 !important;
  border: 1px solid #efd9c0 !important;
  border-radius: 50px !important;
  padding: 4px 12px !important;
  margin-bottom: 20px !important;
  font-family: Verdana, Geneva, sans-serif !important;
  align-self: flex-start !important;
}

/* Post title */
.bs-blog-featured .bs-featured-card__title {
  font-size: clamp(1.375rem, 2.4vw, 2rem) !important;
  font-weight: 700 !important;
  color: #000000 !important;
  line-height: 1.2 !important;
  margin-bottom: 16px !important;
  font-family: Verdana, Geneva, sans-serif !important;
}

/* Excerpt */
.bs-blog-featured .bs-featured-card__excerpt {
  font-size: 0.875rem !important;
  color: #474747 !important;
  line-height: 1.75 !important;
  margin-bottom: 28px !important;
  font-family: Verdana, Geneva, sans-serif !important;
}

/* Author meta row */
.bs-blog-featured .bs-featured-card__meta {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 32px !important;
}
.bs-blog-featured .bs-featured-card__avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: #efd9c0 !important;
  flex-shrink: 0 !important;
}
.bs-blog-featured .bs-featured-card__avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block !important;
}
.bs-blog-featured .bs-featured-card__meta-text {
  font-size: 0.75rem !important;
  color: #474747 !important;
  font-family: Verdana, Geneva, sans-serif !important;
}
.bs-blog-featured .bs-featured-card__meta-name {
  font-weight: 700 !important;
  color: #1a1a1a !important;
}
.bs-blog-featured .bs-featured-card__meta-sep {
  color: #c8925e !important;
  margin: 0 4px !important;
}

/* CTA button */
.bs-blog-featured .bs-featured-card__cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #1a1a1a !important;
  color: #ffffff !important;
  border: 2px solid #1a1a1a !important;
  border-radius: 50px !important;
  padding: 11px 28px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-family: Verdana, Geneva, sans-serif !important;
  transition: all 0.18s !important;
  text-decoration: none !important;
  align-self: flex-start !important;
}
.bs-blog-featured .bs-featured-card__cta:hover {
  background: #2e2e2e !important;
  border-color: #2e2e2e !important;
  color: #ffffff !important;
}

/* ── Image pane (right column) ───────────────────────────── */
.bs-blog-featured .bs-featured-card__img {
  background: #5a3b1e !important;
  overflow: hidden !important;
  min-height: 380px !important;
  /* Ensure the image div never inherits natural image dimensions */
  width: 100% !important;
  height: 100% !important;
}
.bs-blog-featured .bs-featured-card__img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  /* Override any natural image max-width constraints */
  max-width: none !important;
  max-height: none !important;
  transition: transform 0.4s ease !important;
}
.bs-blog-featured .bs-featured-card:hover .bs-featured-card__img img,
.bs-blog-featured .elementor-widget-html .elementor-widget-container:hover .bs-featured-card__img img {
  transform: scale(1.03) !important;
}

/* ══════════════════════════════════════════════════════════
   SECTION 4 — POSTS GRID
   CSS class: bs-blog-posts
   Widgets: HTML widget (header row) + Elementor Posts widget
   ══════════════════════════════════════════════════════════ */

.bs-blog-posts {
  background: #ffffff !important;
}
.bs-blog-posts .e-con-inner,
.bs-blog-posts > .e-con-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 56px 40px 72px !important;
  box-sizing: border-box !important;
}

/* ── Posts section header row ────────────────────────────── */
/* Assign CSS class: bs-blog-posts-header to the HTML widget */
.bs-blog-posts-header .elementor-widget-container {
  padding: 0 !important;
  margin-bottom: 0 !important;
}
/* The HTML widget wraps content in a <div> — that div is the actual flex row */
.bs-blog-posts-header .elementor-widget-container > div {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  margin-bottom: 36px !important;
  width: 100% !important;
}
.bs-blog-posts-header .bs-posts-heading {
  font-size: 1.375rem !important;
  font-weight: 700 !important;
  color: #000000 !important;
  font-family: Verdana, Geneva, sans-serif !important;
}
.bs-blog-posts-header .bs-posts-view-all {
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 20px !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #1a1a1a !important;
  border: 2px solid #e6e6e6 !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  transition: all 0.15s !important;
  font-family: Verdana, Geneva, sans-serif !important;
}
.bs-blog-posts-header .bs-posts-view-all:hover {
  border-color: #b0743e !important;
  color: #b0743e !important;
}

/* ── Elementor Posts widget — cards skin ─────────────────── */
/* Assign CSS class: bs-blog-post-cards to the Posts widget */

/* Grid gap */
.bs-blog-post-cards .elementor-posts-container {
  gap: 24px !important;
}

/* Card wrapper */
.bs-blog-post-cards .elementor-post__card {
  background: #ffffff !important;
  border: 1px solid #e6e6e6 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}
.bs-blog-post-cards .elementor-post__card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.08) !important;
  transform: translateY(-2px) !important;
}

/* Thumbnail — 16:10 */
.bs-blog-post-cards .elementor-post__thumbnail__link {
  display: block !important;
  overflow: hidden !important;
  aspect-ratio: 16 / 10 !important;
  background: #f5f0eb !important;
  flex-shrink: 0 !important;
}
.bs-blog-post-cards .elementor-post__thumbnail {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
}
.bs-blog-post-cards .elementor-post__thumbnail img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: transform 0.3s ease !important;
  display: block !important;
}
.bs-blog-post-cards .elementor-post__card:hover .elementor-post__thumbnail img {
  transform: scale(1.04) !important;
}

/* Category badge — matches homepage badge exactly.
   Homepage CSS: top:0; right:0; margin:5px gives 5px inset from top-right corner.
   bg: rgba(46,46,46,0.69) = #2E2E2EB0, font-size:0.7rem, border-radius:999px */
.bs-blog-post-cards .elementor-post__badge {
  background-color: rgba(46, 46, 46, 0.69) !important;
  color: #ffffff !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  padding: 4px 13px !important;
  font-family: Verdana, sans-serif !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  margin: 5px !important;
  width: auto !important;
  display: block !important;
}

/* Avatar: Elementor's widget-posts.min.css uses a thumbnail-overlay system
   (position:relative top:-25px, img width:60px transform:translateY(-50%)).
   We completely reset that and use flex order to place avatar before meta-data,
   creating a footer row: [avatar circle][author · date] */
.bs-blog-post-cards .elementor-post__avatar {
  /* Reset Elementor's overlay system */
  height: 28px !important;
  width: 28px !important;
  padding: 0 !important;
  position: static !important;
  top: auto !important;
  /* Flex order: after text (order:3), before meta (order:5) */
  order: 4 !important;
  display: block !important;
  /* Align with meta row: left indent + vertical margins */
  margin: 14px 0 -42px 22px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: #efd9c0 !important;
  flex-shrink: 0 !important;
  z-index: 2 !important;
}

/* Card text body */
.bs-blog-post-cards .elementor-post__text {
  padding: 22px 22px 0 !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  order: 3 !important;
}

/* Bronze category label above title (Elementor renders this when
   "Show Categories" is enabled in the Posts widget) */
.bs-blog-post-cards .elementor-post__tags,
.bs-blog-post-cards .elementor-post__badge-inner {
  font-size: 0.5625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #b0743e !important;
  margin-bottom: 8px !important;
  display: block !important;
  font-family: Verdana, Geneva, sans-serif !important;
}

/* Post title */
.bs-blog-post-cards .elementor-post__title {
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  color: #000000 !important;
  line-height: 1.35 !important;
  margin-bottom: 10px !important;
  font-family: Verdana, Geneva, sans-serif !important;
}
.bs-blog-post-cards .elementor-post__title a {
  color: #000000 !important;
  text-decoration: none !important;
  transition: color 0.15s !important;
}
.bs-blog-post-cards .elementor-post__title a:hover {
  color: #b0743e !important;
}

/* Excerpt */
.bs-blog-post-cards .elementor-post__excerpt {
  font-size: 0.8125rem !important;
  color: #474747 !important;
  line-height: 1.7 !important;
  flex: 1 !important;
  margin-bottom: 18px !important;
  font-family: Verdana, Geneva, sans-serif !important;
}
.bs-blog-post-cards .elementor-post__excerpt p {
  margin: 0 !important;
}

/* Meta footer row: sits in flex order 5, indented to clear avatar circle */
.bs-blog-post-cards .elementor-post__meta-data {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px 22px 20px 58px !important;
  border-top: 1px solid #e6e6e6 !important;
  margin-top: 0 !important;
  font-size: 0.6875rem !important;
  color: #474747 !important;
  font-family: Verdana, Geneva, sans-serif !important;
  order: 5 !important;
}

/* Avatar img: reset Elementor's transform and width overrides */
.bs-blog-post-cards .elementor-post__avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block !important;
  transform: none !important;
  border-radius: 50% !important;
  pointer-events: all !important;
}

.bs-blog-post-cards .elementor-post-author {
  font-weight: 700 !important;
  color: #2e2e2e !important;
  font-size: 0.6875rem !important;
}
.bs-blog-post-cards .elementor-post-date {
  font-size: 0.6875rem !important;
  color: #474747 !important;
}
/* Bronze dot separator */
.bs-blog-post-cards .elementor-post-author::after {
  content: '' !important;
  display: inline-block !important;
  width: 3px !important;
  height: 3px !important;
  border-radius: 50% !important;
  background: #c8925e !important;
  margin: 0 6px !important;
  vertical-align: middle !important;
}

/* ── Load more card ──────────────────────────────────────────
   HTML widget placed after the Posts widget inside .bs-blog-posts.
   Renders as a natural 7th card in the 3-col grid.

   HTML widget content:
   <div class="bs-load-more-card">
     <div class="bs-load-more-card__inner">
       <div class="bs-load-more-card__label">More articles</div>
       <a href="/blog/" class="bs-load-more-card__btn">Load more</a>
     </div>
   </div>
   ─────────────────────────────────────────────────────────── */

/* Load more HTML widget: the inline <script> inside it moves .bs-load-more-card
   into the posts grid as a proper <li> grid item. Hide the original widget. */
.bs-blog-posts .e-con-inner > .elementor-widget-html:last-of-type {
  display: none !important;
}
/* Grid item wrapper added by the script */
.bs-blog-post-cards .elementor-posts-container .bs-load-more-item {
  list-style: none !important;
  align-self: stretch !important;
}

.bs-load-more-card {
  height: 100% !important;
  min-height: 280px !important;
  background: #f7eee5 !important;
  border: 2px dashed #efd9c0 !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
.bs-load-more-card__inner {
  padding: 32px !important;
}
.bs-load-more-card__label {
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #b0743e !important;
  margin-bottom: 12px !important;
  font-family: Verdana, Geneva, sans-serif !important;
}
.bs-load-more-card__btn {
  display: inline-flex !important;
  align-items: center !important;
  background: #b0743e !important;
  color: #ffffff !important;
  border: 2px solid #b0743e !important;
  border-radius: 50px !important;
  padding: 10px 24px !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-family: Verdana, Geneva, sans-serif !important;
  text-decoration: none !important;
  transition: all 0.18s !important;
}
.bs-load-more-card__btn:hover {
  background: #8c5d31 !important;
  border-color: #8c5d31 !important;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — 960px
   ══════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .bs-blog-hero .e-con-inner,
  .bs-blog-hero > .e-con-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 28px !important;
  }
  .bs-blog-hero-search-col {
    display: flex !important;
    width: 100% !important;
    flex-shrink: 1 !important;
    min-height: unset !important;
    height: auto !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* Fix submit button height/width mismatch on mobile */
  .bs-blog-algolia-search .ais-SearchBox-submit {
    width: 36px !important;
    height: 36px !important;
    min-height: unset !important;
    max-height: 36px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    margin: 0 !important;
    top: 50% !important;
    right: 6px !important;
    transform: translateY(-50%) !important;
    position: absolute !important;
  }
  /* Ensure form doesn't have extra height */
  .bs-blog-algolia-search .ais-SearchBox-form {
    height: auto !important;
    min-height: unset !important;
  }
  .bs-blog-hero .elementor-widget-heading .elementor-heading-title {
    font-size: 2.25rem !important;
  }
  /* Card stacks: content top, image bottom — collapse the container grid */
  .bs-blog-featured .elementor-widget-html .elementor-widget-container {
    grid-template-columns: 1fr !important;
  }
  /* Body padding — reduce from 48px/44px now that it's full-width stacked */
  .bs-blog-featured .bs-featured-card__body {
    padding: 36px 36px !important;
  }
  /* Image: contain so full portrait shows without cropping */
  .bs-blog-featured .bs-featured-card__img {
    height: auto !important;
    min-height: unset !important;
    width: 100% !important;
  }
  .bs-blog-featured .bs-featured-card__img img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
  .bs-blog-post-cards .elementor-posts-container {
    gap: 18px !important;
  }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — 768px
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .bs-blog-hero .elementor-widget-heading .elementor-heading-title {
    font-size: 1.875rem !important;
  }
  .bs-blog-featured .e-con-inner,
  .bs-blog-featured > .e-con-inner,
  .bs-blog-posts .e-con-inner,
  .bs-blog-posts > .e-con-inner {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .bs-blog-cat-bar .e-con-inner,
  .bs-blog-cat-bar > .e-con-inner {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .bs-blog-featured .bs-featured-card__body {
    padding: 32px 28px !important;
  }

}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — 640px
   ══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .bs-blog-hero .e-con-inner,
  .bs-blog-hero > .e-con-inner {
    padding: 52px 24px 48px !important;
  }
  .bs-blog-hero .elementor-widget-heading .elementor-heading-title {
    font-size: 1.5rem !important;
  }
  .bs-blog-cat-bar .e-con-inner,
  .bs-blog-cat-bar > .e-con-inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .bs-blog-featured .e-con-inner,
  .bs-blog-featured > .e-con-inner {
    padding: 40px 24px !important;
  }
  .bs-blog-featured .bs-featured-card__body {
    padding: 28px 24px !important;
  }

  .bs-blog-posts .e-con-inner,
  .bs-blog-posts > .e-con-inner {
    padding: 40px 24px 56px !important;
  }
  .bs-blog-post-cards .elementor-post__thumbnail__link {
    aspect-ratio: 16 / 9 !important;
  }

  /* Fix 1: header row — stack heading above button so button text doesn't wrap */
  .bs-blog-posts-header .elementor-widget-container > div {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .bs-posts-view-all {
    white-space: nowrap !important;
    align-self: flex-start !important;
  }

  /* Fix 2: meta footer — hide avatar (too small on mobile), remove indent,
     force single line with nowrap so author · dot · date all stay on one row */
  .bs-blog-post-cards .elementor-post__avatar {
    display: none !important;
  }
  .bs-blog-post-cards .elementor-post__meta-data {
    padding-left: 22px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  .bs-blog-post-cards .elementor-post-author {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  .bs-blog-post-cards .elementor-post-date {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — 480px
   ══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .bs-blog-hero .elementor-widget-heading .elementor-heading-title {
    font-size: 1.25rem !important;
  }
  .bs-blog-hero .e-con-inner,
  .bs-blog-hero > .e-con-inner,
  .bs-blog-featured .e-con-inner,
  .bs-blog-featured > .e-con-inner,
  .bs-blog-posts .e-con-inner,
  .bs-blog-posts > .e-con-inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .bs-blog-cat-bar .e-con-inner,
  .bs-blog-cat-bar > .e-con-inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .bs-blog-featured .bs-featured-card__body {
    padding: 24px 20px !important;
  }

}