/* =========================================================
   PROJECT FEED — reskinned to match the existing site system
   (colors/patterns lifted straight from base.html: cyan/purple/
   pink glass cards, blur, glow borders — nothing invented)
   ========================================================= */
:root{
  --pf-cyan:    #00f2ff;
  --pf-purple:  #a855f7;
  --pf-pink:    #ff2d55;

  --pf-glass:        rgba(10,10,15,0.6);
  --pf-glass-strong: rgba(10,10,15,0.75);
  --pf-border:       rgba(0,242,255,0.25);
  --pf-border-soft:  rgba(0,242,255,0.15);

  --pf-text:      #ffffff;
  --pf-text-dim:  #cccccc;
  --pf-text-faint:#888888;

  --pf-radius:    14px;
  --pf-radius-lg: 16px;
}

/* reset: anchor-wrapped cards must not inherit link underline/color,
   and must be forced block-level so image+text both sit inside the box */
.pf-page, .pf-page *{ box-sizing:border-box; }
.pf-page a{ text-decoration:none; color:inherit; }
.pf-card{ display:flex !important; }

.pf-page{ margin-top: 100px; width:100%; }
.pf-wrap{ width:100%; max-width:1400px; margin:0 auto; padding:0 clamp(16px,4vw,56px); }
.pf-pill{
  font-size:11.5px; letter-spacing:.02em;
  color: var(--pf-text-dim);
  border:1px solid var(--pf-border);
  background: rgba(0,242,255,0.05);
  padding:4px 10px; border-radius:999px;
}

/* ---------- hero (rotating banner) ---------- */
.pf-hero{
  position:relative; width:100%;
  height:clamp(320px,52vw,520px);
  border-radius: var(--pf-radius-lg);
  overflow:hidden;
  background: var(--pf-glass);
  border:1px solid var(--pf-border);
  margin-bottom: 46px;
}
.pf-hero__slide{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .7s ease; }
.pf-hero__slide.is-active{ opacity:1; visibility:visible; z-index:2; }
.pf-hero__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.95) brightness(.55); }
.pf-hero__scrim{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(5,5,10,.95) 0%, rgba(5,5,10,.6) 45%, rgba(5,5,10,.1) 78%),
              linear-gradient(0deg, rgba(5,5,10,.85) 0%, rgba(5,5,10,0) 45%);
}
.pf-hero__content{ position:relative; z-index:3; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(20px,4vw,48px); max-width:680px; }
.pf-hero__badge{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color: var(--pf-cyan);
  background: rgba(0,242,255,0.08);
  border:1px solid rgba(0,242,255,0.35);
  padding:5px 12px; border-radius:999px;
  width:fit-content; margin-bottom:14px;
  text-shadow: 0 0 8px rgba(0,242,255,.5);
}
.pf-hero__title{ color:#fff; font-size:clamp(24px,3.4vw,40px); font-weight:700; margin:0 0 8px; text-shadow:0 0 16px rgba(0,242,255,.25); }
.pf-hero__subtitle{ color:var(--pf-text-dim); font-size:clamp(13px,1.5vw,16px); margin:0 0 14px; max-width:56ch; }
.pf-hero__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.pf-hero__cta{
  display:inline-flex; align-items:center; gap:8px;
  background: linear-gradient(135deg, var(--pf-cyan), var(--pf-purple));
  color:#05050a; font-weight:700; font-size:14px;
  padding:12px 22px; border-radius:8px;
  box-shadow: 0 0 16px rgba(0,242,255,.35);
  width:fit-content; text-decoration:none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.pf-hero__cta:hover{ transform:translateY(-2px); box-shadow:0 0 22px rgba(0,242,255,.55); }
.pf-hero__cta svg{ width:16px; height:16px; }

.pf-hero__controls{ position:absolute; left:clamp(20px,4vw,48px); bottom:16px; z-index:4; display:flex; gap:10px; }
.pf-hero__dot{ position:relative; width:32px; height:3px; border-radius:2px; background:rgba(255,255,255,.18); border:none; padding:0; cursor:pointer; overflow:hidden; }
.pf-hero__dot i{ position:absolute; inset:0; width:0%; background:var(--pf-cyan); display:block; box-shadow:0 0 6px var(--pf-cyan); }
.pf-hero__dot.is-active i{ animation: pf-scan var(--pf-hero-interval,6s) linear forwards; }
@keyframes pf-scan{ from{width:0%} to{width:100%} }
.pf-hero__nav{
  position:absolute; z-index:4; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%;
  background: rgba(10,10,15,.6); border:1px solid var(--pf-border); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.pf-hero__nav:hover{ box-shadow:0 0 14px rgba(0,242,255,.4); }
.pf-hero__nav--prev{ left:14px; } .pf-hero__nav--next{ right:14px; }
@media (max-width:640px){ .pf-hero__nav{ display:none; } }

/* ---------- sections + grid ---------- */
.pf-section{ padding-bottom:46px; }
.pf-section__head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.pf-section__title{ color:#fff; font-size:clamp(19px,2.2vw,24px); font-weight:700; }
.pf-section__title .accent{ color:var(--pf-cyan); }
.pf-section__count{ color:var(--pf-text-faint); font-size:12px; }
.pf-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:22px; }
.pf-empty{ color:var(--pf-text-faint); padding:30px 0; }

/* ---------- project card ---------- */
.pf-card{
  position:relative; display:flex; flex-direction:column;
  background: var(--pf-glass);
  backdrop-filter: blur(8px);
  border:1px solid var(--pf-border);
  border-radius: var(--pf-radius-lg);
  overflow:hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.pf-card:hover{ transform: translateY(-4px); border-color: var(--pf-cyan); box-shadow: 0 0 24px rgba(0,242,255,.25); }

/* invisible full-card link so clicking anywhere goes to the detail page;
   sits ABOVE everything (z-index 5), individual controls like the Open Lab
   button re-assert themselves on top of it with a higher z-index */
.pf-card__stretch{ position:absolute; inset:0; z-index:5; }

.pf-card__media{ position:relative; aspect-ratio:16/10; background:rgba(255,255,255,.03); overflow:hidden; }
.pf-card__media img{ width:100%; height:100%; object-fit:cover; transition: transform .4s ease; display:block; }
.pf-card:hover .pf-card__media img{ transform: scale(1.05); }
.pf-card__media--empty{ display:flex; align-items:center; justify-content:center; color:var(--pf-text-faint); font-size:32px; }

.pf-status{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; letter-spacing:.05em; text-transform:uppercase; font-weight:600;
  background: rgba(5,5,10,.5); border:1px solid var(--pf-border);
  padding:4px 10px 4px 8px; border-radius:999px;
}
.pf-status__dot{ width:7px; height:7px; border-radius:50%; flex:none; }
.pf-status--building{ color: var(--pf-cyan); border-color: rgba(0,242,255,.35); }
.pf-status--building .pf-status__dot{ background: var(--pf-cyan); box-shadow:0 0 6px var(--pf-cyan); }
.pf-status--running{ color: #34ffb0; border-color: rgba(52,255,176,.35); }
.pf-status--running .pf-status__dot{ background:#34ffb0; box-shadow:0 0 6px #34ffb0; animation: pf-pulse 1.8s infinite; }
.pf-status--completed{ color: var(--pf-purple); border-color: rgba(168,85,247,.35); }
.pf-status--completed .pf-status__dot{ background: var(--pf-purple); box-shadow:0 0 6px var(--pf-purple); }
@keyframes pf-pulse{ 0%{box-shadow:0 0 0 0 rgba(52,255,176,.5)} 70%{box-shadow:0 0 0 7px rgba(52,255,176,0)} 100%{box-shadow:0 0 0 0 rgba(52,255,176,0)} }

.pf-card__body{ position:relative; padding:16px 18px 18px; display:flex; flex-direction:column; gap:10px; flex:1; }

.pf-card__top{ display:flex; align-items:center; gap:10px; }
.pf-card__icon{
  width:34px; height:34px; border-radius:9px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,242,255,.08); border:1px solid var(--pf-border);
  color: var(--pf-cyan); font-size:15px;
}
.pf-card__eyebrow{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pf-card__cat{ color: var(--pf-purple); font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }

.pf-card__title{ color:#fff; font-size:17px; font-weight:700; margin:0; line-height:1.3; }
.pf-card__subtitle{ color: var(--pf-text-faint); font-size:12px; }
.pf-card__desc{ color: var(--pf-text-dim); font-size:13.5px; line-height:1.6; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

.pf-card__tags{ display:flex; flex-wrap:wrap; gap:6px; }
.pf-card__tags .pf-pill{ font-size:10.5px; padding:3px 9px; }

.pf-card__tools{ display:flex; flex-wrap:wrap; gap:6px; }
.pf-pill--tool{ display:inline-flex; align-items:center; gap:6px; color: var(--pf-text-dim); }
.pf-pill--tool i{ font-size:10px; color: var(--pf-cyan); }

.pf-card__footer{ margin-top:auto; padding-top:6px; }
.pf-card__cta{
  position:relative; z-index:6;
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700;
  padding:9px 16px; border-radius:8px;
  background: linear-gradient(135deg, var(--pf-cyan), var(--pf-purple));
  color:#05050a;
  box-shadow: 0 0 14px rgba(0,242,255,.3);
}
.pf-card__cta:hover{ box-shadow: 0 0 20px rgba(0,242,255,.5); }
.pf-card__cta--muted{
  background:none; color: var(--pf-text-dim);
  border:1px solid var(--pf-border); box-shadow:none;
}

/* =========================================================
   DETAIL PAGE
   ========================================================= */
.pf-detail-hero{ position:relative; width:100%; height:clamp(240px,38vw,400px); border-radius:var(--pf-radius-lg); overflow:hidden; border:1px solid var(--pf-border); margin-bottom:30px; }
.pf-detail-hero img{ width:100%; height:100%; object-fit:cover; filter:saturate(.9) brightness(.5); }
.pf-detail-hero__scrim{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(5,5,10,.95) 0%, rgba(5,5,10,.35) 55%, rgba(5,5,10,.1) 100%); }
.pf-detail-hero__content{ position:absolute; left:0; right:0; bottom:0; padding:clamp(20px,4vw,40px); }

.pf-back{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--pf-text-dim); text-decoration:none; margin-bottom:14px; }
.pf-back:hover{ color: var(--pf-cyan); }
.pf-detail-meta{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:10px; }

.pf-detail-grid{ display:grid; grid-template-columns:2fr 1fr; gap:32px; align-items:start; }
@media (max-width:880px){ .pf-detail-grid{ grid-template-columns:1fr; } }

.pf-block{
  background: var(--pf-glass); backdrop-filter: blur(10px);
  border:1px solid var(--pf-border); border-radius: var(--pf-radius-lg);
  padding:22px clamp(16px,3vw,26px); margin-bottom:20px;
}
.pf-block__title{ font-size:13px; text-transform:uppercase; letter-spacing:.08em; color: var(--pf-cyan); margin-bottom:14px; font-weight:700; }
.pf-desc-text{ color: var(--pf-text-dim); font-size:14.5px; white-space:pre-line; }
.pf-taglist{ display:flex; flex-wrap:wrap; gap:8px; }

.pf-links{ display:flex; flex-direction:column; gap:10px; }
.pf-link-btn{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px; border-radius:8px; border:1px solid var(--pf-border);
  font-size:13.5px; font-weight:700; text-decoration:none; color:#fff;
}
.pf-link-btn--primary{ background: linear-gradient(135deg, var(--pf-cyan), var(--pf-purple)); color:#05050a; border-color:transparent; box-shadow:0 0 14px rgba(0,242,255,.35); }
.pf-link-btn--ghost:hover{ border-color: var(--pf-cyan); color: var(--pf-cyan); }

.pf-diagram img{ width:100%; border-radius: var(--pf-radius); border:1px solid var(--pf-border); }

/* checkpoint / task track */
.pf-tasks{ position:relative; }
.pf-task{ position:relative; display:grid; grid-template-columns:38px 1fr; gap:16px; padding-bottom:24px; }
.pf-task:last-child{ padding-bottom:0; }
.pf-task__rail{ position:relative; display:flex; flex-direction:column; align-items:center; }
.pf-task__node{
  width:32px; height:32px; border-radius:50%;
  background: rgba(0,242,255,.08); border:1px solid var(--pf-border);
  display:flex; align-items:center; justify-content:center;
  font-size:10.5px; color: var(--pf-cyan); font-weight:700; flex:none; z-index:2;
  box-shadow: 0 0 10px rgba(0,242,255,.2);
}
.pf-task__line{ position:absolute; top:32px; bottom:-24px; width:1px; background: var(--pf-border); }
.pf-task:last-child .pf-task__line{ display:none; }
.pf-task__body{ background: rgba(255,255,255,.02); border:1px solid var(--pf-border-soft); border-radius: var(--pf-radius); padding:16px 18px; }
.pf-task__title{ color:#fff; font-size:15.5px; font-weight:700; margin-bottom:6px; }
.pf-task__desc{ font-size:13.5px; color: var(--pf-text-dim); margin-bottom:12px; }
.pf-task__ss{ border-radius:8px; border:1px solid var(--pf-border); overflow:hidden; }
.pf-task__ss img{ width:100%; display:block; }
.pf-task__ss-label{ font-size:10.5px; color: var(--pf-cyan); padding:6px 2px 0; letter-spacing:.05em; text-transform:uppercase; }

.pf-siblings .pf-grid{ grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); }