/* ============================================================================
   Premium posts layout — site-wide blog hub + category-listing pages
   Scoped entirely to body.page-listing (posts/inc/blog-hub-view.php and
   posts/inc/blog-listing-view.php — see [[project_live_homepage_template]]
   memory for why that class is a safe, exclusively-blog-pages hook). Never
   touches blog-post-view.php's single-article reading page, and never
   redefines .post-card/.post-grid globally — every rule here either scopes
   under .page-listing or targets the new .post-card--featured modifier
   class, so the shared card styles in css/styles.css keep working
   unmodified everywhere else they're used (homepage Featured/More-to-explore
   sections on all 18 templates).
   ============================================================================ */

/* ---------------------------------------------------------------------- */
/* Editorial hero                                                         */
/* ---------------------------------------------------------------------- */

body.page-listing .hero {
  position: relative;
  overflow: hidden;
  padding: 96px 0 64px;
  background:
    radial-gradient(ellipse 70% 60% at 15% 0%, rgba(124, 92, 255, 0.16), transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 30%, rgba(47, 111, 237, 0.12), transparent 65%);
}

body.page-listing .hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-border) 20%, var(--glass-border) 80%, transparent);
}

body.page-listing .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-purple);
  margin-bottom: 16px;
}

body.page-listing .hero-eyebrow::before {
  content: '';
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-purple);
}

body.page-listing .hero-title {
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  max-width: 22ch;
  margin-bottom: 14px;
}

body.page-listing .hero-subtitle {
  max-width: 58ch;
  font-size: 1.08rem;
  margin-bottom: 20px;
}

body.page-listing .hero-stat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px 7px 8px;
  border-radius: 999px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  font-size: 0.85rem;
  color: var(--text-secondary);
}

body.page-listing .hero-stat strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--accent-purple);
  color: #ffffff;
  font-size: 0.78rem;
}

/* ---------------------------------------------------------------------- */
/* Grid + featured-first card                                             */
/* ---------------------------------------------------------------------- */

body.page-listing .apps-section {
  padding-top: var(--space-section, 64px);
}

body.page-listing .post-grid {
  grid-auto-flow: dense;
}

/* First card in the grid reads as a lead story: wider, taller image, larger
   type. Pure CSS via :first-child — no template/PHP branching needed beyond
   adding the modifier class below, so it degrades gracefully to a normal
   card if a page ever renders zero or one entries. */
body.page-listing .post-card--featured {
  grid-column: span 2;
}

body.page-listing .post-card--featured .post-card-image,
body.page-listing .post-card--featured .post-card-cover,
body.page-listing .post-card--featured .post-card-banner {
  aspect-ratio: 21 / 9;
}

body.page-listing .post-card--featured .post-card-body {
  padding: 26px 28px;
}

body.page-listing .post-card--featured .post-card-body h3 {
  font-size: 1.5rem;
  line-height: 1.25;
}

body.page-listing .post-card--featured .post-card-body p {
  font-size: 0.98rem;
}

body.page-listing .post-card--featured .post-card-cover-title {
  font-size: 1.3rem;
  -webkit-line-clamp: 3;
}

body.page-listing .post-card--featured .post-card-cover-icon {
  width: 56px;
  height: 56px;
}

body.page-listing .post-card--featured .post-card-cover-icon svg {
  width: 28px;
  height: 28px;
}

@media (max-width: 960px) {
  body.page-listing .post-card--featured {
    grid-column: span 2;
  }
}

@media (max-width: 640px) {
  body.page-listing .post-card--featured {
    grid-column: span 1;
  }
  body.page-listing .post-card--featured .post-card-image,
  body.page-listing .post-card--featured .post-card-cover,
  body.page-listing .post-card--featured .post-card-banner {
    aspect-ratio: 16 / 9;
  }
  body.page-listing .post-card--featured .post-card-body h3 {
    font-size: 1.15rem;
  }
}

/* ---------------------------------------------------------------------- */
/* Card refinements                                                       */
/* ---------------------------------------------------------------------- */

/* A thin top accent bar that brightens on hover — a small "editorial" tell
   distinguishing blog cards from the plain app-card treatment elsewhere. */
body.page-listing .post-card {
  position: relative;
}

body.page-listing .post-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-purple), var(--accent-blue, #2f6fed));
  opacity: 0;
  transform: scaleX(0.6);
  transform-origin: left;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 2;
}

body.page-listing .post-card:hover::before {
  opacity: 1;
  transform: scaleX(1);
}

body.page-listing .post-card-body p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Category hub cards (blog-hub-view.php) show a post count badge instead of
   a category-type badge — give it a slightly different, quieter treatment
   so it doesn't read as a clickable filter the way post-type-badge does on
   the listing page. */
body.page-listing .post-type-badge:not(a) {
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  body.page-listing .post-card::before {
    transition: none;
  }
}