/* ============================================================
   CONTENT PACKS — page-specific styles (/packs/)
   Loads after tokens.css + base.css. Reuses .hero, .section,
   .close, and footer styles from base.css.
   ============================================================ */

/* Mainspring logo (img-based) + footer parent link — mirrored from
   mainspring.css since this page loads packs.css instead */
.logo__mark { width: 22px; height: 22px; flex: 0 0 auto; display: block; }
.logo__text { height: 18px; width: auto; flex: 0 0 auto; display: block; }
.foot__brand p { max-width: 36ch; }
.foot__parent {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--line);
  font-size: var(--fs-body);
}

/* Page head — single-column hero, no artifact card */
.hero--packs { padding-bottom: var(--sp-3xl); }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: var(--fs-caption);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--steel-blue);
  margin-bottom: var(--sp-lg);
}
.hero__eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--steel-blue); }
.hero--packs .hero__title { max-width: 16ch; text-wrap: balance; }

/* ============================================================
   PACK GRID
   ============================================================ */
.packs-section { padding-block: var(--sp-md) calc(var(--sp-4xl) + var(--sp-md)); }
.packs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-lg);
}
@media (max-width: 980px) { .packs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .packs { grid-template-columns: 1fr; } }

.pack {
  background: var(--paper);
  border: 1px solid var(--mist);
  border-radius: 4px;
  box-shadow: 0 1px 0 var(--mist);
  display: flex; flex-direction: column;
  overflow: hidden;
  scroll-margin-top: 96px; /* anchor links from LinkedIn land below the nav */
  transition: border-color var(--dur-in) var(--ease), box-shadow var(--dur-in) var(--ease);
}
.pack:hover { border-color: var(--mist-blue); box-shadow: 0 2px 8px rgba(76, 98, 110, 0.10); }

/* Thumbnail slot — 1024×1024 cover art, scaled to fit; drafting grid
   shows through until the image loads (or if it's missing). */
.pack__thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--mist);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
  border-bottom: 1px solid var(--mist);
}
.pack__thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.pack__ghost {
  position: absolute; left: 12px; bottom: 4px;
  font-family: var(--font-mono); font-size: 3.25rem; font-weight: 500;
  color: rgba(76, 98, 110, 0.12); letter-spacing: -0.02em;
  user-select: none;
}

.pack__body { padding: var(--sp-lg); display: flex; flex-direction: column; gap: var(--sp-sm); flex: 1; }
.pack__meta {
  font-family: var(--font-mono); font-size: var(--fs-caption);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate);
}
.pack__meta b { color: var(--steel-blue); font-weight: 500; }
.pack__title { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.01em; }
.pack__desc { font-size: var(--fs-body); line-height: 1.55; flex: 1; }

.pack__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md);
  padding: var(--sp-md) var(--sp-lg);
  border-top: 1px solid var(--mist);
}
.pack__count {
  font-family: var(--font-mono); font-size: var(--fs-caption);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate);
  display: inline-flex; align-items: center; gap: 6px;
  font-variant-numeric: tabular-nums;
}
.pack__count svg { width: 12px; height: 12px; flex: 0 0 auto; }

/* Closing CTA on this page uses the section scale, not the display scale */
.close--packs h2 { font-size: var(--fs-h2); letter-spacing: -0.02em; max-width: 26ch; }