/* ==========================================================================
   Nishtech 2026 — BLOG LANDING
   --------------------------------------------------------------------------
   Loads after about-2026.css, and deliberately depends on it: the card is
   About's "why choose Nishtech" card (.ab-card) reused wholesale — same media
   ratio, same white panel, same orange kicker. This file supplies three things
   that card does not have:

     · a six-across grid to replace About's carousel track
     · the type sizes that card needs at a third of its usual width
     · the category filter chips

   Everything else — surfaces, ink, the dark treatment, the gradient — comes
   from about-2026.css and theme-2026.css, which is the point of building it
   this way rather than writing a second card.
   ========================================================================== */

.bl{background:var(--th-surface);padding-block:var(--space-section)}


/* ==========================================================================
   1. FILTER CHIPS
   ========================================================================== */
.bl-filter{
  display:flex;flex-wrap:wrap;gap:clamp(.5rem,.7vw,.875rem);
  margin-bottom:clamp(1.5rem,2.3vw,3.75rem);
}
.bl-chip{
  display:inline-flex;align-items:center;gap:.5em;
  padding:clamp(.5rem,.62vw,.875rem) clamp(.875rem,1.09vw,1.75rem);
  border:1px solid var(--th-rule);border-radius:999px;
  font-size:var(--fs-small);font-weight:700;line-height:1;
  color:var(--th-ink-body);background:transparent;cursor:pointer;
  transition:border-color .25s var(--ease),color .25s var(--ease),
             background .25s var(--ease);
}
.bl-chip__n{
  font-size:.8em;font-weight:600;opacity:.62;
  font-variant-numeric:tabular-nums;
}
.bl-chip:hover{border-color:var(--active-orange);color:var(--active-orange)}

/* The selected chip is the one place on this page the gradient earns its keep,
   so it is filled rather than outlined. Same 65% fill as the buttons in §8 of
   theme-2026.css, and for the same reason: at full strength four of the six
   gradients cannot carry a white label. */
.bl-chip[aria-checked="true"]{
  color:#fff;border-color:transparent;
  background:var(--th-fill),var(--indigo-deep);
}
.bl-chip[aria-checked="true"] .bl-chip__n{opacity:.8}

.bl-count{
  font-size:var(--fs-small);color:var(--th-ink-body);
  margin:0 0 clamp(1rem,1.4vw,2.25rem);
}
.bl-empty{
  font-family:var(--font-display);font-size:var(--fs-h5);font-weight:400;
  color:var(--th-ink);padding-block:clamp(2rem,4vw,5rem);text-align:center;
}
.bl-empty[hidden]{display:none}


/* ==========================================================================
   2. GRID
   --------------------------------------------------------------------------
   Six across at the 1920 container, which gives each card about 300px:
   (1920 − 5 × 23) / 6 = 300. That is the number the type scale in §3 is set
   against.

   The step-down is one column at a time rather than the usual halving, because
   these cards have a fixed media ratio — dropping 6 → 3 in one step doubles
   every card's height and the page jumps a screen and a half.
   ========================================================================== */
.bl-grid{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(1rem,1.4vw,1.4375rem);
  list-style:none;margin:0;padding:0;
}
.bl-card{width:auto}                     /* .ab-card sets a carousel width */
.bl-card[hidden]{display:none}

@media (max-width:1599.98px){ .bl-grid{grid-template-columns:repeat(5,minmax(0,1fr))} }
@media (max-width:1399.98px){ .bl-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:1199.98px){ .bl-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:767.98px){  .bl-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:419.98px){  .bl-grid{grid-template-columns:1fr} }


/* ==========================================================================
   3. CARD
   --------------------------------------------------------------------------
   The whole card is one link, so the anchor is the flex column and every part
   of it is a span. A card with the image, the title and a "Read more" all
   separately focusable is three tab stops that go to the same URL.
   ========================================================================== */
.bl-card__link{
  display:flex;flex-direction:column;height:100%;
  color:inherit;text-decoration:none;
}
.bl-card__media{display:block;overflow:hidden;flex:none}
.bl-card__media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease);
}
.bl-card__link:hover .bl-card__media img{transform:scale(1.045)}

.bl-card__body{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:.45rem;flex:1;
}

/* Category list. Often several, so it wraps rather than truncating — the
   categories are how someone decides whether to read the thing. */
.bl-card__cat{display:block;line-height:1.35}

/* About's card title is --fs-card-title, 18 → 31. That is set for a card at a
   third of the container; at a sixth it is roughly double what fits. This is
   --fs-post-title, the size the insights carousel already uses for exactly
   this job. */
.bl-card__title{
  display:block;
  font-size:var(--fs-post-title);line-height:1.28;font-weight:700;
  color:var(--th-ink);
  transition:color .25s var(--ease);
}
.bl-card__link:hover .bl-card__title{color:var(--active-orange)}

/* Three lines, then clip. Titles here run from 29 to 96 characters and an
   unclamped card grid ends up with one 5-line card setting the row height for
   five 2-line neighbours. */
.bl-card__copy{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;margin:0;
}

.bl-card__more{
  display:inline-flex;align-items:center;gap:.5em;margin-top:auto;
  padding-top:.5rem;
  font-size:var(--fs-kicker);font-weight:700;letter-spacing:.04em;
  color:var(--active-orange);
}
.bl-card__more .arw{width:1em;height:1em;flex:none;transition:transform .25s var(--ease)}
.bl-card__link:hover .bl-card__more .arw{transform:translateX(4px)}

/* The card is a link, so the focus ring belongs on the card, not on the text
   run inside it. */
.bl-card__link:focus-visible{outline:2px solid var(--active-orange);outline-offset:3px}
.bl-card:has(.bl-card__link:focus-visible){border-color:var(--active-orange)}

@media (prefers-reduced-motion:reduce){
  .bl-card__media img,.bl-card__more .arw{transition:none}
  .bl-card__link:hover .bl-card__media img{transform:none}
}