/* =========================================================================
   FEC Blog Listing — editorial alternating rows (post 334027 — V3 BOLD)
   Scoped to body.page-id-334027

   Reference: kuhnrikon.com/ch_en/inspiration/news (Stefanie's anchor)
   System tokens: Eyebrow Cyan Rubik 600 / H2 Fraunces 500 italic em /
                  Avenir body / Card title Fraunces 28-36px italic em
   Layout: HEAD → FEATURED post (full-width 16/9) → ALTERNATING rows
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

body.page-id-334027 .fec-blog-section {
  position: relative;
  z-index: 1;
  background-color: #f5f7fb;
  padding-top: 120px !important;
  padding-bottom: 120px !important;
}

@media (max-width: 980px) {
  body.page-id-334027 .fec-blog-section {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
}

body.page-id-334027 .fec-blog-section .et_pb_row {
  position: relative;
  z-index: 1;
}

/* HEAD — three independent et_pb_text modules.
   Margins between them come from Divi's custom_margin on each module
   (editable in Visual Builder). CSS only sets typography. */
body.page-id-334027 .fec-blog-eyebrow p {
  margin: 0;
  font-family: "Rubik", sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #3ca3dd;
}

body.page-id-334027 .fec-blog-h2 h2 {
  margin: 0;
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #283582;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}

body.page-id-334027 .fec-blog-h2 h2 em {
  font-style: italic;
  font-weight: 500;
  color: #3ca3dd;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}

body.page-id-334027 .fec-blog-deck p {
  margin: 0;
  font-family: "Avenir", "Avenir Next", "Inter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: #6b7286;
  max-width: 56ch;
}

/* Thin Cyan-Navy separator under the head row, before the blog grid */
body.page-id-334027 .fec-blog-deck {
  padding-bottom: 32px !important;
  border-bottom: 1px solid rgba(40, 53, 130, 0.12);
}

/* DIVI BLOG GRID — restyle to single-column alternating rows.
   Divi wraps posts in salvattore: .et_pb_blog_grid > .et_pb_ajax_pagination_container
   > .et_pb_salvattore_content > <div column-wrappers> > article.et_pb_post
   We flatten via display:contents so articles become direct flex children. */
body.page-id-334027 .fec-blog-grid .et_pb_blog_grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 80px !important;
  margin: 0 !important;
}

body.page-id-334027 .fec-blog-grid .et_pb_blog_grid > .et_pb_ajax_pagination_container,
body.page-id-334027 .fec-blog-grid .et_pb_ajax_pagination_container > .et_pb_salvattore_content,
body.page-id-334027 .fec-blog-grid .et_pb_salvattore_content > div {
  display: contents !important;
}

@media (max-width: 980px) {
  body.page-id-334027 .fec-blog-grid .et_pb_blog_grid {
    gap: 56px !important;
  }
}

/* POST LAYOUT — grid with image spanning all rows in one column */
/* Counter setup — magazine-style 01. 02. 03. row numbers */
body.page-id-334027 .fec-blog-grid .et_pb_blog_grid {
  counter-reset: fec-post-number;
}

body.page-id-334027 .fec-blog-grid .et_pb_post {
  counter-increment: fec-post-number;
  position: relative;
  display: grid !important;
  grid-template-columns: 60fr 40fr;
  grid-template-rows: auto auto auto;
  column-gap: clamp(40px, 5vw, 80px);
  row-gap: 0;
  align-items: center;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
}

/* Magazine-style oversized post number */
body.page-id-334027 .fec-blog-grid .et_pb_post::before {
  content: counter(fec-post-number, decimal-leading-zero) ".";
  position: absolute;
  top: -28px;
  left: -8px;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(80px, 9vw, 132px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(60, 163, 221, 0.16);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  pointer-events: none;
  z-index: 0;
}

/* Asymmetric variants — odd rows flip ratio for visual rhythm */
body.page-id-334027 .fec-blog-grid .et_pb_post.fec-row-odd {
  grid-template-columns: 45fr 55fr;
}
body.page-id-334027 .fec-blog-grid .et_pb_post.fec-row-even:not(.fec-row-featured) {
  grid-template-columns: 55fr 45fr;
}

/* Cyan dotted rule decoration before each non-featured post */
body.page-id-334027 .fec-blog-grid .et_pb_post:not(.fec-row-featured)::after {
  content: "";
  position: absolute;
  top: -40px;
  left: 0;
  right: 0;
  height: 1px;
  background-image: linear-gradient(to right, rgba(60, 163, 221, 0.32) 50%, transparent 50%);
  background-size: 8px 1px;
  background-repeat: repeat-x;
  pointer-events: none;
}

/* Image on LEFT (column 1), spans all 3 rows so it's vertically centered */
body.page-id-334027 .fec-blog-grid .et_pb_post > .et_pb_image_container {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: stretch;
}

/* Text content stacks in column 2 */
body.page-id-334027 .fec-blog-grid .et_pb_post > .post-meta {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
}
body.page-id-334027 .fec-blog-grid .et_pb_post > .entry-title {
  grid-column: 2;
  grid-row: 2;
}
body.page-id-334027 .fec-blog-grid .et_pb_post > .post-content {
  grid-column: 2;
  grid-row: 3;
  align-self: start;
}

/* ALTERNATING — fec-row-odd posts flip image to RIGHT.
   Row indexes are assigned by fec-blog-rowindex.js (salvattore breaks
   :nth-child). fec-row-1 = featured, fec-row-3,5,7 = odd, fec-row-2,4,6 = even. */
body.page-id-334027 .fec-blog-grid .et_pb_post.fec-row-odd > .et_pb_image_container {
  grid-column: 2;
}
body.page-id-334027 .fec-blog-grid .et_pb_post.fec-row-odd > .post-meta,
body.page-id-334027 .fec-blog-grid .et_pb_post.fec-row-odd > .entry-title,
body.page-id-334027 .fec-blog-grid .et_pb_post.fec-row-odd > .post-content {
  grid-column: 1;
}

/* FEATURED (first article) — single column, image full-width on top */
body.page-id-334027 .fec-blog-grid .et_pb_post.fec-row-featured {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto;
  row-gap: 24px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(40, 53, 130, 0.12);
}

body.page-id-334027 .fec-blog-grid .et_pb_post.fec-row-featured > .et_pb_image_container {
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
}
body.page-id-334027 .fec-blog-grid .et_pb_post.fec-row-featured > .post-meta {
  grid-column: 1;
  grid-row: 2;
  align-self: auto;
}
body.page-id-334027 .fec-blog-grid .et_pb_post.fec-row-featured > .entry-title {
  grid-column: 1;
  grid-row: 3;
}
body.page-id-334027 .fec-blog-grid .et_pb_post.fec-row-featured > .post-content {
  grid-column: 1;
  grid-row: 4;
}

body.page-id-334027 .fec-blog-grid .et_pb_post.fec-row-featured .entry-featured-image-url,
body.page-id-334027 .fec-blog-grid .et_pb_post.fec-row-featured .et_pb_image_container {
  aspect-ratio: 16 / 9;
}

body.page-id-334027 .fec-blog-grid .et_pb_post.fec-row-featured .entry-title {
  font-size: clamp(36px, 4.2vw, 52px) !important;
}

/* Featured image — clipped frame */
body.page-id-334027 .fec-blog-grid .et_pb_post .entry-featured-image-url,
body.page-id-334027 .fec-blog-grid .et_pb_post .et_pb_image_container {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #e8edf5;
  position: relative;
  width: 100%;
  border-radius: 3px;
}

body.page-id-334027 .fec-blog-grid .et_pb_post .entry-featured-image-url img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0 !important;
  transition: transform 800ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

body.page-id-334027 .fec-blog-grid .et_pb_post:hover .entry-featured-image-url img {
  transform: scale(1.025);
}

/* Note: post::before is the magazine post-number, post::after is the dotted
   rule between rows — both intentionally rendered (see counter setup above). */

/* Card body — magazine order: meta > title > excerpt > read-more
   Featured: stacked under image. Alternating: in second grid column. */
body.page-id-334027 .fec-blog-grid .et_pb_post .post-meta,
body.page-id-334027 .fec-blog-grid .et_pb_post .entry-title,
body.page-id-334027 .fec-blog-grid .et_pb_post .post-content {
  padding: 0 !important;
}

body.page-id-334027 .fec-blog-grid .et_pb_post .post-meta {
  order: 1;
}
body.page-id-334027 .fec-blog-grid .et_pb_post .entry-title {
  order: 2;
}
body.page-id-334027 .fec-blog-grid .et_pb_post .post-content {
  order: 3;
}

/* Meta line: cyan category pill + mono date */
body.page-id-334027 .fec-blog-grid .et_pb_post .post-meta {
  margin: 0 0 12px !important;
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", "Menlo", monospace;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6b7286;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Category pill — high-contrast solid cyan + white (KR-orange logic, FEC token) */
body.page-id-334027 .fec-blog-grid .et_pb_post .post-meta a[rel="category tag"],
body.page-id-334027 .fec-blog-grid .et_pb_post .post-meta a[rel~="category"] {
  display: inline-block;
  padding: 7px 14px;
  background: #3ca3dd;
  color: #ffffff !important;
  border-radius: 999px;
  font-family: "Rubik", sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-decoration: none;
  transition: background 0.32s ease, transform 0.32s ease;
}

body.page-id-334027 .fec-blog-grid .et_pb_post .post-meta a[rel="category tag"]:hover,
body.page-id-334027 .fec-blog-grid .et_pb_post .post-meta a[rel~="category"]:hover {
  background: #2e96d1;
  transform: translateY(-1px);
}

body.page-id-334027 .fec-blog-grid .et_pb_post .post-meta .published {
  color: #6b7286 !important;
}

/* Title: Fraunces 500 italic em accent (homepage-konzisztens)
   Sized up +30% (2026-05-06) — KR-inspired typographic dominance */
body.page-id-334027 .fec-blog-grid .et_pb_post .entry-title {
  margin: 0 0 10px !important;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  font-size: clamp(28px, 3.0vw, 36px);
  line-height: 1.10;
  letter-spacing: -0.018em;
  color: #283582;
}

body.page-id-334027 .fec-blog-grid .et_pb_post .entry-title a {
  color: inherit !important;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  padding-bottom: 2px;
  transition: background-size 360ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

body.page-id-334027 .fec-blog-grid .et_pb_post:hover .entry-title a {
  background-size: 100% 1px;
}

/* Italic em accent inside titles — when post titles wrap em-tags */
body.page-id-334027 .fec-blog-grid .et_pb_post .entry-title em {
  font-style: italic;
  color: #3ca3dd;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}

/* Excerpt clamping. Divi structure: .post-content > .post-content-inner > <p>...
   Some imported posts have no explicit excerpts, so Divi auto-uses the full
   article content (multiple paragraphs, headings, lists). We line-clamp the
   .post-content-inner so the visible text caps at 3 lines regardless of how
   much HTML Divi rendered inside. */
body.page-id-334027 .fec-blog-grid .et_pb_post .post-content {
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  max-width: 65ch;
}

body.page-id-334027 .fec-blog-grid .et_pb_post .post-content-inner {
  font-family: "Inter", "Avenir", "Avenir Next", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.65;
  color: #4f566b;
  display: -webkit-box !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 18px;
}

/* Make all inner block tags inline so line-clamp can flow continuously */
body.page-id-334027 .fec-blog-grid .et_pb_post .post-content-inner > p,
body.page-id-334027 .fec-blog-grid .et_pb_post .post-content-inner > h1,
body.page-id-334027 .fec-blog-grid .et_pb_post .post-content-inner > h2,
body.page-id-334027 .fec-blog-grid .et_pb_post .post-content-inner > h3,
body.page-id-334027 .fec-blog-grid .et_pb_post .post-content-inner > h4,
body.page-id-334027 .fec-blog-grid .et_pb_post .post-content-inner > ul,
body.page-id-334027 .fec-blog-grid .et_pb_post .post-content-inner > ol,
body.page-id-334027 .fec-blog-grid .et_pb_post .post-content-inner > li {
  display: inline;
  margin: 0 !important;
  padding: 0 !important;
  font: inherit !important;
  color: inherit !important;
}

/* Featured post excerpt: 4 lines + slightly larger font */
body.page-id-334027 .fec-blog-grid .et_pb_post.fec-row-featured .post-content-inner {
  -webkit-line-clamp: 4;
  font-size: 16.5px;
}

/* "Read article →" mono CTA — overrides Divi default "MEHR LESEN" */
body.page-id-334027 .fec-blog-grid .et_pb_post .more-link {
  align-self: flex-start;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  font-size: 0 !important;
  text-decoration: none !important;
}

body.page-id-334027 .fec-blog-grid .et_pb_post .more-link::before {
  content: "Read article";
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", "Menlo", monospace;
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #3ca3dd;
  transition: color 240ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

body.page-id-334027 .fec-blog-grid .et_pb_post .more-link::after {
  content: "→";
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", "Menlo", monospace;
  font-size: 14px;
  letter-spacing: 0;
  color: #3ca3dd;
  transition: transform 240ms cubic-bezier(0.165, 0.84, 0.44, 1),
              color 240ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

body.page-id-334027 .fec-blog-grid .et_pb_post .more-link:hover::before,
body.page-id-334027 .fec-blog-grid .et_pb_post .more-link:hover::after {
  color: #283582;
}

body.page-id-334027 .fec-blog-grid .et_pb_post .more-link:hover::after {
  transform: translateX(3px);
}


/* PAGINATION */
body.page-id-334027 .fec-blog-grid .pagination {
  margin: 80px 0 0 !important;
  padding-top: 32px;
  border-top: 1px solid rgba(40, 53, 130, 0.12);
  display: flex;
  justify-content: center;
  gap: 16px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body.page-id-334027 .fec-blog-grid .pagination a,
body.page-id-334027 .fec-blog-grid .pagination .alignleft a,
body.page-id-334027 .fec-blog-grid .pagination .alignright a {
  color: #3ca3dd;
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.32s ease, color 0.32s ease;
}

body.page-id-334027 .fec-blog-grid .pagination a:hover {
  color: #283582;
  border-bottom-color: #283582;
}

/* RESPONSIVE — collapse alternating to stacked single column */
@media (max-width: 780px) {
  body.page-id-334027 .fec-blog-grid .et_pb_post {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }
  body.page-id-334027 .fec-blog-grid .et_pb_post:not(:first-child):nth-child(odd) .entry-featured-image-url {
    order: 0;
  }
  body.page-id-334027 .fec-blog-grid .et_pb_post .entry-featured-image-url,
  body.page-id-334027 .fec-blog-grid .et_pb_post .et_pb_image_container {
    aspect-ratio: 16 / 10;
  }
}

/* =========================================================================
   V3 OVERRIDES — BOLD (white card-shell + soft shadow + repositioned number)
   Tézis: each post becomes a clearly-bounded zone via white card-shell on
   slightly-darker section bg. Closest to Kuhn Rikon anchor. Strongest
   physical containment — but most aggressive deviation from current FEC tone.
   ========================================================================= */

/* Section bg one shade darker so white cards float */
body.page-id-334027 .fec-blog-section {
  background-color: #ecf0f7 !important;
}

/* Card-shell on every non-featured post */
body.page-id-334027 .fec-blog-grid .et_pb_post:not(.fec-row-featured) {
  background: #ffffff !important;
  padding: 40px clamp(32px, 3.5vw, 56px) !important;
  border-radius: 6px !important;
  border: 1px solid rgba(40, 53, 130, 0.06) !important;
  box-shadow:
    0 1px 2px rgba(40, 53, 130, 0.04),
    0 12px 32px rgba(40, 53, 130, 0.06) !important;
  transition: box-shadow 360ms cubic-bezier(0.165, 0.84, 0.44, 1),
              transform 360ms cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

body.page-id-334027 .fec-blog-grid .et_pb_post:not(.fec-row-featured):hover {
  box-shadow:
    0 1px 2px rgba(40, 53, 130, 0.05),
    0 24px 48px rgba(40, 53, 130, 0.10) !important;
  transform: translateY(-2px);
}

/* Dotted rule REMOVED — the card-shell IS the divider */
body.page-id-334027 .fec-blog-grid .et_pb_post:not(.fec-row-featured)::after {
  content: none !important;
  display: none !important;
  background: none !important;
  height: 0 !important;
}

/* Post-number relocated → top-right corner of card, more contrast */
body.page-id-334027 .fec-blog-grid .et_pb_post::before {
  top: 38px !important;
  left: auto !important;
  right: clamp(32px, 3.5vw, 56px) !important;
  font-size: clamp(56px, 6vw, 96px) !important;
  color: #283582 !important;                           /* solid Navy — same as title */
  letter-spacing: -0.06em !important;
  z-index: 0 !important;
}

/* Featured post — its own card with shadow, image full-bleed inside */
body.page-id-334027 .fec-blog-grid .et_pb_post.fec-row-featured {
  background: #ffffff !important;
  padding: 0 0 48px !important;
  border: 1px solid rgba(40, 53, 130, 0.06) !important;
  box-shadow: 0 16px 40px rgba(40, 53, 130, 0.08) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}

body.page-id-334027 .fec-blog-grid .et_pb_post.fec-row-featured > .post-meta,
body.page-id-334027 .fec-blog-grid .et_pb_post.fec-row-featured > .entry-title,
body.page-id-334027 .fec-blog-grid .et_pb_post.fec-row-featured > .post-content {
  padding-left: clamp(32px, 4vw, 56px) !important;
  padding-right: clamp(32px, 4vw, 56px) !important;
}

/* Tighter gap — card-shell does the separation work */
body.page-id-334027 .fec-blog-grid .et_pb_blog_grid {
  gap: 32px !important;
}
@media (max-width: 980px) {
  body.page-id-334027 .fec-blog-grid .et_pb_blog_grid {
    gap: 24px !important;
  }
}

/* Mobile padding */
@media (max-width: 780px) {
  body.page-id-334027 .fec-blog-grid .et_pb_post:not(.fec-row-featured) {
    padding: 28px 24px !important;
  }
}

/* =========================================================================
   V3 ITERATION (David 2026-05-05) — three follow-ups:
   (1) Filter chips below head row (mock categories until Stefanie defines)
   (2) Featured (1st) post excerpt full-width
   (3) Mirror post-number to top-LEFT on odd rows (so the number always
       anchors the TEXT side — even=text-right→top-right, odd=text-left→top-left)
   ========================================================================= */

/* (3) On odd rows the text sits in COL 1 (left half, 45fr) and the image
       in COL 2 (right). To stay symmetric with even rows — where the
       number flanks the meta-line at the FAR end of the text column —
       on odd rows the number must sit at the RIGHT edge of col 1, NOT
       at the left card edge (which would stack it on top of the meta).
       Grid is 45fr 55fr with gap clamp(40, 5vw, 80) → col 1 right edge ≈
       55% from card-right. Add small breathing offset. */
body.page-id-334027 .fec-blog-grid .et_pb_post.fec-row-odd::before {
  left: auto !important;
  right: calc(55% + clamp(16px, 2vw, 32px)) !important;
}

/* (2) Featured post excerpt full-width — drop the 65ch text-cap */
body.page-id-334027 .fec-blog-grid .et_pb_post.fec-row-featured .post-content {
  max-width: none !important;
}
body.page-id-334027 .fec-blog-grid .et_pb_post.fec-row-featured .post-content-inner {
  max-width: none !important;
  font-size: 17.5px;
  line-height: 1.7;
  -webkit-line-clamp: 5;
}

/* (1) Filter chip row — pill-style buttons, FEC brand tokens */
body.page-id-334027 .fec-blog-filters {
  margin-top: 32px !important;
}

body.page-id-334027 .fec-blog-filters .fec-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

body.page-id-334027 .fec-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 11px 22px;
  background: transparent;
  border: 1.5px solid rgba(40, 53, 130, 0.22);
  border-radius: 999px;
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #283582;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  line-height: 1;
  transition:
    background 240ms cubic-bezier(0.165, 0.84, 0.44, 1),
    border-color 240ms cubic-bezier(0.165, 0.84, 0.44, 1),
    color 240ms cubic-bezier(0.165, 0.84, 0.44, 1),
    transform 240ms cubic-bezier(0.165, 0.84, 0.44, 1),
    box-shadow 240ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

body.page-id-334027 .fec-filter-chip:hover {
  background: rgba(60, 163, 221, 0.10);
  border-color: #3ca3dd;
  color: #3ca3dd;
  transform: translateY(-1px);
}

body.page-id-334027 .fec-filter-chip.is-active {
  background: #283582;
  border-color: #283582;
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(40, 53, 130, 0.18);
}

body.page-id-334027 .fec-filter-chip.is-active:hover {
  background: #1f2966;
  border-color: #1f2966;
  color: #ffffff;
}

body.page-id-334027 .fec-filter-chip:focus-visible {
  outline: 2px solid #3ca3dd;
  outline-offset: 3px;
}

@media (max-width: 780px) {
  body.page-id-334027 .fec-blog-filters .fec-filter-chips {
    gap: 8px;
  }
  body.page-id-334027 .fec-filter-chip {
    padding: 9px 16px;
    font-size: 11.5px;
    letter-spacing: 0.14em;
  }
}

/* =========================================================================
   V3 ITERATION #2 (David 2026-05-05) — filter chips into their own
   hero-styled section + cat-tag pill selector fix.
   ========================================================================= */

/* ---- FILTER SECTION (hero-style, animated navy bg) ----------------------- */

body.page-id-334027 .fec-filter-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #1f2966 0%, #283582 50%, #1f2966 100%);
  background-size: 200% 200%;
  animation: fecFilterBgShift 22s ease-in-out infinite;
  isolation: isolate;
}

@keyframes fecFilterBgShift {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
}

/* Floating cyan blur orb — drifts slowly behind chips */
body.page-id-334027 .fec-filter-section::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -10%;
  width: 55%;
  height: 220%;
  background: radial-gradient(ellipse at center, rgba(60, 163, 221, 0.55) 0%, rgba(60, 163, 221, 0.15) 40%, transparent 70%);
  filter: blur(60px);
  opacity: 0.85;
  animation: fecFilterGlowDrift 16s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* Counter orb on the left — adds visual rhythm */
body.page-id-334027 .fec-filter-section::after {
  content: "";
  position: absolute;
  bottom: -60%;
  left: -8%;
  width: 38%;
  height: 200%;
  background: radial-gradient(ellipse at center, rgba(60, 163, 221, 0.32) 0%, rgba(40, 53, 130, 0.12) 50%, transparent 75%);
  filter: blur(50px);
  opacity: 0.7;
  animation: fecFilterGlowDrift2 19s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes fecFilterGlowDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-12%, 6%) scale(1.12); }
  66% { transform: translate(8%, -4%) scale(0.92); }
}

@keyframes fecFilterGlowDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(10%, -8%) scale(1.18); }
}

/* Section content sits ABOVE the orbs */
body.page-id-334027 .fec-filter-section > .et_pb_row {
  position: relative;
  z-index: 1;
}

/* Filter eyebrow (small Cyan caps above chips) */
body.page-id-334027 .fec-filter-eyebrow p {
  margin: 0;
  font-family: "Rubik", sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #3ca3dd;
  opacity: 0;
  transform: translateY(6px);
  animation: fecFilterFadeIn 600ms cubic-bezier(0.165, 0.84, 0.44, 1) 100ms forwards;
}

/* Chips on dark hero bg — invert from cool-white default to glassy white */
body.page-id-334027 .fec-filter-section .fec-filter-chip {
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.20);
  color: #ffffff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  /* Stagger entrance */
  opacity: 0;
  transform: translateY(10px);
  animation: fecFilterFadeIn 700ms cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

body.page-id-334027 .fec-filter-section .fec-filter-chip:nth-child(1) { animation-delay: 200ms; }
body.page-id-334027 .fec-filter-section .fec-filter-chip:nth-child(2) { animation-delay: 280ms; }
body.page-id-334027 .fec-filter-section .fec-filter-chip:nth-child(3) { animation-delay: 360ms; }
body.page-id-334027 .fec-filter-section .fec-filter-chip:nth-child(4) { animation-delay: 440ms; }
body.page-id-334027 .fec-filter-section .fec-filter-chip:nth-child(5) { animation-delay: 520ms; }

@keyframes fecFilterFadeIn {
  to { opacity: 1; transform: translateY(0); }
}

body.page-id-334027 .fec-filter-section .fec-filter-chip:hover {
  background: rgba(60, 163, 221, 0.30);
  border-color: rgba(60, 163, 221, 0.85);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(60, 163, 221, 0.25);
}

body.page-id-334027 .fec-filter-section .fec-filter-chip.is-active {
  background: #3ca3dd;
  border-color: #3ca3dd;
  color: #ffffff;
  box-shadow: 0 10px 32px rgba(60, 163, 221, 0.40);
}

body.page-id-334027 .fec-filter-section .fec-filter-chip.is-active:hover {
  background: #2e96d1;
  border-color: #2e96d1;
  transform: translateY(-2px);
}

body.page-id-334027 .fec-filter-section .fec-filter-chip:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

/* Reduce-motion users: pause animations */
@media (prefers-reduced-motion: reduce) {
  body.page-id-334027 .fec-filter-section,
  body.page-id-334027 .fec-filter-section::before,
  body.page-id-334027 .fec-filter-section::after,
  body.page-id-334027 .fec-filter-section .fec-filter-chip,
  body.page-id-334027 .fec-filter-eyebrow p {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =========================================================================
   FILTER SECTION RESTRUCTURE (2026-05-06) — 2-row layout
   Top row: eyebrow LEFT + Divi search module RIGHT
   Bottom row: filter chips LEFT + sort dropdown RIGHT
   Reference: kuhnrikon.com filter strip (client anchor) — FEC-tone adaptation
   ========================================================================= */

/* TOP ROW — eyebrow + search inline */
body.page-id-334027 .fec-filter-top-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

body.page-id-334027 .fec-filter-top-row > .et_pb_column {
  margin-bottom: 0 !important;
}

body.page-id-334027 .fec-filter-top-row > .et_pb_column.et-last-child,
body.page-id-334027 .fec-filter-top-row > .et_pb_column:last-child {
  margin-bottom: 0 !important;
}

/* Eyebrow LEFT-aligned in top row (overrides centered default) */
body.page-id-334027 .fec-filter-top-row .fec-filter-eyebrow {
  margin-bottom: 0 !important;
}
body.page-id-334027 .fec-filter-top-row .fec-filter-eyebrow p {
  text-align: left;
  margin: 0;
}

/* Hairline separator between top and bottom rows */
body.page-id-334027 .fec-filter-section .fec-filter-top-row {
  padding-bottom: 24px;
  margin-bottom: 28px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* BOTTOM ROW — chips + sort inline */
body.page-id-334027 .fec-filter-bottom-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

body.page-id-334027 .fec-filter-bottom-row > .et_pb_column {
  margin-bottom: 0 !important;
}

body.page-id-334027 .fec-filter-bottom-row .fec-blog-filters {
  margin: 0 !important;
}

/* DIVI SEARCH MODULE — restyle for navy hero bg ---------------------------- */

body.page-id-334027 .fec-search.et_pb_search {
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  border: 0 !important;                       /* kill Divi default 1px solid #ddd */
}

/* When search is stacked BELOW sort dropdown in the same column,
   give them proper breathing room + match horizontal alignment */
body.page-id-334027 .fec-filter-bottom-row .fec-sort-control-wrap + .fec-search,
body.page-id-334027 .fec-filter-bottom-row .fec-search.et_pb_search:not(:first-child) {
  margin-top: 18px !important;
}

body.page-id-334027 .fec-search .et_pb_searchform {
  position: relative;
  margin: 0;
  padding: 0;
  background: transparent !important;     /* kill Divi's square form bg */
  border-radius: 999px !important;        /* match input pill in case bg ever leaks */
}

body.page-id-334027 .fec-search input.et_pb_s {
  width: 100% !important;
  height: 48px !important;
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.20) !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  font-family: "Avenir", "Avenir Next", "Inter", sans-serif !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  padding: 0 60px 0 24px !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
  transition:
    background-color 240ms cubic-bezier(0.165, 0.84, 0.44, 1),
    border-color 240ms cubic-bezier(0.165, 0.84, 0.44, 1),
    box-shadow 240ms cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

body.page-id-334027 .fec-search input.et_pb_s::placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
  opacity: 1 !important;
}

body.page-id-334027 .fec-search input.et_pb_s:focus {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: #3ca3dd !important;
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(60, 163, 221, 0.22) !important;
}

/* Submit button — wider cyan pill with magnifier icon */
body.page-id-334027 .fec-search input.et_pb_searchsubmit {
  position: absolute !important;
  right: 1px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 47px !important;
  height: 47px !important;
  min-height: 0 !important;                  /* kill Divi default min-height: 100% */
  padding: 0 !important;
  background-color: #3ca3dd !important;
  border: 0 !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  font-size: 0 !important;
  color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px 16px !important;
  transition: background-color 240ms cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

body.page-id-334027 .fec-search input.et_pb_searchsubmit:hover {
  background-color: #2e96d1 !important;
}

body.page-id-334027 .fec-search input.et_pb_searchsubmit:focus-visible {
  outline: 2px solid #ffffff !important;
  outline-offset: 2px !important;
}

/* SORT DROPDOWN — glassy pill, native <select> + custom chevron ------------ */

body.page-id-334027 .fec-sort-control {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}

body.page-id-334027 .fec-sort-wrap {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

body.page-id-334027 .fec-sort-wrap .fec-sort-label {
  font-family: "Rubik", sans-serif;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.60);
  white-space: nowrap;
}

body.page-id-334027 .fec-sort-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255, 255, 255, 0.20);
  border-radius: 999px;
  color: #ffffff;
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  padding: 11px 42px 11px 22px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 12px;
  transition:
    background-color 240ms cubic-bezier(0.165, 0.84, 0.44, 1),
    border-color 240ms cubic-bezier(0.165, 0.84, 0.44, 1),
    box-shadow 240ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

body.page-id-334027 .fec-sort-select:hover {
  background-color: rgba(60, 163, 221, 0.20);
  border-color: rgba(60, 163, 221, 0.65);
}

body.page-id-334027 .fec-sort-select:focus-visible {
  outline: 2px solid #3ca3dd;
  outline-offset: 3px;
}

body.page-id-334027 .fec-sort-select option {
  background: #1f2966;
  color: #ffffff;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

/* Responsive: stack rows on tablet/mobile */
@media (max-width: 980px) {
  body.page-id-334027 .fec-filter-top-row,
  body.page-id-334027 .fec-filter-bottom-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  body.page-id-334027 .fec-filter-top-row .fec-filter-eyebrow {
    margin-bottom: 14px !important;
  }
  body.page-id-334027 .fec-sort-control {
    justify-content: flex-start;
    margin-top: 16px;
  }
  body.page-id-334027 .fec-sort-wrap {
    width: 100%;
  }
  body.page-id-334027 .fec-sort-select {
    flex: 1;
  }
}

/* ---- CAT-TAG PILL (selector fix for Divi 4.27 rel="tag" only) ----------- */

body.page-id-334027 .fec-blog-grid .et_pb_post .post-meta a[href*="/category/"] {
  display: inline-block !important;
  padding: 7px 14px !important;
  background: #3ca3dd !important;             /* solid Cyan — KR-orange logic */
  color: #ffffff !important;
  border-radius: 999px !important;
  font-family: "Rubik", sans-serif !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  transition: background 240ms cubic-bezier(0.165, 0.84, 0.44, 1),
              transform 240ms cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

body.page-id-334027 .fec-blog-grid .et_pb_post .post-meta a[href*="/category/"]:hover {
  background: #2e96d1 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}