@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

.codline-projects-wrap,
.codline-projects-wrap *{box-sizing:border-box}
.codline-projects-wrap{
  --codline-bg:#ffffff;
  --codline-text:#0a0a0a;
  --codline-muted:#5b6472;
  --codline-navy:#11224f;
  --codline-navy-2:#1b3a8a;
  --codline-navy-soft:#eef1fa;
  --codline-line:#e7e9f0;
  --codline-surface:#f8f9fc;
  --codline-radius:14px;
  --codline-maxw:1180px;
  direction:rtl;
  color:var(--codline-text);
  font-family:'Vazirmatn',sans-serif;
  line-height:1.75;
}
.codline-projects-wrap a{color:inherit;text-decoration:none}
.codline-projects-wrap img{display:block;max-width:100%;height:auto}
.codline-projects-wrap .mono{font-family:'JetBrains Mono',monospace}

@keyframes codlineIconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes codlineIconPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
@media (prefers-reduced-motion: reduce){
  .codline-projects-wrap *,
  .codline-projects-wrap *::before,
  .codline-projects-wrap *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
.codline-projects-section{padding:96px 0;background:var(--codline-bg)}
.codline-projects-inner{max-width:var(--codline-maxw);margin:0 auto;padding:0 28px}
.codline-projects-head{max-width:640px;margin-bottom:56px;text-align:right}
.codline-projects-head .codline-eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:12.5px;
  letter-spacing:.06em;
  color:var(--codline-navy-2);
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 18px;
  font-weight:600;
}
.codline-projects-head .codline-eyebrow::before{content:"";width:18px;height:1px;background:var(--codline-navy-2);display:inline-block}
.codline-projects-head h2{font-size:clamp(26px,3.4vw,38px);margin:0 0 14px;font-weight:800;letter-spacing:-.01em;color:var(--codline-text)}
.codline-projects-head p:not(.codline-eyebrow){color:var(--codline-muted);font-size:16.5px;margin:0}
.codline-portfolio-grid{display:grid;grid-template-columns:repeat(var(--codline-columns,4),1fr);gap:24px}
.codline-mock-card{
  border:1px solid var(--codline-line);
  border-radius:var(--codline-radius);
  overflow:hidden;
  transition:.25s ease;
  background:#fff;
  min-width:0;
}
.codline-mock-card:hover{border-color:var(--codline-navy);box-shadow:0 18px 40px -24px rgba(17,34,79,.35);transform:translateY(-4px)}
.codline-mock-frame{background:var(--codline-surface);padding:14px}
.codline-mock-bar{display:flex;align-items:center;gap:6px;margin-bottom:12px;direction:ltr;justify-content:flex-start}
.codline-mock-bar span{width:7px;height:7px;border-radius:50%;background:var(--codline-line)}
.codline-project-thumb,
.codline-mock-screen{
  background:#fff;
  border-radius:8px;
  border:1px solid var(--codline-line);
  height:220px;
  overflow:hidden;
}
.codline-project-thumb img{width:100%;height:100%;object-fit:cover;transition:.35s ease}
.codline-mock-card:hover .codline-project-thumb img{transform:scale(1.04)}
.codline-mock-screen{padding:16px;display:flex;flex-direction:column;gap:10px}
.codline-mock-row{height:10px;border-radius:4px;background:var(--codline-navy-soft)}
.codline-mock-row.short{width:40%}
.codline-mock-row.med{width:65%}
.codline-mock-block{flex:1;border-radius:6px;background:linear-gradient(135deg,var(--codline-navy-soft),#fff);border:1px dashed var(--codline-line);display:flex;align-items:center;justify-content:center}
.codline-dotgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.codline-dotgrid div{width:8px;height:8px;border-radius:50%;background:var(--codline-navy-2);opacity:.5;animation:codlineIconPulse 2.2s ease-in-out infinite}
.codline-dotgrid div:nth-child(2){animation-delay:.3s}.codline-dotgrid div:nth-child(3){animation-delay:.6s}
.codline-mock-info{padding:20px 18px;border-top:1px solid var(--codline-line);display:block}
.codline-project-main-info{min-width:0;width:100%}
.codline-mock-info h4{font-size:16px;margin:0 0 7px;font-weight:800;color:var(--codline-text);line-height:1.6}
.codline-mock-info h4 a{transition:.2s}.codline-mock-info h4 a:hover{color:var(--codline-navy-2)}
.codline-project-short{font-size:13px;color:var(--codline-muted);margin:0 0 14px;line-height:1.8}
.codline-project-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.codline-project-stat{min-width:0;border:1px solid var(--codline-line);background:var(--codline-surface);border-radius:10px;padding:9px 7px;text-align:center}
.codline-project-stat span{display:block;font-size:10.5px;color:var(--codline-muted);line-height:1.5;margin-bottom:4px;white-space:nowrap}
.codline-project-stat strong{display:block;font-size:11.5px;color:var(--codline-navy-2);font-weight:800;line-height:1.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.codline-project-meta-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.codline-project-meta-line small{font-size:11.5px;color:var(--codline-navy-2);background:var(--codline-navy-soft);padding:4px 8px;border-radius:6px}
.codline-mock-badge{font-size:11px!important;color:var(--codline-navy-2)!important;background:var(--codline-navy-soft);padding:5px 10px;border-radius:6px;white-space:nowrap;line-height:1.6}
.codline-project-actions{display:flex;align-items:center;justify-content:center;gap:10px;border-top:1px solid var(--codline-line);padding:14px 18px;background:#fff}
.codline-project-actions a,.codline-project-demo-btn{font-size:13.5px;font-weight:800;color:#fff;background:var(--codline-navy);border-radius:10px;padding:10px 18px;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:.2s;width:100%}
.codline-project-actions a:hover,.codline-project-demo-btn:hover{background:var(--codline-navy-2);color:#fff;transform:translateY(-1px)}
.codline-project-demo-btn{border:0}
.codline-project-featured-image{border-radius:var(--codline-radius);border:1px solid var(--codline-line)}
.codline-empty-projects{border:1px dashed var(--codline-line);border-radius:var(--codline-radius);padding:28px;text-align:center;color:var(--codline-muted);background:var(--codline-surface)}

@media(max-width:980px){
  .codline-portfolio-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .codline-projects-section{padding:52px 0}
  .codline-projects-inner{padding:0 18px}
  .codline-projects-head{margin-bottom:32px}

  /* موبایل: کاروسل افقی تک‌آیتمی؛ هر اسلاید فقط یک پروژه را نشان می‌دهد */
  .codline-portfolio-grid{
    display:grid;
    grid-auto-flow:column;
    grid-template-rows:1fr;
    grid-auto-columns:100%;
    grid-template-columns:none;
    gap:14px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:18px;
    padding:0 0 12px;
    -webkit-overflow-scrolling:touch;
  }
  .codline-portfolio-grid::-webkit-scrollbar{height:6px}
  .codline-portfolio-grid::-webkit-scrollbar-track{background:var(--codline-surface);border-radius:10px}
  .codline-portfolio-grid::-webkit-scrollbar-thumb{background:var(--codline-navy-soft);border-radius:10px}
  .codline-mock-card{scroll-snap-align:start;width:100%}
  .codline-project-thumb,.codline-mock-screen{height:220px}
  .codline-mock-screen{padding:14px}
  .codline-mock-info{padding:16px}
  .codline-project-actions{padding:12px 16px}
}
@media(max-width:520px){
  .codline-portfolio-grid{grid-auto-columns:100%;gap:10px}
  .codline-project-thumb,.codline-mock-screen{height:200px}
  .codline-mock-info h4{font-size:15px}
  .codline-project-short{font-size:12.5px}
  .codline-project-stat span{font-size:10px}
  .codline-project-stat strong{font-size:11px}
}