/* hyperclank.com's landing page (hyperclank/landing): an introduction, the latest post, the next
   several, and the media links. The post cards themselves are the shared c-reading-box, so what is
   left for this file is the page's own rhythm and the plain list of everything else. */
.p-hyperclank {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  padding-block: var(--space-xl);
}

/* The introduction's heading is screen-reader-only, so for the eye this block is the first thing
   on the page and is set as its description prose: a pull-quote's rule down the inside edge, at
   the size and colour a paired card's summary is read at (.c-reading-boxes--pair
   .c-reading-box__blurb). */
.p-hyperclank__intro {
  max-width: 62ch;
  padding-inline-start: var(--space-md);
  border-inline-start: var(--bw) solid var(--accent);
}
.p-hyperclank__intro-body {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-lg);
  line-height: var(--lh-copy);
}
.p-hyperclank__intro-body + .p-hyperclank__intro-body { margin-block-start: var(--space-md); }

/* At the page's reading size the introduction fills most of a phone's first screen before a post
   is visible, and it is an aside rather than a hero, so it drops a step and the space above it
   (the container's padding) and below it (the container's gap, pulled back) tightens with it. */
@media (max-width: 40rem) {
  .p-hyperclank { padding-block-start: var(--space-md); }
  .p-hyperclank__intro { margin-block-end: calc(var(--space-lg) - var(--space-2xl)); }
  .p-hyperclank__intro-body { font-size: var(--text-sm); }
}

/* The one heading the three lists below the introduction share. It carries no rule under it,
   nothing on this page being divided by a line — space does that work throughout. */
.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);
}

/* The date on a media entry, which has no card of its own; a post card carries the component's
   (c-reading-box__meta). */
.p-hyperclank__post-date {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-dim);
  letter-spacing: var(--tracking-wide);
}

/* The list of every post the featured cards above did not take. A row is one <a> around the whole
   grid, so it takes the cards' hover cues — the picture's frame and the text turning accent
   together — rather than the underline 04-elements would rule under every word of it. */
.p-hyperclank__index-list {
  list-style: none;
  margin: 0;
  padding: 0;
  /* 04-elements caps every ul at the reading measure, which is right for a list inside prose and
     wrong for one that is the page's own index. */
  max-width: none;
}
.p-hyperclank__index-row {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  column-gap: var(--space-lg);
  row-gap: var(--space-xs);
  padding-block: var(--space-md);
  color: var(--text-bright);
}
.p-hyperclank__index-row:hover,
.p-hyperclank__index-row:focus-visible { color: var(--accent); text-decoration: none; }
.p-hyperclank__index-meta {
  grid-column: 1 / -1;
  display: flex;
  gap: var(--space-md);
  font-size: var(--text-xs);
  color: var(--text-dim);
  letter-spacing: var(--tracking-wide);
}
/* The frame holds the cards' 16:9 whether or not the post has a picture, so a row without one is
   as tall as the rows around it rather than short. */
.p-hyperclank__index-frame {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--surface);
  border: var(--bw) solid var(--line);
}
.p-hyperclank__index-row:hover .p-hyperclank__index-frame,
.p-hyperclank__index-row:focus-visible .p-hyperclank__index-frame { border-color: var(--accent); }
.p-hyperclank__index-shot { inline-size: 100%; block-size: 100%; object-fit: contain; display: block; }
/* A row's title is read at --text-lg, the size the paired cards' summaries take, so the list
   below them is the same weight of type rather than a step under it. */
.p-hyperclank__index-title {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}
.p-hyperclank__index-summary {
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: var(--lh-copy);
}

/* Two columns are all a phone has room for: the title and the summary stack in the second, and
   the picture is given both of their rows so it stands beside the pair rather than above one. */
@media (max-width: 40rem) {
  .p-hyperclank__index-row {
    grid-template-columns: 7rem minmax(0, 1fr);
    column-gap: var(--space-md);
  }
  .p-hyperclank__index-frame { grid-row: 2 / span 2; }
  .p-hyperclank__index-title,
  .p-hyperclank__index-summary { grid-column: 2; }
}

/* The template omits the media section when config/hyperclank/media.yml lists nothing, so no rule
   here draws 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); }