/* Shared "View in 3D" CTA (companion to /components/view-in-3d.js).
   Two variants:
   - .vi3d-primary — cyan Mining Hub pill (newsroom feed tiles)
   - .vi3d-compact — small white/grey chip (advanced-map tiles, dense lists)
   .vi3d-icon-only drops the label padding (investor-deck uses its own
   table-cell styling instead). */

.view-in-3d-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  line-height: 1;
  flex: 0 0 auto;
  /* Host tiles that make their content inert for whole-card click handling
     (e.g. the advanced-map details panel's .sources-list-item-inner
     { pointer-events: none } in map-page-new.css) would otherwise make the
     CTA unclickable — the click would fall through to the card. Explicitly
     opt back in; pointer-events doesn't cascade past an explicit value. */
  pointer-events: auto;
}

.view-in-3d-btn .vi3d-icon {
  flex: 0 0 auto;
  display: block;
}

/* Cyan pill — matches the newsroom .article-buttons teal (#30a5bf) */
.vi3d-primary {
  background-color: #30a5bf;
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  transition: background-color 0.15s ease;
}
.vi3d-primary:hover {
  background-color: #268aa0;
  color: #fff;
}

/* Compact white/grey chip for map tiles */
.vi3d-compact {
  background-color: #fff;
  color: #475569;
  border: 1px solid #d3dae3;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 6px;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.vi3d-compact:hover {
  background-color: #f1f5f9;
  border-color: #94a3b8;
  color: #1e293b;
}

.vi3d-icon-only {
  gap: 0;
}

/* Newsroom feed integration — the tile's .article-buttons row already styles
   its anchors as teal pills (static/css/style.css .article-buttons a, with
   !important margins), so inside that row we only need positioning: the
   View in 3D button sits bottom-right per the mockup. .vi3d-row is the
   standalone row emitted on tiles that have no other buttons. */
.article-buttons .view-in-3d-btn.vi3d-push-right {
  margin-left: auto !important;
  margin-right: 0 !important;
}
.article-buttons.vi3d-row {
  justify-content: flex-end;
}

/* Advanced-map Company Newsroom tile — bottom-right row beneath the excerpt.
   (The drilling cards need no extra rules: .drilling-card-footer is already a
   space-between flex row and the compact button joins the headline there.) */
.news-card-vi3d-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}