/*
 * Insights listing — Figma node 1:999.
 * Content column 1361 wide inside 40px gutters, starting 178px from the top.
 */

.fi-shell {
  max-width: 1441px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
}

.fi-wrap { padding-top: 96px; }        /* 178 - (27 + 55) nav block */

/* header — node 1:1011 */
.fi-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

.fi-title {                            /* node 1:1012 — Inter 47.636/55.762 */
  width: 668px;
  margin: 0;
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 47.636px;
  line-height: 55.762px;
  letter-spacing: -2.3818px;
}

.fi-filters {                          /* node 1:1013 — Inter 16/18, gap 16 */
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 19px;                    /* node sits 19px below the heading top */
  flex-shrink: 0;
}

.fi-filter {
  padding: 0;
  border: 0;
  background: none;
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 18px;
  letter-spacing: -0.48px;
  text-transform: uppercase;
  color: #000;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.25s ease;
}

.fi-filter:hover,
.fi-filter.is-active { opacity: 1; }

.fi-filters__sep {
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 18px;
  opacity: 0.4;
}

/* grid — node 1:1021: three columns, 25px apart, rows 64px apart.
   minmax(0, 1fr) rather than 1fr: a plain 1fr track cannot shrink below its
   widest item's min-content, and the newsletter form's input + button floor is
   331px — enough to push a 320px phone sideways. */
.fi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 25px;
  row-gap: 64px;
  margin-top: 96px;                    /* 152 - 56 */
}

/* card — node 1:1024 */
a.fi-card {
  color: inherit;
  text-decoration: none;
}

.fi-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.fi-card__media {                      /* 437x303 */
  position: relative;
  width: 100%;
  aspect-ratio: 437 / 303;
  background: #d9d9d9;
  overflow: hidden;
}

.fi-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: none;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fi-card:hover .fi-card__media img { transform: scale(1.04); }

.fi-card__body {                       /* node 1:1051 — gap 8 */
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
}

.fi-card__title {                      /* Arial 24/33.283 */
  margin: 0;
  font-size: 24px;
  line-height: 33.283px;
  letter-spacing: -0.24px;
}

/* Grid rows stretch their cards, so pinning the chips to the bottom keeps them
   on one line across a row whatever the titles do. */
.fi-card__meta {                       /* node 1:1053 — Inter 16/18, gap 16, 70% */
  display: flex;
  gap: 16px;
  margin: auto 0 0;   /* pins the chips to the bottom of an equal-height card */
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 18px;
  letter-spacing: -0.48px;
  text-transform: uppercase;
  white-space: nowrap;
}

.fi-card__meta span { opacity: 0.7; }

/* newsletter — node 1:1056.
   Acid green, on the client's note that the segment should be the one thing on
   the page that grabs you. It is a grid cell like any card, so it stretches to
   the row and reads as a solid block among the white ones — no extra rule, no
   badge, just the only colour in the listing. */
.fi-news {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  min-height: 420px;
  padding: 32px;
  box-sizing: border-box;
  background: var(--fh-acid);
}

.fi-news__copy {                       /* node 1:1057 — gap 27 */
  display: flex;
  flex-direction: column;
  gap: 27px;
}

.fi-news__title {                      /* Arial 28/27.374 */
  margin: 0;
  font-size: 28px;
  line-height: 27.374px;
  letter-spacing: -1.4px;
  text-transform: uppercase;
}

.fi-news__body {                       /* Arial 19/24 */
  margin: 0;
  font-size: 19px;
  line-height: 24px;
  letter-spacing: -0.19px;
}

.fi-news__form {                       /* node 1:1060 — 16px padding, 1px rule under */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  /* Darker than the equivalent rules elsewhere: 0.2 black reads as a crease on
     white and as nothing at all on the green. */
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.fi-news__form input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 18px;
  letter-spacing: -0.48px;
  text-transform: uppercase;
  color: #000;
}

.fi-news__form input::placeholder { color: rgba(0, 0, 0, 0.6); }
.fi-news__form input:focus { outline: none; }

.fi-news__form button {                /* Inter 18/27, underlined */
  flex-shrink: 0;
  /* No padding reset here: figma-home.css gives every link-button a hit area
     as padding cancelled by a negative margin. Zeroing the padding left the
     margin standing, which pushed the word 16px past the form's inner edge. */
  border: 0;
  background: none;
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 27px;
  letter-spacing: -0.54px;
  text-transform: uppercase;
  color: #000;
  cursor: pointer;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- closing CTA — node 1:1118 ----------
   The page ends on the shared CTA block, so it carries the closing space.
   Scoped to .fi so the home page keeps its own rhythm. */

.fi .fh-cta { padding-bottom: 160px; }

/* ---------- responsive ---------- */

@media (max-width: 1439px) {
  .fi-title { width: 55%; }
}

@media (max-width: 1100px) {
  .fi-shell { padding: 0 24px; }
  .fi-title { font-size: 34px; line-height: 40px; letter-spacing: -1.6px; }
  .fi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; margin-top: 64px; }
  .fi-card__title { font-size: 20px; line-height: 27px; }
}

@media (max-width: 820px) {
  .fi-shell { padding: 0 20px; }
  .fi-wrap { padding-top: 56px; }
  .fi-head { flex-direction: column; gap: 24px; }
  .fi-title { width: 100%; font-size: 28px; line-height: 34px; letter-spacing: -1.2px; }

  /*
   * Stacked, the four filters plus their slashes are wider than a phone, and
   * wrapping them strands a separator at the end of the first line. A single
   * scrolling row bleeding to the screen edge keeps the "/" language intact and
   * cannot dangle. Vertical padding is there to give the buttons a real tap
   * target — 18px of line box is not one.
   */
  .fi-filters {
    /* .fi-head aligns to flex-start, so without this the strip sizes to its
       content and the overflow container is never constrained — it sticks out
       instead of scrolling. */
    align-self: stretch;
    min-width: 0;
    margin-top: 0;
    margin-right: -20px;
    padding-right: 20px;
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .fi-filters::-webkit-scrollbar { display: none; }
  /* 13px above and below an 18px line: a 44px tap target. */
  .fi-filter { padding: 13px 0; }

  .fi-grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; margin-top: 40px; }
  .fi-card__title { font-size: 19px; line-height: 26px; }
  .fi-card__meta { flex-wrap: wrap; gap: 8px 16px; white-space: normal; }

  /* The same card as the footer's newsletter (.fh-sub): 24px of green on
     every side, the copy and the field on one edge inside it. */
  .fi-news { min-height: 0; gap: 32px; padding: 32px 24px; }
  .fi-news__copy { gap: 20px; }

  /* The band's own padding is its gap; a margin on top of it doubled the
     white above the title. */
  .fi .fh-cta { margin-top: 0; padding-bottom: 0; }
}

@media (max-width: 480px) {
  .fi-wrap { padding-top: 40px; }
  .fi-head { gap: 20px; }

  /* With the slashes the four filters are wider than a phone and the strip has
     to scroll; without them they sit on one line at 375px and up. */
  .fi-filters__sep { display: none; }
  .fi-filters { gap: 16px; }
  .fi-title { font-size: 25px; line-height: 30px; letter-spacing: -1px; }
  .fi-grid { row-gap: 32px; margin-top: 32px; }
  .fi-card { gap: 16px; }
  /* Title at the copy's style and the meta in the site's one caps style, so a
     card is the heading, its title, its tags. */
  .fi-card__title { font-size: 17px; line-height: 23px; letter-spacing: -0.19px; }
  .fi-card__meta,
  .fi-filter { font-family: Arial, Helvetica, sans-serif; letter-spacing: -0.8px; }

  .fi-news__title { font-size: 22px; letter-spacing: -1.1px; }
  .fi-news__body { font-size: 17px; line-height: 23px; }


  /* The footer's own top margin is the gap after the band. */
  .fi .fh-cta { padding-bottom: 0; }
}