/* Comminxy — pin blocks on blog posts + the /pins gallery.
   Loaded by any page that shows pin cards. Uses the site's CSS variables. */

.pin-jump { margin-top: 14px; }
.pin-jump a { font-size: .85rem; font-weight: 600; color: var(--mauve-deep, #8A6E80); text-decoration: none; }
.pin-jump a:hover { text-decoration: underline; }

.pin-block { margin-top: 3rem; scroll-margin-top: 80px; }
.pin-sub { font-size: .9rem; color: var(--text-mute, #938A95); margin: -6px 0 18px; }
.pin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 640px) { .pin-grid { grid-template-columns: repeat(2, 1fr); } .pin-grid .pin-card:nth-child(3) { display: none; } }

.pin-card a.pin-img { position: relative; display: block; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.pin-card img { width: 100%; height: auto; display: block; transition: transform .4s var(--ease, ease); }
.pin-card a.pin-img:hover img { transform: scale(1.03); }
.pin-hover { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 6px;
  background: #E60023; color: #fff; font-size: .78rem; font-weight: 700; padding: 7px 13px; border-radius: 999px;
  opacity: 0; transition: opacity .25s; }
.pin-card a.pin-img:hover .pin-hover { opacity: 1; }
@media (hover: none) { .pin-hover { opacity: 1; font-size: .68rem; padding: 5px 10px; top: 8px; right: 8px; } .pin-hover svg { width: 12px; height: 12px; } }
.pin-cap { font-size: .82rem; color: var(--text, #5E5660); line-height: 1.45; margin-top: 8px; }
.pin-dl { display: inline-block; margin-top: 4px; font-size: .8rem; font-weight: 600; color: var(--mauve-deep, #8A6E80); text-decoration: none; }
.pin-dl:hover { text-decoration: underline; }

/* ---- /pins gallery ---- */
.pins-set { max-width: 1040px; margin: 0 auto clamp(48px, 7vw, 84px); }
.pins-set-head { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.pins-set-head h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); margin: 0; }
.pins-set-head h2 a { color: var(--text-strong); text-decoration: none; }
.pins-set-head h2 a:hover { color: var(--mauve-deep, #8A6E80); }
.pins-set-cat { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mauve-deep, #8A6E80); font-weight: 700; display: block; margin-bottom: 8px; }
.pins-read { flex: none; font-size: .88rem; font-weight: 600; color: var(--gold-deep, #C99248); text-decoration: none; }
.pins-read:hover { text-decoration: underline; }