/* =====================================================
   Portfolio — device frames + hover-scroll previews
   Component markup (one per client site):

   <article class="pf-site [reversed]">
     <div class="pf-devices" tabindex="0" aria-label="Scrolling preview of {name}">
       <figure class="pf-laptop">
         <div class="pf-screen">
           <img src="…-desktop.webp" width="…" height="…" loading="lazy" alt="…">
         </div>
         <div class="pf-base"></div>
       </figure>
       <figure class="pf-phone">
         <div class="pf-screen">
           <span class="pf-notch" aria-hidden="true"></span>
           <img src="…-mobile.webp" width="…" height="…" loading="lazy" alt="…">
         </div>
       </figure>
     </div>
     <div class="pf-info">
       <h2>{name}</h2>
       <span class="pf-loc">{location}</span>
       <p>{blurb}</p>
       <ul class="pf-tags"><li>…</li></ul>
       <a class="btn btn-light pf-visit" href="{url}" target="_blank" rel="noopener">Visit live site ↗</a>
     </div>
   </article>
   ===================================================== */

/* ---------- section layout ---------- */
.pf-site {
  display: grid; grid-template-columns: 1.35fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  padding: clamp(56px, 9vh, 110px) 0;
}
.pf-site + .pf-site { border-top: 1px solid var(--ink-100); }
.pf-site.reversed .pf-devices { order: 2; }

/* ---------- device duo ---------- */
.pf-devices {
  display: flex; align-items: flex-start; gap: clamp(14px, 2vw, 26px);
}

/* ---------- laptop ---------- */
.pf-laptop { flex: 1; min-width: 0; margin: 0; }
.pf-laptop .pf-screen {
  aspect-ratio: 16 / 10;
  background: #fff;
  border: 1px solid var(--ink-200);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  padding: 8px 8px 0;
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-pop);
}
.pf-laptop .pf-screen::before {           /* camera dot */
  content: ""; position: absolute; top: 3px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--ink-300);
  z-index: 2;
}
.pf-base {
  height: 15px;
  width: 112%; margin-left: -6%;
  background: linear-gradient(180deg, #eef3f8 0%, #d5dfe9 80%, #c2cfdd 100%);
  border: 1px solid var(--ink-200); border-top: 0;
  border-radius: 3px 3px 16px 16px;
  position: relative;
}
.pf-base::before {                        /* thumb notch */
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 96px; height: 6px;
  background: #c2cfdd; border-radius: 0 0 8px 8px;
}

/* ---------- phone ---------- */
.pf-phone { flex: none; width: clamp(120px, 24%, 190px); margin: 34px 0 0; }
.pf-phone .pf-screen {
  aspect-ratio: 390 / 844;
  background: #fff;
  border: 7px solid #edf2f8;
  outline: 1px solid var(--ink-200);
  border-radius: 30px;
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-pop);
}
.pf-notch {
  position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
  width: 42%; height: 15px; border-radius: 999px;
  background: var(--ink-800);
  z-index: 2;
}

/* ---------- the scrolling capture (JS-driven auto-scroll) ---------- */
.pf-screen img {
  display: block; width: 100%; height: auto;
  border-radius: 6px 6px 0 0;
  transform: translateY(0);
  will-change: transform;
}
.pf-phone .pf-screen img { border-radius: 0; }

/* ---------- info column ---------- */
.pf-info h2 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); margin-bottom: 6px; }
.pf-loc {
  display: inline-block; color: var(--blue-600); font-weight: 600;
  font-size: .9rem; letter-spacing: .04em; margin-bottom: 16px;
}
.pf-info p { color: var(--ink-500); margin-bottom: 22px; max-width: 52ch; }
.pf-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.pf-tags li {
  border: 1px solid var(--blue-400); color: var(--blue-600);
  font-size: .74rem; font-weight: 600; letter-spacing: .03em;
  padding: 5px 13px; border-radius: 999px; background: #fff;
}
.pf-visit { gap: 8px; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .pf-screen img { transition: none !important; transform: none !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .pf-site { grid-template-columns: 1fr; }
  .pf-site.reversed .pf-devices { order: 0; }
}
@media (max-width: 900px) {
  .pf-devices { flex-direction: column; align-items: center; }
  .pf-laptop { width: 100%; }
  .pf-phone { width: clamp(140px, 44%, 180px); margin-top: 0; }
}