/* Add wrapper z-index control */
.navbar-wrapper { position: relative; z-index: 0; }

.navbar-desktop a,
.navbar-mobile a,
.navbar-mobile .menu-text,
.navbar-mobile .submenu a {
  font-family: 'Rubik', sans-serif;
  font-style: normal;
  font-weight: 400;
}

/* Hover */
.navbar-desktop a:hover,
.mobile-menu .menu-item a:hover,
.mobile-menu .menu-item a p.menu-text:hover {
  color: #fe6000; transition: color .3s ease;
}

/* Desktop base */
.navbar-desktop { display:block; position:relative; z-index:1; }
.navbar-mobile  { display:none;  position:relative; z-index:2; }

.navbar-desktop ul { display:flex; gap:2rem; list-style:none; margin:0; padding:0; align-items:center; }
.navbar-desktop li { white-space:nowrap; }
.navbar-desktop a  { text-decoration:none; color:#001a33; }

/* Header */
.navbar-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:1rem 1.25rem; width:100%; box-sizing:border-box;
  position:fixed; top:0; left:0; right:0;
  z-index:2147483647; width:100vw; max-width:100vw; overflow:visible;
}
.logo{ display:flex; align-items:center; flex-shrink:1; padding-left:.5rem; position:relative; z-index:1; }
.menu-toggle{ width:32px; height:32px; display:flex; flex-direction:column; justify-content:space-between; padding:6px; cursor:pointer; }
.menu-toggle svg{ fill:#fe6000; width:32px; height:32px; pointer-events:auto; }
.menu-toggle .bar{ height:3px; background:#fe6000; border-radius:2px; transition:all .3s ease; }
.menu-toggle.open .top{ transform:rotate(45deg) translate(5px,5px); }
.menu-toggle.open .middle{ opacity:0; }
.menu-toggle.open .bottom{ transform:rotate(-45deg) translate(6px,-6px); }

/* ================================
   MOBILE MENU — RIGHT-SIDE DRAWER
   ================================ */

/* runtime-updated header height with fallback */
:root { --header-h: 72px; }

/* overlay host */
.mobile-menu{
  position:fixed; inset:0; z-index:2147483646;
  display:flex; align-items:flex-start; justify-content:flex-end;
  background:transparent;
  transform:translateX(100%);
  transition:transform 300ms ease, background 200ms ease;
  pointer-events:none;
}

/* drawer panel */
.mobile-menu > .custom-menu{
  width:min(90vw,420px);
  height:100%;
  background:#fff;
  margin:0;
  /* big comfy offset so first item isn't hiding under the header/toggle */
  padding: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 56px) 32px 28px;  /* more top & side padding */
  overflow-y:auto;
  text-align:left;
  list-style:none;
  box-shadow:-24px 0 48px rgba(0,0,0,.12);
  border-left:1px solid rgba(0,0,0,.06);
  border-top-left-radius:12px;
}

/* open */
.mobile-menu.open {
  transform: translateX(0);
  background: transparent;   /* 🚀 no overlay */
  pointer-events: auto;
}

/* lock scroll */
body.nav-open{ overflow:hidden; }

/* Mobile list/text */
.mobile-menu, .mobile-menu *{ font-family:'Rubik', sans-serif !important; }
.mobile-menu .custom-menu, .mobile-menu .submenu{ list-style:none; margin:0; padding:0; }

.mobile-menu a{
  display:block; text-decoration:none; color:#001a33; font-weight:400;
  font-size:18px; line-height:1.45;
  padding:12px 14px;                 /* more inner padding so links don't hug the edge */
  margin:0;
}

/* row with arrow: small right padding so arrow isn't glued to edge */
.mobile-menu .menu-link-wrapper{
  display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; cursor:pointer;
  padding-right: 10px;                /* space for the chevron */
}

.mobile-menu .dropdown-arrow{
  flex:0 0 auto; font-size:16px; line-height:1;
  color:#9aa4af; transition:transform .25s ease, color .25s ease; transform-origin:center;
  margin-left: 8px;                   /* breathing room from the text */
}
.mobile-menu .menu-item.open > .menu-link-wrapper .dropdown-arrow{ transform:rotate(180deg); color:#fe6000; }

.mobile-menu .submenu{ display:none; }
.mobile-menu .menu-item.open > .submenu{ display:block; }
.mobile-menu .menu-item > .submenu{ padding-top:8px; padding-left:16px; }
.mobile-menu .submenu .submenu{ padding-top:6px; padding-left:20px; }
.mobile-menu .menu-item{ margin:0; }
.mobile-menu .menu-item a:hover{ color:#fe6000; }

/* Desktop dropdowns */
.navbar-desktop .submenu{
  display:none; position:absolute; top:100%; left:0; background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.06); padding:16px 0; list-style:none; min-width:180px; z-index:100; border-radius:8px;
}
.navbar-desktop .submenu li{ padding:0; margin:0; }
.navbar-desktop .submenu a{ display:block; padding:10px 20px; color:#001a33; text-decoration:none; white-space:nowrap; }
.navbar-desktop .submenu a:hover{ background:#f8f8f8; color:#fe6000; }
.navbar-desktop .menu-item{ position:relative; }
.navbar-desktop .menu-item:hover > .submenu{ display:block; }

/* 3rd-level flyout */
.navbar-desktop .submenu .submenu{
  position:absolute; top:0; left:100%; background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.06); padding:12px 0; list-style:none; min-width:180px; border-radius:8px; display:none; z-index:101;
}
.navbar-desktop .submenu li:hover > .submenu{ display:block; }
.navbar-desktop .submenu li.menu-item:has(> .submenu) > a::after{ content:'›'; font-size:14px; margin-left:8px; color:#9aa4af; }
.navbar-desktop .submenu li.menu-item:hover > a::after{ color:#fe6000; }

/* layers */
@media (min-width:1091px){
  .navbar-wrapper, .navbar-desktop{ position:relative; z-index:9999; }
}
@media (max-width:1090px){
  .navbar-desktop{ display:none; }
  .navbar-mobile { display:block; width:100%; }
}
.navbar-mobile{ position:fixed !important; top:0; width:100%; z-index:2147483647 !important; }

/* logo fallbacks */
.logo img{ display:block; max-height:40px !important; width:auto !important; height:auto !important; object-fit:contain !important; }
.logo > *{ display:block !important; width:auto !important; max-width:100% !important; max-height:40px !important; }
.logo .hs_cos_wrapper{ all:unset; display:block; max-height:40px; }

/* reset weird stacks */
.hs_cos_wrapper, .hs_cos_wrapper_widget, section, div[class*="row"], div[class*="container"]{
  position:relative !important; z-index:auto !important; transform:none !important; overflow:visible !important;
} 

/* drawer panel */
.mobile-menu > .custom-menu {
  width: min(90vw, 420px);
  height: calc(100% - var(--header-h));   /* only fill below header */
  margin-top: var(--header-h);            /* start below header */
  margin-left: auto;                      /* dock to right */
  background: #fff;
  padding: 32px 28px 28px;                /* nice spacing inside */
  overflow-y: auto;
  text-align: left;
  list-style: none;
  /* 🌟 beefed-up shadow for depth */
  box-shadow:
    -4px 0 16px rgba(0,0,0,0.08),
    -12px 0 32px rgba(0,0,0,0.12),
    -20px 0 48px rgba(0,0,0,0.16);
  border-left: 1px solid rgba(0,0,0,.06);
  border-top-left-radius: 12px;
}


/* menu links inside drawer */
.mobile-menu a {
  display: block;
  text-decoration: none;
  color: #001a33;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.45;
  padding: 14px 18px;     /* more side padding */
}

/* row with arrow: give room for arrow */
.mobile-menu .menu-link-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  cursor: pointer;
  padding-right: 12px;    /* arrow buffer */
}

/* arrow itself */
.mobile-menu .dropdown-arrow {
  margin-left: 10px;      /* gap from text */
  min-width: 18px;
  text-align: right;
}

/* ——————————————————————————————
   Only drawer panel should catch clicks
   —————————————————————————————— */

/* Prevent the transparent host from blocking clicks */
.mobile-menu.open {
  pointer-events: none;
}

/* Allow interactions only inside the panel */
.mobile-menu.open > .custom-menu {
  pointer-events: auto;
}

/* --- Keep the host below the header so it never covers the logo --- */
:root { --header-h: 72px; } /* already set by JS; keep as fallback */

.mobile-menu{
  position: fixed;
  /* was: inset: 0;  -> this covered the header */
  top: var(--header-h) !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  transform: translateX(100%);
  background: transparent;
  pointer-events: none;        /* host never catches taps */
  z-index: 2147483646;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  transition: transform 300ms ease;
}

/* Only the panel should be interactive */
.mobile-menu.open { transform: translateX(0); }
.mobile-menu.open > .custom-menu { pointer-events: auto; }

/* Drawer panel sizing now fills host, no header math needed */
.mobile-menu > .custom-menu{
  height: 100% !important;     /* was calc(100% - var(--header-h)) */
  margin-top: 0 !important;    /* was margin-top: var(--header-h) */
  padding: 32px 28px 28px !important; /* was adding header height */
}

/* Make sure the header is always the top clickable layer */
.navbar-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 2147483647 !important;
  pointer-events: auto;
}
.navbar-header * { pointer-events: auto; }

/* Defensive: kill any accidental pseudo-element overlays */
.navbar-header::before,
.navbar-header::after { content: none !important; }

/* --- Make our header only wrap the toggle so it doesn't cover the logo module --- */
@media (max-width: 1090px) {
  .navbar-header{
    position: fixed;
    top: 0;
    right: 0;
    left: auto !important;      /* don't stretch across the page */
    width: auto !important;     /* only as wide as its contents (the toggle) */
    padding: .75rem 1rem;       /* comfy hit area for the toggle */
    background: transparent !important;
    box-shadow: none !important;
    z-index: 2147483647 !important;
  }

  /* If your real logo lives in a separate module, hide this one in our header */
  .navbar-header .logo{
    display: none !important;
  }
}

/* --- Keep the off-canvas host below the header & non-interactive --- */
:root { --header-h: 72px; } /* JS updates this */
.mobile-menu{
  position: fixed;
  top: var(--header-h) !important;  /* start below the header area */
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  transform: translateX(100%);
  background: transparent !important;
  pointer-events: none;             /* host never catches taps */
  z-index: 2147483646;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  transition: transform 300ms ease;
}

/* Only the drawer panel is clickable */
.mobile-menu.open { transform: translateX(0); }
.mobile-menu.open > .custom-menu { pointer-events: auto; }

/* Drawer sizing now fills the host; no header math here */
.mobile-menu > .custom-menu{
  height: 100% !important;
  margin-top: 0 !important;
  padding: 32px 28px 28px !important;
}

/* Add wrapper z-index control */
.navbar-wrapper { position: relative; z-index: 0; }

.navbar-desktop a,
.navbar-mobile a,
.navbar-mobile .menu-text,
.navbar-mobile .submenu a {
  font-family: 'Rubik', sans-serif;
  font-style: normal;
  font-weight: 400;
}

/* Hover */
.navbar-desktop a:hover,
.mobile-menu .menu-item a:hover,
.mobile-menu .menu-item a p.menu-text:hover {
  color: #fe6000; transition: color .3s ease;
}

/* Desktop base */
.navbar-desktop { display:block; position:relative; z-index:1; }
.navbar-mobile  { display:none;  position:relative; z-index:2; }

.navbar-desktop ul { display:flex; gap:2rem; list-style:none; margin:0; padding:0; align-items:center; }
.navbar-desktop li { white-space:nowrap; }
.navbar-desktop a  { text-decoration:none; color:#001a33; }

/* Header */
.navbar-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:1rem 1.25rem; width:100%; box-sizing:border-box;
  position:fixed; top:0; left:0; right:0;
  z-index:2147483647; width:100vw; max-width:100vw; overflow:visible;
}
.logo{ display:flex; align-items:center; flex-shrink:1; padding-left:.5rem; position:relative; z-index:1; }
.menu-toggle{ width:32px; height:32px; display:flex; flex-direction:column; justify-content:space-between; padding:6px; cursor:pointer; }
.menu-toggle svg{ fill:#fe6000; width:32px; height:32px; pointer-events:auto; }
.menu-toggle .bar{ height:3px; background:#fe6000; border-radius:2px; transition:all .3s ease; }
.menu-toggle.open .top{ transform:rotate(45deg) translate(5px,5px); }
.menu-toggle.open .middle{ opacity:0; }
.menu-toggle.open .bottom{ transform:rotate(-45deg) translate(6px,-6px); }

/* ================================
   MOBILE MENU — RIGHT-SIDE DRAWER
   ================================ */

/* runtime-updated header height with fallback */
:root { --header-h: 72px; }

/* overlay host */
.mobile-menu{
  position:fixed; inset:0; z-index:2147483646;
  display:flex; align-items:flex-start; justify-content:flex-end;
  background:transparent;
  transform:translateX(100%);
  transition:transform 300ms ease, background 200ms ease;
  pointer-events:none;
}

/* drawer panel */
.mobile-menu > .custom-menu{
  width:min(90vw,420px);
  height:100%;
  background:#fff;
  margin:0;
  /* big comfy offset so first item isn't hiding under the header/toggle */
  padding: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 56px) 32px 28px;  /* more top & side padding */
  overflow-y:auto;
  text-align:left;
  list-style:none;
  box-shadow:-24px 0 48px rgba(0,0,0,.12);
  border-left:1px solid rgba(0,0,0,.06);
  border-top-left-radius:12px;
}

/* open */
.mobile-menu.open {
  transform: translateX(0);
  background: transparent;   /* 🚀 no overlay */
  pointer-events: auto;
}

/* lock scroll */
body.nav-open{ overflow:hidden; }

/* Mobile list/text */
.mobile-menu, .mobile-menu *{ font-family:'Rubik', sans-serif !important; }
.mobile-menu .custom-menu, .mobile-menu .submenu{ list-style:none; margin:0; padding:0; }

.mobile-menu a{
  display:block; text-decoration:none; color:#001a33; font-weight:400;
  font-size:18px; line-height:1.45;
  padding:12px 14px;                 /* more inner padding so links don't hug the edge */
  margin:0;
}

/* row with arrow: small right padding so arrow isn't glued to edge */
.mobile-menu .menu-link-wrapper{
  display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; cursor:pointer;
  padding-right: 10px;                /* space for the chevron */
}

.mobile-menu .dropdown-arrow{
  flex:0 0 auto; font-size:16px; line-height:1;
  color:#9aa4af; transition:transform .25s ease, color .25s ease; transform-origin:center;
  margin-left: 8px;                   /* breathing room from the text */
}
.mobile-menu .menu-item.open > .menu-link-wrapper .dropdown-arrow{ transform:rotate(180deg); color:#fe6000; }

.mobile-menu .submenu{ display:none; }
.mobile-menu .menu-item.open > .submenu{ display:block; }
.mobile-menu .menu-item > .submenu{ padding-top:8px; padding-left:16px; }
.mobile-menu .submenu .submenu{ padding-top:6px; padding-left:20px; }
.mobile-menu .menu-item{ margin:0; }
.mobile-menu .menu-item a:hover{ color:#fe6000; }

/* Desktop dropdowns */
.navbar-desktop .submenu{
  display:none; position:absolute; top:100%; left:0; background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.06); padding:16px 0; list-style:none; min-width:180px; z-index:100; border-radius:8px;
}
.navbar-desktop .submenu li{ padding:0; margin:0; }
.navbar-desktop .submenu a{ display:block; padding:10px 20px; color:#001a33; text-decoration:none; white-space:nowrap; }
.navbar-desktop .submenu a:hover{ background:#f8f8f8; color:#fe6000; }
.navbar-desktop .menu-item{ position:relative; }
.navbar-desktop .menu-item:hover > .submenu{ display:block; }

/* 3rd-level flyout */
.navbar-desktop .submenu .submenu{
  position:absolute; top:0; left:100%; background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.06); padding:12px 0; list-style:none; min-width:180px; border-radius:8px; display:none; z-index:101;
}
.navbar-desktop .submenu li:hover > .submenu{ display:block; }
.navbar-desktop .submenu li.menu-item:has(> .submenu) > a::after{ content:'›'; font-size:14px; margin-left:8px; color:#9aa4af; }
.navbar-desktop .submenu li.menu-item:hover > a::after{ color:#fe6000; }

/* layers */
@media (min-width:1091px){
  .navbar-wrapper, .navbar-desktop{ position:relative; z-index:9999; }
}
@media (max-width:1090px){
  .navbar-desktop{ display:none; }
  .navbar-mobile { display:block; width:100%; }
}
.navbar-mobile{ position:fixed !important; top:0; width:100%; z-index:2147483647 !important; }

/* logo fallbacks */
.logo img{ display:block; max-height:40px !important; width:auto !important; height:auto !important; object-fit:contain !important; }
.logo > *{ display:block !important; width:auto !important; max-width:100% !important; max-height:40px !important; }
.logo .hs_cos_wrapper{ all:unset; display:block; max-height:40px; }

/* reset weird stacks */
.hs_cos_wrapper, .hs_cos_wrapper_widget, section, div[class*="row"], div[class*="container"]{
  position:relative !important; z-index:auto !important; transform:none !important; overflow:visible !important;
} 

/* drawer panel */
.mobile-menu > .custom-menu {
  width: min(90vw, 420px);
  height: calc(100% - var(--header-h));   /* only fill below header */
  margin-top: var(--header-h);            /* start below header */
  margin-left: auto;                      /* dock to right */
  background: #fff;
  padding: 32px 28px 28px;                /* nice spacing inside */
  overflow-y: auto;
  text-align: left;
  list-style: none;
  /* 🌟 beefed-up shadow for depth */
  box-shadow:
    -4px 0 16px rgba(0,0,0,0.08),
    -12px 0 32px rgba(0,0,0,0.12),
    -20px 0 48px rgba(0,0,0,0.16);
  border-left: 1px solid rgba(0,0,0,.06);
  border-top-left-radius: 12px;
}


/* menu links inside drawer */
.mobile-menu a {
  display: block;
  text-decoration: none;
  color: #001a33;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.45;
  padding: 14px 18px;     /* more side padding */
}

/* row with arrow: give room for arrow */
.mobile-menu .menu-link-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  cursor: pointer;
  padding-right: 12px;    /* arrow buffer */
}

/* arrow itself */
.mobile-menu .dropdown-arrow {
  margin-left: 10px;      /* gap from text */
  min-width: 18px;
  text-align: right;
}

/* ——————————————————————————————
   Only drawer panel should catch clicks
   —————————————————————————————— */

/* Prevent the transparent host from blocking clicks */
.mobile-menu.open {
  pointer-events: none;
}

/* Allow interactions only inside the panel */
.mobile-menu.open > .custom-menu {
  pointer-events: auto;
}

/* --- Keep the host below the header so it never covers the logo --- */
:root { --header-h: 72px; } /* already set by JS; keep as fallback */

.mobile-menu{
  position: fixed;
  /* was: inset: 0;  -> this covered the header */
  top: var(--header-h) !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  transform: translateX(100%);
  background: transparent;
  pointer-events: none;        /* host never catches taps */
  z-index: 2147483646;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  transition: transform 300ms ease;
}

/* Only the panel should be interactive */
.mobile-menu.open { transform: translateX(0); }
.mobile-menu.open > .custom-menu { pointer-events: auto; }

/* Drawer panel sizing now fills host, no header math needed */
.mobile-menu > .custom-menu{
  height: 100% !important;     /* was calc(100% - var(--header-h)) */
  margin-top: 0 !important;    /* was margin-top: var(--header-h) */
  padding: 32px 28px 28px !important; /* was adding header height */
}

/* Make sure the header is always the top clickable layer */
.navbar-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 2147483647 !important;
  pointer-events: auto;
}
.navbar-header * { pointer-events: auto; }

/* Defensive: kill any accidental pseudo-element overlays */
.navbar-header::before,
.navbar-header::after { content: none !important; }

/* --- Make our header only wrap the toggle so it doesn't cover the logo module --- */
@media (max-width: 1090px) {
  .navbar-header{
    position: fixed;
    top: 0;
    right: 0;
    left: auto !important;      /* don't stretch across the page */
    width: auto !important;     /* only as wide as its contents (the toggle) */
    padding: .75rem 1rem;       /* comfy hit area for the toggle */
    background: transparent !important;
    box-shadow: none !important;
    z-index: 2147483647 !important;
  }

  /* If your real logo lives in a separate module, hide this one in our header */
  .navbar-header .logo{
    display: none !important;
  }
}

/* --- Keep the off-canvas host below the header & non-interactive --- */
:root { --header-h: 72px; } /* JS updates this */
.mobile-menu{
  position: fixed;
  top: var(--header-h) !important;  /* start below the header area */
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  transform: translateX(100%);
  background: transparent !important;
  pointer-events: none;             /* host never catches taps */
  z-index: 2147483646;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  transition: transform 300ms ease;
}

/* Only the drawer panel is clickable */
.mobile-menu.open { transform: translateX(0); }
.mobile-menu.open > .custom-menu { pointer-events: auto; }

/* Drawer sizing now fills the host; no header math here */
.mobile-menu > .custom-menu{
  height: 100% !important;
  margin-top: 0 !important;
  padding: 32px 28px 28px !important;
}

/* === FIX skinny columns: make row + cards real grids =================== */

/* Parent row: 1fr main + 300px sidebar */
.in-blog__row{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 300px;
  column-gap: 30px;
  align-items: start;
  justify-content: initial !important;   /* cancel old space-between */
}

/* Main: reclaim full width (kill old calc/max-width/flex) */
.in-blog__main{
  flex: initial !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;               /* avoid content-based squeeze */
}

/* Sidebar stays 300px */
.in-blog__sidebar{
  flex: initial !important;
  width: 300px;
  max-width: 300px;
}

/* Cards grid: true 3-up with gaps */
.in-blog-list{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}

/* Cards fill their tracks (nuke old flex widths/margins) */
.in-blog__post{
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  flex: initial !important;               /* harmless in grid, just reset */
}

/* Responsive: 2-up then 1-up */
@media (max-width: 1100px){
  .in-blog__row{ grid-template-columns: 1fr; }
  .in-blog__sidebar{ position: unset; }   /* your existing behavior */
  .in-blog-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px){
  .in-blog-list{ grid-template-columns: 1fr; }
}

/* Anti-orphan rules (balance last row on non-multiple-of-3 counts) */
.in-blog__post:last-child:nth-child(3n+1){ grid-column: 1 / -1; }
.in-blog__post:nth-last-child(2):nth-child(3n+1){ grid-column: span 2; }

/* =========================
   BLOG LIST: hard reset + grid
   (scoped to this module id)
   ========================= */
# .in-blog__row{
  /* kill old flex layout */
  display: grid !important;
  grid-template-columns: 1fr;   /* default: no sidebar */
  column-gap: 30px !important;
  align-items: start !important;
  justify-content: normal !important;
}

/* When the sidebar exists, give it a fixed column */
@supports selector(:has(*)) {
  # .in-blog__row:has(.in-blog__sidebar){
    grid-template-columns: minmax(0, 1fr) 300px !important;
  }
}

/* Main area must be allowed to grow */
# .in-blog__main{
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: initial !important;               /* in case flex sticks around */
  box-sizing: border-box !important;
}

/* Sidebar stays fixed */
# .in-blog__sidebar{
  width: 300px !important;
  max-width: 300px !important;
  flex: initial !important;
}

/* === Cards container: force real 3-up grid === */
# .in-blog-list{
  display: grid !important;               /* override any flex */
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 30px !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  justify-content: normal !important;     /* cancel space-between leftovers */
}

/* Cards fill their track; remove legacy widths/margins */
# .in-blog__post{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  flex: initial !important;
}

/* Anti-orphan (balance last row when count % 3 !== 0) */
# .in-blog__post:last-child:nth-child(3n+1){ grid-column: 1 / -1; }
# .in-blog__post:nth-last-child(2):nth-child(3n+1){ grid-column: span 2; }

/* Responsive */
@media (max-width: 1100px){
  # .in-blog__row{ grid-template-columns: 1fr !important; }
  # .in-blog__sidebar{ position: unset !important; }
  # .in-blog-list{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 767px){
  # .in-blog-list{ grid-template-columns: 1fr !important; }
}