/*!*************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/news-feed/style.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************/
/**
 * mea/news-feed
 *
 * Figma node 2008:7838, "News Press Section" on /insights (1440 x 698).
 * Measured from that node, and every value below is one of its own:
 *
 *   section    #fafafa ground, 120px side gutter, 100px top and bottom,
 *              48px between the header and the row list        -> 698 total
 *   header     2008:7839, eyebrow gap 17, body gap 37, width 1200
 *   row        2008:7846, 96px tall, #e6e6e2 hairline BELOW each row
 *              (three rows, three hairlines - there is none above the first,
 *              confirmed by sampling the node render at y 405 / 501 / 597)
 *   row inner  outlet column 150 fixed, 48px gap, headline fills the rest,
 *              7px to the meta group, date then 16px then a 16px arrow
 *
 * Colour and family resolve through tokens.css only. The three inks the node
 * paints all already exist there: #1c1c1a --mea-ink-display (eyebrow,
 * headline, body, row headline, arrow), #3e6a64 --mea-ink-eyebrow (outlet),
 * #5a5a56 --mea-ink-2 (date), #e6e6e2 --mea-rule-light (hairline).
 */
.mea-news-feed {
  /* Subpage frames use a 120px section gutter against the homepage's 88px,
     so rebind the shared gutter rather than bypass .mea-container.
     120 / 1440 = 8.3333vw. */
  --mea-gutter: clamp(20px, 8.3333vw, 120px);
  /* #1c1c1a is the foreground the node paints on the header AND on the row
     headline, so it is bound on the root as a custom property: the composed
     mea/section-header root reads --mea-fg, a plain `color` would not reach
     it (see foreground.css). */
  --mea-fg: var(--mea-ink-display);
  box-sizing: border-box;
  padding-block: 100px;
  background-color: var(--mea-surface);
  color: var(--mea-ink-display);
}
.mea-news-feed__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.mea-news-feed {
  /* ------------------------------------------------------------------ *
   * Header
   *
   * The shape is mea/section-header, composed by render.php. Only the two
   * gaps are tuned here, and only for this instance: 2008:7840 sets 17px
   * between eyebrow and headline and 2008:7839 sets 37px between headline
   * and body, and section-header's own steps are 16 / 20 / 24. Scoped one
   * level deeper than section-header's own selectors so this wins whatever
   * order the two block stylesheets print in.
   * ------------------------------------------------------------------ */
  /* `& &__header`, not `&__header`, deliberately: section-header's own
     `--spacing-compact __stack` rule scores (0,2,0), so an equal-weight
     override here would be settled by whichever of the two block
     stylesheets prints last - measured as 16px, not 17. Writing the root
     class literally inside this block does NOT work: Sass prefixes the
     parent onto it and the result needs a .mea-news-feed inside a
     .mea-news-feed, which matches nothing. */
}
.mea-news-feed .mea-news-feed__header .mea-section-header__stack {
  gap: 17px;
}
.mea-news-feed__header .mea-section-header__body {
  margin-top: 20px; /* 17 + 20 = the node's 37 */
}
.mea-news-feed {
  /* section-header's light tone paints its eyebrow --mea-ink (#2e2e2b);
     this instance's eyebrow is #1c1c1a, the same ink as everything else in
     the header. */
}
.mea-news-feed__header .mea-section-header--light .mea-section-header__eyebrow {
  color: var(--mea-ink-display);
}
.mea-news-feed {
  /* ------------------------------------------------------------------ *
   * Rows
   * ------------------------------------------------------------------ */
}
.mea-news-feed__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mea-news-feed {
  /* --------------------------------------------------------------- *
   * The archive (/news). Same 2008:7838 box and the same row; the
   * only difference is that the list runs past three, so all this
   * layout adds is hiding what the script has not revealed yet.
   * --------------------------------------------------------------- */
}
.mea-news-feed--layout-archive .mea-news-feed__item[hidden] {
  display: none;
}
.mea-news-feed {
  /* --------------------------------------------------------------- *
   * The row under the list: /insights' "View all news" link and the
   * archive's Load more button.
   *
   * COLOUR is mea/proof's pale pill as drawn on /mea-ingestion ("See the
   * ingestion story"), which is `.mea-cta` with the `--soft` treatment:
   * a #ddebd0 fill and --mea-cta-ink. GEOMETRY is this block's own, not
   * `.mea-cta`'s: that component is 333x55 at 21px and reads as a
   * page-level call to action under a row list, so the 12/24 padding and
   * the 14px two-weight label stay.
   *
   * Measured: ink 14.7:1 on the fill, 13.4:1 hovered. The fill itself is
   * only 1.19:1 against --mea-surface, so the button's EDGE is faint -
   * that is the component's own behaviour on /mea-ingestion too, where
   * the section ground is a shade darker than this one.
   * --------------------------------------------------------------- */
}
.mea-news-feed__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.mea-news-feed {
  /* render.php ships the archive's control group `hidden` so a
     script-less visitor never meets a dead button; the flex above would
     otherwise beat the attribute's own UA rule. */
}
.mea-news-feed__actions[hidden] {
  display: none;
}
.mea-news-feed__status {
  margin: 0;
  font-family: var(--mea-font-mono);
  font-weight: var(--mea-weight-regular);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--mea-ink-2);
  text-transform: uppercase;
}
.mea-news-feed__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 12px 24px;
  border: 0;
  border-radius: var(--mea-pill-radius);
  /* #ddebd0 is the pale "Link" component instance (2005:6664) that
     mea/proof draws on /mea-ingestion, and it is a literal there for a
     reason its own stylesheet records: the shared layer's
     --mea-pill-bg is the 20% lime wash the DETACHED MGA pill uses
     (2008:6915), which composites to #e7f4d6 on #fafafa and is 10/255
     off the component. Kept as a literal here for the same reason
     rather than naming it in the shared palette. */
  background: #ddebd0;
  color: var(--mea-cta-ink);
  font-family: var(--mea-font-sans);
  font-size: 14px;
  line-height: normal;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.mea-news-feed {
  /* The link form is written at (0,3,1) on purpose: foreground.css's
     `[class*="wp-block-mea-"] a:hover` scores (0,2,1), deliberately above
     its own resting rule, so a plain `&__cta:hover` at (0,1,1) would lose
     and the ink would silently revert on hover. The button form is not a
     link and needs no such reach. The hover fill is mea/proof's own: the
     shared pill's `filter: brightness(0.92)` is barely visible on a pale
     fill, so it steps one shade of the same hue instead. */
}
.mea-news-feed a.mea-news-feed__cta:hover, .mea-news-feed a.mea-news-feed__cta:focus-visible, .mea-news-feed__cta:hover, .mea-news-feed__cta:focus-visible {
  background-color: #cfe3bd;
  color: var(--mea-cta-ink);
  text-decoration: none;
}
.mea-news-feed__cta:focus-visible {
  outline: 2px solid var(--mea-accent-ink);
  outline-offset: 3px;
}
.mea-news-feed__cta-label {
  /* R6's own separating space before the arrow; a flex item would
     collapse it and the run would need an invented margin. */
  white-space: pre;
  font-weight: var(--mea-weight-semibold);
}
.mea-news-feed__cta-arrow {
  font-weight: var(--mea-weight-regular);
}
.mea-news-feed__item, .mea-news-feed__empty {
  /* The hairline is an inset shadow, not a border: the node's row is a
     fixed 96px with the stroke inside it, and a 1px border would add
     its own height to every row and push the section 3px past 698. */
  box-shadow: inset 0 -1px 0 var(--mea-rule-light);
}
.mea-news-feed__item {
  margin: 0;
}
.mea-news-feed__link, .mea-news-feed__empty {
  /* 22, not the 24 the node declares. Figma centres a 52px content box
     in a fixed 96px frame, so 24 is a floor the fixed height overrides
     and 22 is what it actually renders. min-height lets a headline that
     runs to three lines grow the row instead of clipping it. */
  box-sizing: border-box;
  min-height: 96px;
  padding-block: 22px;
}
.mea-news-feed__link {
  display: flex;
  /* No gap: the node's 1000px main column and 193px meta group leave
     exactly 7px inside the 1200px row, which is what space-between
     distributes. A declared gap would shrink the main column instead. */
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  color: inherit;
}
.mea-news-feed__main {
  display: flex;
  align-items: center;
  gap: 48px;
  flex: 0 1 1000px;
  min-width: 0;
}
.mea-news-feed__publication {
  flex: none;
  width: 150px;
  font-family: var(--mea-font-mono);
  font-weight: var(--mea-weight-light);
  font-size: var(--mea-type-eyebrow-size);
  /* AUTO, matching the eyebrow rule in section-header: every mono node
     in this file reports leading-[normal], which Fira Code resolves to a
     26px line box - the height Figma stores for 2008:7848 and 2008:7851. */
  line-height: normal;
  letter-spacing: var(--mea-type-eyebrow-ls);
  color: var(--mea-ink-eyebrow);
  overflow-wrap: anywhere;
}
.mea-news-feed__title {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--mea-font-sans);
  font-weight: var(--mea-weight-semibold);
  font-size: var(--mea-type-h4-size);
  line-height: var(--mea-type-h4-lh);
  overflow-wrap: anywhere;
}
.mea-news-feed__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: none;
}
.mea-news-feed__date {
  font-family: var(--mea-font-mono);
  font-weight: var(--mea-weight-light);
  font-size: var(--mea-type-eyebrow-size);
  line-height: normal;
  letter-spacing: var(--mea-type-eyebrow-ls);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--mea-ink-2);
  /* CSS puts the tracking after the last glyph too and Figma does not,
     so the date box measured 162 against the node's 161 and, being the
     right-hand end of a space-between row, carried the whole meta group
     1px left of 2008:7850. Reclaiming that one trailing step is the only
     place it matters - every other tracked run in this block is
     left-aligned, where the same 1.5px is invisible. */
  margin-inline-end: calc(var(--mea-type-eyebrow-ls) * -1);
}
.mea-news-feed__arrow {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  transition: transform 0.25s ease;
}
.mea-news-feed__arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}
.mea-news-feed {
  /* ------------------------------------------------------------------ *
   * Interaction
   *
   * The node draws no hover or focus state for these rows, so nothing here
   * changes a painted colour: the arrow nudges the way the file's other
   * arrow targets do, and the headline takes the underline a link is
   * entitled to. Contrast is therefore identical resting and hovered.
   * ------------------------------------------------------------------ */
}
.mea-news-feed__link:hover .mea-news-feed__title, .mea-news-feed__link:focus-visible .mea-news-feed__title {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.mea-news-feed__link:hover .mea-news-feed__arrow, .mea-news-feed__link:focus-visible .mea-news-feed__arrow {
  transform: translateX(4px);
}
.mea-news-feed__link:focus-visible {
  outline: 2px solid var(--mea-accent-ink);
  outline-offset: -4px;
}
.mea-news-feed {
  /* ------------------------------------------------------------------ *
   * Empty state
   *
   * Not drawn in the file. Kept to the row's own geometry so a feed with
   * nothing in it still reads as the list it is, rather than collapsing the
   * section. Copy is the emptyText attribute.
   * ------------------------------------------------------------------ */
}
.mea-news-feed__empty {
  display: flex;
  align-items: center;
  margin: 0;
  font-family: var(--mea-font-sans);
  font-weight: var(--mea-weight-regular);
  font-size: var(--mea-type-p1-size);
  line-height: var(--mea-type-p1-lh);
  color: var(--mea-ink-2);
}
.mea-news-feed {
  /* Visible to a screen reader, not to a sighted user: the only place an
     external row differs from an internal one, since the file draws the
     same arrow on every row. */
}
.mea-news-feed__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.mea-news-feed {
  /* ------------------------------------------------------------------ *
   * Between the stacking breakpoint and the 1440 frame the row keeps its
   * three-part horizontal shape but has NO free space left, so
   * `space-between` has nothing to distribute and the headline box butts
   * straight against the date. Measured on /insights: 7.5px of separation
   * at 1440, then 0.0px at every step from 1366 down to 1024, with the
   * longest headline ("mea Sets the Pace for Agentic AI in Insurance")
   * touching the date on all of them.
   *
   * The cause is the container, not the row: at 1440 the 1200px column
   * fits exactly (1440 - 240 gutters), so the node's own 1000 + 193 leaves
   * the 7px the no-gap note above describes. Below that the column tracks
   * the viewport, the free space goes to zero, and `__main` (flex 0 1
   * 1000px) shrinks until its edge IS the meta group's edge.
   *
   * A column-gap only in that band, so the measured 1440 frame stays
   * byte-identical: declaring a gap there would consume the 7px of free
   * space and shrink the main column, which is exactly what the no-gap
   * note is protecting. Bounded at 1024 because the row stacks below it
   * and `__link` becomes a 12px-gap column.
   * ------------------------------------------------------------------ */
}
@media (min-width: 1024px) and (max-width: 1439px) {
  .mea-news-feed__link {
    column-gap: 32px;
  }
}
.mea-news-feed {
  /* ------------------------------------------------------------------ *
   * Tablet and mobile. Figma supplies only the 1440 frame, so both steps
   * are interpolated from it: the three-part row stacks (outlet, headline,
   * then date and arrow on their own line) because a 150px mono column plus
   * a 161px mono date leaves no measure for a headline below ~1024, and
   * section padding tightens in the same two steps section-header uses.
   * ------------------------------------------------------------------ */
}
@media (max-width: 1023px) {
  .mea-news-feed {
    padding-block: 80px;
  }
  .mea-news-feed__inner {
    gap: 40px;
  }
  .mea-news-feed__link {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .mea-news-feed__main {
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .mea-news-feed__publication {
    width: auto;
    max-width: 100%;
  }
  .mea-news-feed__meta {
    justify-content: space-between;
  }
}
@media (max-width: 767px) {
  .mea-news-feed {
    padding-block: 56px;
  }
  .mea-news-feed__inner {
    gap: 32px;
  }
  .mea-news-feed__publication, .mea-news-feed__date {
    font-size: 16px;
    letter-spacing: 1.2px;
  }
  .mea-news-feed__title {
    font-size: 18px;
  }
  .mea-news-feed__empty {
    font-size: 17px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mea-news-feed__arrow {
    transition: none;
  }
}

/*# sourceMappingURL=style-index.css.map*/