/* projects.css — featured card, project grid, case-study modal */

/* ====================================================
   PROJECT GRID
   ==================================================== */
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:40px}

/* ====================================================
   PROJECT CARDS
   ==================================================== */
.pcard{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s}
.pcard:hover{transform:translateY(-6px);box-shadow:0 28px 56px -40px rgba(40,35,28,.36)}
.pstage{position:relative;padding:36px 36px 0;overflow:hidden;display:flex;align-items:flex-end;justify-content:center}
.pstage.t1{background:linear-gradient(165deg,#eef1f5,#e4e9f0)}
.pstage.t2{background:linear-gradient(165deg,#eef0ee,#e2e7e6)}
.pstage.t3{background:linear-gradient(165deg,#f2efe7,#eae3d6)}
.pstage.t4{background:linear-gradient(165deg,#f1ede6,#e9e0d3)}
.pstage.t5{background:linear-gradient(165deg,#eff0f3,#e6e6ec)}
.pstage.t6{background:linear-gradient(165deg,#ebeef1,#dfe4ea)}
.pshot{width:100%;border-radius:12px 12px 0 0;display:block;box-shadow:0 22px 46px -30px rgba(35,30,22,.34);transform:translateY(10px);transition:transform .55s cubic-bezier(.16,1,.3,1);filter:saturate(1.02)}
.pcard:hover .pshot{transform:translateY(2px)}
.pbody{padding:30px 32px 32px;display:flex;flex-direction:column;flex:1}
.pname{font-weight:700;font-size:22px;letter-spacing:-0.02em;line-height:1.18}
.pno{font-size:12.5px;font-weight:700;color:var(--terra);margin-bottom:12px;display:flex;justify-content:space-between;letter-spacing:.04em}
.pdesc{color:var(--mut);font-size:15px;margin-top:11px}
.ptags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.ptag{font-size:12.5px;font-weight:600;color:var(--ink);background:var(--cream2);padding:6px 12px;border-radius:100px}
.pbtns{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:24px}
.pbtn{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;padding:11px 18px;border-radius:11px;cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--ink);transition:transform .2s,background .2s,color .2s,border-color .2s}
.pbtn:hover{transform:translateY(-2px);background:var(--cream2)}
.pbtn.primary{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.pbtn.primary:hover{background:var(--terra);border-color:var(--terra);color:var(--cream)}
.pbtn[hidden]{display:none}

/* featured variant — horizontal layout, larger type */
.pcard.feat{flex-direction:row;align-items:stretch;border-color:color-mix(in srgb,var(--terra) 20%,var(--line))}
.pcard.feat .pstage{width:55%;padding:52px 52px 0;align-items:center}
.pcard.feat .pshot{transform:translateY(0) scale(1.02);transform-origin:bottom}
.pcard.feat:hover .pshot{transform:translateY(0) scale(1.05)}
.pcard.feat .pbody{padding:54px 56px;justify-content:center}
.pcard.feat .pname{font-size:clamp(28px,3vw,38px);margin-top:8px}
.pcard.feat .pdesc{font-size:17px;max-width:520px;margin-top:14px}
.featlabel{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--terra);background:var(--terras);padding:8px 15px;border-radius:100px;align-self:flex-start}
.featlabel .fst{width:7px;height:7px;border-radius:50%;background:var(--terra)}

/* clickable cards (grid items that open the modal) */
.pcard[data-action]{cursor:pointer}

/* ====================================================
   PROJECT MODAL
   ==================================================== */
.pmodal{position:fixed;inset:0;z-index:9000;display:flex;align-items:flex-start;justify-content:center;padding:48px 24px;overflow-y:auto;background:rgba(42,32,26,.52);backdrop-filter:blur(8px);animation:mfade .3s ease}
.pmodal[hidden]{display:none}
.mpanel{background:var(--cream);border:1px solid var(--line);border-radius:18px;max-width:880px;width:100%;overflow:hidden;box-shadow:0 40px 90px -52px rgba(20,28,45,.45);animation:mrise .42s cubic-bezier(.16,1,.3,1)}
.mhero{position:relative;padding:44px 48px 0;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.mhero.t1{background:linear-gradient(165deg,#eef1f5,#e4e9f0)}
.mhero.t2{background:linear-gradient(165deg,#eef0ee,#e2e7e6)}
.mhero.t3{background:linear-gradient(165deg,#f2efe7,#eae3d6)}
.mhero.t4{background:linear-gradient(165deg,#f1ede6,#e9e0d3)}
.mhero.t5{background:linear-gradient(165deg,#eff0f3,#e6e6ec)}
.mhero.t6{background:linear-gradient(165deg,#ebeef1,#dfe4ea)}
.mshot{width:100%;border-radius:12px 12px 0 0;box-shadow:0 22px 46px -30px rgba(35,30,22,.34);filter:saturate(1.02)}
.mclose{position:absolute;top:20px;right:20px;z-index:2;width:42px;height:42px;border-radius:50%;background:var(--card);border:1px solid var(--line);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink);transition:background .2s,transform .3s,color .2s}
.mclose:hover{background:var(--terra);color:var(--cream);transform:rotate(90deg)}
.mbody{padding:40px 48px 48px}
.mlabel{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--terra)}
.mtitle{font-weight:700;font-size:clamp(26px,3.4vw,38px);letter-spacing:-0.03em;line-height:1.08;margin-top:10px}
.mtag{font-size:17px;color:var(--mut);margin-top:12px}
.mtags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.mbtns{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;padding-bottom:28px;border-bottom:1px solid var(--line)}
.msec{margin-top:30px}
.msec h4{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--terra);margin-bottom:10px}
.msec p{font-size:15.5px;color:var(--ink);line-height:1.65}
.mfeat{display:flex;flex-direction:column;gap:9px;margin-top:4px}
.mfeat li{list-style:none;font-size:15px;color:var(--ink);padding-left:24px;position:relative;line-height:1.5}
.mfeat li::before{content:'';position:absolute;left:4px;top:9px;width:7px;height:7px;border-radius:50%;background:var(--terra)}
.mgrid2{display:grid;grid-template-columns:1fr 1fr;gap:30px 40px}
.mtext{margin-top:4px}
.mtext p{font-size:15.5px;color:var(--ink);line-height:1.72;margin-top:18px}
.mtext p:first-child{font-size:17px}

/* ====================================================
   MODAL SECTIONS (sub-projects with screenshots)
   ==================================================== */
.msection{margin-top:8px}
.msection-line{border:none;border-top:1px solid var(--line);margin:0 0 28px 0}
.msection-title{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--terra);margin-bottom:18px}
.msection-img{width:60%;border-radius:12px;border:1px solid var(--line);box-shadow:0 12px 32px -20px rgba(20,28,45,.25);display:block;margin:0 auto 18px}
.msection-text{font-size:15.5px;color:var(--ink);line-height:1.72}