/* ============================================================
   cards.css — project card (semantic <li>) + <dialog> modal
   Shared by the home preview list and the gallery list.
   ============================================================ */

.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;list-style:none}
@media(max-width:920px){.pgrid{grid-template-columns:repeat(2,1fr);gap:26px}}
@media(max-width:600px){.pgrid{grid-template-columns:1fr}}

.pcard{display:flex;flex-direction:column;gap:14px}
.pcard.hide{display:none}

/* image (a button that opens the modal) */
.pcard-img{
  position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;
  border:1px solid var(--line);background:var(--bg-alt);
  padding:0;cursor:pointer;display:block;
}
.pcard-img image-slot{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.pcard-img image-slot::part(frame){background:var(--bg-alt)}
.pcard-img image-slot::part(ring){border-color:var(--line2)}
.pcard-img:hover image-slot{transform:scale(1.06)}

.pcard-cat{
  position:absolute;top:14px;left:14px;z-index:4;
  background:color-mix(in oklch,var(--bg) 88%,transparent);backdrop-filter:blur(4px);
  border:1px solid var(--line);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg2);
  padding:6px 11px;border-radius:99px;pointer-events:none;
}
.pcard-zoom{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:16px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:linear-gradient(transparent,rgba(15,13,8,.7));
  opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s;pointer-events:none;
}
.pcard-img:hover .pcard-zoom{opacity:1;transform:none}

/* heading row (also a button) */
.pcard-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
  background:none;border:none;padding:0;cursor:pointer;text-align:left;width:100%;
  color:var(--fg);
}
.pcard h3{font-family:var(--serif);font-weight:400;font-size:22px;letter-spacing:-.01em;line-height:1.15;color:var(--fg);transition:color .25s}
.pcard .arr{font-size:16px;color:var(--fg3);transition:transform .25s,color .25s;flex:none}
.pcard-head:hover h3{color:var(--accent)}
.pcard-head:hover .arr{transform:translate(3px,-3px);color:var(--accent)}
.pcard p{font-size:14px;color:var(--fg2);line-height:1.6;max-width:46ch;margin-top:-2px}
.pcard .pcard-tags{display:flex;flex-wrap:wrap;gap:7px;list-style:none}
.pcard .pcard-tags li{
  font-size:11px;letter-spacing:.04em;color:var(--fg3);
  border:1px solid var(--line);border-radius:6px;padding:4px 9px;
}
.pcard.compact p{display:none}

/* ---- modal (<dialog>) ------------------------------------ */
.pmodal{
  /* true viewport centering regardless of scroll position or content height */
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;
  width:min(920px,92vw);max-height:90vh;overflow:auto;
  background:var(--card);border:1px solid var(--line2);box-shadow:var(--shadow);
}
.pmodal[open]{animation:modalIn .4s cubic-bezier(.2,.7,.2,1)}
.pmodal[open]::backdrop{animation:scrimIn .3s ease}
@keyframes scrimIn{from{opacity:0}to{opacity:1}}
@keyframes modalIn{from{opacity:0;transform:translate(-50%,calc(-50% + 12px)) scale(.97)}to{opacity:1;transform:translate(-50%,-50%)}}
.pmodal-card{display:grid;grid-template-columns:1fr 1fr;position:relative}
.pmodal-x{
  position:absolute;top:14px;right:14px;z-index:5;
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line2);
  background:color-mix(in oklch,var(--bg) 80%,transparent);color:var(--fg);
  cursor:pointer;font-size:14px;transition:background .2s,transform .2s,color .2s;
}
.pmodal-x:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:rotate(90deg)}
.pmodal-figure{position:relative;min-height:340px;background:var(--bg-alt);overflow:hidden}
.pmodal-figure image-slot{position:absolute;inset:0;width:100%;height:100%;display:block}
.pmodal-figure image-slot::part(frame){background:var(--bg-alt)}
.pmodal-info{padding:42px 40px;display:flex;flex-direction:column;gap:16px}
.pmodal-cat{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.pmodal-info h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.4vw,38px);letter-spacing:-.01em;line-height:1.1}
.pmodal-info p{font-size:15px;color:var(--fg2);line-height:1.7}
.pmodal-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.pmodal-tags li{font-size:11px;letter-spacing:.04em;color:var(--fg3);border:1px solid var(--line);border-radius:6px;padding:5px 10px}
.pmodal-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}

@media(max-width:720px){
  .pmodal-card{grid-template-columns:1fr}
  .pmodal-figure{min-height:240px;aspect-ratio:16/10}
  .pmodal-info{padding:30px 26px}
}