/* Reusable Links module — the 12 link-list LAYOUTS (.lk-list + .lk-* variants)
   plus the shared link-row parts (.lk-card / .lk-media / .lk-glyph / .lk-text /
   .lk-chevron), driven by the --lk-* palette/typography variables set by the
   host (the vendor page's Links section, the dashboard picker samples, or the
   design-lab canvas).

   Every link row renders the SAME markup; a layout is chosen purely by the
   .lk-* class on .lk-list, so a whole list recolors with one scheme swap and
   re-skins with one layout class — the same discipline as faq_layouts.css /
   pricing_layouts.css / footer_layouts.css. This file is the module ONLY; the
   design-lab page chrome lives in link_elements.css. */

.links-block {
  /* Query container so link title/subtitle scale to the module's own width
     (bio column, dashboard picker, or lab canvas) — matches the cqi fluid type
     used across the other layout modules. */
  container-type: inline-size;
  font-family: var(--lk-bf);
  --line: color-mix(in srgb, var(--lk-ink) 16%, transparent);
  --line-soft: color-mix(in srgb, var(--lk-ink) 9%, transparent);
  /* Secondary text. NOT a fixed fade of --lk-ink: a flat 68% put 25 of the 72
     palettes under AA on their own card, for the same reason a flat contact
     tint failed (see _muted_text). The host resolves it per palette against the
     wash below; the color-mix is only the fallback for a host that predates the
     variable, and matches the old behavior exactly. */
  --muted: var(--lk-surface-muted, color-mix(in srgb, var(--lk-ink) 68%, transparent));
  /* Same, for the rows that sit on a brand wash instead of a neutral one. */
  --muted-tint: var(--lk-tint-muted, var(--muted));
  --fill: color-mix(in srgb, var(--lk-ink) 5%, transparent);
  --fill-2: color-mix(in srgb, var(--lk-ink) 8%, transparent);
  --tint: color-mix(in srgb, var(--lk-primary) 12%, transparent);
  --tint-strong: color-mix(in srgb, var(--lk-primary) 20%, transparent);
  --ring: color-mix(in srgb, var(--lk-primary) 26%, transparent);
  --surface: color-mix(in srgb, var(--lk-ink) 4%, var(--lk-bg));
  --shadow: color-mix(in srgb, var(--lk-ink) 14%, transparent);
  --shadow-soft: color-mix(in srgb, var(--lk-ink) 7%, transparent);
  /* Was a spread of hardcoded 8-16px radii that ignored corner_style. Pill and
     circle shapes below stay as they are — a shape is not a radius step. */
  --c-r: var(--lk-radius, 6px);
}
.lk-list { display: flex; flex-direction: column; gap: var(--space-sm, clamp(12px, 1.4vw, 16px)); }

/* Shared link-row parts. Defaults suit a card-style row; individual layouts
   override what they need. */
.lk-card {
  position: relative; display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: var(--c-r); text-decoration: none;
  color: var(--lk-ink); background: var(--surface);
  border: 1px solid transparent; overflow: hidden;
  transition: transform .16s ease, box-shadow .2s ease, background .16s ease, border-color .16s ease;
}
.lk-card:hover { transform: translateY(-1px); }

/* Leading media slot — mirrors the model: it shows the link's photo when one is
   set and enabled (.has-image, painted with the --lk-thumb image), and otherwise
   holds a single generic link glyph when the icon is enabled. When neither the
   image nor the icon applies the host omits the slot entirely (no placeholder). */
.lk-media { flex-shrink: 0; width: 42px; height: 42px; border-radius: var(--c-r);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: var(--fill); color: var(--muted); transition: inherit; }
.lk-glyph { display: flex; align-items: center; justify-content: center; }
/* Standalone glyph inside the media tile — icon scale, not em. */
.lk-glyph svg { width: var(--icon-md, 18px); height: var(--icon-md, 18px); }
.lk-card.has-image .lk-media { background: var(--lk-thumb, var(--tint));
  background-size: cover; background-position: center; }
.lk-card.has-image .lk-glyph { display: none; }

.lk-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* Weight deliberately unset — same reasoning as .faq-q in faq_layouts.css: a
   link row is a full-width row label, not a card title, and it was 400 by
   design. Size scales between --type-body (15) and --type-h4 (16) so it doesn't
   sit frozen at the desktop step on a phone. */
/* --lk-surface-ink, not --lk-ink: the row sits on a wash of ink over the page,
   which costs a colored ink (a red, a cobalt) just enough contrast to drop it
   under AA on the card while it still reads fine as body copy on the page. */
.lk-name { font-family: var(--lk-hf); font-size: clamp(15px, 3.1cqi, 16px); line-height: 1.42;
  letter-spacing: -.004em; color: var(--lk-surface-ink, var(--lk-ink));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* --type-body-sm */
.lk-sub { font-size: 13px; color: var(--muted); line-height: 1.55;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lk-chevron { flex-shrink: 0; color: var(--muted); display: flex; align-items: center;
  transition: transform .15s ease, color .15s ease; }
/* Sits beside the row label, so it sizes in em per the kit. */
.lk-chevron svg { width: var(--icon-inline, 1.15em); height: var(--icon-inline, 1.15em); }
.lk-card:hover .lk-chevron { transform: translateX(3px); color: var(--lk-ink); }

/* ===================================================================
   LAYOUT VARIANTS — each is chosen by a single .lk-* class on .lk-list.
   The link content is title + optional subtitle + optional photo, so the
   text-forward styles read cleanly with no photo and simply upgrade the
   leading slot to a thumbnail when one is present; the image-forward style
   (Cover) leans on the photo and degrades to the neutral fallback.
   =================================================================== */

/* 1. Outlined — transparent, hairline border, fills with tint on hover. The
   glyph tile is a hairline square too; a photo overrides it. */
.lk-outline .lk-card { background: transparent; border-color: var(--line); }
.lk-outline .lk-media { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); }
.lk-outline .lk-card.has-image .lk-media { box-shadow: none; }
.lk-outline .lk-card:hover { border-color: var(--lk-primary); background: var(--tint); }

/* 2. Solid Button — primary fill, text on-primary. A photo still shows in the
   leading slot; the glyph fallback sits on a translucent white tile. */
/* --lk-primary-fill, not --lk-primary: a label has to sit on this one, and a
   vendor-tuned mid-tone brand is a color no text can clear AA on (see
   _legible_fill). Identical to --lk-primary on every shipped palette. */
.lk-solid .lk-card { background: var(--lk-primary-fill, var(--lk-primary)); color: var(--lk-on-primary); }
.lk-solid .lk-name { color: var(--lk-on-primary); }
/* Subtitle/chevron step back from the title without a fixed alpha: fading
   --lk-on-primary to 78% dropped 47 of the 72 palettes under AA, worst 3.40:1,
   because a mid-tone brand fill (a tan, a sage) leaves the label almost no
   headroom to give away. The host fades it as far as each palette allows. */
.lk-solid .lk-sub { color: var(--lk-on-primary-muted, var(--lk-on-primary)); }
/* --lk-on-primary-chip, not a flat mix: an 18% wash lands anywhere from
   1.24:1 to 1.71:1 against the card across the 72 palettes — the mid-tone
   tan/sage/mauve fills darken by an amount the eye barely registers while the
   dark fills get a visible tile free. The host walks the wash per palette to
   a 1.40:1 surface delta (see _chip_fill); the mix is only the fallback for a
   host that predates the variable, and matches the old behavior exactly. */
.lk-solid .lk-media { background: var(--lk-on-primary-chip, color-mix(in srgb, var(--lk-on-primary) 18%, transparent));
  color: var(--lk-on-primary); }
.lk-solid .lk-chevron { color: var(--lk-on-primary-muted, var(--lk-on-primary)); }
.lk-solid .lk-card:hover { filter: brightness(1.06); box-shadow: 0 8px 22px var(--shadow); }
.lk-solid .lk-card:hover .lk-chevron { color: var(--lk-on-primary); }

/* 3. Soft Tint — low-contrast primary wash, primary ink. */
.lk-soft .lk-card { background: var(--tint); }
.lk-soft .lk-media { background: color-mix(in srgb, var(--lk-primary) 20%, transparent);
  /* --lk-primary-text is the brand made readable on *paper*; this tile is a 20%
     brand wash, so it takes the tint-resolved one instead. */
  color: var(--lk-tint-text, var(--lk-primary-text, var(--lk-primary))); }
.lk-soft .lk-card.has-image .lk-media { background: var(--lk-thumb);
  background-size: cover; background-position: center; }
/* Was 82% brand + ink, which read as the brand on a vivid palette and as mud on
   a pale one — 29 of 72 under AA against their own tint. The host resolves the
   brand against this exact wash, keeping the hue and clearing AA on all of them. */
.lk-soft .lk-name { color: var(--lk-tint-text, var(--lk-primary)); }
.lk-soft .lk-sub { color: var(--muted-tint); }
.lk-soft .lk-chevron { color: var(--muted-tint); }
.lk-soft .lk-card:hover { background: var(--tint-strong); }
.lk-soft .lk-card:hover .lk-chevron { color: var(--lk-tint-ink, var(--lk-ink)); }

/* 4. Pill — fully rounded, compact. Round leading slot. */
.lk-pill { gap: 10px; }
.lk-pill .lk-card { border-radius: 999px; padding: 9px 16px 9px 9px;
  background: transparent; border-color: var(--line); }
.lk-pill .lk-media { width: 38px; height: 38px; border-radius: 50%; }
/* Pill reads compact through its padding and round media, not a smaller name. */
.lk-pill .lk-name { font-size: 16px; }
.lk-pill .lk-card:hover { border-color: var(--lk-primary); background: var(--tint); }

/* 5. Hairline List — no cards; rows divided by rules. Text-forward: the neutral
   glyph slot is dropped entirely, and only real photos keep a leading thumbnail. */
.lk-hairline { gap: 0; }
.lk-hairline .lk-card { background: transparent; border-radius: 0; padding: 15px 4px;
  border-bottom: 1px solid var(--line-soft); }
.lk-hairline .lk-card:first-child { border-top: 1px solid var(--line-soft); }
.lk-hairline .lk-card:not(.has-image) .lk-media { display: none; }
.lk-hairline .lk-media { width: 44px; height: 44px; border-radius: var(--c-r); }
.lk-hairline .lk-card:hover { transform: none; background: var(--fill); padding-left: 12px; padding-right: 12px; border-radius: var(--c-r); }

/* 6. Underline — purely text; no leading slot at all. Animated underline. */
.lk-underline { gap: 2px; }
.lk-underline .lk-card { background: transparent; border-radius: 0; padding: 16px 2px;
  border-bottom: 1px solid var(--line-soft); }
.lk-underline .lk-media { display: none; }
.lk-underline .lk-name { position: relative; display: inline-block; }
.lk-underline .lk-name::after { content: ""; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 2px; background: var(--lk-primary); transform: scaleX(0);
  transform-origin: left; transition: transform .22s ease; }
.lk-underline .lk-card:hover { transform: none; }
.lk-underline .lk-card:hover .lk-name { color: var(--lk-primary-text, var(--lk-primary)); }
.lk-underline .lk-card:hover .lk-name::after { transform: scaleX(1); }

/* 7. Cover Image — the photo fills the whole card with the title/subtitle
   overlaid over a scrim. Links without a photo fall back to a tall tinted block
   so the title still reads. */
.lk-cover { gap: 14px; }
.lk-cover .lk-card { padding: 0; gap: 0; min-height: 128px; align-items: flex-end;
  border-radius: var(--c-r); }
.lk-cover .lk-media { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
.lk-cover .lk-card:not(.has-image) .lk-media { background: var(--tint-strong); }
.lk-cover .lk-glyph { color: color-mix(in srgb, var(--lk-primary) 70%, var(--lk-ink)); }
.lk-cover .lk-glyph svg { width: var(--icon-xl, 28px); height: var(--icon-xl, 28px); }
.lk-cover .lk-text { position: relative; z-index: 1; width: 100%; gap: 3px;
  padding: 40px 16px 15px; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.36) 46%, rgba(0,0,0,0) 100%); }
/* --type-h3 — the cover title carries a whole card, so it takes one step up. */
/* Scales like the base name, one step up (--type-h4 -> --type-h3). */
.lk-cover .lk-name { color: #fff; font-size: clamp(16px, 3.4cqi, 18px); line-height: 1.36; letter-spacing: -.008em; white-space: normal; }
.lk-cover .lk-sub { color: rgba(255,255,255,0.88); white-space: normal; }
.lk-cover .lk-chevron { display: none; }
/* No-photo cover: the fallback block is light, so darken the overlaid text
   instead of the white-on-scrim treatment. */
/* The fallback block is a 20% brand wash, not paper, so both lines resolve
   against the tint — raw --lk-ink lands at 3.48:1 on the palettes whose ink is
   itself a color (pettingzoo's red, mascot's cobalt). */
.lk-cover .lk-card:not(.has-image) .lk-text { color: var(--lk-tint-ink, var(--lk-ink));
  background: linear-gradient(to top, color-mix(in srgb, var(--lk-bg) 78%, transparent) 0%, transparent 100%); }
.lk-cover .lk-card:not(.has-image) .lk-name { color: var(--lk-tint-ink, var(--lk-ink)); }
.lk-cover .lk-card:not(.has-image) .lk-sub { color: var(--muted-tint); }
.lk-cover .lk-card:hover { box-shadow: 0 10px 26px var(--shadow); }