/* Things I like: link cards to articles and sites elsewhere.
   Builds on css/home.css (colors, type, header) and css/garden.css (tag buttons, count, empty state). */

.likes { padding-top: clamp(24px, 5vh, 56px); }

.likes-head h1 {
  margin: 0 0 12px;
  font-weight: 800;
  font-size: clamp(48px, 8vw, 104px);
  line-height: 0.95;
  letter-spacing: -0.045em;
  font-variation-settings: 'opsz' 96;
}
.likes-highlight { background: var(--volt); color: var(--volt-ink); padding: 0 0.12em; border-radius: 0.12em; }
.likes-intro { margin: 0 0 28px; font-size: clamp(18px, 1.6vw, 21px); color: var(--ink-soft); max-width: 34em; }

.likes .tag-filter { margin-bottom: 18px; }
.likes .tag-filter[hidden] { display: none; }

/* ---------- Cards ---------- */
.like-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 22px;
}

.like-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 20px;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 22px;
  box-shadow: 6px 6px 0 var(--ink);
  text-decoration: none;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.like-card:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ink); }
.like-card:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }

/* Sites in lime, videos inverted; everything else on paper. */
.like-card[data-type="site"] { background: var(--volt); color: var(--volt-ink); }
.like-card[data-type="video"] { background: var(--ink); color: var(--field); }

.like-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.like-type {
  font-size: 13px;
  font-weight: 700;
  padding: 3px 11px;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  white-space: nowrap;
}
.like-arrow { flex: none; transition: transform 0.14s ease; }
.like-card:hover .like-arrow { transform: translate(2px, -2px); }

.like-title {
  font-weight: 800;
  font-size: clamp(21px, 1.9vw, 25px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}
.like-note { margin: 0; font-size: 16px; line-height: 1.5; opacity: 0.85; }

.like-foot {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 14px;
  font-weight: 500;
  opacity: 0.75;
}
.like-domain { font-weight: 700; overflow-wrap: anywhere; }

@media (max-width: 560px) {
  .like-grid { gap: 16px; }
  .like-card { padding: 16px; box-shadow: 4px 4px 0 var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
  .like-card, .like-arrow { transition: none; }
}