/* =====================================================================
   Project cards — ONE component for the landing canvas and the
   "more projects" strip under every case study, so a card always looks
   and behaves the same wherever it appears (Figma web_2026, 42:7025).
   Markup is generated by assets/cards/cards.js from a single registry:
     <a class="pc" data-card="wise"></a>
   Landing positions the cards (.frame); galleries use .pc-gallery.
   ===================================================================== */
.pc{ position:relative; display:block; border-radius:8px; text-decoration:none; color:inherit; aspect-ratio:454/333;
  opacity:1; transition:opacity .35s ease, transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease; -webkit-tap-highlight-color:transparent; }
.pc:hover, .pc:focus-visible{ opacity:.84; transform:translateY(-6px); box-shadow:0 22px 40px -12px rgba(0,0,0,.6); }
.pc:focus-visible{ outline:2px solid #ff6b36; outline-offset:3px; }
@media (prefers-reduced-motion:reduce){ .pc:hover, .pc:focus-visible{ transform:none; } }

.pc-fill{ position:absolute; inset:0; border-radius:8px; overflow:hidden; background:#170a0b center/cover no-repeat; display:block; }
.pc-fill.light{ background-color:#fafafa; }
/* live prototypes inside a card */
.pc .pl-card{ position:absolute; inset:0; display:block; border-radius:8px; pointer-events:none; }
.pc .pl-card .pl-phone-wrap{ left:29%; width:42%; top:7%; }

/* caption bar (Figma "Project caption" 103:30917): warm brown #211612, full width, bottom 19.22% */
.pc-cap{ position:absolute; left:0; right:0; bottom:0; min-height:19.22%; z-index:2; display:flex; flex-direction:column; gap:4px;
  padding:8px 12px; border-radius:0 0 8px 8px; background:#211612; color:#f5f6fa;
  font-family:"DM Mono",monospace; font-size:10px; line-height:normal; text-transform:uppercase; }
.pc-row{ display:flex; justify-content:space-between; gap:12px; }
.pc-kind{ font-weight:300; color:#d9e5e8; white-space:nowrap; }
.pc-tag{ font-weight:300; color:#aab7bd; white-space:nowrap; }
.pc-title{ font-weight:500; color:#f5f6fa; }
.pc-title.lg{ font-size:11px; }
.pc-title.soft{ color:#f5f6fa; }
.pc-sub{ font-weight:500; color:#f5f6fa; }
.pc-sub.muted{ font-weight:300; color:#aab7bd; }
.pc-desc{ font-weight:300; line-height:14px; color:#f5f6fa; }
.pc-brand{ display:inline-flex; align-items:center; gap:8px; font-family:"Work Sans",sans-serif; font-weight:500; font-size:12.3px; line-height:15px; text-transform:none; color:#f5f6fa; }
.pc-brand img{ width:16px; height:16px; display:block; border-radius:4px; }

/* gallery under a case study: same cards, two up */
.pc-gallery{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
@media (max-width:760px){ .pc-gallery{ grid-template-columns:1fr; } }

/* themed hover cursors (same on every page) */
.pc[data-card="expedia-room"]:hover{ cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24'%3E%3Cpath d='M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z' fill='%233662d8' stroke='%23132a6b' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") 26 4, pointer; }
.pc[data-card="expedia-change"]:hover{ cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24'%3E%3Cpath d='M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z' fill='%233662d8' stroke='%23132a6b' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") 26 4, pointer; }
.pc[data-card="archive"]:hover{ cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M3 9.5a2 2 0 0 1 2-2h7l3 3h12a2 2 0 0 1 2 2V24a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z' fill='%23adb967' stroke='%23170a0b' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M3 13.5h26' stroke='%23170a0b' stroke-width='1.4'/%3E%3C/svg%3E") 4 8, pointer; }
.pc[data-card="tales"]:hover{ cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M16 9c-3-2.2-7-2.6-11-1.8v16c4-.8 8-.4 11 1.8 3-2.2 7-2.6 11-1.8v-16C23 6.4 19 6.8 16 9z' fill='%23eeb2e2' stroke='%23340909' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M16 9v16' stroke='%23340909' stroke-width='1.6'/%3E%3C/svg%3E") 16 16, pointer; }
.pc[data-card="wise"]:hover{ cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='13' fill='%239fe870' stroke='%23163300' stroke-width='2'/%3E%3Cpath d='M20.5 11.2a3.6 3.6 0 0 0-6.6 2v8.6M11.6 16.6h6.4M11 21.8h10' fill='none' stroke='%23163300' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16, pointer; }
.pc[data-card="pocket"]:hover{ cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ff3b30'/%3E%3Cstop offset='.2' stop-color='%23ff9500'/%3E%3Cstop offset='.4' stop-color='%23ffcc00'/%3E%3Cstop offset='.6' stop-color='%2334c759'/%3E%3Cstop offset='.8' stop-color='%23007aff'/%3E%3Cstop offset='1' stop-color='%23af52de'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M3 2.5 26 13.6l-9.6 2.7-4.2 9.3z' fill='url%28%23r%29' stroke='%23170a0b' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2, pointer; }

/* Figma 103:30946 / 144:17700: Tales + Pocket captions on warm brown */
.pc[data-card="pocket"] .pc-cap, .pc[data-card="tales"] .pc-cap{ background:#211612; }
.pc[data-card="pocket"] .pc-kind, .pc[data-card="pocket"] .pc-sub, .pc[data-card="tales"] .pc-kind{ color:#d9e5e8; }
.pc[data-card="pocket"] .pc-title, .pc[data-card="tales"] .pc-desc{ color:#f5f6fa; }
.pc[data-card="tales"] .pc-fill{ background-color:#f2ede2; }