/* ==========================================================================
   NTV — Latest Intelligence cards
   Rows of three: one feature card (square image left, text right) with two
   text-only cards stacked beside it. The feature card alone sets the row
   height and the pair fits itself to that, so both sides of a row end level
   and the image stays a true square.
   The image is square at every width: beside the text on desktop and tablet,
   full-width above the text on phones.
   Unpadded by design: meant to sit inside a column that already has its own
   max-width container.
   ========================================================================== */

.ntv-li {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.ntv-li__header {
  padding-bottom: 14px;
  margin-bottom: 22px;
  border-bottom: 2px solid #e6e8ec;
}

.ntv-li__header h2 {
  font-family: "Archivo", "Inter", sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #0e2a57;
  margin: 0 0 6px;
}

.ntv-li__header p {
  font-size: 14px;
  color: #5b6472;
  margin: 0;
  max-width: 640px;
}

.ntv-li__empty {
  color: #5b6472;
  padding: 18px 0;
  margin: 0;
}

/* --- Layout ------------------------------------------------------------- */

.ntv-li-grid {
  display: grid;
  gap: 24px;
}

/* Feature left, stacked pair right. The feature column is wider so the square
   image doesn't squeeze its own text column down to nothing. */
.ntv-li-row {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}

/* Trailing row with nothing to pair against. */
.ntv-li-row > .ntv-li-card--feature:only-child {
  grid-column: 1 / -1;
}

.ntv-li-row__pair {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

/* Size containment means the pair adds nothing to the row's height, so the
   square feature card decides it and the pair is stretched to match. Without
   it, long text cards could push the row taller than the image and stretch
   the image out of square. Only applied when the feature actually has an
   image; otherwise the row sizes normally. */
.ntv-li-row:has(> .ntv-li-card--feature .ntv-li-card__thumb) > .ntv-li-row__pair {
  contain: size;
}

/* Equal shares of the feature's height, whatever that turns out to be. */
.ntv-li-row__pair > .ntv-li-card {
  flex: 1 1 0;
  min-height: 0;
}

/* --- Card --------------------------------------------------------------- */

.ntv-li-card {
  background: #fff;
  border: 1px solid #d0d4dd;
  border-radius: 4px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.ntv-li-card:hover {
  box-shadow: 0 8px 24px rgba(10, 20, 45, 0.12);
  transform: translateY(-2px);
}

.ntv-li-card--feature {
  flex-direction: row;
  align-items: stretch;
  gap: 24px;
  padding: 24px;
}

/* --- Feature image ------------------------------------------------------ */

/* Square, bled to three edges of the card. Because the negative top/bottom
   margins cancel the padding, the image ends up exactly as tall as the card —
   which is what makes the pair beside it land level. */
.ntv-li-card__thumb {
  display: block;
  flex: 0 0 45%;
  aspect-ratio: 1 / 1;
  background: #e6e8ec;
  overflow: hidden;
  margin: -24px 0 -24px -24px;
  border-radius: 4px 0 0 4px;
}

.ntv-li-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.ntv-li-card:hover .ntv-li-card__thumb img {
  transform: scale(1.04);
}

/* --- Card text ---------------------------------------------------------- */

.ntv-li-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.ntv-li-card--feature .ntv-li-card__body {
  flex: 1 1 0;
}

/* Same idea inside the feature card: the text column is contained so the
   square image alone sets the card height, and the text can never stretch
   the image taller than it is wide. If the copy runs long, the excerpt gives
   up space first. */
.ntv-li-card--feature:has(.ntv-li-card__thumb) .ntv-li-card__body {
  contain: size;
}

.ntv-li-card--text .ntv-li-card__body {
  justify-content: flex-start;
}

.ntv-li-card__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #c8102e;
  margin-bottom: 8px;
}

.ntv-li-card h3 {
  font-family: "Archivo", "Inter", sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 8px;
  color: #0e2a57;
}

.ntv-li-card--feature h3 {
  font-size: 22px;
  line-height: 1.2;
  margin-bottom: 10px;
}

.ntv-li-card:hover h3 {
  color: #c8102e;
}

.ntv-li-card a {
  text-decoration: none;
  color: inherit;
}

.ntv-li-card a:focus-visible {
  outline: 2px solid #c8102e;
  outline-offset: 3px;
}

.ntv-li-card p {
  font-size: 13.5px;
  color: #5b6472;
  line-height: 1.5;
  margin: 0;
}

.ntv-li-card--feature p {
  font-size: 14.5px;
  line-height: 1.55;
}

/* Clamps keep every card inside the height the row gives it. */
.ntv-li-card h3 a,
.ntv-li-card p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ntv-li-card--feature h3 a {
  -webkit-line-clamp: 3;
}

.ntv-li-card--feature p {
  -webkit-line-clamp: 4;
}

.ntv-li-card--text h3 a {
  -webkit-line-clamp: 2;
}

/* The excerpt absorbs whatever height the title leaves. The mask fades the
   last 20px so an overrun reads as a soft trail-off instead of a sliced line.
   When the excerpt is short the box still fills the space, so the fade lands
   on empty area and is invisible. */
.ntv-li-card--text p {
  flex: 1 1 auto;
  min-height: 0;
  -webkit-line-clamp: 4;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent);
}

/* A lone card in a row has the whole column to itself — no need to clamp or
   fade it. */
.ntv-li-row__pair > .ntv-li-card:only-child p {
  display: block;
  -webkit-line-clamp: none;
  -webkit-mask-image: none;
  mask-image: none;
}


/* --- Responsive --------------------------------------------------------- */

/* Just above the single-column breakpoint the feature card is at its
   narrowest, so the square is smallest. One fewer excerpt line keeps a long
   title plus excerpt inside it. */
@media (min-width: 1101px) and (max-width: 1200px) {
  .ntv-li-card--feature p {
    -webkit-line-clamp: 3;
  }
}

/* Below 1100px the row collapses to a single column. The feature card keeps
   its image-left layout (now full width, so the square has plenty of room
   beside the text). The pair drops underneath and no longer has a height to
   match, so the equal-height machinery on the text cards — containment, flex
   shares, clamps, fade mask — comes off here. */
@media (max-width: 1100px) {
  .ntv-li-grid {
    gap: 28px;
  }

  .ntv-li-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .ntv-li-row__pair,
  .ntv-li-row:has(> .ntv-li-card--feature .ntv-li-card__thumb) > .ntv-li-row__pair {
    contain: none;
    gap: 20px;
  }

  /* Every text card sizes to its own content. */
  .ntv-li-row__pair > .ntv-li-card {
    flex: 0 0 auto;
    min-height: 0;
  }

  /* Only the text cards are unclamped here. The feature card is still the
     square side-by-side layout, so its text stays clamped to fit. */
  .ntv-li-card--text h3 a,
  .ntv-li-card--text p {
    display: block;
    -webkit-line-clamp: none;
    -webkit-mask-image: none;
    mask-image: none;
    overflow: visible;
  }

  .ntv-li-card--text p {
    flex: 0 0 auto;
  }
}

/* Phones: the feature goes image-on-top as a full-width square, and the text
   below it sizes to its own content. */
@media (max-width: 768px) {
  .ntv-li-card {
    padding: 16px;
  }

  .ntv-li-card--feature {
    flex-direction: column;
    gap: 0;
    padding: 20px;
  }

  .ntv-li-card--feature .ntv-li-card__thumb {
    flex: none;
    width: auto;
    aspect-ratio: 1 / 1;
    margin: -20px -20px 16px -20px;
    border-radius: 4px 4px 0 0;
  }

  .ntv-li-card--feature .ntv-li-card__body,
  .ntv-li-card--feature:has(.ntv-li-card__thumb) .ntv-li-card__body {
    flex: none;
    contain: none;
    justify-content: flex-start;
  }

  .ntv-li-card--feature h3 a,
  .ntv-li-card--feature p {
    display: block;
    -webkit-line-clamp: none;
    overflow: visible;
  }
}

@media (max-width: 560px) {
  .ntv-li-card--feature h3 {
    font-size: 21px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ntv-li-card {
    transition: none;
  }
  .ntv-li-card:hover {
    transform: none;
    box-shadow: none;
  }
  .ntv-li-card__thumb img {
    transition: none;
  }
  .ntv-li-card:hover .ntv-li-card__thumb img {
    transform: none;
  }
}