/* ===========================================================================
   AS FEATURED IN  |  scoped styles (prefix: fi-)
   Loaded on the home page and About Us via `extraCss` in src/data/pages.json.

   Built to sit inside the arkvet-wp look, not beside it, so every value below
   is borrowed from main.css rather than invented:
     section title 50px / 40px mobile, Montserrat 700, #24334c, centred
       (same as .testi-h__title, .vete-h__title, .ab-team__title)
     section padding 100px 0            (.testi-h)
     list starts 50px under the lede    (.testi-h__list)
     card radius 30px                   (.testi-h__card, .vete-h__item)
     card headline 24px Montserrat 600  (.vete-h__item__link)
     body copy 18px Muli 300            (.testi-h__card__desc)
     CTA 18px with a 10px gap           (.vete-h__item__cta)
   The one deliberate departure: the theme fills its cards dark navy, which
   would swallow two publisher logos printed in their own colours. Cream is
   the theme's other surface (see .vete-h, .intro-h) so the cards use that.

   The publisher logos in assets/img/media/ are those publishers' trademarks.
   They are here only to state, truthfully, where AVH Animal Ark was written
   about, and every one of them links out to the original article. Do not
   recolour or crop them, and do not republish the publishers' photographs
   next to them.

   SPACING SCALE: 8 / 10 / 12 / 20 / 24 / 30 / 44 / 50 / 100
   BREAKPOINT: 992px, the same one the theme uses.
   =========================================================================== */
.fi-scope {
  --fi-yellow: #eeb626;   /* accents and fills only, never small text */
  --fi-gold: #8a6a12;     /* the accessible gold, for text on white/cream */
  --fi-navy: #24334c;
  --fi-slate: #3a4459;
  --fi-cream: #fff7e9;
  --fi-line: #efe2ca;
  --fi-body: var(--font-muli, "Muli", "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --fi-head: var(--font-montserrat, "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--fi-body);
  font-weight: 300;
  line-height: 1.55;
  color: var(--fi-navy);
  padding: 100px 0;
}

.fi-scope *,
.fi-scope *::before,
.fi-scope *::after { box-sizing: border-box; }

/* ---- heading ------------------------------------------------------------ */
.fi__head { text-align: center; }

.fi__title {
  font-family: var(--fi-head);
  font-size: 50px;
  font-weight: 700;
  color: var(--fi-navy);
  margin: 0 0 20px;
}

.fi__lede {
  font-size: 18px;
  font-weight: 300;
  color: var(--fi-slate);
  margin: 0 auto;
  max-width: 760px;
}

/* ---- cards -------------------------------------------------------------- */
/* flex-basis 0 with flex-grow 1 keeps both cards exactly the same width and
   lets them fill the 1140px container, which is what stopped the first draft
   from looking stranded in the middle of the page. */
.fi__list {
  list-style: none;
  margin: 50px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.fi__item {
  flex: 1 1 340px;
  display: flex;
  min-width: 0;
}

.fi__link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 100%;
  padding: 44px 48px;
  background-color: var(--fi-cream);
  border: 1px solid var(--fi-line);
  border-radius: 30px;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease-in-out;
}

.fi__link:hover,
.fi__link:focus-visible {
  transform: translateY(-4px);
  border-color: var(--fi-yellow);
  box-shadow: 0 14px 30px rgba(36, 51, 76, 0.12);
  text-decoration: none;
  color: inherit;
}

.fi__link:focus-visible {
  outline: 3px solid var(--fi-navy);
  outline-offset: 3px;
}

/* Fixed-height row so logos of very different proportions (CNA is a tall
   mark, AsiaOne a wide wordmark) sit on one optical baseline while both stay
   flush to the left edge of the card. */
.fi__logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 104px;
  margin-bottom: 24px;
}

.fi__logo img {
  display: block;
  width: auto;
  max-width: 100%;
}

.fi__logo--cna img { height: 100px; }
.fi__logo--asiaone img { height: 40px; }

.fi__headline {
  display: block;
  font-family: var(--fi-head);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--fi-navy);
  margin-bottom: 12px;
}

.fi__note {
  display: block;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--fi-slate);
  margin-bottom: 24px;
}

.fi__cta {
  display: inline-flex;
  align-items: center;
  column-gap: 10px;
  margin-top: auto;
  font-size: 18px;
  font-weight: 600;
  color: var(--fi-gold);
}

.fi__cta svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  transition: transform 0.3s ease-in-out;
}

.fi__link:hover .fi__cta svg,
.fi__link:focus-visible .fi__cta svg {
  transform: translate(3px, -3px);
}

@media (prefers-reduced-motion: reduce) {
  .fi__link,
  .fi__cta svg { transition: none; }
  .fi__link:hover,
  .fi__link:focus-visible { transform: none; }
  .fi__link:hover .fi__cta svg { transform: none; }
}

/* ---- mobile ------------------------------------------------------------- */
@media (max-width: 992px) {
  .fi-scope { padding: 70px 0; }
  .fi__title { font-size: 40px; }
  .fi__lede { font-size: 17px; }
  .fi__list { margin-top: 36px; gap: 20px; }
  .fi__item { flex: 1 1 100%; }
  .fi__link { padding: 32px 28px; }
  .fi__logo { height: 84px; margin-bottom: 20px; }
  .fi__logo--cna img { height: 80px; }
  .fi__logo--asiaone img { height: 34px; }
  .fi__headline { font-size: 21px; }
  .fi__note { font-size: 16px; margin-bottom: 20px; }
  .fi__cta { font-size: 17px; }
}