/* ============================================
   Projectkaart en projectslider (components/project-tile.njk)
   ============================================ */
.ptile {
  --pt-ink: #1F2122;
  --pt-muted: #5C6063;
  --pt-line: #E4E4E4;
  height: 100%;
  font-family: var(--font-main);
}
.ptile[hidden] { display: none; }
.ptile__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;
  background: var(--color-white);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px var(--pt-line);
  color: var(--pt-ink);
  transition: box-shadow 0.25s, transform 0.25s;
}
.ptile__link:hover,
.ptile__link:focus-visible { box-shadow: 0 18px 36px -18px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--pt-line); transform: translateY(-2px); }

.ptile__media { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; background: #E9E9E9; }
.ptile__media picture, .ptile__media img { display: block; width: 100%; height: 100%; }
.ptile__media img { object-fit: cover; transition: transform 0.5s; }
.ptile__link:hover .ptile__media img { transform: scale(1.04); }
.ptile__place {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 6px 10px;
  border-radius: 4px;
  background: rgba(31, 33, 34, 0.82);
  color: var(--color-white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ptile__body { display: flex; flex: 1; flex-direction: column; gap: 14px; padding: 20px 22px 22px; }
.ptile__title { margin: 0; color: var(--pt-ink); font-size: 17px; font-weight: 700; line-height: 1.35; }
.ptile__facts { display: flex; flex-wrap: wrap; gap: 6px; }
.ptile__fact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #F2F2F1;
  color: var(--pt-muted);
  font-size: 12px;
  font-weight: 600;
}
.ptile__swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.ptile__cta { margin-top: auto; color: var(--color-primary); font-size: 14px; font-weight: 700; }
.ptile__cta span { display: inline-block; color: var(--color-copper); transition: transform 0.25s; }
.ptile__link:hover .ptile__cta span { transform: translateX(4px); }

/* --- Slider --------------------------------------------------------------- */
.pslider { position: relative; }
.pslider__track {
  display: grid;
  grid-auto-columns: 85%;
  grid-auto-flow: column;
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.pslider__track::-webkit-scrollbar { display: none; }
.pslider__slide { scroll-snap-align: start; min-width: 0; }
.pslider__nav { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.pslider__btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: transparent;
  color: var(--color-white);
  font-size: 20px;
  cursor: pointer;
  transition: background var(--t-button), border-color var(--t-button), opacity var(--t-button);
}
.pslider__btn:hover:not(:disabled) { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-text); }
.pslider__btn:disabled { opacity: 0.35; cursor: default; }

@media (min-width: 640px) { .pslider__track { grid-auto-columns: calc((100% - 16px) / 2); } }
@media (min-width: 1024px) { .pslider__track { grid-auto-columns: calc((100% - 2 * 20px) / 3); gap: 20px; } }

@media (prefers-reduced-motion: reduce) {
  .ptile__link, .ptile__media img, .ptile__cta span { transition: none; }
}