/* ============================================================================
   Blog index band 2 — category filter + post grid.
   Figma 650:125834 "Frame 2147259795" (1202 x 1314 @ y=911 of frame 650:125759).
     650:125835  filter pills  459x48   @ (155, 911)
     650:125840  grid          1202x1226 @ (155, 999)  — 3 x 3 of 390x398, gap 16

   The grid is deliberately dumb: one <a class="afxbg-card"> per post, and
   adding or removing a post is a copy-paste of that one block. A CMS replaces
   the markup later without touching this file.
   ========================================================================= */

/* ---- 650:125834 — the band, column, pills then grid, gap 40 (959 -> 999) -- */
.afxbg { display: flex; flex-direction: column; gap: 40px; }

/* ---- 650:125835 — filter row, 459x48, rgba(255,255,255,.17), radius 47,
        row / gap 4 / padding 4 / align CENTER.
   It sits at page x=526.5, i.e. CENTRED in the 1202 column — 650:125834 is a
   VERTICAL frame with counterAxisAlignItems: CENTER. It was built left-aligned
   because `fx.py tree` prints y but not x; 526.5 = 155 + (1202-459)/2. ------- */
.afxbg-filters {
  display: inline-flex; flex-direction: row; align-items: center; gap: 4px;
  align-self: center;
  height: 48px; box-sizing: border-box;
  padding: 4px;
  background: var(--w-17);
  border-radius: 47px;
}
/* inactive pill — 650:125837, radius 100, padding 12/24, opacity .8, white ink */
.afxbg-filter {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; box-sizing: border-box;
  padding: 12px 24px;
  border: 0; border-radius: var(--r-pill);
  background: transparent;
  color: var(--af-white); opacity: .8;
  font-family: inherit; font-weight: var(--w-semi);
  font-size: 16px; line-height: 16px;
  white-space: nowrap; cursor: pointer;
  text-decoration: none;
  transition: background-color var(--t-fast) var(--e-out),
              opacity var(--t-fast) var(--e-out),
              transform var(--t-instant) var(--e-out);
}
/* active pill — 650:125836, #E1FFA0, 2px INSIDE stroke rgba(255,255,255,.14),
   radius 53, ink #0C1113. Never inherit a link colour onto lime.
   strokeAlign is INSIDE, which adds nothing to the box; a real `border` does
   (+4px here, which pushed the whole row 1.7px past the drawn 459), so the
   ring is an inset box-shadow instead. */
.afxbg-filter[aria-pressed="true"] {
  background: var(--af-lime);
  box-shadow: inset 0 0 0 2px var(--w-14);
  color: #0C1113;
  opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
  .afxbg-filter:hover { opacity: 1; background-color: var(--w-10); }
  .afxbg-filter[aria-pressed="true"]:hover { background-color: var(--af-lime); }
}
.afxbg-filter:active { transform: scale(.97); }

/* The pills HUG their label in the file, so their drawn widths are SF Pro text
   metrics. The site ships Inter off Apple platforms, which sets each pill ~2px
   narrow and the row 7.7px short of the drawn 459. Pinning the four drawn
   widths as a MINIMUM restores the row exactly without capping a longer
   translation, which a fixed width would clip. */
.afxbg-filter:nth-child(1) { min-width: 69px; }   /* 650:125836 "All" */
.afxbg-filter:nth-child(2) { min-width: 128px; }  /* 650:125837 "Atlas Post" */
.afxbg-filter:nth-child(3) { min-width: 108px; }  /* 650:125838 "Trading" */
.afxbg-filter:nth-child(4) { min-width: 134px; }  /* 650:125839 "Prop Firms" */

/* ---- 650:125840 — the grid, 1202 wide, 3 columns of 390, gap 16 ---------- */
.afxbg-grid {
  display: grid;
  grid-template-columns: repeat(3, 390px);
  gap: 16px;
}

/* ---- 650:125841 — one card, 390x398 -------------------------------------
   fill #F9F9F9, radius 32, column / gap 16 / padding 4, clipsContent.
   Height is FIXED at 398 and the box clips, exactly as drawn: a long title
   pushes the description down and the overflow is cut, it does not grow. */
.afxbg-card {
  display: flex; flex-direction: column; gap: 16px;
  width: 390px; height: 398px; box-sizing: border-box;
  padding: 4px;
  background: #F9F9F9; border-radius: 32px;
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--t-base) var(--e-out);
  will-change: transform;
}
/* 650:125842 — media 382x200, radius 28, image fill */
.afxbg-card__media {
  position: relative;
  width: 382px; height: 200px; flex: none;
  border-radius: 28px; overflow: hidden;
  background-repeat: no-repeat; background-position: center; background-size: cover;
  transition: transform var(--t-slow) var(--e-out);
}
/* 650:125845 — text 382x174, column / gap 12 / padding 16 */
.afxbg-card__body {
  display: flex; flex-direction: column; gap: 12px;
  width: 382px; height: 174px; flex: none; box-sizing: border-box;
  padding: 16px;
}
/* 650:125861 etc — card meta is 10px, not the featured card's 14px.
   The class is .afxb-meta__text (shared with the featured card in
   atlas-blog2-hero.css); scoping it to .afxbg-card is what makes it 10 here. */
.afxbg-card .afxb-meta__text {
  font-size: 10px; line-height: 11.93px; letter-spacing: -.2px;
}
/* 650:125883 — SF Pro 700 20px/22px, ls -0.6px, #0D0D0D, 2 lines max */
.afxbg-card__title {
  margin: 0; width: 350px;
  font-weight: var(--w-bold);
  font-size: 20px; line-height: 22px; letter-spacing: -.6px;
  color: #0D0D0D;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
/* 650:125884 — SF Pro 400 16px/21.12px, ls -0.48px, #0D0D0D at .8, 3 lines */
.afxbg-card__desc {
  margin: 0; width: 350px;
  font-weight: var(--w-regular);
  font-size: 16px; line-height: 21.12px; letter-spacing: -.48px;
  color: #0D0D0D; opacity: .8;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
}

@media (hover: hover) and (pointer: fine) {
  .afxbg-card:hover { transform: translateY(-4px); }
  .afxbg-card:hover .afxbg-card__media { transform: scale(1.04); }
}
.afxbg-card:active { transform: translateY(-1px) scale(.995); transition-duration: var(--t-instant); }

/* The shared ring rule is `.afx :focus-visible { ... border-radius: 4px }`,
   which squares off a 32px card the moment it takes keyboard focus. Keep the
   ring, restore the radius — scoped here rather than editing shared chrome. */
.afxbg-card:focus-visible { border-radius: 32px; }
.afxbg-filter:focus-visible { border-radius: var(--r-pill); }

/* ---- per-card image crops -------------------------------------------------
   Eight distinct images across nine cards (card 9 reuses card 1's).
   Cards 3 and 8 are drawn with scaleMode STRETCH and an imageTransform, i.e.
   a hand-dragged crop window, NOT `cover`. Reproducing them as `cover` visibly
   reframes and zooms the art, so the window is converted explicitly:
     card 3  scaleY .8038  ty .1952           -> 100%      124.41%  @ 0    99.5%
     card 8  scaleX .8761 tx .1239
             scaleY .6779  ty .0572           -> 114.14%   147.51%  @ 100% 17.76%   */
.afxbg-card--1 .afxbg-card__media,
.afxbg-card--9 .afxbg-card__media { background-image: url('/assets/figma/blog-1.webp'); }
.afxbg-card--2 .afxbg-card__media { background-image: url('/assets/figma/blog-2.webp'); }
.afxbg-card--3 .afxbg-card__media {
  background-image: url('/assets/figma/blog-3.webp');
  background-size: 100% 124.41%; background-position: 0% 99.5%;
}
.afxbg-card--4 .afxbg-card__media { background-image: url('/assets/figma/blog-4.webp'); }
.afxbg-card--5 .afxbg-card__media { background-image: url('/assets/figma/blog-5.webp'); }
.afxbg-card--6 .afxbg-card__media { background-image: url('/assets/figma/blog-6.webp'); }
.afxbg-card--7 .afxbg-card__media { background-image: url('/assets/figma/blog-7.webp'); }
.afxbg-card--8 .afxbg-card__media {
  background-image: url('/assets/figma/blog-8.webp');
  background-size: 114.14% 147.51%; background-position: 100% 17.76%;
}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 1512px) {
  .afxbg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .afxbg-card { width: auto; }
  .afxbg-card__media, .afxbg-card__body { width: auto; }
  .afxbg-card__title, .afxbg-card__desc { width: auto; }
}
@media (max-width: 1100px) {
  .afxbg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .afxbg-card { height: auto; }
  .afxbg-card__body { height: auto; }
}

/* ---- mobile, Figma 650:126096 (390 x 3720 @ y=919) ------------------------
   650:126097  filters  336x46 @ x=29, padding 4, gap 0 (pills are flush)
               pills 46 / 98 / 81 / 103 x 38, padding 12/14, text 14px/14px
   650:126102  grid     342x3650 @ x=26, single column, gap 16
   650:126103  card     342 wide, column / gap 8 / padding 4, HUGS its content
               media 334x200 (unchanged 200 tall), body 334, padding 16, gap 12
               title 302, 20px/22px  ·  desc 302, 16px/21.12px               */
@media (max-width: 767px) {
  .afxbg { gap: 24px; }                      /* pills end 965, grid at 989 */
  .afxbg-filters {
    align-self: center;
    width: 336px; height: 46px; gap: 0;
    justify-content: center;
  }
  .afxbg-filter { height: 38px; padding: 12px 14px; font-size: 14px; line-height: 14px; }
  /* 650:126098-101 — the mobile row is 336 with gap 0, so the pills are flush */
  .afxbg-filter:nth-child(1) { min-width: 46px; }
  .afxbg-filter:nth-child(2) { min-width: 98px; }
  .afxbg-filter:nth-child(3) { min-width: 81px; }
  .afxbg-filter:nth-child(4) { min-width: 103px; }

  /* 650:126102 is 342 wide at x=26 — the grid box hugs the single column
     rather than being a 390 box with a centred column inside it. */
  .afxbg-grid { width: 342px; margin: 0 auto; grid-template-columns: 342px; gap: 16px; }
  .afxbg-card { width: 342px; height: auto; gap: 8px; }
  .afxbg-card__media { width: 334px; height: 200px; }
  .afxbg-card__body { width: 334px; height: auto; gap: 12px; }
  .afxbg-card__title, .afxbg-card__desc { width: 302px; }
  /* 650:126192 is the only STRETCH crop that survives to mobile; card 8 is
     redrawn as a plain FILL there, so its desktop crop must not leak down. */
  .afxbg-card--8 .afxbg-card__media { background-size: cover; background-position: center; }
}

/* ---------------------------------------------------------------------------
   FILTER PILLS: LET THE ROW WRAP, 18 Sep 2026.

   The mobile block above pins `.afxbg-filters` to `width: 336px` with
   `gap: 0` and `justify-content: center`, and sets four per-pill `min-width`
   values taken from the Figma frame. Two things have moved since: the pills
   are `white-space: nowrap`, and the live page now renders FIVE of them
   (46 + 98 + 81 + 135 + 144 = 504px). A centred 504px row inside a 336px box
   spills off BOTH sides — measured right edge 445, left edge -113 at 393 — on
   /blog, /blog/page/* and /blog/category/*, about thirty URLs.

   The drawn width only ever existed to reproduce a four-pill row, so below the
   breakpoint the row is allowed to wrap and the pills keep their own padding.
   ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  .afxbg-filters {
    width: auto; max-width: 100%; height: auto;
    flex-wrap: wrap; justify-content: center;
    gap: 4px; box-sizing: border-box;
  }
  /* the four drawn minimums assume a row that no longer exists; a pill hugs
     its own label instead, which is what keeps a fifth or sixth category from
     pushing the row out again */
  .afxbg-filter:nth-child(1),
  .afxbg-filter:nth-child(2),
  .afxbg-filter:nth-child(3),
  .afxbg-filter:nth-child(4) { min-width: 0; }

  /* the grid is pinned to the drawn 342, which is wider than a 360 screen
     once the 24px gutters are counted (342 + 24 = 366) */
  .afxbg-grid { width: 100%; max-width: 342px; grid-template-columns: minmax(0, 1fr); }
  .afxbg-card { width: 100%; }
  .afxbg-card__media, .afxbg-card__body { width: 100%; box-sizing: border-box; }
  .afxbg-card__title, .afxbg-card__desc { width: 100%; max-width: 302px; }
}