/* 08-pages/_hyperclank-landing.css
   ── p-hyperclank — the composition of hyperclank.com's landing page: the hero, the latest
   post, the compact list of the next several, and the media links. Page-layer rules only;
   the tokens they resolve are the brand scope's (02-brands/_hyperclank.css). */
.p-hyperclank {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  padding-block: var(--space-xl);
}

/* ── the hero: the one place the company site sells the product. */
.p-hyperclank__hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-xl) var(--space-lg);
  background: linear-gradient(160deg, var(--surface-hi), var(--surface-raised));
  border: var(--bw) solid var(--line);
  border-left: 3px solid var(--accent);
}
.p-hyperclank__hero-title {
  font-size: var(--text-3xl);
  color: var(--text-bright);
  margin: 0;
}
.p-hyperclank__hero-lead {
  max-width: var(--measure);
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-lg);
}
.p-hyperclank__hero-cta { margin-top: var(--space-xs); }

/* ── section headings — one shared label for the three lists below the hero. */
.p-hyperclank__section-title {
  margin: 0 0 var(--space-lg);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-dim);
  border-bottom: var(--bw) solid var(--line);
  padding-bottom: var(--space-xs);
}

.p-hyperclank__post-date {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-dim);
  letter-spacing: var(--tracking-wide);
}

/* ── the latest post, given more room than the rest. */
.p-hyperclank__latest-post { display: flex; flex-direction: column; gap: var(--space-sm); }
.p-hyperclank__latest-post-title { margin: 0; font-size: var(--text-2xl); }
.p-hyperclank__latest-post-summary {
  margin: 0;
  max-width: var(--measure);
  color: var(--text-muted);
  font-size: var(--text-lg);
}

/* ── more posts: a compact list, one row each, ending in the link to the index. */
.p-hyperclank__more-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.p-hyperclank__more-post {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  padding-block: var(--space-sm);
  border-bottom: var(--bw) solid var(--line);
}
.p-hyperclank__more-post .p-hyperclank__post-date { flex: 0 0 auto; width: 11ch; }
.p-hyperclank__more-post-title { color: var(--text); }
.p-hyperclank__more-post-title:hover { color: var(--accent); }
.p-hyperclank__more-all {
  display: inline-block;
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
}

/* ── media links: absent entirely when there are no entries, so nothing here styles an
   empty state. */
.p-hyperclank__media-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
}
.p-hyperclank__media-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-md);
  background: var(--surface-raised);
  border: var(--bw) solid var(--line);
}
.p-hyperclank__media-outlet {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
}
.p-hyperclank__media-headline { color: var(--text-bright); }
.p-hyperclank__media-headline:hover { color: var(--accent); }

@media (max-width: 40rem) {
  .p-hyperclank__more-post { flex-direction: column; gap: var(--space-2xs); }
  .p-hyperclank__more-post .p-hyperclank__post-date { width: auto; }
}