/* ==========================================================================
   Premium cards — Gallery (.gal-item) + Library (.lib-card)
   Loaded AFTER style.css, so every rule here wins by source order without
   needing !important. Purely presentational: no markup here changes what
   gallery.js / library.js wire up (same ids/classes for click handlers),
   only adds a few extra wrapper elements + data-driven info lines.
   ========================================================================== */

/* ── shared card chrome ──────────────────────────────────────────────────── */
.lp-card,
.gal-item.gp-card{
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: transform var(--t-med) var(--ease-out-back),
              box-shadow var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease);
  will-change: transform;
}
.lp-card:hover,
.gal-item.gp-card:hover{
  transform: translateY(-5px);
  border-color: var(--accent-t-edge-hi);
  box-shadow: var(--shadow-soft);
}
.lp-card:active,
.gal-item.gp-card:active{ transform: translateY(-2px); }

/* Adaptive grids — auto-fill so the row always fills, 1-2 cols on mobile */
.lib-grid{
  grid-template-columns: repeat(auto-fill, minmax(198px, 1fr));
  gap: var(--sp-16);
}
.gal-grid{
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: var(--sp-16);
}
@media (max-width: 640px){
  .lib-grid, .gal-grid{ grid-template-columns: repeat(2, 1fr); gap: var(--sp-12); }
}
@media (max-width: 380px){
  .lib-grid, .gal-grid{ grid-template-columns: 1fr; }
}

/* ── thumb / cover ────────────────────────────────────────────────────────── */
.lp-thumb, .gp-thumb{ position: relative; overflow: hidden; background: var(--bg-soft); }
.lp-thumb img, .gp-thumb img,
.lp-thumb video, .gp-thumb video{
  transition: transform var(--t-slow) var(--ease);
}
.lp-card:hover .lp-thumb img,
.gal-item.gp-card:hover .gp-thumb img{ transform: scale(1.06); }

/* Gradient scrim anchored to the bottom of the cover — keeps chips/badges
   legible over busy photos without a flat overlay hiding the image. */
.lp-thumb-overlay, .gp-thumb-overlay{
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(180deg, rgba(10,10,18,0) 45%, rgba(10,10,18,.55) 100%);
  pointer-events: none;
}

.lp-type-chip, .gp-kind{
  position: absolute; top: 8px; left: 8px;
  display: inline-flex; align-items: center; gap: var(--sp-4);
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(10,10,18,.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.08);
  font: 700 var(--fs-10)/1.3 var(--sans);
  color: var(--text);
  letter-spacing: .1px;
  white-space: nowrap;
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.lp-media-chip{
  position: absolute; top: 8px; right: 8px;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(10,10,18,.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.08);
  font: 700 var(--fs-10)/1.3 var(--mono);
  color: var(--text-dim);
}

/* Gallery kind chip reuses the same visual language but sits on its own
   (no separate media-count chip — a gallery item never needs one). */
.gp-kind{ font: 700 var(--fs-10)/1.3 var(--sans); }

/* ── body / typography ────────────────────────────────────────────────────── */
.lp-body, .gal-item.gp-card .gal-body{
  padding: 12px 13px 13px;
  gap: 5px;
}
.lp-name, .gal-item.gp-card .gal-name{
  font: 700 var(--fs-13)/1.35 var(--sans);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lp-desc{
  font: 500 var(--fs-11)/1.5 var(--sans);
  color: var(--text-dim);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lp-meta, .gp-date{
  font: 600 var(--fs-10)/1 var(--mono);
  color: var(--text-mute);
  margin-top: 1px;
}
.lp-foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  margin-top: 2px;
}
.lp-badge{ font-size:  var(--fs-10); padding: 3px 8px; }

/* ── gallery hover-reveal actions ─────────────────────────────────────────── */
.gp-actions{
  position: absolute; top: auto; right: 8px; bottom: 8px; left: 8px;
  display: flex; gap: var(--sp-6);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  pointer-events: none;
}
.gal-item.gp-card:hover .gp-actions,
.gal-item.gp-card:focus-within .gp-actions{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.gp-actions .btn{
  flex: 1;
  padding: 6px 8px;
  font-size:  var(--fs-11);
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
/* Кнопки лише зі значком не діляться шириною нарівні з «→ У композер»:
   інакше головна дія стискається до трьох крапок заради двох іконок. */
.gp-actions .gal-del,
.gp-actions .gal-lib{ flex: none; width: 30px; padding: 6px; }

/* On touch devices hover never fires — keep actions visible so nothing is
   unreachable without a mouse. */
@media (hover: none){
  .gp-actions{ opacity: 1; transform: none; pointer-events: auto; position: static; margin-top: 8px; }
  .gp-thumb-overlay{ display: none; }
}

/* ── skeleton loaders — scoped to these two grids only ───────────────────── */
.lib-grid .skel-card, .gal-grid .skel-card{
  border-radius: var(--radius);
  background: linear-gradient(100deg, var(--panel) 30%, var(--panel-2) 50%, var(--panel) 70%);
  background-size: 200% 100%;
  animation: lpShimmer 1.4s ease-in-out infinite;
  border: 1px solid var(--border-soft);
}
@keyframes lpShimmer{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce){
  .lib-grid .skel-card, .gal-grid .skel-card{ animation: none; }
}