/**
 * Tattoo Listings v2.0 - Masonry Card Styles
 * @description Card: image, overlay, style badges, artist credit, save button
 * @version 1.0.0
 * @date 2026-02-26
 */

/* ================================================================
   MASONRY ITEM (card)
   ================================================================ */
.masonry-item {
  break-inside: avoid;
  margin-bottom: 6px;
  position: relative;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  /* DSv2 §F.14 — shadow-only lift on hover, no translateY transform.
     Keep transform in transition for entering animation reset only. */
  transition: opacity 0.4s ease, transform 0.4s ease, border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.masonry-item--entering {
  opacity: 0 !important;
  transform: translateY(12px) !important;
}

@media (min-width: 480px) { .masonry-item { margin-bottom: 8px; } }
@media (min-width: 640px) { .masonry-item { margin-bottom: 10px; } }
@media (min-width: 1024px) { .masonry-item { margin-bottom: 12px; } }

/* Card hover -- matches Masters Wave 2A pattern (DSv2 §F.14: no translateY) */
.masonry-item:hover {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow-md);
}

.light-theme .masonry-item:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

/* ================================================================
   IMAGE
   ================================================================ */
.masonry-img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--bg-card, var(--color-bg-card));
  transition: transform var(--transition-slow);
}

.masonry-item:hover .masonry-img {
  transform: scale(1.03);
}

/* ================================================================
   OVERLAY -- always visible on mobile, hover on desktop
   ================================================================ */
.masonry-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.15) 35%, transparent 60%);
  opacity: 1;
  transition: opacity var(--transition-normal);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0.75rem;
 /* : overlay is decorative -- let clicks pass through to .masonry-img (viewer) and .masonry-save (favorite) beneath it */
  pointer-events: none;
}

@media (min-width: 1024px) {
  .masonry-overlay {
    opacity: 0;
    background: linear-gradient(to top, var(--color-overlay-scrim-strong) 0%, rgba(0, 0, 0, 0.1) 40%, transparent 100%);
  }
  .masonry-item:hover .masonry-overlay {
    opacity: 1;
  }
}

.masonry-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* ================================================================
   STYLE BADGE -- colored by data-style attribute
   ================================================================ */
.masonry-style {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  width: fit-content;
}

/* Per-style badge colors using design system --color-family-* tokens */
.masonry-style[data-style="japanese"] {
  color: var(--color-family-japanese);
  background: rgba(198, 40, 40, 0.15);
  border: 1px solid rgba(198, 40, 40, 0.3);
}

.masonry-style[data-style="realism"] {
  color: var(--color-family-realism);
  background: rgba(0, 131, 143, 0.15);
  border: 1px solid rgba(0, 131, 143, 0.3);
}

.masonry-style[data-style="blackwork"] {
  color: #8b9ca6;
  background: rgba(55, 71, 79, 0.2);
  border: 1px solid rgba(55, 71, 79, 0.4);
}

.masonry-style[data-style="watercolor"],
.masonry-style[data-style="fineline"],
.masonry-style[data-style="fine_line"] {
  color: var(--color-family-fineline);
  background: rgba(0, 137, 123, 0.15);
  border: 1px solid rgba(0, 137, 123, 0.3);
}

.masonry-style[data-style="traditional"],
.masonry-style[data-style="neo-traditional"],
.masonry-style[data-style="neo_traditional"],
.masonry-style[data-style="neotraditional"] {
  color: #5b9bd5;
  background: rgba(21, 101, 192, 0.15);
  border: 1px solid rgba(21, 101, 192, 0.3);
}

.masonry-style[data-style="lettering"] {
  color: var(--color-family-lettering);
  background: rgba(245, 124, 0, 0.15);
  border: 1px solid rgba(245, 124, 0, 0.3);
}

.masonry-style[data-style="geometric"],
.masonry-style[data-style="illustrative"] {
  color: #9575cd;
  background: rgba(94, 53, 177, 0.15);
  border: 1px solid rgba(94, 53, 177, 0.3);
}

.masonry-style[data-style="chicano"],
.masonry-style[data-style="mandala"] {
  color: #ba68c8;
  background: rgba(106, 27, 154, 0.15);
  border: 1px solid rgba(106, 27, 154, 0.3);
}

.masonry-style[data-style="tribal"] {
  color: #e57c5b;
  background: rgba(216, 67, 21, 0.15);
  border: 1px solid rgba(216, 67, 21, 0.3);
}

.masonry-style[data-style="minimalism"],
.masonry-style[data-style="modern"] {
  color: #66bb6a;
  background: rgba(46, 125, 50, 0.15);
  border: 1px solid rgba(46, 125, 50, 0.3);
}

.masonry-style[data-style="dotwork"],
.masonry-style[data-style="ornamental"] {
  color: #a1887f;
  background: rgba(121, 85, 72, 0.15);
  border: 1px solid rgba(121, 85, 72, 0.3);
}

/* Fallback for unknown styles */
.masonry-style:not([data-style]) {
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ================================================================
   ARTIST CREDIT
   ================================================================ */
.masonry-artist {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.masonry-artist-av {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  object-fit: cover;
}

.masonry-artist-name {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
}

.masonry-body-part {
  font-family: var(--font-ui);
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.6);
}

/* ================================================================
   SAVE BUTTON -- always visible on mobile, hover-only on desktop
   ================================================================ */
.masonry-save {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-overlay-scrim-light);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: all var(--transition-normal);
  border: none;
  cursor: pointer;
  padding: 0;
}

@media (min-width: 1024px) {
  .masonry-save { opacity: 0; }
  .masonry-item:hover .masonry-save { opacity: 1; }
}

.masonry-save:hover {
  background: var(--gold);
}

.masonry-save svg {
  width: 14px;
  height: 14px;
  color: var(--color-white);
}

.masonry-save:hover svg {
  color: var(--color-black);
}

/* Saved state () — always visible, gold fill */
.masonry-save.saved {
  background: var(--gold);
  opacity: 1 !important;
}

.masonry-save.saved svg {
  color: var(--color-black);
  fill: currentColor;
}

/* ================================================================
   TOAST (INK-DEV-145) — used by gallery favorites
   ================================================================ */
.inkppl-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(0, 0, 0, 0.9);
  color: var(--color-white);
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  font-size: 0.9rem;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 10000;
  pointer-events: none;
}

.inkppl-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ================================================================
   DOUBLE-TAP HEART (mobile gesture — Instagram-style)
   ================================================================ */
.masonry-dbltap-heart {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 88px;
  height: 88px;
  margin: -44px 0 0 -44px;
  pointer-events: none;
  z-index: 5;
  background: center / contain no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M12 21s-7-4.35-7-10a4.5 4.5 0 018-3 4.5 4.5 0 018 3c0 5.65-7 10-7 10z'/></svg>");
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45));
  animation: masonry-dbltap-pop 0.75s ease-out forwards;
}

@keyframes masonry-dbltap-pop {
  0%   { transform: scale(0); opacity: 0; }
  20%  { transform: scale(1.25); opacity: 1; }
  55%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.05); opacity: 0; }
}