/* home.css — home page sections (06): hero, trust stats, speed family, category tiles, directory, guides. */

/* ---- 1. Hero ---- */
.home-hero { padding-block: var(--sp-7) var(--sp-8); background: var(--grad-hero); }
.home-hero__grid { display: grid; gap: var(--sp-7); align-items: center; }

@media (min-width: 992px) {
  .home-hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

.home-hero__copy .lead { margin-top: var(--sp-4); color: var(--text-strong); }
.home-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.home-hero__meta { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--text-muted); }
.home-hero__search { margin-top: var(--sp-5); max-width: var(--w-prose); }

.home-hero__image {
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  border: var(--border-w) solid var(--border);
  box-shadow: var(--sh-3);
}

@media (max-width: 575.98px) {
  .home-hero__actions > * { width: 100%; }
}

/* ---- 2. Trust stats (generated _HomeStats) ---- */
.home-trust { border-block: var(--border-w) solid var(--border); background: var(--surface); }

/* .stats lives in components/stats.css (shared with /about). */

/* ---- 3. Speed family: swipe on mobile, 4 columns on desktop ---- */
@media (max-width: 991.98px) {
  .home-family .app-grid {
    grid-auto-flow: column;
    grid-auto-columns: minmax(70%, 1fr);
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--sp-2);
  }
  .home-family .app-card { scroll-snap-align: start; }
}

/* ---- 4. Category tiles (generated _CategoryTiles) ---- */
.cat-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }

@media (min-width: 768px) {
  .cat-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.cat-tile {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon name" "icon count" "summary summary";
  gap: 0 var(--sp-3);
  height: 100%;
  padding: var(--sp-5);
  border: var(--border-w) solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.cat-tile:hover { border-color: var(--primary); box-shadow: var(--sh-2); color: var(--text); text-decoration: none; }

.cat-tile__icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: calc(var(--icon-lg) + var(--sp-4));
  height: calc(var(--icon-lg) + var(--sp-4));
  border-radius: var(--r-sm);
  background: var(--primary-tint);
  color: var(--primary);
  font-size: var(--icon-lg);
}

.cat-tile__name { grid-area: name; min-width: 0; overflow-wrap: anywhere; font-weight: var(--fw-bold); color: var(--text-strong); }
.cat-tile__count { grid-area: count; font-size: var(--fs-sm); color: var(--text-muted); }
.cat-tile__summary { grid-area: summary; margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--text-muted); }

@media (max-width: 575.98px) {
  /* Icon above the name, so long names ("Productivity") fit a half-width tile. */
  .cat-tile { grid-template-columns: minmax(0, 1fr); grid-template-areas: "icon" "name" "count"; gap: var(--sp-2) 0; padding: var(--sp-4); }
  .cat-tile__summary { display: none; }
}

/* ---- 5. Directory chips ---- */
.home-directory__chips { margin-bottom: var(--sp-3); }

/* ---- 7. Guides ---- */
.home-guides__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); max-width: none; }
.topic-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-5); }