/* Shared catalog card surface and content primitives. */

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr));
  gap: 1rem;
  padding: 1.5rem 0;
}

.catalog-grid:focus-visible { outline: 2px solid var(--pal-focus); outline-offset: 4px; }

.catalog-card {
  --catalog-hover-lift: 0px;
  --catalog-tilt-scale: 1;
  position: relative;
  min-width: 0;
  border: 1px solid rgba(124, 187, 196, .28);
  background: linear-gradient(155deg, rgba(18, 49, 59, .92), rgba(7, 20, 27, .98));
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%);
  transform: perspective(900px) translateY(var(--catalog-hover-lift)) rotateX(var(--catalog-tilt-x, 0deg)) rotateY(var(--catalog-tilt-y, 0deg)) scale(var(--catalog-tilt-scale));
  transform-style: preserve-3d;
  transition: transform 160ms cubic-bezier(.2, .72, .25, 1), border-color .2s ease, box-shadow .2s ease;
}

.catalog-card::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #008b96, transparent);
  content: "";
  opacity: .6;
  pointer-events: none;
}

.catalog-card:hover,
.catalog-card:focus-within {
  --catalog-hover-lift: -4px;
  z-index: 2;
  border-color: rgba(0, 232, 248, .72);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .38), 0 0 22px rgba(0, 232, 248, .08);
}

.catalog-card.is-tilting {
  --catalog-tilt-scale: 1.018;
  transition-duration: 70ms, .2s, .2s;
  will-change: transform;
}

.catalog-card-button {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 0;
  flex-direction: column;
  color: inherit;
  border: 0;
  background: transparent;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.catalog-card-button:focus-visible { outline-offset: -4px; }

.catalog-card-media {
  position: relative;
  width: 100%;
  min-height: 10.5rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle, rgba(0, 232, 248, .12), transparent 55%),
    linear-gradient(135deg, rgba(4, 26, 33, .8), rgba(15, 55, 67, .45));
  border-bottom: 1px solid rgba(115, 195, 204, .2);
}

.catalog-card-media::before {
  position: absolute;
  width: 8rem;
  aspect-ratio: 1;
  border: 1px solid rgba(0, 232, 248, .15);
  border-radius: 50%;
  content: "";
}

.catalog-card-media img {
  position: relative;
  width: 8.8rem;
  height: 8.8rem;
  object-fit: contain;
  filter: drop-shadow(0 15px 18px rgba(0, 0, 0, .5));
  transition: transform .22s ease;
}

.catalog-card:hover .catalog-card-media img { transform: scale(1.06); }

.catalog-card-copy { min-height: 10.5rem; display: flex; padding: 1rem; flex: 1; flex-direction: column; }
.catalog-card-category { color: #70dce5; font-size: .64rem; font-weight: 820; letter-spacing: .11em; text-transform: uppercase; }
.catalog-card-copy strong { margin-top: .45rem; color: #fff; font-size: 1.03rem; line-height: 1.25; }
.catalog-card-facts { display: flex; margin-top: auto; padding-top: 1rem; gap: .4rem; flex-wrap: wrap; }
.catalog-card-facts span { padding: .28rem .45rem; color: #b8ced2; border: 1px solid rgba(123, 178, 186, .22); background: rgba(2, 12, 16, .35); font-size: .64rem; }
.catalog-card-id { margin-top: .75rem; overflow: hidden; color: #68888e; font-family: ui-monospace, monospace; font-size: .6rem; text-overflow: ellipsis; white-space: nowrap; }