/* blog-list.css — /blog and category listings (08): hero search, sticky chips, featured post, Start here,
   search results, app strip. Cards and pagination come from components/post-card.css and pagination.css. */

.list-hero__search { max-width: var(--w-prose); margin-top: var(--sp-4); }

.list-chips {
  position: sticky;
  top: var(--header-h);
  z-index: calc(var(--z-header) - 1);
  padding-block: var(--sp-3);
  background: var(--surface);
  border-block: var(--border-w) solid var(--border);
  transition: top var(--dur) var(--ease);
}

.is-header-hidden .list-chips { top: 0; }

/* ---- 3. Featured post ---- */
.featured-post {
  display: grid;
  gap: var(--sp-5);
  padding: var(--sp-5);
  border: var(--border-w) solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

@media (min-width: 768px) {
  .featured-post { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; }
}

.featured-post__cover { width: 100%; height: auto; border-radius: var(--r-md); }
.featured-post__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
.featured-post__body h2 a { color: var(--text-strong); }

/* ---- 4. Start here ---- */
.start-here { margin-top: var(--sp-6); padding: var(--sp-5); border-left: var(--accent-w) solid var(--primary); background: var(--bg-subtle); border-radius: var(--r-sm); }
.start-here__title { margin-bottom: var(--sp-3); }
.start-here__list { margin: 0; padding-left: var(--sp-5); }
.start-here__list li + li { margin-top: var(--sp-2); }

/* ---- Search results (/blog?q=) ---- */
.search-list { margin: 0; padding: 0; list-style: none; max-width: var(--w-prose); }

/* ---- 7. App strip (generated _AppStrip) ---- */
.app-strip { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-3) 0 0; padding: 0; list-style: none; }

.app-strip__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: var(--border-w) solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-strong);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.app-strip__item img { width: var(--icon-lg); height: var(--icon-lg); border-radius: var(--r-sm); }
.app-strip__item:hover { border-color: var(--primary); text-decoration: none; }