/* Generated by scripts/phase-f/lib/views-emitter.mjs — DO NOT EDIT BY HAND.
 * Scoped grid for inferred listing Views (framework-11 Workstream C). Specificity
 * (0,2,0) via .clone-listing-view .<grid> — high enough to lay out the columns the
 * old :where() (0,0,0) form lost to component/default rules (the user-reported
 * "stacked list" breakage), low enough that a captured same-specificity component
 * grid (e.g. .section_related-works .grid_col-3) still co-applies (both yield a grid).
 * Scoped strictly under .clone-listing-view so it never leaks to non-listing pages.
 * breakpoints: {479, 767, 991, 1919} (detected from discovery/responsive-breakpoints.json)
 */
  .clone-listing-view .c-all_blogs__all-blogs-collection-list,
  .clone-listing-view .c-careers_cards__grid-col-3,
  .clone-listing-view .clone-card-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px 32px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
  .clone-listing-view .c-all_blogs__all-blogs-collection-list > *,
  .clone-listing-view .c-careers_cards__grid-col-3 > *,
  .clone-listing-view .clone-card-grid > * { min-width: 0; }
@media (max-width: 991px) {
  .clone-listing-view .c-all_blogs__all-blogs-collection-list,
  .clone-listing-view .c-careers_cards__grid-col-3,
  .clone-listing-view .clone-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .clone-listing-view .c-all_blogs__all-blogs-collection-list,
  .clone-listing-view .c-careers_cards__grid-col-3,
  .clone-listing-view .clone-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
}
@media (max-width: 479px) {
  .clone-listing-view .c-all_blogs__all-blogs-collection-list,
  .clone-listing-view .c-careers_cards__grid-col-3,
  .clone-listing-view .clone-card-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Card image safety net — the clone theme has no base img reset, so a card
   image with no component rule renders at its natural pixel size and overflows
   its grid cell. Zero-specificity so any component aspect-ratio rule still wins.
   framework-13 WS-FE-2 — the per-card sizing rule below derives from the run's
   OWN harvested listing card (classes routed through specs/_class-map.json;
   aspect from the snapshot img's width/height attrs). The previous hardcoded
   Webflow literals (.media._4-3 / .media._2-1) are retired. */
:where(.clone-listing-view img) { max-width: 100%; height: auto; }
:where(.clone-listing-view .c-cs_banner__media.c-blog_hero__media) { width: 100%; aspect-ratio: 668 / 334; object-fit: cover; }
:where(.clone-listing-view .c-cs_banner__media._4-3) { width: 100%; object-fit: cover; }
/* A member without a given asset (e.g. no brand logo) renders <img src=""> which
   browsers show as a broken-image icon. Hide empty-src images so the card stays
   clean. (No live fetch is allowed at Phase F to backfill the missing asset.)
   Normal specificity (not :where) so it beats the component image rules. */
.clone-listing-view img[src=""],
.clone-listing-view img:not([src]),
.clone-listing-view img[src="/"] { display: none !important; }
/* framework-11 Issue 2 — Better Exposed Filters topic pills. Pure structural
   styling so a bef_links exposed taxonomy filter renders as a horizontal pill row
   (matching the source topic chips) instead of a vertical link list. No colour
   literals — the active state is conveyed by weight/border so it reads correctly on
   any theme; the page-css polish layer can refine the fill later. (Rule 10.1.) */
.clone-listing-view .bef-exposed-form { margin: 0 0 32px; }
/* The bef_links widget nests the option anchors in a <ul><li> inside .bef-links,
   so flexing .bef-links alone leaves the <ul> (its single child) stacking the
   items vertically. Flatten the <ul> itself into the pill row and strip bullets. */
.clone-listing-view .bef-links,
.clone-listing-view .bef-links ul {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.clone-listing-view .bef-links li { margin: 0; padding: 0; list-style: none; }
/* framework-12 L1b — source filter is a borderless text tab bar (not pills);
   reproduce its chrome from the captured chip styling. */
.clone-listing-view { --listing-filter-color: #737373;}
.clone-listing-view .bef-link,
.clone-listing-view .bef-links a {
  display: inline-block;
  padding: 0;
  border: 0;
  border-radius: 0;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  color: var(--listing-filter-color, inherit);
}
.clone-listing-view a.bef-link--selected,
.clone-listing-view .bef-link.bef-link--selected,
.clone-listing-view .bef-links a.is-active,
.clone-listing-view .bef-links a[aria-current] {
  font-weight: 700;
  color: inherit;
}
/* framework-11 Rule 10.4 — listing heading size captured from the source H1's class
   in the source CSS, emitted as a custom property so the captured scale applies and
   falls back to a principled default when no measurement resolved. */
.clone-listing-view { --listing-title-size: 3.75rem;}
.clone-listing-view .listing-title,
.listing-title { font-size: var(--listing-title-size, 2.5rem); line-height: 1.12; }
/* framework-11 (session B) #5/#6 — listing page gutter + centred max-width axis.
   The captured listing band is full-bleed at the section level, so the grid +
   exposed filter + pager touch the viewport edge and look unaligned vs the rest
   of the site. Constrain the view content to the site container width with side
   gutters and centre it. Tokens with literal fallbacks so a token-less clone
   still gets a sane gutter. Scoped under .region-content .clone-listing-view so
   it only affects listing pages. (This block was previously a live CSS patch that
   the generator regenerated away — now it lives in the generator and survives.) */
.region-content .clone-listing-view {
  box-sizing: border-box;
  max-width: var(--container-max, 1280px);
  margin-inline: auto;
  padding-inline: var(--space-gutter, 40px);
}
/* Exposed filter row: lay the controls out horizontally with the same gutter axis
   instead of an unstyled full-width stack. */
.clone-listing-view .views-exposed-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  margin-block: 0 32px;
}
.clone-listing-view .views-exposed-form .form-item { margin: 0; }
/* Pager — the View prefers views_infinite_scroll (Load-more). Style the Load-more
   control as a pill button and centre it; also give the numbered-pager fallback
   basic spacing so it never renders as raw browser-default links. */
.clone-listing-view .views-infinite-scroll-pager { text-align: center; margin-block: 40px 0; }
.clone-listing-view .views-infinite-scroll-pager a,
.clone-listing-view .pager .button,
.clone-listing-view a.button--load-more {
  display: inline-block;
  margin: 0 auto;
  padding: 14px 32px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.clone-listing-view nav.pager { margin-block: 40px 0; }
.clone-listing-view .pager__items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.clone-listing-view .pager__item a {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid currentColor;
  border-radius: 8px;
  text-decoration: none;
  line-height: 1.2;
}
.clone-listing-view .pager__item.is-active a { font-weight: 700; }