/* blatt-site/public/css/links.css
 *
 * The link hub at /links on all three hosts.
 *
 * DESIGNED FOR A THUMB, NOT A DESK. This page is reached from a bio line
 * on a phone. Everything below follows from that and from CLAUDE.md's
 * Momentum rules, which a links page puts under unusual pressure: every
 * link-in-bio template on the internet ships fully rounded pills, and
 * pills are banned outright here. Radii stay at 8px.
 */

.b-lk-page {
  /* 34rem, not a pixel width. The measure has to hold when a visitor has
     bumped their phone's text size up, which on a page made entirely of
     labels is the difference between one line and three per row. */
  max-width: 34rem;
  margin: 0 auto;
  padding-block: clamp(28px, 7vw, 64px);
  padding-inline: 20px;
}

/* ── The head ───────────────────────────────────────────────────── */

.b-lk-top { margin-bottom: clamp(26px, 6vw, 40px); }

.b-lk-kicker {
  margin: 0 0 10px;
  font-size: var(--b-step-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mv-gold);
}

.b-lk-name {
  margin: 0 0 12px;
  font-family: 'Russo One', sans-serif;
  font-weight: 400;
  font-size: clamp(1.65rem, 6.5vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--mv-text, #f2efe9);
}

.b-lk-lede {
  margin: 0;
  font-size: var(--b-step-0);
  line-height: 1.55;
  color: var(--mv-text-muted, #b9b4ab);
}

/* ── Groups ─────────────────────────────────────────────────────── */

.b-lk-group { margin-top: clamp(26px, 6vw, 38px); }

.b-lk-head {
  margin: 0 0 12px;
  font-family: 'Russo One', sans-serif;
  font-weight: 400;
  font-size: var(--b-step-micro);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--mv-gold-dark, #c99a45);
}

.b-lk-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

/* ── A row ──────────────────────────────────────────────────────── */

/* The WHOLE row is the anchor, so the entire band is the tap target.
   min-height 60px clears the 44px accessibility floor with room for a
   thumb that is not aimed carefully. */
.b-lk {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 13px 16px;
  border: 1px solid var(--mv-line, rgba(250, 189, 89, 0.19));
  border-radius: 8px;            /* NEVER a pill. See CLAUDE.md. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
  color: inherit;
  text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.b-lk-main { flex: 1 1 auto; min-width: 0; }

.b-lk-label {
  display: block;
  font-size: var(--b-step-0);
  font-weight: 600;
  line-height: 1.32;
  color: var(--mv-text, #f2efe9);
}

.b-lk-sub {
  display: block;
  margin-top: 3px;
  font-size: var(--b-step-micro);
  line-height: 1.45;
  color: var(--mv-text-muted, #a5a099);
}

/* The flag carries the price or the word Free. Squared, like everything
   else, and gold rather than filled, so a row of them down the page
   reads as annotation rather than as eight competing buttons. */
.b-lk-flag {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: 2px;
  padding: 3px 8px;
  border: 1px solid rgba(250, 189, 89, 0.42);
  border-radius: 6px;
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--mv-gold);
}

.b-lk-go {
  flex: 0 0 auto;
  display: flex;
  color: var(--mv-gold);
  opacity: 0.5;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.b-lk-go svg { width: 22px; height: 8px; }

/* Hover is desktop only. On a touch screen :hover sticks after a tap,
   so the row a visitor just left stays lit while the next page loads. */
@media (hover: hover) {
  .b-lk:hover {
    border-color: rgba(250, 189, 89, 0.5);
    background: linear-gradient(180deg, rgba(250, 189, 89, 0.075), rgba(250, 189, 89, 0.02));
    transform: translateY(-1px);
  }
  .b-lk:hover .b-lk-go { opacity: 1; transform: translateX(3px); }
}

.b-lk:focus-visible {
  outline: 2px solid var(--mv-gold);
  outline-offset: 2px;
}

/* Pressed state matters more here than hover: it is the only feedback a
   thumb gets that the tap landed. */
.b-lk:active { transform: translateY(1px); }

/* ── The two portals ────────────────────────────────────────────── */

.b-lk-cross {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(30px, 7vw, 44px);
  padding-top: 22px;
  border-top: 1px solid var(--mv-line, rgba(250, 189, 89, 0.16));
}

.b-lk-x {
  flex: 1 1 auto;
  padding: 12px 14px;
  border: 1px solid var(--mv-line, rgba(250, 189, 89, 0.22));
  border-radius: 8px;
  font-size: var(--b-step-micro);
  letter-spacing: 0.06em;
  text-align: center;
  text-decoration: none;
  color: var(--mv-text-muted, #b9b4ab);
}

@media (hover: hover) {
  .b-lk-x:hover { border-color: rgba(250, 189, 89, 0.45); color: var(--mv-gold); }
}

@media (prefers-reduced-motion: reduce) {
  .b-lk, .b-lk-go { transition: none; }
  .b-lk:hover, .b-lk:active { transform: none; }
}

/* ── Narrow phones ───────────────────────────────────────────────
 *
 * The hub row itself wraps cleanly at 320px, verified by measurement.
 * An earlier version of this block existed to fix a 37px horizontal
 * overflow at that width and did nothing, because the overflow was
 * never here: it was the header tool cluster and the consent buttons,
 * both of which are fixed in ui.css. Kept only for the price flag,
 * which is genuinely tight once a row wraps.
 *
 * The lesson is in the commit: the first fix was aimed at the widest
 * unbreakable string on the page rather than at the element the browser
 * actually reported, and the measurement was unchanged afterwards. */
@media (max-width: 360px) {
  .b-lk { flex-wrap: wrap; gap: 8px 10px; padding-inline: 13px; }
  .b-lk-main { flex-basis: calc(100% - 32px); }
  .b-lk-flag { order: 3; align-self: flex-start; margin-top: 0; }
  .b-lk-go { order: 2; margin-left: auto; }
}