/* =================================================================
   "As mentioned" cards
   -----------------------------------------------------------------
   The homepage section (#as-mentioned in index.html) and the preview
   on /mentions-admin/ both load this file, so the preview matches the
   homepage exactly. Everything is scoped .am-*. Colours use the
   homepage tokens, with fallbacks for pages that don't define them.
   ================================================================= */

#as-mentioned[hidden]{display:none}
/* Space above the values band. An id, because the homepage's own .wrap rule
   (padding:0 var(--gutter)) loads after this file and zeroes the vertical
   padding of any plain class rule here. */
#as-mentioned{padding-bottom:36px}

/* ---------- the row ---------------------------------------------- */
.am-rail{position:relative}
.am-track{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:calc((100% - 2*22px)/3);
  gap:22px;overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x proximity;
  list-style:none;margin:0;padding:3px 2px 8px;
  scrollbar-width:none;
}
.am-track::-webkit-scrollbar{display:none}
.am-track:focus-visible{outline:2px solid var(--orange,#FB4807);outline-offset:4px;border-radius:var(--r-md,16px)}
.am-item{display:flex;scroll-snap-align:start;min-width:0}

.am-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:46px;height:46px;border-radius:50%;
  background:#fff;border:1px solid var(--line,rgba(58,42,20,.13));
  display:grid;place-items:center;color:var(--ink,#101E2E);
  box-shadow:var(--shadow-md,0 6px 24px rgba(16,30,46,.07));z-index:5;cursor:pointer;
  transition:background .18s ease;
}
.am-nav:hover{background:var(--card,#FBF6ED)}
.am-nav .icon{width:20px;height:20px}
.am-prev{left:-16px}
.am-next{right:-16px}
.am-nav[hidden]{display:none}

.am-more{display:none}

/* ---------- the card --------------------------------------------- */
.am-card{
  display:flex;flex-direction:column;width:100%;min-width:0;
  background:var(--panel,#FDFAF2);
  border:1px solid var(--line-soft,rgba(58,42,20,.08));
  border-radius:var(--r-md,16px);
  box-shadow:var(--shadow-sm,0 1px 2px rgba(16,30,46,.05));
  overflow:hidden;
  font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--body,#3D4754);text-align:left;
}
.am-inner{display:flex;flex-direction:column;gap:13px;flex:1;padding:18px 20px 17px}

.am-who{display:flex;align-items:center;gap:11px;min-width:0}
.am-avatar{
  flex:none;width:44px;height:44px;border-radius:50%;object-fit:cover;
  background:var(--blush,#F9EFE1);
  box-shadow:0 0 0 1px var(--line-soft,rgba(58,42,20,.08));
}
.am-initials{
  display:grid;place-items:center;
  font-size:15px;font-weight:700;color:var(--ink,#101E2E);letter-spacing:.02em;
}
.am-names{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.3}
.am-name{
  font-size:15px;font-weight:700;color:var(--ink,#101E2E);text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
a.am-name:hover{color:var(--orange,#FB4807)}
.am-handle{
  font-size:13px;color:var(--muted,#7A8391);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.am-platform{
  flex:none;display:grid;place-items:center;
  width:32px;height:32px;border-radius:50%;
  background:#fff;border:1px solid var(--line-soft,rgba(58,42,20,.08));
  color:var(--ink,#101E2E);
}
.am-platform svg{width:15px;height:15px}

.am-body{
  margin:0;font-size:14.5px;line-height:1.6;color:var(--body,#3D4754);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;
  overflow:hidden;overflow-wrap:anywhere;
}

.am-link{
  margin-top:auto;align-self:flex-start;
  display:inline-flex;align-items:center;gap:6px;
  font-size:14px;font-weight:700;color:var(--orange,#FB4807);text-decoration:none;
}
.am-link:hover{color:var(--orange-dark,#DD3B02)}
.am-link svg{width:15px;height:15px;transition:transform .18s ease}
.am-link:hover svg{transform:translateX(3px)}

/* ---------- tablet: two across ------------------------------------ */
@media (max-width:1080px){
  .am-track{grid-auto-columns:calc((100% - 20px)/2);gap:20px}
}

/* ---------- phone: one column, first 4, then "Show more" ---------- */
@media (max-width:560px){
  .am-track{display:flex;flex-direction:column;gap:14px;overflow:visible;padding:0}
  .am-item.am-extra{display:none}
  .am-section.am-all .am-item.am-extra{display:flex}
  .am-nav{display:none}
  .am-more:not([hidden]){
    display:block;margin:16px auto 0;padding:11px 22px;
    background:#fff;border:1px solid var(--line,rgba(58,42,20,.13));border-radius:var(--r-sm,10px);
    font:inherit;font-size:14px;font-weight:700;color:var(--ink,#101E2E);cursor:pointer;
  }
  .am-more:hover{background:var(--card,#FBF6ED)}
}

@media (prefers-reduced-motion:reduce){
  .am-track{scroll-behavior:auto}
  .am-link svg{transition:none}
}