/* ==========================================================================
   Blog archive — /insights/blog/ (home.php)

   Every value here was measured on the live page in a real browser, not taken
   from the rk_archive_cards stylesheet defaults. Where live and the widget's
   defaults agree it is noted, because the Insights instance of the SAME widget
   overrides three of them and the two pages must not be assumed identical.

   Card and row markup comes from the shared Insights renderer
   (ins_render_style2_card), so the .ins-* class names below are deliberate —
   this file restates the grid geometry for THIS page rather than importing
   insights-test.css, which carries a whole page's worth of unrelated rules
   (hero, trending rail, LinkedIn feed) that would bleed in.
   ========================================================================== */

/* box-sizing is pinned on this page's own elements rather than inherited from
   whatever global reset happens to be active. The Mr.Dev parent ships
   `*{box-sizing:border-box}` in reset.css while intoneccm.com has no author
   reset at all, so a container that sets a width alongside padding renders
   88px wider on one than the other. That exact drift has already been measured
   on this site (the cookie banner: 388px vs 340px for identical code), so it is
   declared here instead of assumed. */
.blg-page,
.blg-page *,
.blg-page *::before,
.blg-page *::after { box-sizing: border-box; }

.blg-page {
  background: #fff;
  overflow-x: clip;
  padding: 0 0 96px;
}

.blg-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 44px;
}
@media (max-width: 768px) {
  .blg-inner { padding: 0 20px; }
}

/* ---------- Breadcrumb ---------- */
.blg-breadcrumb {
  padding: 34px 0 0;
  font-family: 'Public Sans', sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: #6b7590;
}
.blg-breadcrumb-sep { margin: 0 2px; }
.blg-breadcrumb-current { color: #233963; font-weight: 600; }

/* ---------- Title ----------
   Measured: 42px / 700 / #233963 / uppercase, margin-bottom 0 on live — the
   30px gap below comes from the controls row, not the heading. */
.blg-title {
  margin: 14px 0 0;
  font-family: 'Public Sans', sans-serif;
  font-size: 42px;
  font-weight: 700;
  line-height: 1.2;
  color: #233963;
  text-transform: uppercase;
}
@media (max-width: 768px) {
  .blg-title { font-size: 30px; }
}

/* ---------- Search + Tags row ----------
   Measured: flex, space-between, align-items flex-start, gap 20px,
   margin-bottom 30px. */
.blg-controls {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin: 35px 0 30px;
}

/* Search: 465x50 pill, 0.8px #e0e0e0 border, radius 30px, transparent shell
   with a white 48px input inside at 12px/20px padding. */
/* display:flex, not block — an <input> is inline-level, so in a block parent it
   sits on a text baseline and the line-box descender adds ~24px below it,
   rendering the 50px pill at 74px. Flex removes the baseline entirely. */
.blg-search {
  flex: 0 0 465px;
  max-width: 465px;
  display: flex;
  align-items: center;
  border: 0.8px solid #e0e0e0;
  border-radius: 30px;
  background: transparent;
  overflow: hidden;
}
.blg-search-input {
  display: block;
  width: 100%;
  height: 48px;
  border: 0;
  outline: none;
  background: #fff;
  padding: 12px 20px;
  font-family: 'Public Sans', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #233963;
}
.blg-search-input::placeholder { color: #9aa3b7; }
.blg-search-input:focus-visible { box-shadow: inset 0 0 0 2px #6ac2b7; }

.blg-filters {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 4px;
}
.blg-filter-label {
  font-family: 'Public Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #233963;
}
/* Measured 207x35, 0.8px #e0e0e0, radius 6px, 8px/12px padding. The radius is
   the live value — it is a native <select>, not a card, so the house
   sharp-corner rule does not apply to it. */
.blg-filter-select {
  width: 207px;
  height: 35px;
  border: 0.8px solid #e0e0e0;
  border-radius: 6px;
  background: #fff;
  padding: 8px 12px;
  font-family: 'Public Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #233963;
  cursor: pointer;
}

@media (max-width: 860px) {
  .blg-controls { flex-direction: column; align-items: stretch; }
  .blg-search { flex: 1 1 auto; max-width: none; }
  .blg-filters { align-items: stretch; }
  .blg-filter-select { width: 100%; }
}

/* ==========================================================================
   style2 grid — geometry for THIS page.

   Differs from the Insights instance of the same widget, measured on both:
     row gap            30px   (Insights: 10px)
     right-column gap   20px   (Insights: 5px)
     image width        50%    (Insights: 55% hero / 50% case studies)
   ========================================================================== */
.blg-grid { display: block; }

.blg-grid .ins-style2-row {
  display: flex;
  gap: 30px;
  margin-bottom: 30px;
}
.blg-grid .ins-style2-row:last-child { margin-bottom: 0; }

.blg-grid .ins-style2-col { display: flex; flex-direction: column; }
.blg-grid .ins-style2-col-left,
.blg-grid .ins-style2-col-right { flex: 0 0 calc(50% - 15px); max-width: calc(50% - 15px); }
.blg-grid .ins-style2-col-right { gap: 20px; }

/* Live: big card 684x529 with a 684x385 cover image; horizontal card 684x255
   with a 342x255 (50%) image. Both titles are Public Sans 600 in BLACK — not
   the navy used elsewhere on the site. Verified via computed style. */
.blg-grid .ins-card,
.blg-grid .ins-card * { box-sizing: border-box; }

.blg-grid .ins-card { position: relative; background: transparent; }
.blg-grid .ins-style2-col-left .ins-card { height: 100%; }
.blg-grid .ins-style2-col-right .ins-card { flex: 1; min-height: 0; }

.blg-grid .ins-card-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  overflow: hidden;
}
.blg-grid .ins-card--horizontal .ins-card-inner { flex-direction: row; }

.blg-grid .ins-card-image { position: relative; overflow: hidden; flex: 0 0 auto; }
.blg-grid .ins-card--horizontal .ins-card-image {
  flex: 0 0 var(--ins-hcard-image-width, 50%);
  max-width: var(--ins-hcard-image-width, 50%);
  align-self: stretch;
}
.blg-grid .ins-card-image-link { display: block; height: 100%; }

.blg-grid .ins-card-thumb {
  display: block;
  width: 100%;
  height: 385px;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.blg-grid .ins-card--horizontal .ins-card-thumb { height: 100%; min-height: 255px; }

.blg-grid .ins-card-content { padding: 20px 0 0; display: flex; flex-direction: column; gap: 10px; }
.blg-grid .ins-card--horizontal .ins-card-content { padding: 0 0 0 20px; justify-content: center; }

.blg-grid .ins-card-title {
  margin: 0;
  font-family: 'Public Sans', sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: #000;
}
.blg-grid .ins-card--horizontal .ins-card-title { font-size: 16px; line-height: 1.4; }
.blg-grid .ins-card-title a { color: inherit; text-decoration: none; }

/* Hover treatment carried over from the Insights grid so the two archives feel
   the same: image scale + the brand gradient glow behind the panel. */
.blg-grid .ins-card::after {
  content: '';
  position: absolute;
  inset: 2px 0 -6px;
  background: linear-gradient(90deg,#6AC2B7 0%,#8AD6C0 50%,#8ADBBB 75%,#86DCAF 87.5%,#84DDA5 93.75%,#95E091 96.88%,#9FDD5F 100%);
  filter: blur(18px);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.blg-grid .ins-card:hover::after,
.blg-grid .ins-card:focus-within::after { opacity: .85; }
.blg-grid .ins-card:hover .ins-card-thumb,
.blg-grid .ins-card:focus-within .ins-card-thumb { transform: scale(1.07); }

@media (max-width: 900px) {
  .blg-grid .ins-style2-row { flex-direction: column; gap: 20px; }
  .blg-grid .ins-style2-col-left,
  .blg-grid .ins-style2-col-right { flex: 1 1 auto; max-width: none; }
  .blg-grid .ins-card-thumb { height: 260px; }
}
@media (max-width: 600px) {
  .blg-grid .ins-card--horizontal .ins-card-inner { flex-direction: column; }
  .blg-grid .ins-card--horizontal .ins-card-image { flex: 1 1 auto; max-width: none; }
  .blg-grid .ins-card--horizontal .ins-card-thumb { height: 200px; min-height: 0; }
  .blg-grid .ins-card--horizontal .ins-card-content { padding: 16px 0 0; }
}

/* ---------- Load more ----------
   Measured 180x48, #233963 fill, white 14px/600 uppercase, letter-spacing 1px,
   radius 3px, padding 12px 32px, container margin-top 40px. */
.blg-loadmore-wrap {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
.blg-loadmore {
  min-width: 180px;
  height: 48px;
  padding: 12px 32px;
  border: 0;
  border-radius: 3px;
  background: #233963;
  color: #fff;
  font-family: 'Public Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s ease, opacity .25s ease;
}
.blg-loadmore:hover { background: #1a2b4d; }
.blg-loadmore[disabled] { opacity: .6; cursor: default; }

.blg-empty {
  margin: 48px 0 0;
  text-align: center;
  font-family: 'Public Sans', sans-serif;
  font-size: 17px;
  color: #56617a;
}

.blg-grid[aria-busy="true"] { opacity: .55; transition: opacity .2s ease; }

/* ---------- Closing CTA ----------
   Measured: h2 48px/500 #233963 capitalize; button white fill, #233963 text,
   0.8px #233963 border, radius 3px, 20px/700, padding 20px 30px. */
.blg-cta { padding: 88px 0 0; }
.blg-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.blg-cta-title {
  margin: 0;
  font-family: 'Public Sans', sans-serif;
  font-size: 48px;
  font-weight: 500;
  line-height: 1.25;
  color: #233963;
  text-transform: capitalize;
  max-width: 62%;
}
.blg-cta-btn {
  flex: 0 0 auto;
  display: inline-block;
  padding: 20px 30px;
  border: 0.8px solid #233963;
  border-radius: 3px;
  background: #fff;
  color: #233963;
  font-family: 'Public Sans', sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-transform: capitalize;
  text-decoration: none;
  transition: background .25s ease, color .25s ease;
}
.blg-cta-btn:hover { background: #233963; color: #fff; }

@media (max-width: 900px) {
  .blg-cta { padding: 56px 0 0; }
  .blg-cta-title { font-size: 32px; max-width: none; }
  .blg-cta-inner { flex-direction: column; align-items: flex-start; gap: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .blg-grid .ins-card-thumb,
  .blg-grid .ins-card::after,
  .blg-loadmore,
  .blg-cta-btn { transition: none; }
}