/* ============================================================
   FEATURED PROJECTS + TECH STACK — scoped stylesheet
   Shared infrastructure (design tokens, .wrap, section.section,
   .section-title, .reveal/.in-view) already lives in base.css from
   the original Hero delivery — this section reuses it directly
   rather than duplicating it. The :root/[data-theme] token block in
   the original delivery was stripped; every value in it matched
   base.css already except --teal, which this section's scoped rules
   never actually reference, so no scoped override is needed here
   (unlike Capabilities/Experience, which do use --teal).
============================================================= */

/* ============ FEATURED PROJECTS ============ */
.projects-new{ position:relative; background:#050507; overflow:hidden; }
.projects-new .wrap{ max-width:var(--container-max); }

.projects-glow{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, #050507 0%, #050507 6%, rgba(5,5,7,0) 22%),
    radial-gradient(560px 460px at 90% 4%, rgba(230,162,77,.22), transparent 60%),
    radial-gradient(520px 420px at 96% 16%, rgba(74,222,128,.16), transparent 60%),
    radial-gradient(560px 460px at 6% 2%, rgba(45,212,191,.18), transparent 60%),
    radial-gradient(520px 420px at 2% 14%, rgba(124,92,255,.2), transparent 60%),
    radial-gradient(900px 700px at 50% 20%, rgba(124,92,255,.3), transparent 65%);
}

.proj-cards-row{
  position:relative;
  z-index:1;
  display:flex;
  gap:28px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:10px;
  margin-bottom:76px;
}

.proj-cards-row::-webkit-scrollbar{ height:6px; }
.proj-cards-row::-webkit-scrollbar-thumb{ background:var(--card-border); border-radius:3px; }

.proj-card{
  flex:0 0 calc((100% - 56px)/3);
  height:460px;
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  padding:26px;
  border-radius:24px;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 30px 70px rgba(0,0,0,.55), 0 10px 24px rgba(0,0,0,.4);
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
}

.proj-card:hover{ transform:translateY(-6px); box-shadow:0 36px 84px rgba(0,0,0,.6), 0 14px 30px rgba(0,0,0,.45); }

.proj-status{
  position:absolute;
  z-index:2;
  top:14px;
  left:14px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 15px;
  border-radius:999px;
  font-family:'Space Grotesk', sans-serif;
  font-size:12px;
  font-weight:700;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 8px 20px rgba(0,0,0,.35);
}

.proj-status-dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }

.proj-status--active{ background:rgba(10,20,14,.72); color:#8fe3ac; border:1px solid rgba(74,222,128,.4); }
.proj-status--active .proj-status-dot{ background:#4ADE80; box-shadow:0 0 8px rgba(74,222,128,.8); }

.proj-status--progress{ background:rgba(24,18,8,.72); color:#f3c98a; border:1px solid rgba(230,162,77,.45); }
.proj-status--progress .proj-status-dot{ background:#e6a24d; box-shadow:0 0 8px rgba(230,162,77,.7); }

.proj-status--soon{ background:rgba(10,10,16,.72); color:#e2e2e6; border:1px solid rgba(255,255,255,.18); }

.proj-shot{
  position:relative;
  flex:0 0 63%;
  border-radius:14px;
  overflow:hidden;
  margin:-20px -20px 20px -20px;
  background:#0a0a10;
}

.proj-shot img{ width:100%; height:100%; object-fit:cover; display:block; }

.proj-body{
  flex:0 0 37%;
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.proj-title{
  font-family:'Space Grotesk', sans-serif;
  font-size:19px;
  font-weight:700;
  color:var(--text-hi);
  margin-bottom:6px;
}

.proj-desc{
  font-size:14px;
  line-height:1.45;
  color:var(--text-mid);
  margin-bottom:10px;
  min-height:0;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
}

.proj-cta-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:auto;
  flex-shrink:0;
}

.proj-cta-btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:11px 22px;
  border-radius:999px;
  border:1.5px solid var(--purple);
  color:var(--purple);
  font-family:'Space Grotesk', sans-serif;
  font-size:14px;
  font-weight:700;
  text-decoration:none;
  transition:background .25s ease, transform .25s ease;
}

.proj-cta-btn svg{ width:15px; height:15px; }
.proj-cta-btn:hover{ background:var(--purple-soft); transform:translateY(-2px); }

.proj-link-ic{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px; height:40px;
  flex-shrink:0;
  border-radius:50%;
  border:1px solid var(--card-border);
  background:none;
  padding:0;
  margin:0;
  font-family:inherit;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  color:var(--text-mid);
  transition:border-color .25s ease, color .25s ease;
  position:relative;
}

.proj-link-ic svg{ width:17px; height:17px; }
.proj-link-ic:hover{ border-color:var(--purple); color:var(--purple); }

/* Hover tooltip — desktop only (a touch device has no hover state to
   trigger this, which is intentional; mobile gets the long-press
   menu instead). */
.proj-link-ic[data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute;
  bottom:calc(100% + 10px);
  left:50%;
  transform:translateX(-50%) translateY(4px);
  white-space:nowrap;
  padding:6px 12px;
  border-radius:8px;
  background:rgba(10,10,16,.92);
  border:1px solid var(--card-border);
  color:#f5f5f7;
  font-family:'Inter', sans-serif;
  font-size:11.5px;
  font-weight:600;
  pointer-events:none;
  opacity:0;
  transition:opacity .18s ease, transform .18s ease;
  z-index:5;
}
@media (hover:hover){
  .proj-link-ic[data-tooltip]:hover::after{ opacity:1; transform:translateX(-50%) translateY(0); }
}


/* ============ FLOATING LINK MENU + TOAST ============
   Shared by: the VincesLink repo icon (right-click / long-press)
   and the Alfalf AI multi-link icon (click). Positioned via JS
   using position:fixed so it always renders correctly regardless
   of the card sitting inside a scrolling/clipping row. */
.proj-float-menu{
  position:fixed;
  z-index:9999;
  min-width:196px;
  padding:6px;
  border-radius:14px;
  background:rgba(14,14,20,.97);
  border:1px solid var(--card-border);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 20px 50px rgba(0,0,0,.5);
  opacity:0;
  transform:translateY(4px) scale(.98);
  transition:opacity .15s ease, transform .15s ease;
  pointer-events:none;
}
.proj-float-menu.is-open{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}

.proj-float-menu-item{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:10px 12px;
  border-radius:9px;
  background:none;
  border:none;
  font-family:'Inter', sans-serif;
  font-size:13.5px;
  font-weight:600;
  color:#f0f0f2;
  text-align:left;
  cursor:pointer;
  transition:background .15s ease;
}
.proj-float-menu-item:hover,
.proj-float-menu-item:focus-visible{ background:rgba(255,255,255,.08); outline:none; }
.proj-float-menu-item svg{ width:16px; height:16px; flex-shrink:0; color:var(--text-mid); }

.proj-toast{
  position:fixed;
  z-index:9999;
  padding:10px 18px;
  border-radius:999px;
  background:rgba(10,20,14,.94);
  border:1px solid rgba(74,222,128,.4);
  color:#8fe3ac;
  font-family:'Space Grotesk', sans-serif;
  font-size:13px;
  font-weight:700;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .2s ease, transform .2s ease;
  pointer-events:none;
}
.proj-toast.is-show{ opacity:1; transform:translateY(0); }

.proj-soon-pill{
  display:inline-flex;
  align-items:center;
  padding:13px 24px;
  border-radius:999px;
  border:1px solid var(--card-border);
  color:var(--text-lo);
  font-family:'Space Grotesk', sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

.proj-card--muted{ box-shadow:0 20px 50px rgba(0,0,0,.4); }
.proj-card--muted:hover{ transform:none; box-shadow:0 20px 50px rgba(0,0,0,.4); }
.proj-card--muted .proj-shot img{ filter:grayscale(.5) brightness(.75); }
.proj-card--muted .proj-title{ color:var(--text-mid); }
.proj-card--muted .proj-desc{ color:var(--text-lo); }


/* ============ PROJECT CARDS — TABLET (640–1023px) ============
   2 cards visible by default, exact-fit via calc() so there's never
   leftover dead space at any width in this range — the 3rd card
   sits just past the edge, reachable by the same scroll/snap
   already on the row. Same 63/37 split as mobile and desktop.
   Sizing verified by render at both 640px and 1023px since it's a
   wide range. */
@media (min-width:640px) and (max-width:1023px){
  .proj-card{
    flex:0 0 calc((100% - 28px)/2);
    height:420px;
    padding:24px;
  }
  .proj-shot{ flex:0 0 63%; margin:-18px -18px 18px -18px; }
  .proj-body{ flex:0 0 37%; }

  .proj-title{ font-size:18px; margin-bottom:6px; }

  .proj-desc{
    font-size:13.5px;
    line-height:1.42;
    margin-bottom:9px;
  }

  .proj-cta-btn{ padding:10px 20px; font-size:13.5px; }
  .proj-link-ic{ width:37px; height:37px; }
}


/* ============ PROJECT CARDS — MOBILE-ONLY (≤639px) ============
   Scoped to phones only. Desktop/tablet card sizing, split, and
   spacing are untouched here on purpose — mobile-only, desktop
   gets its own pass later.
   Height locked to 400px. Image 63% / text 37%. Sizing below is
   tuned tightly to that fixed 37% budget so title, description,
   and the CTA row pack with small, even gaps — no leftover dead
   space, nothing touching. Verified by rendering, not by hand. */
@media (max-width:639px){
  /* Free-scrolling carousel: break the row out of the page's
     centered .wrap so its scroll/clip boundary is the true screen
     edge, not the wrap's inner padding. 22px padding here only
     gives the resting first/last card a matching inset — every
     card in between bleeds edge-to-edge and slides fully past the
     real screen edges as you swipe, instead of being clipped by an
     inner box. */
  .proj-cards-row{
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    padding-left:2px;
    padding-right:22px;
  }

  .proj-card{ flex:0 0 88vw; height:400px; padding:22px; }
  .proj-shot{ flex:0 0 63%; margin:-16px -16px 16px -16px; }
  .proj-body{ flex:0 0 37%; }

  .proj-title{ font-size:17px; margin-bottom:6px; }

  .proj-desc{
    flex:0 1 auto;
    font-size:13px;
    line-height:1.4;
    margin-bottom:8px;
  }

  .proj-cta-row{ margin-top:auto; }
  .proj-cta-btn{ padding:9px 18px; font-size:12.5px; gap:6px; }
  .proj-cta-btn svg{ width:13px; height:13px; }
  .proj-link-ic{ width:34px; height:34px; }
  .proj-link-ic svg{ width:15px; height:15px; }
}

.ts-title{ margin-top:12px; }


/* ============ TECH STACK (marquee rows) ============ */
.ts-head{
  font-family:'Space Grotesk', sans-serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--text-lo);
  text-align:center;
  margin:0 0 24px;
}

.ts-hr{
  width:100%;
  max-width:560px;
  height:1px;
  margin:24px auto;
  background:linear-gradient(90deg, transparent, var(--card-border), transparent);
}

.ts-row-wrap{
  overflow:hidden;
  width:100%;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.ts-track{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  width:max-content;
  animation:tsScroll 32s linear infinite;
}

.ts-row-wrap:hover .ts-track{ animation-play-state:paused; }

.ts-dir-right{ animation-direction:reverse; }

@keyframes tsScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

@media (prefers-reduced-motion: reduce){
  .ts-track{ animation:none; }
}

.ts-item{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:0 30px;
  flex-shrink:0;
  border-right:1px solid var(--card-border);
}

.ts-ic{
  width:20px; height:20px;
  flex-shrink:0;
  border-radius:5px;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}

.ts-ic svg, .ts-ic img{ width:100%; height:100%; }

.ts-label{
  font-size:13px;
  font-weight:600;
  color:var(--text-mid);
  white-space:nowrap;
}


/* ============ RESPONSIVE (tech stack, Projects-specific) ============
   .wrap/section.section's own mobile padding used to live here too,
   but moved to base.css at a consolidated 640px breakpoint once
   Contact independently needed the same shared-class override at a
   slightly different threshold (600px here vs 640px there, identical
   values otherwise) — see chat. Kept at 600px here since that's what
   was actually tested/confirmed for these Projects-specific values;
   only the genuinely shared rule moved. */
@media (max-width:600px){
  .section-title{ font-size:26px; }
  .ts-item{ padding:0 18px; gap:8px; }
  .ts-ic{ width:17px; height:17px; }
  .ts-label{ font-size:12px; }
}