/**
 * Experimental project card lab chrome — ONLY when html[data-project-card-lab="1"].
 * Production apex keeps data-project-card-lab="0" (no angled cards).
 *
 * Angle math: rotate ONLY `.project` with --pf-card-angle.
 * Title / stack / CTAs / cover image inherit — never re-rotate children.
 * overflow:hidden on the card → one rotated clip frame (media edges = card edges).
 */

html[data-project-card-lab='1'] .project-grid {
  gap: 1.5rem;
  padding: 0.5rem 0.35rem 1.5rem;
}

html[data-project-card-lab='1'] .project {
  /* Wider cover column so shots aren’t cropped so hard */
  grid-template-columns: minmax(0, 1fr) minmax(16rem, var(--project-media-col, 28rem));
  overflow: hidden;
  transform: rotate(var(--pf-card-angle, 0deg));
  transform-origin: center center;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--border-strong) 80%, transparent),
    8px 12px 28px color-mix(in srgb, #000 32%, transparent);
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    background var(--ease),
    border-color var(--ease);
}

html[data-project-card-lab='1'] .project:hover,
html[data-project-card-lab='1'] .project:focus-within {
  transform: rotate(var(--pf-card-angle, 0deg)) translateY(-2px) scale(1.01);
  z-index: 2;
  box-shadow:
    0 0 0 1px var(--accent),
    10px 18px 36px color-mix(in srgb, #000 40%, transparent);
}

html[data-project-card-lab='1'] .project.is-open {
  transform: none;
  overflow: visible;
  box-shadow:
    0 0 0 1px var(--border-strong),
    0 14px 36px color-mix(in srgb, #000 28%, transparent);
}

html[data-project-card-lab='1'] .project__media {
  align-self: stretch;
  height: auto;
  min-height: 100%;
  max-height: none;
  overflow: hidden;
  border-left: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  /* Same plane as card — no local transform / clip skew */
  transform: none;
  clip-path: none;
}

html[data-project-card-lab='1'] .project__media img,
html[data-project-card-lab='1'] .project__cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: none !important;
}

html[data-project-card-lab='1'] .project__title {
  letter-spacing: -0.01em;
  text-shadow: 0 1px 0 color-mix(in srgb, #000 35%, transparent);
}

html[data-project-card-lab='1'] [data-project-title-bar='1'] .project__title-row {
  background: linear-gradient(
    105deg,
    color-mix(in srgb, var(--accent) 18%, var(--bg-panel)) 0%,
    color-mix(in srgb, var(--bg-panel) 92%, var(--text) 6%) 55%
  );
  border-bottom-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

@media (prefers-reduced-motion: reduce) {
  html[data-project-card-lab='1'] .project {
    transform: none !important;
  }
}