/* links.css — Link Cards, Bento Grid & Social Grid (neobrutalism) */

.links-section { padding: 8px 0 40px; }

.links-container {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ── Group ──────────────────────────────────────────────── */
.link-group { display: flex; flex-direction: column; gap: 10px; }

.group-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink);
  padding-left: 2px; margin-bottom: 2px;
}
.group-label svg { color: var(--blue); }

/* ── Link Card ──────────────────────────────────────────────
   Brutalist press mechanic: card sits offset from its shadow.
   On press, translate the card onto its own shadow. ─────────── */
.link-card {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 15px 16px;
  border-radius: var(--radius);
  background: var(--card-bg, var(--bg-card));
  border: var(--border-w) solid var(--ink);
  box-shadow: 4px 4px 0 var(--card-shadow, var(--ink));
  overflow: visible; cursor: pointer;
  transition:
    transform 0.16s var(--ease-spring),
    box-shadow 0.16s var(--ease-spring);
  text-decoration: none; color: var(--ink);
  -webkit-user-select: none; user-select: none;
  will-change: transform;
}

.link-card:has(.link-badge) { padding-top: 22px; }

/* Locked mechanic: the shadow's absolute position on screen never
   moves — only its visible distance does. translate(-3,-3) + shadow
   7,7 = same spot as resting 4,4. translate(3,3) + shadow 1,1 = same
   spot too. This is what reads as "the card presses into a shadow
   nailed in place," not "the shadow sliding around." */
.link-card:hover {
  transform: translate(-3px, -3px) rotate(var(--tilt, 0deg));
  box-shadow: 7px 7px 0 var(--card-shadow, var(--ink));
}

.link-card:active {
  transform: translate(3px, 3px) rotate(var(--tilt, 0deg));
  box-shadow: 1px 1px 0 var(--card-shadow, var(--ink));
}

/* Shadow color is unified to ink everywhere unless a card opts in
   via --card-shadow inline. No more colored-shadow override classes
   needed — keeps every card on the same locked system. */

.link-card::before { content: none; }

/* ── Icon wrap — bordered square, flat fill, gentle pop on hover ── */
.link-icon-wrap {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: var(--icon-color, #3B82F6); border: var(--border-w) solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  transition: transform 0.2s var(--ease-spring);
}
.link-card:hover .link-icon-wrap { transform: rotate(-8deg) scale(1.08); }

/* ── Text ───────────────────────────────────────────────── */
.link-text { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-right: 4px; }
.link-title { font-size: 0.95rem; font-weight: 800; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link-sub   { font-size: 0.74rem; color: var(--gray-2); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Badge ──────────────────────────────────────────────── */
.link-badge {
  position: absolute; top: 8px; right: 12px;
  flex-shrink: 0; padding: 3px 9px; border-radius: 999px;
  font-size: 0.56rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase;
  background: var(--green); border: 2px solid var(--ink); color: var(--ink);
  white-space: nowrap;
  transform: rotate(3deg);
  z-index: 1;
}
.new-badge { background: var(--cyan); }

/* ── Arrow ──────────────────────────────────────────────── */
.link-arrow { flex-shrink: 0; color: var(--ink); transition: transform 0.18s var(--ease-spring); }
.link-card:hover .link-arrow { transform: translateX(4px) rotate(-10deg); }

/* ── Ripple ─────────────────────────────────────────────── */
.link-ripple { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: var(--radius); }
.ripple-circle {
  position: absolute; border-radius: 50%;
  background: rgba(10,10,10,0.08);
  transform: scale(0);
  animation: rippleOut 0.45s ease forwards;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════
   MATHABOT FEATURED CARD — stats live here, not in the hero
══════════════════════════════════════════════════════════ */
.bot-card {
  flex-direction: column;
  align-items: stretch;
  padding: 16px 16px 14px;
  gap: 0;
}

.bot-card-top {
  display: flex;
  align-items: center;
  gap: 14px;
}

.bot-stats {
  display: flex;
  align-items: center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 2px dashed rgba(10,10,10,0.16);
}

.bot-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.bot-stat:not(:last-child) {
  border-right: 2px solid rgba(10,10,10,0.1);
}

.bot-stat-num {
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.bot-stat-lbl {
  font-size: 0.6rem;
  color: var(--gray-2);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════
   BENTO ROW — two compact square-ish cards side by side,
   keeps the layout from reading as one long uniform stack
══════════════════════════════════════════════════════════ */
.bento-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.bento-card {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 16px 14px;
  text-align: left;
}

.bento-card .link-icon-wrap { margin-bottom: 6px; }
.bento-card .link-title { white-space: normal; }
.bento-card .link-sub   { white-space: normal; }

/* ══════════════════════════════════════════════════════════
   SOCIAL GRID
══════════════════════════════════════════════════════════ */
.social-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.social-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 18px 12px 16px; border-radius: var(--radius);
  background: var(--bg-card); border: var(--border-w) solid var(--ink);
  box-shadow: 4px 4px 0 var(--s-shadow, var(--ink));
  text-decoration: none; color: var(--ink); overflow: hidden;
  transition:
    transform 0.16s var(--ease-spring),
    box-shadow 0.16s var(--ease-spring);
  cursor: pointer; -webkit-user-select: none; user-select: none;
  will-change: transform;
}

.social-card::before { content: none; }

/* Same locked math as .link-card: hover/active offsets always sum
   back to the resting 4,4 — the shadow stays nailed in place while
   the card itself visibly lifts or presses into it. */
.social-card:hover  { transform: translate(-3px, -3px) rotate(var(--tilt, 0deg)) scale(1.02); box-shadow: 7px 7px 0 var(--s-shadow, var(--ink)); }
.social-card:active { transform: translate(3px, 3px) rotate(var(--tilt, 0deg)); box-shadow: 1px 1px 0 var(--s-shadow, var(--ink)); }

/* Per-platform — tinted card background + solid icon chip, same
   border/shadow press mechanic as every other card ─────────────── */
.tiktok    { --s-color: var(--ink); --s-shadow: var(--ink); background: var(--bg-card); }
.tiktok .social-icon    { background: var(--ink); color: var(--white); }

.instagram { --s-color: #E4405F; --s-shadow: #E4405F; background: var(--bg-card); }
.instagram .social-icon { background: #E4405F; color: var(--white); }

.telegram  { --s-color: #26A5E4; --s-shadow: #26A5E4; background: var(--bg-card); }
.telegram .social-icon  { background: #26A5E4; color: var(--white); }

.whatsapp  { --s-color: var(--green); --s-shadow: var(--green); background: var(--bg-card); }
.whatsapp .social-icon  { background: var(--green); color: var(--white); }

.social-icon {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  border: var(--border-w) solid var(--ink);
  transition: transform 0.2s var(--ease-spring);
}
.social-card:hover .social-icon { transform: rotate(-8deg) scale(1.1); }

.social-name   { font-size: 0.85rem; font-weight: 800; color: var(--ink); }
.social-handle { font-size: 0.68rem; color: var(--gray-2); font-weight: 500; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .link-card, .social-card, .link-icon-wrap, .social-icon, .link-arrow { transition: opacity 0.15s ease; }
  .link-card:hover, .social-card:hover { transform: none; }
  .link-card:active, .social-card:active { transform: none; opacity: 0.85; }
}

/* ══════════════════════════════════════════════════════════
   DESKTOP (min-width: 540px)
══════════════════════════════════════════════════════════ */
@media (min-width: 540px) {
  .links-container { max-width: 720px; padding: 0 40px; gap: 24px; }

  .group-label { font-size: 0.78rem; }

  .link-group { gap: 12px; }

  .link-card { padding: 18px 20px; gap: 18px; }

  .link-icon-wrap { width: 52px; height: 52px; border-radius: 12px; }
  .link-icon-wrap svg { width: 24px; height: 24px; }

  .link-title { font-size: 1.06rem; }
  .link-sub   { font-size: 0.83rem; }

  .link-badge { font-size: 0.68rem; padding: 5px 12px; }

  .bot-card { padding: 20px 22px 18px; }
  .bot-stat-num { font-size: 1.3rem; }
  .bot-stat-lbl { font-size: 0.66rem; }

  .bento-row { gap: 16px; }
  .bento-card { padding: 20px 18px; }

  .social-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }

  .social-card { padding: 22px 16px 20px; gap: 10px; }

  .social-icon { width: 52px; height: 52px; border-radius: 12px; }
  .social-icon svg { width: 24px; height: 24px; }

  .social-name   { font-size: 0.93rem; }
  .social-handle { font-size: 0.76rem; }
}