/* all_blogs.css — listing shell (view_reference paragraph, C-f13-3).
   Values from the spec ## Computed Styles (representative /insights, blog
   variant @ 1440 / 768 / 375) and the frozen Phase-A crop
   (source/screenshots/insights_index/1440.png). Card internals sit below the
   capture depth cap; they are calibrated from the source collection-card CSS
   (.blog-card / .media._2-1 / .heading-style-h4._20px / .blog-card_category-label
   / .casestudy-card---medium) so the same section-scoped block styles both the
   SDC preview rows AND the Phase-F View rows (listing-card-template.mjs resolves
   this section + grid class).
   Run breakpoint boundary set {479,767,991,1919}: 1440 = base rules;
   768 -> @media(max-width:991px); 375 -> @media(max-width:479px).
   Typography via var(--font-family-*) (framework-11 E1 lock; source family
   'Plus Jakarta Sans' resolves through the frozen tokens).
   Every selector is scoped under .c-all_blogs__heading-wrap so the shared
   canonical wrappers owned by sibling components (padding-global ->
   c-about_info__heading-wrap-5, container-large -> c-about_info__heading-wrap,
   row -> c-about_info__heading-wrap-7, media -> c-cs_banner__media, _2-1 ->
   c-blog_hero__media, heading-style-h4 -> c-cookie__heading-3) never leak
   (rule 9). */

/* ============================ Section root ================================= */
.c-all_blogs__heading-wrap {
  display: block;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  color: var(--color-text-body); /* source rgb(51,51,51) */
  /* SDC-preview UA body-margin neutraliser (Drupal zeroes the body margin on
     composed pages — the .region-content reset restores it there). On a
     width:auto block the -8px resolves to a viewport-wide box at every viewport,
     so the band lines up edge-to-edge with the source crop at 1440/768/375. */
  margin: -8px;
}
.region-content .c-all_blogs__heading-wrap {
  margin: 0;
  width: 100%;
}

/* Visually-hidden landmark heading (source h2.hide — display:none everywhere) */
.c-all_blogs__heading-wrap .c-all_blogs__heading {
  display: none;
}

/* ---- Outer padding wrapper (padding-global + padding-section-*) ---------- */
.c-all_blogs__heading-wrap .c-all_blogs__pad {
  display: block;
  width: 100%;
  box-sizing: border-box;
}
.c-all_blogs__heading-wrap .c-all_blogs__pad--small {
  padding: var(--space-64) var(--space-40); /* source 64px 40px @1440 */
}
.c-all_blogs__heading-wrap .c-all_blogs__pad--medium {
  padding: 96px var(--space-40); /* source 96px 40px @1440; no --space-96 token */
}

/* ---- Content container (container-large, maxWidth 1280) ------------------ */
.c-all_blogs__heading-wrap .c-all_blogs__container {
  display: block;
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  box-sizing: border-box;
}

.c-all_blogs__heading-wrap .c-all_blogs__overflow {
  display: block;
  width: 100%;
  overflow: hidden;
}

/* ============================ Filter row ================================== */
.c-all_blogs__heading-wrap .c-all_blogs__filter-row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  min-height: 58px; /* source filter row height 58px @1440 */
  gap: var(--space-40); /* source row gap 40px @1440 */
}
.c-all_blogs__heading-wrap .c-all_blogs__mb-12 {
  margin: 0 0 var(--space-12); /* source margin 0 0 12px */
}
.c-all_blogs__heading-wrap .c-all_blogs__mb-20 {
  margin: 0 0 var(--space-20); /* source margin 0 0 20px (work) */
}
.c-all_blogs__heading-wrap .c-all_blogs__category-filter-form {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  gap: var(--space-40);
}
.c-all_blogs__heading-wrap .c-all_blogs__filter-topics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-20);
}
.c-all_blogs__heading-wrap .c-all_blogs__filter-actions {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin-left: auto;
}
/* .c-all_blogs__filter-pill base reset lives in css/atoms.css (lifted atom
   atom_c_all_blogs_filter_pill, WS-FE-1). --more / --reset keep the same reset
   locally; the --active modifier layers on top of the atom base via the class. */
.c-all_blogs__heading-wrap .c-all_blogs__filter-more,
.c-all_blogs__heading-wrap .c-all_blogs__filter-reset {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--font-size-a); /* 16px */
  line-height: var(--line-height-a);
  color: var(--color-text-primary);
  cursor: pointer;
  white-space: nowrap;
}
.c-all_blogs__heading-wrap .c-all_blogs__filter-pill--active {
  color: var(--color-text-black);
  border-bottom: 2px solid var(--color-bg-accent); /* red underline on the active topic */
  padding-bottom: 2px;
}
.c-all_blogs__heading-wrap .c-all_blogs__filter-expanded {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-20);
}
.c-all_blogs__heading-wrap .c-all_blogs__filter-expanded[hidden] {
  display: none;
}
.c-all_blogs__heading-wrap .c-all_blogs__filter-search {
  box-sizing: border-box;
  width: 228px;
  padding: var(--space-8) var(--space-16);
  border: 1px solid var(--color-bg-alt2); /* rgb(229,229,229) */
  border-radius: var(--radius-8);
  font-family: inherit;
  font-size: var(--font-size-p); /* 14px */
  color: var(--color-text-muted);
  background: var(--color-bg-page);
}

/* ============================ Card grid =================================== */
.c-all_blogs__heading-wrap .c-all_blogs__all-blogs {
  display: block;
  width: 100%;
}
.c-all_blogs__heading-wrap .c-all_blogs__all-blogs-collection-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* source 1fr 1fr 1fr */
  gap: 120px var(--space-40); /* source row 120px / column 40px @1440 */
  margin-bottom: 60px; /* source 60px */
}
.c-all_blogs__heading-wrap .c-all_blogs__card-item {
  min-width: 0; /* grid safety (Patch D) */
}

/* ---- Card ---- */
.c-all_blogs__heading-wrap .c-all_blogs__card,
.c-all_blogs__heading-wrap .c-all_blogs__card-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  color: inherit;
}
.c-all_blogs__heading-wrap .c-all_blogs__card-media {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}
.c-all_blogs__heading-wrap .c-all_blogs__card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 2 / 1; /* source .media._2-1 = aspect-ratio:2 */
}
.c-all_blogs__heading-wrap .c-all_blogs__card-img--empty {
  background: var(--color-bg-neutral); /* neutral placeholder when no thumbnail bound */
}
.c-all_blogs__heading-wrap .c-all_blogs__card-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 500px; /* source .blog-card-content max-width:500px */
  margin-top: var(--space-24); /* source margin-top spacing-small = 1.5rem */
}
.c-all_blogs__heading-wrap .c-all_blogs__card-gap {
  display: flex;
  flex-direction: column;
  gap: var(--space-12); /* source .gap-12 = spacing-xxsmall = .75rem */
  width: 100%;
}
.c-all_blogs__heading-wrap .c-all_blogs__card-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 100%;
}
.c-all_blogs__heading-wrap .c-all_blogs__card-cat-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.c-all_blogs__heading-wrap .c-all_blogs__card-cat {
  font-size: 12px; /* source spacing-tiny typescale = .75rem */
  line-height: 20px;
  font-weight: var(--font-weight-h3); /* 600 */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary); /* rgb(115,115,115) */
}
.c-all_blogs__heading-wrap .c-all_blogs__card-title {
  margin: 0;
  font-size: var(--font-size-h3); /* 20px */
  line-height: 25px; /* source .heading-style-h4._20px line-height:25px */
  font-weight: var(--font-weight-h3); /* 600 */
  letter-spacing: -0.01em;
  color: var(--color-text-black);
}
.c-all_blogs__heading-wrap .c-all_blogs__card-excerpt {
  font-size: var(--font-size-a); /* 16px, source text-size-regular xxsmall = 1rem */
  line-height: var(--line-height-a); /* 24px */
  color: var(--color-text-primary); /* rgb(51,51,51) */
  display: -webkit-box;
  -webkit-line-clamp: 2; /* source .text-style-2lines */
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Work variant card (case-study: 4:3 image, industry pill, logo) ------ */
.c-all_blogs__heading-wrap .c-all_blogs__card-media--work {
  aspect-ratio: 4 / 3; /* source .media._4-3 */
}
.c-all_blogs__heading-wrap .c-all_blogs__card-media--work .c-all_blogs__card-img {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
}
.c-all_blogs__heading-wrap .c-all_blogs__card-industry {
  position: absolute;
  left: var(--space-20);
  bottom: var(--space-20);
}
.c-all_blogs__heading-wrap .c-all_blogs__card-industry-label {
  display: inline-block;
  padding: 5px var(--space-20);
  border-radius: var(--radius-31);
  background: var(--color-bg-alt1-alpha-40); /* rgba(255,255,255,0.4) */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: var(--font-size-p); /* 14px */
  font-weight: var(--font-weight-h3); /* 600 */
  line-height: 1;
  color: var(--color-text-charcoal);
}
.c-all_blogs__heading-wrap .c-all_blogs__card-logo-row {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-12);
}
.c-all_blogs__heading-wrap .c-all_blogs__card-logo {
  width: auto;
  height: 40px; /* source .brand-40 */
  object-fit: contain;
}

/* ============================ Empty / pager =============================== */
.c-all_blogs__heading-wrap .c-all_blogs__no-result-found {
  display: none; /* hidden unless the filter yields zero matches */
}
.c-all_blogs__heading-wrap .c-all_blogs__pagination {
  display: flex;
  justify-content: center;
  width: 100%;
}
.c-all_blogs__heading-wrap .c-all_blogs__pager-more {
  font-size: var(--font-size-a); /* 16px */
  line-height: var(--line-height-a);
  color: var(--color-text-black);
  text-decoration: underline;
}

/* Hidden category-chip CMS source list (feeds the filter; never visible) */
.c-all_blogs__heading-wrap .c-all_blogs__category-source {
  display: none;
}

/* ============================ Tablet (768 -> max 991) ===================== */
@media (max-width: 991px) {
  .c-all_blogs__heading-wrap .c-all_blogs__pad--small {
    padding: var(--space-64) var(--space-40); /* source 64px 40px @768 */
  }
  .c-all_blogs__heading-wrap .c-all_blogs__pad--medium {
    padding: var(--space-64) var(--space-40); /* source 64px 40px @768 */
  }
  .c-all_blogs__heading-wrap .c-all_blogs__filter-row,
  .c-all_blogs__heading-wrap .c-all_blogs__category-filter-form {
    gap: var(--space-10); /* source gap 10px @768 */
  }
  .c-all_blogs__heading-wrap .c-all_blogs__all-blogs-collection-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* source 334px 334px */
    gap: 80px var(--space-20); /* source row 80px / column 20px @768 */
  }
}

/* ============================ Mobile (375 -> max 479) ==================== */
@media (max-width: 479px) {
  .c-all_blogs__heading-wrap .c-all_blogs__pad--small {
    padding: var(--space-32, 32px) var(--space-16); /* source 32px 16px @375 */
  }
  .c-all_blogs__heading-wrap .c-all_blogs__pad--medium {
    padding: 48px var(--space-16); /* source 48px 16px @375 */
  }
  .c-all_blogs__heading-wrap .c-all_blogs__filter-row,
  .c-all_blogs__heading-wrap .c-all_blogs__category-filter-form {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-20); /* source column stack, gap 20px @375 */
  }
  .c-all_blogs__heading-wrap .c-all_blogs__filter-actions {
    margin-left: 0;
    width: 100%;
  }
  .c-all_blogs__heading-wrap .c-all_blogs__all-blogs-collection-list {
    grid-template-columns: minmax(0, 1fr); /* source single column 343px */
    gap: 80px var(--space-20);
  }
}

/* WS-E (2026-07-08): the listing bridge feeds ALL rows into this SDC (View
   pager=none) with real tid-based category-pill filtering, so the captured
   "Load more" pager has nothing to page to. Hide it. */
.c-all_blogs__all-blogs .c-all_blogs__pagination { display: none !important; }