/* ==========================================================================
   Home (Figma "Home / Library" 105:35): Hero 109:145 and Grid 109:284.
   The hero itself (.page-hero, .headline, .cta-silver) and the framed column (.frame) come from styles.css;
   so do the cards, the sort bar and the footer. This file has what only the Home has.
   ========================================================================== */

/* Hero: 418px title box, 330px subtitle, and only 20px under the filter bar */
.page-hero--home { --title-w: 7.4643em; --subtitle-w: 330px; }
.page-hero--home .page-hero__frame { padding-bottom: 20px; }

/* --------------------------------------------------------------------------
   Filter bar 422:3953: dashed lines above and below across the column, a dot on each crossing
   with the side lines (.frame-dots), chips without icons (Figma)
   -------------------------------------------------------------------------- */
.home-filters {
  gap: 40px;
  padding: 13px var(--frame-pad); /* 12px + the 1px line, 70px tall like the Figma */
  background-image: var(--dash-x), var(--dash-x);
  background-size: 4px 1px, 4px 1px;
  background-position: left top, left bottom;
  background-repeat: repeat-x;
}
.home-filters .categories { gap: 6px; }

.home-filters .chip {
  padding: 14px;
  border: 1px solid var(--glass-10);
  background: transparent;
  color: var(--gray-500);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.home-filters .chip:hover {
  background: var(--glass-5);
  color: var(--gray-50);
}
/* Selected = Figma "State=Hover": Glass 10% fill, white text, no line */
.home-filters .chip.is-active,
.home-filters .chip.is-active:hover {
  border-color: transparent;
  background: var(--glass-10);
  color: var(--gray-50);
}
.home-filters .chip.is-active .chip__icon img,
.home-filters .chip:hover .chip__icon img { filter: brightness(0) invert(0.97); }
.chip__count { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Grid: Frame 64 (422:3952), the same column, 24px top and bottom, 40px between the bar and the cards
   -------------------------------------------------------------------------- */
.library--framed {
  display: block;
  padding: 0 var(--frame-gutter);
}
.library__frame {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 24px var(--frame-pad);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* The chips keep scrolling sideways, the favorites chip stays on the right */
  .home-filters { flex-direction: row; align-items: center; gap: 12px; }
  .home-filters .chip--favorites { align-self: center; }
  .library__frame { gap: 28px; }
}