/* The links page (src/pages/links.php), loaded only there. Mobile first: the phone that scanned the
   business card is the main reader. Tokens come from styles.css. */

.nm-links {
  padding-block: 2rem 3rem;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 32px 32px;
}
.nm-links-wrap { max-width: 40rem; margin: 0 auto; display: grid; gap: 1.5rem; }

.nm-links-head { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1rem; }
.nm-links-head > div { display: grid; gap: .35rem; min-width: 0; }
.nm-links-head .eyebrow { margin: 0; }
.nm-links-portrait {
  width: 84px; height: 84px; object-fit: cover; object-position: 50% 12%;
  border-radius: 50%; border: var(--b) solid var(--line); background: var(--red);
  box-shadow: 4px 4px 0 var(--shadow);
}
.nm-links-head h1 {
  font-family: var(--display); font-weight: 900; font-size: clamp(1.7rem, 7vw, 2.4rem);
  line-height: 1.05; letter-spacing: -.03em; margin: 0; text-wrap: balance;
}
.nm-links-mark {
  display: inline-block; background: var(--red); color: var(--on-red); padding: 0 .15em;
  border: var(--b) solid var(--line); box-shadow: 3px 3px 0 var(--shadow); transform: rotate(-1deg);
}
.nm-links-role { margin: 0; font-size: .95rem; font-weight: 500; color: var(--ink-2); }

.nm-links-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.nm-links-list li:has(.nm-link-primary) { grid-column: 1 / -1; }
.nm-link {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9rem;
  min-height: 3.5rem; padding: .55rem .8rem; color: var(--ink); text-decoration: none;
  background: var(--card); border: var(--b) solid var(--line); border-radius: var(--r);
  box-shadow: var(--off) var(--off) 0 var(--shadow);
}
.nm-link-icon {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: none;
  border: 1.5px solid var(--line); border-radius: 50%; background: var(--paper);
}
.nm-link-text { display: grid; min-width: 0; }
.nm-link-label { font-family: var(--display); font-weight: 800; font-size: 1rem; line-height: 1.2; }
.nm-link-detail { font-size: .82rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nm-link-go { font-weight: 700; }
.nm-link:focus-visible { outline: 3px solid var(--red-ink); outline-offset: 3px; }
.nm-link-primary { min-height: 4rem; padding-block: .75rem; background: var(--red); color: var(--on-red); }
.nm-link-primary .nm-link-label { font-size: 1.15rem; }
.nm-link-primary .nm-link-detail { white-space: normal; }
.nm-link-primary .nm-link-detail { color: var(--on-red); }
/* The icon keeps the page's own colours: on-red is dark in both themes, so it would vanish on a dark disc. */
.nm-link-primary .nm-link-icon { color: var(--ink); background: var(--card); }

@media (prefers-reduced-motion: no-preference) {
  .nm-link { transition: transform .15s, box-shadow .15s; }
  .nm-link:hover { transform: translate(-2px, -2px); box-shadow: calc(var(--off) + 2px) calc(var(--off) + 2px) 0 var(--shadow); }
  .nm-link:active { transform: translate(var(--off), var(--off)); box-shadow: none; }
}

/* The talk card in brief: badge, date, title and countdown; the speaking page has the rest. */
.nm-links-next { display: grid; gap: .5rem; }
.nm-links-next h2 { margin: 0; }
.nm-links-next .nm-event { gap: .35rem; padding: 1rem 1.1rem; }
.nm-links-next :is(.nm-event-by, .nm-event-extra, .nm-event-time, .nm-event-where) { display: none; }
.nm-links-next .nm-event-date { font-size: 1.6rem; }
.nm-links-next .nm-event h3 { font-size: 1.15rem; }
.nm-links-more { justify-self: start; font-weight: 700; font-size: .95rem; }

.nm-links-qr {
  display: grid; gap: 1rem; align-items: center; padding: 1rem;
  background: var(--card); border: var(--b) solid var(--line); border-radius: var(--r);
}
.nm-links-qr img { width: 120px; height: 120px; background: #FFFFFF; border: 1.5px solid var(--line); border-radius: 4px; }
.nm-links-qr h2 { font-family: var(--display); font-weight: 800; font-size: 1.2rem; margin: 0 0 .25rem; }
.nm-links-qr p { margin: 0 0 .75rem; color: var(--ink-2); }


@media (min-width: 520px) {
  .nm-links { padding-block: 2.5rem 3.5rem; }
  .nm-links-portrait { width: 104px; height: 104px; }
  .nm-links-qr { grid-template-columns: auto 1fr; }
}
/* Two to a row only where each row still holds its detail on one line. */
@media (min-width: 640px) { .nm-links-list { grid-template-columns: 1fr 1fr; } }