/* ==========================================================================
   ─── PROJECT MODAL (Demo / README / LinkedIn Posts) ───
   ========================================================================== */
.proj-feat[data-project], .proj-sm-card[data-project] { cursor: pointer; }
.proj-feat[data-project]:focus-visible, .proj-sm-card[data-project]:focus-visible { outline: 3px solid var(--acc2); outline-offset: 4px; }

.pm[hidden] { display: none !important; }
.pm { position: fixed; inset: 0; z-index: 310; background: rgba(8,20,15,0.78); backdrop-filter: blur(6px); }
.pm-scroll { position: absolute; inset: 0; overflow-y: auto; padding: 4.5rem 1rem 3rem; }
.pm-panel {
  position: relative; max-width: 860px; margin: 0 auto;
  background: var(--bg); border-radius: 4px var(--r3) var(--r3) 4px; border-left: 8px solid var(--acc);
  padding: 2.25rem 2.5rem 2.5rem; box-shadow: 0 30px 80px rgba(0,0,0,0.4);
}
.pm-close {
  position: absolute; top: 1rem; right: 1rem; width: 2.3rem; height: 2.3rem; border-radius: 50%;
  border: 1px solid var(--border2); background: var(--w); color: var(--ink); font-size: 1rem; cursor: pointer; transition: all .2s;
}
.pm-close:hover { background: var(--acc); color: var(--w); border-color: var(--acc); }
.pm-close:focus-visible, .pm-tab:focus-visible, .pm-arrow:focus-visible, .pm-track:focus-visible { outline: 3px solid var(--acc2); outline-offset: 2px; }
.pm-eye { font-family: var(--sans); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; color: var(--acc); margin-bottom: 0.4rem; }
.pm-title { font-family: var(--serif); font-style: italic; font-size: clamp(1.7rem, 3.6vw, 2.4rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin: 0 2.5rem 0.6rem 0; color: var(--ink); }
.pm-code { font-family: var(--sans); font-size: 0.85rem; font-weight: 700; color: var(--acc); text-decoration: none; }
.pm-code:hover { text-decoration: underline; }

.pm-tabs { display: flex; gap: 0.4rem; margin: 1.5rem 0 1.25rem; border-bottom: 1px solid var(--border2); flex-wrap: wrap; }
.pm-tab {
  font-family: var(--sans); font-size: 0.9rem; font-weight: 700; color: var(--ink3);
  background: none; border: none; border-bottom: 3px solid transparent; padding: 0.6rem 1rem; cursor: pointer; transition: all .2s;
}
.pm-tab:hover { color: var(--acc); }
.pm-tab.on { color: var(--acc); border-bottom-color: var(--acc); }

.pm-pane[hidden] { display: none; }
.pm-note { font-family: var(--sans); font-size: 0.95rem; color: var(--ink3); }
.pm-note a { color: var(--acc); font-weight: 700; }

/* Demo */
.pm-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r2); overflow: hidden; background: #000; border: 1px solid var(--border2); }
.pm-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pm-soon {
  text-align: center; padding: 3.5rem 1.5rem; border-radius: var(--r2); border: 1.5px dashed rgba(10,92,60,0.35);
  background: linear-gradient(145deg, #061510 0%, #0d2b20 50%, #143d2f 100%); color: #e8f5ef;
}
.pm-soon-t { font-family: var(--serif); font-style: italic; font-size: 2rem; font-weight: 700; color: #fff; margin-bottom: 0.4rem; }
.pm-soon p { font-family: var(--sans); font-size: 0.95rem; color: rgba(232,245,239,0.7); }

/* README */
.pm-md { font-family: var(--sans); font-size: 0.97rem; line-height: 1.75; color: var(--ink2); overflow-wrap: anywhere; }
.pm-md h1, .pm-md h2, .pm-md h3, .pm-md h4 { font-family: var(--serif); color: var(--ink); line-height: 1.25; margin: 1.5rem 0 0.6rem; letter-spacing: -0.01em; }
.pm-md h1 { font-size: 1.7rem; } .pm-md h2 { font-size: 1.4rem; } .pm-md h3 { font-size: 1.15rem; }
.pm-md p, .pm-md ul, .pm-md ol, .pm-md table, .pm-md pre, .pm-md blockquote { margin: 0 0 1rem; }
.pm-md ul, .pm-md ol { padding-left: 1.4rem; }
.pm-md a { color: var(--acc); font-weight: 600; }
.pm-md img { max-width: 100%; height: auto; border-radius: var(--r); }
.pm-md code { font-family: Consolas, 'Courier New', monospace; font-size: 0.88em; background: var(--bg2); padding: 0.1em 0.35em; border-radius: 4px; }
.pm-md pre { background: #0e1116; color: #e8f5ef; padding: 1rem 1.1rem; border-radius: var(--r); overflow-x: auto; }
.pm-md pre code { background: none; padding: 0; color: inherit; }
.pm-md blockquote { border-left: 4px solid var(--acc); padding: 0.2rem 1rem; color: var(--ink3); background: var(--acc-ll); border-radius: 0 var(--r) var(--r) 0; }
.pm-md table { border-collapse: collapse; display: block; overflow-x: auto; }
.pm-md th, .pm-md td { border: 1px solid var(--border2); padding: 0.45rem 0.75rem; text-align: left; }
.pm-md th { background: var(--bg1); }
.pm-md hr { border: none; border-top: 1px solid var(--border2); margin: 1.5rem 0; }

/* LinkedIn slider */
.pm-slider { display: flex; align-items: center; gap: 0.5rem; }
.pm-track { display: flex; gap: 1rem; flex: 1; min-width: 0; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 0.25rem 0.1rem 0.75rem; }
.pm-post {
  flex: 0 0 min(300px, 80%); scroll-snap-align: start; display: flex; flex-direction: column; gap: 0.5rem;
  background: var(--w); border: 1px solid var(--border2); border-left: 4px solid var(--acc); border-radius: var(--r2); padding: 1.1rem 1.2rem;
}
.pm-post h4 { font-family: var(--serif); font-size: 1.1rem; font-weight: 700; line-height: 1.3; color: var(--ink); }
.pm-post-date { font-family: var(--sans); font-size: 0.75rem; color: var(--ink4); }
.pm-post-link { margin-top: auto; font-family: var(--sans); font-size: 0.85rem; font-weight: 700; color: var(--acc); text-decoration: none; }
.pm-post-link:hover { text-decoration: underline; }
.pm-arrow { flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--border2); background: var(--w); color: var(--ink); font-size: 1.4rem; line-height: 1; cursor: pointer; transition: all .2s; }
.pm-arrow:hover { background: var(--acc); color: var(--w); border-color: var(--acc); }

@media (max-width: 600px) {
  .pm-scroll { padding: 3.5rem 0.5rem 2rem; }
  .pm-panel { padding: 1.75rem 1.25rem 2rem; border-left-width: 5px; }
  .pm-arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) { .pm-track { scroll-behavior: auto; } }

/* LinkedIn-hosted demo */
.pm-li-embed { display: flex; justify-content: center; }
.pm-li-embed iframe { width: 100%; max-width: 560px; height: 640px; border: 1px solid var(--border2); border-radius: var(--r2); background: var(--w); }
.pm-li-btn { display: inline-block; margin-top: 1rem; font-family: var(--sans); font-size: 0.9rem; font-weight: 700; color: var(--w); background: var(--acc); padding: 0.7rem 1.4rem; border-radius: 10px; text-decoration: none; transition: all .2s; }
.pm-li-btn:hover { opacity: 0.9; transform: translateY(-2px); }
.pm-soon.pm-li .pm-li-btn { background: #fff; color: var(--acc); }

/* Real screenshot as a project cover (replaces the phone mock) */
.pv-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% center; display: block; }
.pv-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,21,16,0.55) 0%, rgba(6,21,16,0) 28%, rgba(6,21,16,0) 70%, rgba(6,21,16,0.6) 100%); pointer-events: none; }
.pv .pv-badge, .pv .pv-ext { z-index: 2; }
@media (max-width: 768px) { .pv-cover { object-position: 100% center; } }

/* slimmer scrollbar on the LinkedIn slider (arrows and swipe still work) */
.pm-track { scrollbar-width: thin; scrollbar-color: rgba(10,92,60,0.45) transparent; }

/* Investor cover: show the middle of the wide dashboard (the KPI cards) */
.pv-cover.pv-cover-mid { object-position: 45% center; }

/* Elysium cover: centre on the greeting and logo */
.pv-cover.pv-cover-elysium { object-position: 59% center; }

/* Screenshot gallery in the Demo tab */
.pm-gallery { display: flex; flex-direction: column; gap: 1.5rem; }
.pm-gallery:not(:first-child) { margin-top: 1.5rem; }
.pm-shot { margin: 0; }
.pm-shot img { display: block; width: 100%; height: auto; border-radius: var(--r2); border: 1px solid var(--border2); box-shadow: 0 8px 28px rgba(0,0,0,0.12); background: #0e1116; }
.pm-shot figcaption { font-family: var(--sans); font-size: 0.85rem; font-weight: 600; color: var(--ink3); margin-top: 0.55rem; }

/* Psyche cover: keep the app title in view */
.pv-cover.pv-cover-psyche { object-position: 22% center; }

/* Kriti cover: keep the title and both dashboards in view */
.pv-cover.pv-cover-kriti { object-position: 50% 40%; }

/* DocuMind cover: light screenshot, centre on the title */
.pv-cover.pv-cover-documind { object-position: 40% 30%; }