/*
 * insights-feed.css — Toro Legal Marketing
 * Figma node: 377:2549 (Blog Page / Option 1 — dynamic feed + pagination)
 *
 * The filtered listing of insight posts: a 3-col card grid plus a
 * numbered pager beneath it.
 *
 * FacetWP contract:
 *   - .tlm-insights-feed__listing is the LISTING CONTAINER — the
 *     element FacetWP refreshes via AJAX. Only the card grid lives
 *     inside it. At WP-port time this becomes the FacetWP Listing /
 *     facetwp-template wrapper.
 *   - .tlm-insights-feed__pagination is the PAGER — a FacetWP pager
 *     facet at WP time. It sits inside the listing container because
 *     it IS part of what the pager facet re-renders.
 *   - The hero filter bar (category + search facets) stays OUTSIDE
 *     this whole section so it survives the refresh.
 *
 * Card = exact replica of the blog-single-related card, stripped to
 * image + title + arrow (no category / excerpt / date / author per
 * brief). Card values match blog-single-related.css 1:1: 250px cream
 * media header, 24px padding, Halant 24 title, 56px arrow circle,
 * --radius-xl, --color-grey-200 border, arrow-only hover.
 */

.tlm-insights-feed {
  background: var(--color-white);
  /* Match the mobile section rhythm of the sibling index pages (40px);
     the larger top/bottom rhythm restores at 1024px. */
  padding-block: var(--space-section-y-mobile);
}

/* ============================================
 * Listing container — FacetWP AJAX refresh target
 * ============================================ */

.tlm-insights-feed__listing {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.tlm-insights-feed__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

/* ============================================
 * Card — stripped blog-single-related card
 * ============================================ */

.tlm-insights-feed__card {
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-white);
}

.tlm-insights-feed__card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* Hover matches blog-single-related + services.css: the card
   doesn't lift — only the arrow circle changes bg + gets the
   button shadow. */
@media (hover: hover) {
  .tlm-insights-feed__card:hover .tlm-insights-feed__arrow,
  .tlm-insights-feed__card-link:focus-visible .tlm-insights-feed__arrow {
    background-color: var(--color-grey-200);
    box-shadow: var(--shadow-button-hover);
  }
}

.tlm-insights-feed__card-link:focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: 2px;
}

/* Media header — featured image, falls back to placeholder icon.
   Aspect matches the source export (1306×1000) so the full image
   shows uncropped; same ratio as the blog-single hero feature box. */
.tlm-insights-feed__media {
  position: relative;
  aspect-ratio: 1306 / 1000;
  background: var(--color-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Real featured image fills the slot; aspect-ratio matches the source
   so cover does no meaningful cropping. */
.tlm-insights-feed__media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tlm-insights-feed__media-icon {
  color: var(--color-navy-faint);
  display: flex;
}

/* Content body — title + excerpt + arrow */
.tlm-insights-feed__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  flex: 1 1 auto;
  min-width: 0;        /* let the card content shrink below title width */
}

.tlm-insights-feed__card-title {
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: var(--text-2xl);                /* 24px Halant — matches related card */
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-navy);
  margin: 0;
}

/* Excerpt — matches the canonical body paragraph + the featured
   card's excerpt. NOT line-clamped: the row stretches to its
   tallest card, so excerpt length is a content-discipline matter
   (keep them short and even). */
.tlm-insights-feed__excerpt {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-tight);
  color: var(--color-navy-muted);
  margin: 0;
}

.tlm-insights-feed__arrow {
  /* Hidden on mobile — the whole card is tappable, so the arrow
     circle is redundant on touch. Shown from 768px up. */
  display: none;
  align-self: flex-end;
  margin-top: auto;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background-color: var(--color-grey-100);
  color: var(--color-navy);
  transition: background-color 120ms ease, box-shadow 200ms ease;
}

/* ============================================
 * Pagination — FacetWP pager facet.
 *
 * FacetWP renders a flat run of <a class="facetwp-page"> links inside
 * <div class="facetwp-pager">, with extra classes: prev, next, first,
 * last, dots, and active for the current page. The styling below maps
 * that markup onto the designed pager: numbered pills + text-step
 * Prev / Next, with the steps pushed to the row's outer edges.
 * ============================================ */

.tlm-insights-feed__pagination {
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-grey-200);
}

/* The pager row. Numbered pills group centred; prev / next get pushed
   to the far edges via auto margins. */
.tlm-insights-feed__pagination .facetwp-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
}

/* Numbered page link — pill. */
.tlm-insights-feed__pagination .facetwp-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  color: var(--color-navy-subtle);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

@media (hover: hover) {
  .tlm-insights-feed__pagination .facetwp-page:not(.active):not(.dots):hover {
    background-color: var(--color-cream);
    color: var(--color-navy);
  }
}

.tlm-insights-feed__pagination .facetwp-page.active {
  background-color: var(--color-navy);
  color: var(--color-text-on-dark);
}

.tlm-insights-feed__pagination .facetwp-page:focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: 2px;
}

/* Dots — the … filler. Not a button. */
.tlm-insights-feed__pagination .facetwp-page.dots {
  width: 40px;
  cursor: default;
  pointer-events: none;
  font-weight: var(--weight-regular);
}

/* Prev / Next — text steps, not pills. Auto margins shove them to the
   outer edges of the row so the numbers stay centred between them. */
.tlm-insights-feed__pagination .facetwp-page.prev,
.tlm-insights-feed__pagination .facetwp-page.next {
  width: auto;
  padding: 0 var(--space-sm);
  border-radius: 0;
  white-space: nowrap;
  background: none;
}

.tlm-insights-feed__pagination .facetwp-page.prev {
  margin-right: auto;
}

.tlm-insights-feed__pagination .facetwp-page.next {
  margin-left: auto;
}

@media (hover: hover) {
  .tlm-insights-feed__pagination .facetwp-page.prev:hover,
  .tlm-insights-feed__pagination .facetwp-page.next:hover {
    background: none;
    color: var(--color-navy);
  }
}

/* ============================================
 * Tablet (≥768px) — 2-col grid, numbers appear
 * ============================================ */

@media (min-width: 768px) {
  .tlm-insights-feed__grid {
    grid-template-columns: 1fr 1fr;
  }

  .tlm-insights-feed__page-nums {
    display: flex;
  }

  .tlm-insights-feed__arrow {
    display: inline-flex;
  }
}

/* ============================================
 * Desktop (≥1024px) — 3-col grid
 * ============================================ */

@media (min-width: 1024px) {
  .tlm-insights-feed {
    padding-block: var(--space-xl) var(--space-5xl);
  }

  .tlm-insights-feed__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}