/* ============================================================================
   tinkering.css — the "Tinkering" build gallery (projects/tinkering.html)
   Background-removed photos float over a soft per-card neon glow. Reuses the
   site tokens (styles.css) + the deep-dive hero (project.css).
   ========================================================================= */

.tk-section { padding-block: clamp(1rem, 3vw, 2rem) var(--sp-9); }

.tk-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(1.1rem, 2.5vw, 1.8rem);
}

.tk-card {
  --accent: var(--magenta); --accent-soft: var(--magenta-soft); --accent-glow: var(--magenta-glow);
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.tk-card:nth-child(3n+2) { --accent: var(--blue);  --accent-soft: var(--blue-soft);  --accent-glow: var(--blue-glow); }
.tk-card:nth-child(3n+3) { --accent: var(--ember); --accent-soft: var(--ember-soft); --accent-glow: var(--ember-glow); }

.tk-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line-loud));
  box-shadow: 0 22px 48px -24px var(--accent-glow);
}

/* ---- media: the floating cutout / placeholder --------------------------- */
.tk-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);   /* definite cell so contain can clamp height */
  place-items: center;
  padding: clamp(1rem, 3vw, 1.6rem);
  background:
    radial-gradient(120% 90% at 50% 8%, var(--accent-soft), transparent 60%),
    linear-gradient(180deg, var(--bg-3), var(--bg-2));
  overflow: hidden;
}
.tk-card__media::before {              /* soft accent bloom behind the object */
  content: "";
  position: absolute;
  left: 50%; top: 46%;
  width: 62%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--accent-glow), transparent 68%);
  filter: blur(26px);
  opacity: .45;
  transition: opacity var(--dur-2) var(--ease);
  pointer-events: none;
}
.tk-card:hover .tk-card__media::before { opacity: .75; }

.tk-card__photo {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* definite box so tall (portrait) photos never clip */
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.55));
  transition: transform var(--dur-3) var(--ease);
}
.tk-card:hover .tk-card__photo { transform: scale(1.035); }

/* placeholder while a real photo hasn't been shot yet */
.tk-card__media--empty {
  border-bottom: 1px dashed transparent; /* keep height rhythm */
}
.tk-card__media--empty::after {
  content: "";
  position: absolute; inset: clamp(.7rem, 2.5vw, 1.1rem);
  border: 1.5px dashed var(--line-loud);
  border-radius: var(--radius);
  pointer-events: none;
}
.tk-card__ico {
  position: relative;
  color: var(--accent);
  opacity: .8;
  width: 42%;
  max-width: 92px;
  display: grid;
  place-items: center;
}
.tk-card__ico svg { width: 100%; height: auto; }
.tk-card__soon {
  position: absolute;
  bottom: clamp(1.1rem, 3vw, 1.5rem);
  font-size: var(--fs-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ---- body --------------------------------------------------------------- */
.tk-card__body { padding: clamp(1rem, 2.4vw, 1.4rem); display: flex; flex-direction: column; gap: .5rem; }
.tk-card__tags {
  font-size: var(--fs-micro);
  letter-spacing: .06em;
  color: var(--text-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45em;
}
.tk-card__tags span { color: var(--accent); }
.tk-card__tags i { color: var(--line-loud); font-style: normal; }
.tk-card__title { font-size: var(--fs-h3); }
.tk-card__desc { color: var(--text-2); font-size: var(--fs-small); line-height: var(--lh-body); }

@media (prefers-reduced-motion: reduce) {
  .tk-card, .tk-card__photo, .tk-card__media::before { transition: none; }
  .tk-card:hover { transform: none; }
  .tk-card:hover .tk-card__photo { transform: none; }
}