/* ═══════════════════════════════════════════════
   projects.css – Public project pages & home section
═══════════════════════════════════════════════ */

/* ── Home section – projects grid ─────────────── */
.projects-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
.projects-empty { text-align: center; padding: 3rem 1rem; color: rgba(255,255,255,.4); font-style: italic; }
.projects-cta   { text-align: center; margin-top: 2.5rem; }

/* Project card (home) */
.project-card {
  display: flex;
  flex-direction: column;
  border-radius: 1.5rem;
  overflow: hidden;
  transition: transform .4s, border-color .4s, box-shadow .4s;
  transition-delay: var(--delay,0s);
}
.project-card:hover { transform: translateY(-6px); box-shadow: 0 20px 60px rgba(34,197,94,.12); border-color: rgba(34,197,94,.38); }

.project-card__img {
  position: relative;
  height: 200px;
  background: rgba(34,197,94,.04);
  overflow: hidden;
  flex-shrink: 0;
}
.project-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.project-card:hover .project-card__img img { transform: scale(1.04); }
.project-card__img--placeholder {
  height: 200px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.25);
}
.project-card__badge {
  position: absolute; top: .75rem; left: .75rem;
  background: #22c55e; color: #000;
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: .68rem;
  padding: .25rem .6rem; border-radius: 99px;
}
.project-card__body  { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; gap: .65rem; }
.project-card__cat   { font-family: 'JetBrains Mono', monospace; font-size: .68rem; color: #4ade80; }
.project-card__title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 1rem; line-height: 1.3; }
.project-card__desc  { font-size: .875rem; color: rgba(255,255,255,.55); line-height: 1.6; flex: 1; }
.project-card__stack { display: flex; flex-wrap: wrap; gap: .35rem; }
.project-card__footer {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  margin-top: auto; padding-top: .85rem; border-top: 1px solid rgba(34,197,94,.1);
  flex-wrap: wrap;
}
.project-card__link {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: .5rem;
  background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.2);
  color: #4ade80; transition: background .2s, border-color .2s;
}
.project-card__link:hover { background: rgba(34,197,94,.18); border-color: rgba(34,197,94,.4); }

/* Stack tags */
.stack-tag {
  font-family: 'JetBrains Mono', monospace; font-size: .68rem;
  background: rgba(34,197,94,.09); color: #86efac;
  border: 1px solid rgba(34,197,94,.2); padding: .2rem .55rem; border-radius: 99px;
}
.stack-tag--more { background: rgba(255,255,255,.05); color: rgba(255,255,255,.4); border-color: rgba(255,255,255,.1); }
.stack-tag--dim  { background: rgba(255,255,255,.04); color: rgba(255,255,255,.4); border-color: rgba(255,255,255,.1); }

/* ── Navbar (standalone pages) ─────────────────── */
.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background .4s; }
.navbar.scrolled { background: rgba(6,15,9,.9); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(34,197,94,.12); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 1200px; margin-inline: auto; padding-inline: clamp(1.25rem,4vw,2.5rem); height: 68px; }
.nav-logo  { display: flex; align-items: center; gap: .65rem; font-family: 'Syne', sans-serif; font-weight: 900; font-size: 1.05rem; }
.nav-logo img { border-radius: .6rem; }
.nav-actions { display: flex; align-items: center; gap: .75rem; }
.lang-btn { display: inline-flex; align-items: center; gap: .4rem; font-family: 'JetBrains Mono', monospace; font-size: .72rem; color: #4ade80; background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.25); padding: .35rem .7rem; border-radius: 99px; transition: background .2s; }
.lang-btn:hover { background: rgba(34,197,94,.16); }
.nav-cta { font-size: .82rem !important; padding: .6rem 1.2rem !important; }

/* ── Breadcrumb ─────────────────────────────────── */
.breadcrumb { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: rgba(255,255,255,.45); flex-wrap: wrap; margin-bottom: 2rem; }
.breadcrumb a { color: rgba(255,255,255,.45); transition: color .2s; }
.breadcrumb a:hover { color: #4ade80; }

/* ── Page hero ──────────────────────────────────── */
.page-hero { position: relative; padding-top: calc(68px + 3rem); padding-bottom: 3.5rem; overflow: hidden; }
.page-hero__blob { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.page-hero__blob.b1 { width: clamp(200px,35vw,420px); height: clamp(200px,35vw,420px); background: rgba(34,197,94,.07); top: 0; right: -5%; }
.page-hero__blob.b2 { width: clamp(150px,25vw,300px); height: clamp(150px,25vw,300px); background: rgba(22,163,74,.05); bottom: -10%; left: -5%; }
.page-hero .container { position: relative; max-width: 1200px; margin-inline: auto; padding-inline: clamp(1.25rem,5vw,2.5rem); }
.page-hero__h1  { font-family: 'Syne', sans-serif; font-size: clamp(2rem,5vw,3.5rem); font-weight: 900; line-height: 1.1; margin-block: .75rem 1rem; }
.page-hero__desc{ color: rgba(255,255,255,.55); font-size: clamp(.9rem,2vw,1.05rem); max-width: 540px; line-height: 1.75; }

/* ── Filter bar ─────────────────────────────────── */
.filter-section { border-top: 1px solid rgba(34,197,94,.08); border-bottom: 1px solid rgba(34,197,94,.08); padding-block: 1rem; }
.filter-section .container { max-width: 1200px; margin-inline: auto; padding-inline: clamp(1.25rem,5vw,2.5rem); }
.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; }
.filter-btn {
  font-family: 'JetBrains Mono', monospace; font-size: .75rem;
  padding: .4rem .9rem; border-radius: 99px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.5); transition: all .2s; cursor: pointer;
}
.filter-btn.active,.filter-btn:hover { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.35); color: #4ade80; }

/* ── Projects full page grid ────────────────────── */
.projects-page-section { padding-block: clamp(3rem,6vw,5rem); }
.projects-page-section .container { max-width: 1200px; margin-inline: auto; padding-inline: clamp(1.25rem,5vw,2.5rem); }
.projects-full-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.projects-empty-full { text-align: center; padding: 5rem 1rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.projects-empty-full .empty-icon { font-size: 3.5rem; }
.projects-empty-full p { color: rgba(255,255,255,.45); font-size: 1rem; }

/* Project card full (listing page) */
.project-card-full {
  display: grid; grid-template-columns: 1fr;
  background: rgba(255,255,255,.03); border: 1px solid rgba(34,197,94,.12);
  border-radius: 1.5rem; overflow: hidden;
  transition: border-color .4s, box-shadow .4s, transform .4s;
  transition-delay: var(--delay,0s);
}
.project-card-full:hover { border-color: rgba(34,197,94,.35); box-shadow: 0 20px 60px rgba(34,197,94,.1); transform: translateY(-4px); }
.project-card-full__img { height: 240px; background: rgba(34,197,94,.04); overflow: hidden; flex-shrink: 0; position: relative; }
.project-card-full__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.project-card-full:hover .project-card-full__img img { transform: scale(1.04); }
.project-card-full__img-placeholder { height: 240px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.2); }
.project-featured-badge { position: absolute; top: .75rem; left: .75rem; background: #22c55e; color: #000; font-family: 'Syne', sans-serif; font-weight: 700; font-size: .68rem; padding: .25rem .6rem; border-radius: 99px; }
.project-card-full__body { padding: clamp(1.25rem,3vw,1.75rem); display: flex; flex-direction: column; gap: .75rem; }
.project-card-full__meta { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.proj-cat { font-family: 'JetBrains Mono', monospace; font-size: .68rem; color: #4ade80; background: rgba(34,197,94,.09); border: 1px solid rgba(34,197,94,.2); padding: .18rem .55rem; border-radius: 99px; }
.proj-date { font-family: 'JetBrains Mono', monospace; font-size: .68rem; color: rgba(255,255,255,.35); }
.proj-cat--lg { display: inline-block; margin-bottom: .5rem; }
.project-card-full__title { font-family: 'Syne', sans-serif; font-size: 1.2rem; font-weight: 700; line-height: 1.25; }
.project-card-full__title a { transition: color .2s; }
.project-card-full__title a:hover { color: #4ade80; }
.project-card-full__desc  { color: rgba(255,255,255,.55); font-size: .9rem; line-height: 1.65; flex: 1; }
.project-card-full__stack { display: flex; flex-wrap: wrap; gap: .35rem; }
.project-card-full__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: auto; padding-top: .85rem; border-top: 1px solid rgba(34,197,94,.1); }

/* ── Project detail page ────────────────────────── */
.project-detail-page { padding-top: calc(68px + 2rem); padding-bottom: 5rem; }
.project-detail-page .container { max-width: 1200px; margin-inline: auto; padding-inline: clamp(1.25rem,5vw,2.5rem); }
.project-detail-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
.project-detail-title { font-family: 'Syne', sans-serif; font-size: clamp(1.75rem,4vw,2.75rem); font-weight: 900; line-height: 1.1; margin-block: .5rem 1rem; }
.project-detail-lead  { color: rgba(255,255,255,.6); font-size: 1.05rem; line-height: 1.75; margin-bottom: 1.5rem; }
.project-detail-cover { border-radius: 1rem; overflow: hidden; margin-bottom: 1.75rem; border: 1px solid rgba(34,197,94,.15); }
.project-detail-cover__img { width: 100%; max-height: 480px; object-fit: cover; display: block; }
.project-detail-body { font-size: .95rem; line-height: 1.8; color: rgba(255,255,255,.65); white-space: pre-wrap; }
.back-link { display: inline-flex; align-items: center; gap: .5rem; color: rgba(255,255,255,.45); font-size: .875rem; margin-top: 2rem; transition: color .2s; }
.back-link:hover { color: #4ade80; }

/* Gallery */
.project-gallery { margin-top: 2rem; }
.project-gallery__title { font-family: 'Syne', sans-serif; font-size: 1rem; font-weight: 700; margin-bottom: 1rem; }
.project-gallery__grid { display: grid; grid-template-columns: repeat(2,1fr); gap: .75rem; }
.project-gallery__item { border-radius: .75rem; overflow: hidden; border: 1px solid rgba(34,197,94,.12); position: relative; display: block; aspect-ratio: 16/10; cursor: zoom-in; }
.project-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.project-gallery__item:hover img { transform: scale(1.05); }
.project-gallery__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s; color: #fff; }
.project-gallery__item:hover .project-gallery__overlay { opacity: 1; }

/* Sidebar */
.sidebar-card { background: rgba(34,197,94,.05); border: 1px solid rgba(34,197,94,.2); border-radius: 1.25rem; padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.sidebar-actions { display: flex; flex-direction: column; gap: .6rem; }
.project-meta-list { display: flex; flex-direction: column; gap: .75rem; }
.project-meta-item dt { font-family: 'JetBrains Mono', monospace; font-size: .68rem; color: rgba(255,255,255,.35); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .2rem; }
.project-meta-item dd { font-size: .9rem; color: rgba(255,255,255,.8); }
.project-tech-block h3 { font-family: 'JetBrains Mono', monospace; font-size: .68rem; color: rgba(255,255,255,.35); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .6rem; }
.project-tech-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.sidebar-cta-card { background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.25); border-radius: 1.25rem; padding: 1.35rem; text-align: center; display: flex; flex-direction: column; gap: 1rem; }
.sidebar-cta-card p { font-size: .9rem; color: rgba(255,255,255,.6); line-height: 1.6; }

/* Related */
.related-section { margin-top: 4rem; padding-top: 3rem; border-top: 1px solid rgba(34,197,94,.1); }
.related-title { font-family: 'Syne', sans-serif; font-size: 1.35rem; font-weight: 700; margin-bottom: 1.5rem; }
.related-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.related-card { display: grid; grid-template-columns: 1fr; background: rgba(255,255,255,.03); border: 1px solid rgba(34,197,94,.1); border-radius: 1rem; overflow: hidden; transition: border-color .3s, transform .3s; }
.related-card:hover { border-color: rgba(34,197,94,.3); transform: translateY(-3px); }
.related-card__img { height: 140px; overflow: hidden; }
.related-card__img img { width: 100%; height: 100%; object-fit: cover; }
.related-card__body { padding: 1rem; }
.related-card__body h3 { font-family: 'Syne', sans-serif; font-weight: 700; font-size: .95rem; margin-bottom: .35rem; }
.related-card__body p  { font-size: .82rem; color: rgba(255,255,255,.5); line-height: 1.55; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.lightbox[hidden] { display: none; }
.lightbox__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.9); }
.lightbox__img-wrap { position: relative; z-index: 1; max-width: min(90vw,1200px); max-height: 90vh; }
.lightbox__img-wrap img { max-width: 100%; max-height: 90vh; object-fit: contain; border-radius: .5rem; display: block; }
.lightbox__close,.lightbox__prev,.lightbox__next { position: absolute; z-index: 2; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 50%; color: #fff; cursor: pointer; font-size: 1.5rem; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.lightbox__close { top: 1rem; right: 1rem; width: 40px; height: 40px; }
.lightbox__prev  { left: 1rem; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; }
.lightbox__next  { right: 1rem; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; }
.lightbox__close:hover,.lightbox__prev:hover,.lightbox__next:hover { background: rgba(34,197,94,.3); }

/* Page footer */
.page-footer { border-top: 1px solid rgba(34,197,94,.1); padding-block: 2rem; margin-top: 4rem; }
.page-footer .container { max-width: 1200px; margin-inline: auto; padding-inline: clamp(1.25rem,5vw,2.5rem); }
.page-footer__inner { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.page-footer__links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.page-footer__links a { font-size: .875rem; color: rgba(255,255,255,.35); transition: color .2s; }
.page-footer__links a:hover { color: #4ade80; }
.page-footer__copy { font-family: 'JetBrains Mono', monospace; font-size: .7rem; color: rgba(255,255,255,.2); }

/* Responsive */
@media (min-width: 640px) {
  .projects-grid { grid-template-columns: repeat(2,1fr); }
  .projects-full-grid { grid-template-columns: repeat(2,1fr); }
  .project-gallery__grid { grid-template-columns: repeat(3,1fr); }
  .related-grid { grid-template-columns: repeat(3,1fr); }
  .page-footer__inner { flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (min-width: 900px) {
  .projects-grid { grid-template-columns: repeat(3,1fr); }
  .projects-full-grid { grid-template-columns: repeat(3,1fr); }
  .project-card-full { grid-template-columns: 280px 1fr; }
  .project-card-full__img { height: auto; min-height: 220px; }
  .project-card-full__img-placeholder { height: 220px; }
  .project-detail-grid { grid-template-columns: 1fr 320px; align-items: start; }
  .project-detail-sidebar { position: sticky; top: calc(68px + 1.5rem); }
}