/* ==========================================================================
   KOBIL — Resources/Insights — Tab bar + card grid + pagination area
   Figma 6201:91670 (desktop 1440) · 6201:91975 (phone 393)

   Rebuilt from the Aug-2026 frames. The previous version (3816:23919) drew a
   rounded white card holding square-ish tabs on a grey fill; the frames have
   full pill tabs on the page background, a white full-bleed content area, and a
   two-up card grid of 600px cards. Values are `--wN` / `--mN` throughout.

   Frame geometry: CONTENT is 1240 wide at x=100, so 600 + 40 + 600 = 1240.
   ========================================================================== */

/* ---- Tab bar ----------------------------------------------------------
   Still on the page background (System/20%), 70px under the hero block, and it
   is the last thing before the white content area begins. */

.insights-browser__tabs {
  display: flex;
  gap: var(--w8);
  padding: var(--w70) var(--w100) 0;
}

.insights-browser__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--w48);
  padding: var(--w8) var(--w32);
  border: 1px solid var(--navy);
  border-radius: var(--w40);
  font-family: var(--font-ui);
  font-size: var(--w16);
  font-weight: 600;
  line-height: var(--w20);
  white-space: nowrap;
  color: var(--navy);
  background: transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.insights-browser__tab:hover {
  background: var(--navy);
  color: var(--white);
}

/* Active is a filled navy pill with no visible border (frame 6201:91678). */
.insights-browser__tab.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
  cursor: default;
}

.insights-browser__tab.is-disabled {
  cursor: default;
  opacity: 0.45;
}

.insights-browser__tab.is-disabled:hover {
  background: transparent;
  color: var(--navy);
}

/* ---- Content area ----------------------------------------------------
   White, edge to edge, and both of those are measured off the frame render
   rather than the layer tree: on row y=700 the white runs x=0..1439 with no
   corner rounding, and the column at x=720 turns white at exactly y=602.

   70 above it (the tab bar ends at 532), then 48 of padding to the first card
   row at 650. The 48 that used to be here as the margin put the block at 580.

   The frame's own white rectangle stops at 3433 while its card grid runs to 3727
   and its pagination sits at 3807 — sampling those rows gives the page
   background, so in the frame the last card rows and the pager are off the white.
   That is an unstretched rectangle, not a design: the boundary falls in the
   middle of the fifth card row. The white block wraps the whole content area
   here, which is what every other value in the frame implies.

   Below the pagination the frame leaves 311px before the footer — the same
   authoring gap, ignored on purpose: --w40. */

.sec-insights-browser {
  margin-top: var(--w70);
  padding: var(--w48) var(--w100) var(--w40);
  background: var(--white);
  scroll-margin-top: var(--w132);
}

.insights-browser__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* 56px between rows, 40px between columns (frame 6201:91686 / 6201:91687). */
  gap: var(--w56) var(--w40);
}

/* ---- Card (frame 3557:31042) ---------------------------------------- */

.insights-card {
  display: flex;
  flex-direction: column;
  gap: var(--w24);
}

.insights-card__media {
  position: relative;
  width: 100%;
  /* 600x338 in the frame — an aspect ratio, not fixed pixels, so the card scales
     with the column instead of being pinned to one size. */
  aspect-ratio: 600 / 338;
  border-radius: var(--w20);
  overflow: hidden;
}

.insights-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Go Blue at 15% over every cover — the frame applies it to all of them. */
.insights-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(16, 70, 207, 0.15);
  pointer-events: none;
}

.insights-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--w16);
}

/* Meta row: categories left, date + language right. */
.insights-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--w12);
  font-family: var(--font-mono);
  font-size: var(--w14);
  font-weight: 500;
  line-height: var(--w20);
  text-transform: uppercase;
  color: var(--navy-70);
}

.insights-card__tags {
  display: flex;
  align-items: center;
  gap: var(--w6);
  min-width: 0;
}

.insights-card__dates {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--w12);
  flex: 0 0 auto;
}

/* The 4px separator dots between meta items. */
.insights-card__dot {
  flex: 0 0 auto;
  width: var(--w4);
  height: var(--w4);
  border-radius: 50%;
  background: currentColor;
}

.insights-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--w12);
}

/* Instrument Sans Bold 24/32 (Header/Desktop/H5). */
.insights-card__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--w24);
  font-weight: 700;
  line-height: var(--w32);
  color: var(--navy);
}

.insights-card__link {
  color: inherit;
  transition: color var(--dur) var(--ease);
}

.insights-card__link:hover {
  color: var(--blue);
}

.insights-card__excerpt {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--w16);
  font-weight: 400;
  line-height: var(--w23);
  color: var(--navy-70);
}

/* ---- Phone (Figma 6201:91975) ----
   The frame changes the *shape* here, not just the sizes, and in one way I had
   wrong: on the phone the white area is a card inset 12px from both edges
   (369 = 393-2x12) with 16px of inner padding — and the tab bar is INSIDE it.
   On desktop the tabs sit on the page background above the white band
   (frame: tabs y=484, white rect y=602); on the phone the card starts at y=456
   and the pills are its first row, at y=472. That is measured, not read off the
   layer tree: sampling the frame render, x=40 is #ffffff from y=456 and the
   active pill's navy starts at y=472.

   The DOM does not change for that. The tab bar and the panel are adjacent
   siblings, so giving the bar the white fill plus the two top corners and the
   panel the two bottom ones makes them read as one card, and desktop keeps its
   own arrangement untouched.

   Corner radius is 8, not the 12 I had guessed: on the card's first row the white
   is inset 5px, then 3, 2, 1, 1, 0. A radius of 8 predicts exactly that ramp
   (5.2, 3.3, 2.2, 1.4, 0.8, 0.4); a radius of 12 would start at 8.6.

   Vertical rhythm, all from the frame: card top 456 (37.6 under the hero's lead),
   pills 472, cards 540, 40 between cards, 20 to the pagination band, 16 of card
   padding under it. Below the card the frame leaves 322px before the footer —
   the same authoring gap as on desktop, ignored the same way: --m40.

   The four pills measure 118+159+122+221 plus three 8px gaps = 644 in a 353-wide
   row, so the frame itself overflows — the row scrolls sideways rather than
   wrapping into a second line the design does not have. There is no right padding
   because the frame clips the row at the card's right edge (x=381). */
@media (max-width: 768px) {
  .insights-browser__tabs {
    gap: var(--m8);
    /* 38 = the card's top (456) minus the hero lead's bottom (418.4). */
    margin: var(--m38) var(--m12) 0;
    padding: var(--m16) 0 0 var(--m16);
    background: var(--white);
    border-radius: var(--m8) var(--m8) 0 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .insights-browser__tabs::-webkit-scrollbar {
    display: none;
  }

  /* 28px of side padding, not the desktop 32. The four phone pills measure
     118/159/122/221 against desktop's 126/167/130/229 — exactly 8 narrower each,
     at the same 16px SemiBold, so the label widths are identical and the whole
     difference is 4px per side. */
  .insights-browser__tab {
    height: var(--m48);
    padding: var(--m8) var(--m28);
    border-radius: var(--m40);
    font-size: var(--m16);
    line-height: var(--m20);
  }

  /* The rest of the same card — hence no top radius and no top margin. */
  .sec-insights-browser {
    margin: 0 var(--m12) var(--m40);
    padding: var(--m20) var(--m16) var(--m16);
    border-radius: 0 0 var(--m8) var(--m8);
  }

  .insights-browser__grid {
    grid-template-columns: 1fr;
    gap: var(--m40);
  }

  /* Frame 6201:91997 stacks the card as
     cover -16- categories -12- date/language -4- title -12- excerpt,
     which maps onto the existing four containers. */
  .insights-card {
    gap: var(--m16);
  }

  .insights-card__media {
    /* 337x190 exactly, rather than the desktop 600x338 (a 0.15px difference at
       this width, but the phone frame states its own pair). */
    aspect-ratio: 337 / 190;
    border-radius: var(--m12);
  }

  .insights-card__body {
    gap: var(--m4);
  }

  .insights-card__meta {
    /* Categories and the date row cannot share one line at 393px. */
    flex-direction: column;
    align-items: flex-start;
    gap: var(--m12);
    font-size: var(--m12);
    line-height: var(--m20);
  }

  .insights-card__dates {
    justify-content: flex-start;
  }

  .insights-card__tags,
  .insights-card__dates {
    gap: var(--m6);
  }

  /* 3px on the phone, 4 on desktop. */
  .insights-card__dot {
    width: var(--m3);
    height: var(--m3);
  }

  .insights-card__text {
    gap: var(--m12);
  }

  /* Header/Mobile/H5 — SemiBold 20/26, not the desktop Bold 24/32. */
  .insights-card__title {
    font-size: var(--m20);
    font-weight: 600;
    line-height: var(--m26);
  }

  .insights-card__excerpt {
    font-size: var(--m14);
    line-height: var(--m20);
  }
}