/* blog.css — insights hub only.
   One faded category band, then a horizontal scroll row of folder-tabbed
   placeholder briefs. Categories stack vertically. No accent bars, no
   sub-copy: the category name is the only thing that speaks. */

/* ══ CATEGORY BAND ══
   The tint fades out left to right so the name sits ON the wallpaper rather
   than inside a box. Nothing here is a hard edge. */
.cat-head {
  margin: 58px 0 4px;
  padding: 16px 20px;
  border-radius: 14px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--blurple) 9%, transparent) 0%,
    color-mix(in srgb, var(--blurple) 4%, transparent) 42%,
    transparent 100%
  );
  /* soft bottom fade instead of a border */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
}
.cat-head h2 {
  margin: 0;
  font-size: clamp(1.35rem, 2.8vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
}

/* ══ BRIEF ROW (horizontal scroll) ══
   Native overflow, no JS, no arrows. Snap makes the swipe feel deliberate. */
.brief-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(150px, 42vw, 190px);
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  /* top room for the folder tab, bottom room for the scrollbar */
  padding: 26px 2px 14px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--blurple) 55%, transparent) transparent;
}
.brief-row::-webkit-scrollbar { height: 6px; }
.brief-row::-webkit-scrollbar-track {
  background: var(--line);
  border-radius: 999px;
}
.brief-row::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--blurple) 55%, transparent);
  border-radius: 999px;
}
.brief-row::-webkit-scrollbar-thumb:hover { background: var(--blurple); }

/* ══ BRIEF CARD (folder shape) ══
   Squared top-left + a tab above it reads as a folder, which is how the
   reader knows this is a filed brief and not a published article. */
.brief {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 112px;
  scroll-snap-align: start;
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 0 12px 12px 12px;
  box-shadow: 0 1px 2px rgba(23, 24, 29, .04), 0 12px 32px rgba(23, 24, 29, .07);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
/* the tab: overlaps the card by 1px so the seam never shows */
.brief::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -20px;
  width: 48%;
  height: 21px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 10px 16px 0 0;
}
.brief:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(23, 24, 29, .05), 0 18px 40px rgba(23, 24, 29, .1);
}
.brief .status {
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
}

@media (max-width: 700px) {
  .cat-head { margin: 40px 0 2px; padding: 14px 16px; }
}