/* ==========================================================
   TygerLabs.ai · Resources archive
   After the WellnessPlus Library: pills, a lead post with three
   beside it, then cards. No hairlines; images carry the rows.
   ========================================================== */

/* Category pills: soft fills, the active one solid tiger */
.insights-cats { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-7); }
.insights-cat {
  padding: 0.6rem 1.15rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--surface-1);
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  color: var(--ink-2);
  transition: background-color var(--t-mid) var(--ease), color var(--t-mid) var(--ease);
}
.insights-cat:hover { background: var(--surface-2); color: var(--ink); }
.insights-cat.is-active { background: var(--tiger); color: var(--tiger-ink); }
.insights-cat:focus-visible { outline: 2px solid var(--tiger-2); outline-offset: 3px; }

.insights-cat-label { font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--tiger-2); }
.insights-meta { display: flex; gap: var(--s-4); font-size: var(--text-sm); color: var(--muted); }

/* Featured: lead on the left, three rows on the right */
.insights-featured { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s-7); }
.insights-featured[hidden] { display: none; }
.insights-lead, .insights-row, .insights-card { color: var(--ink-2); text-decoration: none; }
.insights-lead { display: flex; flex-direction: column; gap: var(--s-2); }
.insights-lead-img, .insights-row-img, .insights-card-img { display: block; overflow: hidden; border-radius: var(--r-lg); background: var(--surface-1); }
.insights-lead-img { margin-bottom: var(--s-3); }
.insights-lead-img img, .insights-row-img img, .insights-card-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.insights-lead-title {
  font-family: var(--ff-display);
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.6rem);
  font-weight: var(--fw-ultra);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.insights-lead-dek { font-size: var(--text-lg); }

.insights-side { display: grid; gap: var(--s-5); align-content: start; }
.insights-row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.insights-row-img img { aspect-ratio: 1 / 1; border-radius: var(--r-md); }
.insights-row-text { display: flex; flex-direction: column; gap: var(--s-1); }
.insights-row-title { font-family: var(--ff-display); font-size: var(--text-lg); font-weight: var(--fw-bold); line-height: 1.25; color: var(--ink); }

/* Cards: the rest, or every post in a picked category */
.insights-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7) var(--s-5); margin-top: var(--s-8); }
.insights-grid:not(.is-filtered) .insights-card.is-featured { display: none; }
.insights-grid.is-filtered { margin-top: 0; }
.insights-card { display: flex; flex-direction: column; gap: var(--s-2); }
.insights-card[hidden] { display: none; }
.insights-card-img { margin-bottom: var(--s-2); }
.insights-card-title { font-family: var(--ff-display); font-size: var(--text-xl); font-weight: var(--fw-heavy); line-height: 1.2; color: var(--ink); }

.insights-lead:hover img, .insights-row:hover img, .insights-card:hover img { transform: scale(1.03); }
.insights-lead:hover .insights-lead-title, .insights-row:hover .insights-row-title, .insights-card:hover .insights-card-title { color: var(--tiger-2); }
.insights-lead:focus-visible, .insights-row:focus-visible, .insights-card:focus-visible { outline: 2px solid var(--tiger-2); outline-offset: 6px; border-radius: var(--r-lg); }

.insights-archive + .section .cta-band { margin-top: 0; }

/* four across on wide screens, so the four posts after the featured block fill one row */
@media (min-width: 1200px) { .insights-grid:not(.is-filtered) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 991.98px) {
  .insights-featured { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .insights-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  /* pills scroll sideways on one line, edge to edge */
  .insights-cats {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(-1 * var(--bs-gutter-x) / 2);
    padding-inline: calc(var(--bs-gutter-x) / 2);
    scrollbar-width: none;
  }
  .insights-cats::-webkit-scrollbar { display: none; }
  .insights-cat { flex: none; }
  .insights-row { grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--s-3); }
  .insights-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
}

/* The archive title shares the hero with the AI Blog Writer card. */
@media (min-width: 992px) {
  .insights-hero h1 { font-size: clamp(2.75rem, 1rem + 4vw, 5rem); }
}